Widget:Droflax

<script> mw.loader.using(['jquery'], function () {

 $(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');
   const baseTitle = currentTitle.replace(/\/(pt|en|es|pl)$/, );
   const currentLang = currentTitle.match(/\/(pt|en|es|pl)$/)?.[1] || 'pt';

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

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>