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

De Wiki Gla
Ir para navegação Ir para pesquisar
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(202 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-tabs-separator"></div>
                <div class="skillbox-desc" id="desc-text"></div>
            </div>
        </div>
        <div class="skillbox-video-area" id="skill-videos"></div>
    </div>
</div>


<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 || videoFile.trim() === '') 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) => {
            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) {
            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 {
    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>

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”