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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(287 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<script>
<div class="language-switch">
(function () {
  <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
   // Esperar a que el DOM esté listo
   <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
   function onReady(fn) {
   <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>
    if (document.readyState !== 'loading') {
  <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
      fn();
</div>
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }


  onReady(function () {
<style>
    const langs = ['pt', 'en', 'es', 'pl'];
.language-switch {
    const langFlags = {
  display: flex;
      pt: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg',
  gap: 6px;
      en: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
  margin: 8px 0;
      es: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg',
  justify-content: center;
      pl: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg'
}
    };
.language-switch img {
 
  border: 1px solid #ccc;
    // Obtener el nombre de la página actual (wgPageName)
   border-radius: 6px;
    // MediaWiki inserta una variable global mw.config, sino se puede adaptar
   cursor: pointer;
    var currentTitle = (window.mw && mw.config && mw.config.get('wgPageName')) || '';
   transition: transform 0.2s ease, border-color 0.2s ease;
    if (!currentTitle) {
}
      // fallback, intentar sacar el título de la URL
.language-switch img:hover {
      currentTitle = decodeURIComponent(window.location.pathname.split('/').pop());
  transform: scale(1.1);
    }
  border-color: #333;
 
}
    const langRegex = /\/(pt|en|es|pl)$/;
.language-switch img.active {
    const currentLangMatch = currentTitle.match(langRegex);
  border-color: #000;
    const currentLang = currentLangMatch ? currentLangMatch[1] : 'pt';
    const baseTitle = currentTitle.replace(langRegex, '');
 
    // Redirección automática basada en localStorage y sessionStorage
    const preferedLang = localStorage.getItem('preferedLang');
    const alreadyInLang = currentLang === preferedLang;
    const redirected = sessionStorage.getItem('langRedirectDone');
 
    if (preferedLang && !alreadyInLang && !redirected) {
   const targetTitle = baseTitle + (preferedLang === 'pt' ? '' : '/' + preferedLang);
   const baseUrl = (window.mw && mw.util && mw.util.getUrl) ? mw.util.getUrl(targetTitle) : '/index.php/' + encodeURIComponent(targetTitle);
 
   fetch(baseUrl, { method: 'HEAD' }).then(response => {
    sessionStorage.setItem('langRedirectDone', '1');
    if (response.ok) {
      window.location.href = baseUrl;
    } else {
      // Fallback a página base si no existe traducción
      const fallbackUrl = (window.mw && mw.util && mw.util.getUrl)
        ? mw.util.getUrl(baseTitle)
        : '/index.php/' + encodeURIComponent(baseTitle);
      window.location.href = fallbackUrl;
    }
  }).catch(() => {
    // Fallback por error de red
    const fallbackUrl = (window.mw && mw.util && mw.util.getUrl)
      ? mw.util.getUrl(baseTitle)
      : '/index.php/' + encodeURIComponent(baseTitle);
    window.location.href = fallbackUrl;
  });
 
  return; // evitar que el resto del código se ejecute aún
}
}
</style>


<script>
(function () {
  let currentLang = 'pt'; // idioma por defecto


    // Crear contenedor
  const langSwitch = document.querySelector('.language-switch');
    var container = document.createElement('div');
  if (langSwitch) {
    container.className = 'language-buttons';
     langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
    container.style.position = 'fixed';
      btn.addEventListener('click', () => {
     container.style.top = '20px';
        currentLang = btn.dataset.lang;
    container.style.right = '20px';
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
    container.style.display = 'flex';
        btn.querySelector('img').classList.add('active');
    container.style.gap = '8px';
    container.style.background = '#ffffffcc';
    container.style.padding = '6px 10px';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 0 6px rgba(0,0,0,0.2)';
    container.style.zIndex = '999';
 
    // Crear botones para cada idioma
    langs.forEach(function(lang) {
  var pageTitle = baseTitle + (lang === 'pt' ? '' : '/' + lang);
  var fullUrl = (window.mw && mw.util && mw.util.getUrl) ? mw.util.getUrl(pageTitle) : '/index.php/' + encodeURIComponent(pageTitle);
 
  var link = document.createElement('a');
  link.href = '#'; // evitamos navegación inmediata
  link.title = lang.toUpperCase();


  link.addEventListener('click', function (e) {
        const active = document.querySelector('.skill-icon.active');
  e.preventDefault();
        if (active) active.click();
      });
    });


  fetch(fullUrl, { method: 'HEAD' }).then(response => {
     // Activar la bandera por defecto
  if (response.ok) {
     const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
     localStorage.setItem('preferedLang', lang);
     if (defaultBtn) defaultBtn.classList.add('active');
     sessionStorage.setItem('langRedirectDone', '1');
    window.location.href = fullUrl;
  } else {
    sessionStorage.setItem('langRedirectDone', '1');
 
    if (lang !== 'pt') {
      const langNames = { es: 'Español', en: 'Inglés', pl: 'Polaco' };
      const msg = document.createElement('div');
      msg.textContent = `La versión en ${langNames[lang]} no está disponible.`;
      msg.style.position = 'fixed';
      msg.style.top = '20px';
      msg.style.left = '50%';
      msg.style.transform = 'translateX(-50%)';
      msg.style.background = '#ffdddd';
      msg.style.color = '#a00';
      msg.style.padding = '12px 24px';
      msg.style.border = '1px solid #a00';
      msg.style.borderRadius = '8px';
      msg.style.fontSize = '16px';
      msg.style.zIndex = '1000';
      msg.style.boxShadow = '0 0 6px rgba(0,0,0,0.2)';
      msg.style.opacity = '0';
      msg.style.transition = 'opacity 0.3s ease';
 
      document.body.appendChild(msg);
      setTimeout(() => { msg.style.opacity = '1'; }, 10); // Fade in
 
      setTimeout(() => {
        msg.style.opacity = '0'; // Fade out
        setTimeout(() => {
          msg.remove();
          const fallbackUrl = (window.mw && mw.util && mw.util.getUrl)
            ? mw.util.getUrl(baseTitle)
            : '/index.php/' + encodeURIComponent(baseTitle);
          window.location.href = fallbackUrl;
        }, 500); // Espera a que se desvanezca
      }, 5000);
     } else {
      // Redirigir directo sin mensaje
      const fallbackUrl = (window.mw && mw.util && mw.util.getUrl)
        ? mw.util.getUrl(baseTitle)
        : '/index.php/' + encodeURIComponent(baseTitle);
      window.location.href = fallbackUrl;
    }
   }
   }
}).catch(() => {
  const fallbackUrl = (window.mw && mw.util && mw.util.getUrl)
    ? mw.util.getUrl(baseTitle)
    : '/index.php/' + encodeURIComponent(baseTitle);
  sessionStorage.setItem('langRedirectDone', '1');
  window.location.href = fallbackUrl;
});
});
  var img = document.createElement('img');
  img.src = langFlags[lang];
  img.style.width = '32px';
  img.style.height = '24px';
  img.style.borderRadius = '6px';
  img.style.border = (lang === currentLang) ? '2px solid #333' : '1px solid #ccc';
  img.style.transition = 'transform 0.2s ease';
  img.style.objectFit = 'cover';
  img.style.cursor = 'pointer';
  img.addEventListener('mouseenter', function () {
    img.style.transform = 'scale(1.1)';
    img.style.borderColor = '#888';
  });
  img.addEventListener('mouseleave', function () {
    img.style.transform = 'scale(1)';
    img.style.borderColor = (lang === currentLang) ? '#333' : '#ccc';
  });


   link.appendChild(img);
   const oldClicks = document.querySelectorAll('.skill-icon');
   container.appendChild(link);
   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
      }


    document.body.appendChild(container);
      const attrs = el.dataset.atr || '';
      const descBox = document.querySelector('.desc-box');
      if (descBox) {
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
      }
    });
   });
   });
})();
})();
</script>
</script>

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”