Widget:Droflax

<script> $(function () {

 const langs = ['pt', 'en', 'es', 'pl'];
 const langFlags = {
   pt: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg',
   en: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
   es: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg',
   pl: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg'
 };

 const currentTitle = mw.config.get('wgPageName'); // Ej: Chefões, Chefões/en
 const baseTitle = currentTitle.replace(/\/(pt|en|es|pl)$/, ); // sin sufijo
 const currentLang = currentTitle.match(/\/(pt|en|es|pl)$/)?.[1] || 'pt';

 // Redirección automática si se eligió un idioma anteriormente
 const preferedLang = localStorage.getItem('preferedLang');
 const alreadyInLang = currentLang === preferedLang;
 const redirected = sessionStorage.getItem('langRedirectDone');

 if (preferedLang && !alreadyInLang && !redirected) {
   const targetTitle = baseTitle + (preferedLang === 'pt' ?  : '/' + preferedLang);
   sessionStorage.setItem('langRedirectDone', '1');
   window.location.href = mw.util.getUrl(targetTitle);
   return;
 }

 // Crear contenedor de botones

const $container = $('

').addClass('language-buttons').css({

   position: 'fixed',
   top: '20px',
   right: '20px',
   display: 'flex',
   gap: '8px',
   background: '#ffffffcc',
   padding: '6px 10px',
   borderRadius: '8px',
   boxShadow: '0 0 6px rgba(0,0,0,0.2)',
   zIndex: 999
 });

 langs.forEach(lang => {
   const pageTitle = baseTitle + (lang === 'pt' ?  : '/' + lang);
   const $link = $('<a>')
     .attr('href', mw.util.getUrl(pageTitle))
     .attr('title', lang.toUpperCase())
     .on('click', function () {
       localStorage.setItem('preferedLang', lang);
       sessionStorage.removeItem('langRedirectDone');
     });

   const $img = $('<img>')
     .attr('src', langFlags[lang])
     .css({
       width: '32px',
       height: '24px',
       borderRadius: '6px',
       border: lang === currentLang ? '2px solid #333' : '1px solid #ccc',
       transition: 'transform 0.2s',
       objectFit: 'cover'
     })
     .hover(
       function () { $(this).css('transform', 'scale(1.1)'); },
       function () { $(this).css('transform', 'scale(1)'); }
     );

   $link.append($img);
   $container.append($link);
 });

 $('body').append($container);

}); </script>