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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(365 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<div class="infobox-boss-wide">
<div class="language-switch">
   <div class="infobox-boss-right">
   <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
    <div class="infobox-skill-info-area">
  <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
      <div class="skill-box">
  <a data-lang="en"><img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24"></a>
        <div class="infobox-skill-tabs" id="skill-tabs"></div>
  <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
        <div class="skill-desc" id="desc-text"></div>
      </div>
    </div>
    <div class="infobox-skill-video-area" id="skill-videos"></div>
  </div>
</div>
</div>
<style>
.language-switch {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  justify-content: center;
}
.language-switch img {
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.language-switch img:hover {
  transform: scale(1.1);
  border-color: #333;
}
.language-switch img.active {
  border-color: #000;
}
</style>


<script>
<script>
(function () {
(function () {
   const raw= document.getElementById('infoboxboss-data');
   let currentLang = 'pt'; // idioma por defecto
  console.log(raw);
        if (!raw) {
            console.error('Persona widget: no se encontró #persona-data');
            return;
        }


         // Extração de dados
  const langSwitch = document.querySelector('.language-switch');
         let habilidades = [];
  if (langSwitch) {
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
      btn.addEventListener('click', () => {
         currentLang = btn.dataset.lang;
         langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
        btn.querySelector('img').classList.add('active');


         const tempRawHabs = (raw.dataset.habilidadesRaw || '').trim();
         const active = document.querySelector('.skill-icon.active');
        rawHabs = tempRawHabs.replace(/<!--[\s\S]*?-->/g, '').trim();
        if (active) active.click();
        rawHabs.split('||').forEach(line => {
      });
            if (!line.trim()) return;
     });
 
            const parts = line.split('|').map(x => x.trim()).filter(Boolean);
            const habData = {};
            parts.forEach(part => {
                const [key, ...valParts] = part.split('=');
                if (!key || valParts.length === 0) return;
                habData[key.trim()] = valParts.join('=').trim();
            });
 
            const { nome, desc = '', video = '' } = habData;
 
            if (nome) {
                habilidades.push({
                    nome,
                    descricao: desc,
                    video
                });
            } else {
                console.warn("Habilidad omitida por falta de campos obligatorios:", line);
            }
        });
 
  const tabsContainer = document.getElementById('skill-tabs');
  const videoContainer = document.getElementById('skill-videos');
  const descText = document.getElementById('desc-text');
 
  habilidades.forEach((hab, idx) => {
    const id = `video${idx + 1}`;
 
    // Botón
    const btn = document.createElement('button');
    btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : '');
    btn.dataset.video = id;
    btn.textContent = hab.nome;
    tabsContainer.appendChild(btn);
 
    // Video
    const vid = document.createElement('video');
     vid.id = id;
    vid.className = 'skill-video';
    vid.controls = true;
    vid.autoplay = false;
    vid.loop = true;
    vid.style.display = idx === 0 ? '' : 'none';
    const source = document.createElement('source');
    source.src = hab.video;
    source.type = "video/mp4";
    vid.appendChild(source);
    videoContainer.appendChild(vid);
  });


  // Descripción inicial
    // Activar la bandera por defecto
  descText.textContent = `${habilidades[0].nome}: ${habilidades[0].descricao}`;
    const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
    if (defaultBtn) defaultBtn.classList.add('active');
  }


  // Lógica tabs
   const oldClicks = document.querySelectorAll('.skill-icon');
   const tabs = document.querySelectorAll('.infobox-skill-tab');
   oldClicks.forEach(el => {
   const videos = document.querySelectorAll('.skill-video');
    el.addEventListener('click', () => {
      const name = el.dataset.nome || '';
      const rawDesc = el.dataset.desc || '';
      let descText = '';


  tabs.forEach((tab, idx) => {
      try {
    tab.addEventListener('click', () => {
        const obj = JSON.parse(rawDesc);
      tabs.forEach(t => t.classList.remove('active'));
        descText = obj[currentLang] || obj['pt'] || '';
       tab.classList.add('active');
       } catch (e) {
       const vidId = tab.dataset.video;
        descText = rawDesc; // fallback si no es un JSON
       }


       descText.textContent = `${habilidades[idx].nome}: ${habilidades[idx].descricao}`;
       const attrs = el.dataset.atr || '';
 
       const descBox = document.querySelector('.desc-box');
       videos.forEach(v => {
      if (descBox) {
        if (v.id === vidId) {
         descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
          v.style.display = '';
       }
          v.load();
          v.play();
         } else {
          v.pause();
          v.style.display = 'none';
        }
       });
     });
     });
   });
   });
  document.getElementById('infoboxboss-data')?.remove();
})();
})();
</script>
</script>
<style>
.skill-box {
  background: none;;
  color: #222;
  border-radius: 12px;
  box-shadow: none;
  width: 100%;
  max-width: 700px;
  box-sizing: border-box;
  padding: 24px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  backdrop-filter: blur(2px);
  margin: 0 auto 24px auto;
}
</style>

Edição atual tal como às 06h05min de 31 de agosto de 2025

 <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
 <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
 <a data-lang="en"><img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24"></a>
 <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>

<style> .language-switch { 

 display: flex;
 gap: 6px;
 margin: 8px 0;
 justify-content: center;

} .language-switch img { 

 border: 1px solid #ccc;
 border-radius: 6px;
 cursor: pointer;
 transition: transform 0.2s ease, border-color 0.2s ease;

} .language-switch img:hover { 

 transform: scale(1.1);
 border-color: #333;

} .language-switch img.active { 

 border-color: #000;

} </style>

<script> (function () { 

 let currentLang = 'pt'; // idioma por defecto

 const langSwitch = document.querySelector('.language-switch');
 if (langSwitch) {
   langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
     btn.addEventListener('click', () => {
       currentLang = btn.dataset.lang;
       langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
       btn.querySelector('img').classList.add('active');

       const active = document.querySelector('.skill-icon.active');
       if (active) active.click();
     });
   });

   // Activar la bandera por defecto
   const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
   if (defaultBtn) defaultBtn.classList.add('active');
 }

 const oldClicks = document.querySelectorAll('.skill-icon');
 oldClicks.forEach(el => {
   el.addEventListener('click', () => {
     const name = el.dataset.nome || ;
     const rawDesc = el.dataset.desc || ;
     let descText = ;

     try {
       const obj = JSON.parse(rawDesc);
       descText = obj[currentLang] || obj['pt'] || ;
     } catch (e) {
       descText = rawDesc; // fallback si no es un JSON
     }

     const attrs = el.dataset.atr || ;
     const descBox = document.querySelector('.desc-box');
     if (descBox) {

descBox.innerHTML = `

${name}

${renderAttributes(attrs)}

${descText}

`; 

     }
   });
 });

})(); </script>

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