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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 16: Linha 16:
<script>
<script>
function setLang(lang) {
function setLang(lang) {
  console.log('Lang seleccionado:', lang);
  console.log('Iconos encontrados:', document.querySelectorAll('.skill-icon').length);
  const langKey = lang.charAt(0).toUpperCase() + lang.slice(1); // 'Pt', 'Es', 'En', 'Pl'
   // Cambiar descripción de skills
   // Cambiar descripción de skills
   document.querySelectorAll('.skill-icon').forEach(icon => {
   document.querySelectorAll('.skill-icon').forEach(icon => {
    console.log(icon);
     const idx = icon.dataset.index;
     const idx = icon.dataset.index;
     const descBox = document.querySelector('.skill-desc[data-index="' + idx + '"]');
     const descBox = document.querySelector('.skill-desc[data-index="' + idx + '"]');
    console.log(descBox);
     if(descBox) {
     if (descBox) {
       // Accede correctamente a dataset camelCase
       // Usa el desc del idioma seleccionado, si no existe usa pt como fallback
      const key = 'desc' + lang.charAt(0).toUpperCase() + lang.slice(1);
       descBox.textContent = icon.dataset['desc' + langKey] || icon.dataset.descPt;
       descBox.textContent = icon.dataset[key] || icon.dataset.desc || '';
     }
     }
   });
   });
Linha 35: Linha 30:
   document.querySelectorAll('.character-name-box').forEach(box => {
   document.querySelectorAll('.character-name-box').forEach(box => {
     const nameElem = box.querySelector('.character-name');
     const nameElem = box.querySelector('.character-name');
     if (nameElem) {
     if(nameElem) {
      // Usa el name del idioma seleccionado, si no existe usa el valor actual
       const key = 'name' + lang.charAt(0).toUpperCase() + lang.slice(1);
       const newName = box.dataset['name' + langKey] || nameElem.textContent;
       nameElem.textContent = box.dataset[key] || box.dataset.name || '';
       nameElem.textContent = newName;
     }
     }
   });
   });
Linha 45: Linha 39:
// Espera a que el DOM esté listo
// Espera a que el DOM esté listo
document.addEventListener("DOMContentLoaded", function() {
document.addEventListener("DOMContentLoaded", function() {
   const savedLang = localStorage.getItem('preferedLang') || 'pt';
   // Inicializa idioma por defecto
  setLang(savedLang);
  setLang('pt');


   // Selector de banderas
   // Selector de banderas
Linha 52: Linha 46:
     link.addEventListener('click', e => {
     link.addEventListener('click', e => {
       e.preventDefault();
       e.preventDefault();
       const lang = link.dataset.lang;
       const lang = link.dataset.lang || 'pt';
       setLang(lang);
       setLang(lang);
      localStorage.setItem('preferedLang', lang);
     });
     });
   });
   });

Edição das 18h45min de 27 de agosto de 2025

 <a href="#" data-lang="pt" title="Português">
   <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24">
 </a>
 <a href="#" data-lang="es" title="Español">
   <img src="https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg" width="32" height="24">
 </a>
 <a href="#" data-lang="en" title="English">
   <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" width="32" height="24">
 </a>
 <a href="#" data-lang="pl" title="Polski">
   <img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24">
 </a>

<script> function setLang(lang) { 

 // Cambiar descripción de skills
 document.querySelectorAll('.skill-icon').forEach(icon => {
   const idx = icon.dataset.index;
   const descBox = document.querySelector('.skill-desc[data-index="' + idx + '"]');
   if(descBox) {
     // Accede correctamente a dataset camelCase
     const key = 'desc' + lang.charAt(0).toUpperCase() + lang.slice(1);
     descBox.textContent = icon.dataset[key] || icon.dataset.desc || ;
   }
 });

 // Cambiar nombre del personaje si existe
 document.querySelectorAll('.character-name-box').forEach(box => {
   const nameElem = box.querySelector('.character-name');
   if(nameElem) {
     const key = 'name' + lang.charAt(0).toUpperCase() + lang.slice(1);
     nameElem.textContent = box.dataset[key] || box.dataset.name || ;
   }
 });

}

// Espera a que el DOM esté listo document.addEventListener("DOMContentLoaded", function() { 

 // Inicializa idioma por defecto
 setLang('pt');

 // Selector de banderas
 document.querySelectorAll('.language-switch a').forEach(link => {
   link.addEventListener('click', e => {
     e.preventDefault();
     const lang = link.dataset.lang || 'pt';
     setLang(lang);
   });
 });

}); </script>

<style> .language-switch { 

 display: flex;
 gap: 6px;
 margin: 8px 0;

} .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;

} </style>

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