Mudanças entre as edições de "Widget:Teste"

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 6: Linha 6:


<script>
<script>
document.addEventListener("DOMContentLoaded", function () {
(function () {
  const tabs = document.querySelectorAll('.skillbox-tab');
  document.addEventListener("DOMContentLoaded", function () {
  const panels = document.querySelectorAll('.skillbox-panel');
    var tabs = document.querySelectorAll('.skillbox-tab');
    var panels = document.querySelectorAll('.skillbox-panel');


  tabs.forEach((tab, index) => {
    for (var i = 0; i < tabs.length; i++) {
    tab.addEventListener('click', () => {
      (function (index) {
      tabs.forEach(t => t.classList.remove('active'));
        tabs[index].addEventListener('click', function () {
      panels.forEach(p => p.classList.remove('active'));
          // remove todos os ativos
          for (var j = 0; j < tabs.length; j++) {
            tabs[j].classList.remove('active');
            panels[j].classList.remove('active');
          }


      tab.classList.add('active');
          // ativa o atual
      panels[index].classList.add('active');
          tabs[index].classList.add('active');
          panels[index].classList.add('active');


      const video = panels[index].querySelector('video');
          // pausa todos os vídeos e toca o atual
      if (video) {
          for (var k = 0; k < panels.length; k++) {
        panels.forEach((p, i) => {
            var v = panels[k].querySelector('video');
           const v = p.querySelector('video');
            if (v) v.pause();
           if (v) v.pause();
          }
 
           var current = panels[index].querySelector('video');
           if (current) {
            current.load();
            current.play();
          }
         });
         });
        video.load();
      })(i);
        video.play();
     }
      }
     });
   });
   });
});
})();
</script>
</script>

Edição das 03h06min de 23 de maio de 2025

<style> .skillbox-video {

 aspect-ratio: 16 / 9;

} </style>

<script> (function () {

 document.addEventListener("DOMContentLoaded", function () {
   var tabs = document.querySelectorAll('.skillbox-tab');
   var panels = document.querySelectorAll('.skillbox-panel');
   for (var i = 0; i < tabs.length; i++) {
     (function (index) {
       tabs[index].addEventListener('click', function () {
         // remove todos os ativos
         for (var j = 0; j < tabs.length; j++) {
           tabs[j].classList.remove('active');
           panels[j].classList.remove('active');
         }
         // ativa o atual
         tabs[index].classList.add('active');
         panels[index].classList.add('active');
         // pausa todos os vídeos e toca o atual
         for (var k = 0; k < panels.length; k++) {
           var v = panels[k].querySelector('video');
           if (v) v.pause();
         }
         var current = panels[index].querySelector('video');
         if (current) {
           current.load();
           current.play();
         }
       });
     })(i);
   }
 });

})(); </script>