WEBISCAPE- Créer des extensions pour Genially N°3

Créer des extensions pour Genially - N°3 - 11/12/2020

En attendant, (créez et) connectez-vous à votre compte Genially

OBJECTIF

Réutilisez !

PAS-à-PAS assisté N°3

https://view.genial.ly/5fd3112a34487c74a6db0575

1. Point de départ - rappels

xx

<div id="ON" style="text-align:center; background-color:#FF0000; color:#FFFFFF;font-size:30px">ON</div> <script>if (document.querySelector('.container-wrapper-genially')) { document.getElementById("ON").style.display="none"; var pnode = document.getElementById("ON").parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="none"; }</script>

<script> setTimeout(function() {document.getElementsByClassName('icon-close')[0].click() }, 10); var pnode = document.getElementById("ON").parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="block"; </script>

2. Evénement OnClick

<script> setTimeout(function() {document.getElementsByClassName('icon-close')[0].click() }, 10); var pnode = document.getElementById("ON").parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="block"; </script>

<div id="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var pnode = document.getElementById('ON').parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; ">CLIC</div> <script></script>

Evénements interceptant l'action de la souris:onclick, onmouseup, onmousedown, ondblclick, onmouseover, etc.

Les classes (attribut class)comme les identifiants permettent de manipuler les éléments. Elles ont l'avantage de pouvoir être attribuées à plusieurs éléments dans une même page.La méthode querySelectorAll() renvoie la liste des éléments correspondant au sélecteur indiqué (une classe par exemple) .

3. La classe...

<div class="ON" style="text-align:center; background-color:#FF0000; color:#FFFFFF;font-size:30px">ON</div> <script></script>

<div id="ON" style="text-align:center; background-color:#FF0000; color:#FFFFFF;font-size:30px">ON</div> <script>if (document.querySelector('.container-wrapper-genially')) { document.getElementById("ON").style.display="none"; var pnode = document.getElementById("ON").parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="none"; }</script>

<div id="INIT" style="text-align:center; background-color:yellow; color:#000000;font-size:30px">INIT</div> <script> if (document.querySelector('.container-wrapper-genially')) { var elt=document.querySelectorAll(".ON"); for (var i=0; i<elt.length; i++) { elt[i].style.display="none"; var pnode = elt[i].parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="none"; } document.getElementById("INIT").style.display="none"; } </script>

4. Réapparition

<div id="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var pnode = document.getElementById('ON').parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; ">CLIC</div> <script></script>

<div id="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var elt=document.querySelectorAll('.ON');for (var i=0; i<elt.length;i++){var pnode = elt[i].parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; }">CLIC</div> <script></script>

5. Numérotation

<div id="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var elt=document.querySelectorAll('.ON');for (var i=0; i<elt.length;i++){var pnode = elt[i].parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; }">CLIC</div> <script></script>

<div class="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var elt=document.querySelectorAll('.ON');for (var i=0; i<elt.length;i++){var pnode = elt[i].parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; }">CLIC</div> <script></script>

<div id="INIT" style="text-align:center; background-color:yellow; color:#000000;font-size:30px">INIT</div> <script> if (document.querySelector('.container-wrapper-genially')) { var elt=document.querySelectorAll(".ON"); for (var i=0; i<elt.length; i++) { elt[i].style.display="none"; var pnode = elt[i].parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="none"; } document.getElementById("INIT").style.display="none"; } </script>

<div id="INIT" style="text-align:center; background-color:yellow; color:#000000;font-size:30px">INIT</div> <script>var elt=document.querySelectorAll(".ON"); for (var i=0; i<elt.length; i++){ elt[i].innerHTML="ON "+i;}var clic=document.querySelectorAll(".CLIC");for (var i=0; i<clic.length; i++){ clic[i].innerHTML="CLIC "+i;clic[i].setAttribute("data-ref",i);} if (document.querySelector('.container-wrapper-genially')) { for (var i=0; i<elt.length; i++) { elt[i].style.display="none"; var pnode = elt[i].parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="none"; } document.getElementById("INIT").style.display="none"; } </script>

innerHTML récupère ou définit le "contenu" HTML de l'élément spécifié.setAttribute(attibut,valeur) ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié.

5. Clic individuel

<div class="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var elt=document.querySelectorAll('.ON');for (var i=0; i<elt.length;i++){var pnode = elt[i].parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; }">CLIC</div> <script></script>

getAttribute(attibut) recupère la valeur de l'attribut de l'élément spécifié.

<div class="CLIC" style="text-align:center; background-color:black; color:#FFFFFF;font-size:30px;width:100%; height:100%;" onclick="var elt=document.querySelectorAll('.ON');var ref=this.getAttribute('data-ref');var pnode = elt[ref].parentNode.parentNode.parentNode;while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode;pnode.style.display='block'; ">CLIC</div> <script></script>

6. Masquer les CLIC - A vous de jouer !

<div id="INIT" style="text-align:center; background-color:yellow; color:#000000;font-size:30px">INIT</div> <script>var elt=document.querySelectorAll(".ON"); for (var i=0; i<elt.length; i++){ elt[i].innerHTML="ON "+i;}var clic=document.querySelectorAll(".CLIC");for (var i=0; i<clic.length; i++){ clic[i].innerHTML="CLIC "+i;clic[i].setAttribute("data-ref",i);} if (document.querySelector('.container-wrapper-genially')) { for (var i=0; i<elt.length; i++) { elt[i].style.display="none"; var pnode = elt[i].parentNode.parentNode.parentNode; while (pnode.getAttribute('id') == null) { pnode = pnode.parentNode; } pnode = pnode.parentNode.parentNode; pnode.style.display="none"; } document.getElementById("INIT").style.display="none"; } </script>