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

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>

 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>

 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>

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

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

${name}

Menu de navegação

Pesquisa

@@ 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>
+<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 habilidades = [];
+   let currentLang = 'pt'; // idioma por defecto
-  const raw= document.getElementById('infoboxboss-data');
-  console.log(raw);
-        if (!raw) {
-            console.error('Persona widget: no se encontró #persona-data');
-            return;
-        }
-    for (let i = 1; i <= 10; i++) {
+  const langSwitch = document.querySelector('.language-switch');
-     const nome = raw.dataset[`hab${i}`];
+  if (langSwitch) {
-    const descricao = raw.dataset[`de${i}`];
+     langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
-    const video = raw.dataset[`vid${i}`];
+      btn.addEventListener('click', () => {
+        currentLang = btn.dataset.lang;
+        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
+        btn.querySelector('img').classList.add('active');
-    if (!nome) continue;
+        const active = document.querySelector('.skill-icon.active');
+        if (active) active.click();
-    habilidades.push({
+      });
-        nome,
-        descricao: descricao || '',
-        video: video || ''
      });
-}
-  const tabsContainer = document.getElementById('skill-tabs');
-  const videoContainer = document.getElementById('skill-videos');
-  const descText = document.getElementById('desc-text');
-  habilidades.forEach((hab, idx) => {
-    // Botón
-    const btn = document.createElement('button');
-    btn.className = 'infobox-skill-tab' + (idx === 0 ? ' active' : '');
-    btn.dataset.video = hab.video;
-    btn.textContent = hab.nome;
-    tabsContainer.appendChild(btn);
-  });
-  descText.innerHTML = `${habilidades[0].nome}: ${habilidades[0].descricao}`;
-  const tabs = document.querySelectorAll('.infobox-skill-tab');
+    // Activar la bandera por defecto
+    const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
+    if (defaultBtn) defaultBtn.classList.add('active');
+  }
-   tabs.forEach((tab, idx) => {
+   const oldClicks = document.querySelectorAll('.skill-icon');
-     tab.addEventListener('click', () => {
+  oldClicks.forEach(el => {
-       tabs.forEach(t => t.classList.remove('active'));
+     el.addEventListener('click', () => {
-       tab.classList.add('active');
+       const name = el.dataset.nome || '';
-       const vidId = tab.dataset.video;
+       const rawDesc = el.dataset.desc || '';
+       let descText = '';
-       descText.innerHTML = `${habilidades[idx].nome}: ${habilidades[idx].descricao}`;
+       try {
+        const obj = JSON.parse(rawDesc);
+        descText = obj[currentLang] || obj['pt'] || '';
+      } catch (e) {
+        descText = rawDesc; // fallback si no es un JSON
+      }
-       videos.forEach(v => {
+       const attrs = el.dataset.atr || '';
-        if (v.id === vidId) {
+      const descBox = document.querySelector('.desc-box');
-          v.style.display = '';
+      if (descBox) {
-          v.load();
+         descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
-          v.play();
+       }
-         } else {
-          v.pause();
-          v.style.display = 'none';
-        }
-       });
      });
    });
-  document.getElementById('infoboxboss-data')?.remove();
 })();
 </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>