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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 7: Linha 7:
             </div>
             </div>
         </div>
         </div>
         <div class="infobox-skill-video-area" id="skill-videos"></div>
         <div class="infobox-skill-video-area">
            <div id="skill-video-render" class="skill-video-widget"></div>
        </div>
     </div>
     </div>
</div>
</div>
Linha 27: Linha 29:
             nome,
             nome,
             descricao,
             descricao,
             videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
             videoFile
            id: `video${i}`
         });
         });
     }
     }


     const tabsContainer = document.getElementById('skill-tabs');
     const tabsContainer = document.getElementById('skill-tabs');
    const videoContainer = document.getElementById('skill-videos');
     const descText = document.getElementById('desc-text');
     const descText = document.getElementById('desc-text');
    const videoRender = document.getElementById('skill-video-render');
    const renderWidget = (file) => {
        videoRender.innerHTML = `<div>{{#widget:video|file=${file}}}</div>`;
    };


     habilidades.forEach((hab, idx) => {
     habilidades.forEach((hab, idx) => {
         const btn = document.createElement('button');
         const btn = document.createElement('button');
         btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : '');
         btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : '');
        btn.dataset.video = hab.id;
         btn.textContent = hab.nome;
         btn.textContent = hab.nome;
        btn.addEventListener('click', () => {
            document.querySelectorAll('.infobox-skill-tab').forEach(t => t.classList.remove('active'));
            btn.classList.add('active');
            descText.innerHTML = hab.descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
            renderWidget(hab.videoFile);
        });
         tabsContainer.appendChild(btn);
         tabsContainer.appendChild(btn);
        const videoWrapper = document.createElement('div');
        videoWrapper.id = hab.id;
        videoWrapper.className = 'skill-video';
        videoWrapper.style.display = idx === 0 ? 'block' : 'none';
        const video = document.createElement('video');
        video.className = 'infobox-skill-video';
        video.controls = true;
        video.preload = 'metadata';
        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) {
     if (habilidades.length) {
         descText.innerHTML = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
         descText.innerHTML = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
        renderWidget(habilidades[0].videoFile);
     }
     }
    const tabs = document.querySelectorAll('.infobox-skill-tab');
    const videos = document.querySelectorAll('.skill-video');
    tabs.forEach((tab, idx) => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            const formatted = habilidades[idx].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
            descText.innerHTML = formatted;
            videos.forEach(v => {
                const videoTag = v.querySelector('video');
                if (v.id === habilidades[idx].id) {
                    v.style.display = 'block';
                    videoTag.load();
                    videoTag.play();
                } else {
                    v.style.display = 'none';
                    videoTag.pause();
                }
            });
        });
    });


     raw.remove();
     raw.remove();
})();
})();
</script>
</script>

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

<script> (function () { 

   const raw = document.getElementById('infoboxboss-data');
   if (!raw) return;

   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) continue;

       habilidades.push({
           nome,
           descricao,
           videoFile
       });
   }

   const tabsContainer = document.getElementById('skill-tabs');
   const descText = document.getElementById('desc-text');
   const videoRender = document.getElementById('skill-video-render');

   const renderWidget = (file) => {

videoRender.innerHTML = `

}

`; 

   };

   habilidades.forEach((hab, idx) => {
       const btn = document.createElement('button');
       btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : );
       btn.textContent = hab.nome;
       btn.addEventListener('click', () => {
           document.querySelectorAll('.infobox-skill-tab').forEach(t => t.classList.remove('active'));
           btn.classList.add('active');

           descText.innerHTML = hab.descricao.replace(/(.*?)/g, '$1');
           renderWidget(hab.videoFile);
       });
       tabsContainer.appendChild(btn);
   });

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

   raw.remove();

})(); </script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=33303”