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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="infobox-boss-wide">
    <div class="infobox-boss-right">
        <div class="infobox-skill-info-area">
            <div class="skill-box">
                <div class="infobox-skill-tabs" id="skill-tabs"></div>
                <div class="skill-desc" id="desc-text"></div>
            </div>
        </div>
        <div class="infobox-skill-video-area">
            <div id="skill-video-render" class="skill-video-widget"></div>
        </div>
    </div>
</div>
<script>
<script>
(function () {
$(function () {
     const raw = document.getElementById('infoboxboss-data');
  $('.infobox-boss-wide').each(function () {
     if (!raw) return;
     const $box = $(this);
    $box.find('.infobox-skill-icon').each(function (index) {
      $(this).attr('data-skill-id', index + 1);
     });


     const habilidades = [];
     $box.find('.infobox-skill-icon').on('click', function () {
 
      const skillId = String($(this).attr('data-skill-id'));
    for (let i = 1; i <= 15; i++) {
      $box.find('.infobox-skill-icon').removeClass('active');
        const nome = raw.dataset[`hab${i}`];
      $(this).addClass('active');
        const descricao = raw.dataset[`de${i}`];
      $box.find('.infobox-skill-tab').removeClass('active');
        const videoFile = raw.dataset[`vid${i}`];
      $box.find('.infobox-skill-tab[data-skill-id="' + skillId + '"]').addClass('active');
        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 = `<div>{{#widget:video|file=${file}}}</div>`;
    };
 
    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, '<b>$1</b>');
            renderWidget(hab.videoFile);
        });
        tabsContainer.appendChild(btn);
     });
     });


     if (habilidades.length) {
     // Ativar primeira por padrão
        descText.innerHTML = habilidades[0].descricao.replace(/'''(.*?)'''/g, '<b>$1</b>');
    $box.find('.infobox-skill-icon').first().click();
        renderWidget(habilidades[0].videoFile);
  });
    }
});
 
    raw.remove();
})();
</script>
</script>

Edição das 21h46min de 23 de maio de 2025

<script> $(function () { 

 $('.infobox-boss-wide').each(function () {
   const $box = $(this);
   $box.find('.infobox-skill-icon').each(function (index) {
     $(this).attr('data-skill-id', index + 1);
   });

   $box.find('.infobox-skill-icon').on('click', function () {
     const skillId = String($(this).attr('data-skill-id'));
     $box.find('.infobox-skill-icon').removeClass('active');
     $(this).addClass('active');
     $box.find('.infobox-skill-tab').removeClass('active');
     $box.find('.infobox-skill-tab[data-skill-id="' + skillId + '"]').addClass('active');
   });

   // Ativar primeira por padrão
   $box.find('.infobox-skill-icon').first().click();
 });

}); </script>

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