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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Reversão manual
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(207 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="skillbox-container">
  <div class="skillbox-inner">
    <div class="skillbox-info-area">
      <div class="skillbox-wrapper">
        <div class="skillbox-tabs" id="skill-tabs"></div>
        <div class="skillbox-desc" id="desc-text"></div>
      </div>
    </div>
    <div class="skillbox-video-area" id="skill-videos"></div>
  </div>
</div>


<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
<script>
(function () {
    const raw = document.getElementById('skillbox-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,
            videoUrl: `https://wiki.gla.com.br/index.php/Special:FilePath/${videoFile}`,
            id: `video${i}`
        });
    }
    const tabsContainer = document.getElementById('skill-tabs');
    const videoContainer = document.getElementById('skill-videos');
    const descText = document.getElementById('desc-text');
    habilidades.forEach((hab, idx) => {
        // Botão
        const btn = document.createElement('button');
        btn.className = 'skillbox-tab' + (idx === 0 ? ' active' : '');
        btn.dataset.video = hab.id;
        btn.textContent = hab.nome;
        tabsContainer.appendChild(btn);
        // Vídeo
        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) {
        habilidades[0].descricao = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
        descText.innerHTML = habilidades[0].descricao;
    }
    const tabs = document.querySelectorAll('.skillbox-tab');
    const videos = document.querySelectorAll('.skillbox-video');
    tabs.forEach((tab, idx) => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            habilidades[idx].descricao = habilidades[idx].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
            descText.innerHTML = habilidades[idx].descricao;
            videos.forEach(v => {
                const videoTag = v.querySelector('video');
                if (v.id === habilidades[idx].id) {
                    v.classList.add('active');
                    videoTag.currentTime = 0;
                    videoTag.play();
                } else {
                    v.classList.remove('active');
                    videoTag.pause();
                }
            });
        });
    });
    raw.remove();
})();
</script>
<style>
.skillbox-video {
  aspect-ratio: 16 / 9;
  opacity: 0;
  transition: opacity 0.2s ease;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.skillbox-video.active {
  position: static;
  opacity: 1;
  visibility: visible;
  height: auto;
}
</style>

Edição atual tal como às 19h10min de 12 de setembro de 2025

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