Widget:Skillbox

<script> (function () {

   const allRawBlocks = document.querySelectorAll('.skillbox-data');
   if (!allRawBlocks.length) return;

   allRawBlocks.forEach((raw, index) => {
       const uniqueId = raw.dataset.skillboxId || `skillbox${index}`;

       const habilidades = [];
       for (let i = 1; i <= 15; i++) {
           const nome = raw.dataset[`hab${i}`];
           const descricao = raw.dataset[`de${i}`] || "";
           const videoFile = raw.dataset[`vid${i}`];
           if (!nome || !videoFile || videoFile.trim() === ) continue;

           habilidades.push({
               nome,
               descricao,
               videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
               id: `${uniqueId}-video${i}`
           });
       }

       // Criar estrutura DOM local
       const container = document.createElement('div');
       container.className = 'skillbox-container';

       container.innerHTML = `

       `;

       raw.insertAdjacentElement('afterend', container);

       const tabsContainer = container.querySelector(`#${uniqueId}-tabs`);
       const videoContainer = container.querySelector(`#${uniqueId}-videos`);
       const descText = container.querySelector(`#${uniqueId}-desc`);

       habilidades.forEach((hab, idx) => {
           const btn = document.createElement('button');
           btn.className = 'skillbox-tab' + (idx === 0 ? ' active' : );
           btn.dataset.video = hab.id;
           btn.textContent = hab.nome;
           tabsContainer.appendChild(btn);

           const videoWrapper = document.createElement('div');
           videoWrapper.id = hab.id;
           videoWrapper.className = 'skillbox-video' + (idx === 0 ? ' active' : );

           const video = document.createElement('video');
           video.className = 'skillbox-video-element';
           video.controls = true;
           video.preload = 'auto';

           const source = document.createElement('source');
           source.src = hab.videoUrl;
           source.type = 'video/mp4';
           video.appendChild(source);

           videoWrapper.appendChild(video);
           videoContainer.appendChild(videoWrapper);
       });

       if (habilidades.length) {
           descText.innerHTML = habilidades[0].descricao.replace(/(.*?)/g, '$1');
       }

       const tabs = container.querySelectorAll('.skillbox-tab');
       const videos = container.querySelectorAll('.skillbox-video');

       tabs.forEach((tab, idx) => {
           tab.addEventListener('click', () => {
               tabs.forEach(t => t.classList.remove('active'));
               tab.classList.add('active');

               const desc = habilidades[idx].descricao || "";
               descText.innerHTML = desc.replace(/(.*?)/g, '$1');

               videos.forEach(v => {
                   const videoTag = v.querySelector('video');
                   if (v.id === habilidades[idx].id) {
                       v.classList.add('active');
                       if (videoTag) {
                           videoTag.currentTime = 0;
                           videoTag.play();
                       }
                   } else {
                       v.classList.remove('active');
                       if (videoTag) videoTag.pause();
                   }
               });
           });
       });

       raw.remove();
   });

})();

</script>

<style> .skillbox-video {

   display: none;
   width: 100%;
   max-width: 900px;
   aspect-ratio: 16 / 9;
   margin: 0 auto;
   padding: 0;

}

.skillbox-video.active {

   display: flex;
   justify-content: center;
   align-items: center;

} </style>