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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<script>
<style>
  (function () {
     body {
     function onReady(fn) {
       font-family: Arial, sans-serif;
       if (document.readyState !== 'loading') {
       padding: 40px;
        fn();
       background-color: #f9f9f9;
       } else {
        document.addEventListener('DOMContentLoaded', fn);
       }
     }
     }


     onReady(function () {
     /* Widget de banderas */
       const langs = ['pt', 'en', 'es', 'pl'];
    .language-buttons {
       const langFlags = {
       position: fixed;
        pt: 'https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg',
       top: 20px;
        en: 'https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg',
      right: 20px;
        es: 'https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg',
      display: flex;
        pl: 'https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg'
      gap: 10px;
       };
      background-color: #ffffffcc;
      padding: 6px 10px;
      border-radius: 8px;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
       z-index: 999;
    }


       const pathParts = decodeURIComponent(window.location.pathname).split('/index.php/')[1].split('/');
    .language-buttons img {
       const possibleLang = pathParts[pathParts.length - 1];
       width: 40px;
       const currentLang = langs.includes(possibleLang) ? possibleLang : 'pt';
      height: 28px;
       const baseTitle = langs.includes(possibleLang) ? pathParts.slice(0, -1).join('/') : pathParts.join('/');
       border-radius: 6px;
       border: 1px solid #ccc;
       transition: transform 0.2s ease;
      object-fit: cover;
    }


       const preferedLang = localStorage.getItem('preferedLang');
    .language-buttons img:hover {
       const alreadyInLang = currentLang === preferedLang;
       transform: scale(1.1);
       const redirected = sessionStorage.getItem('langRedirectDone');
       cursor: pointer;
       border-color: #888;
    }


       const shouldForce = preferedLang && preferedLang !== 'pt' && (!langs.includes(possibleLang) || currentLang !== preferedLang);
    /* Bloques de skill */
       if (shouldForce && !redirected) {
    .skill-block {
        const targetTitle = baseTitle + '/' + preferedLang;
      margin-top: 40px;
        const targetUrl = '/index.php/' + targetTitle.split('/').map(encodeURIComponent).join('/');
       padding: 16px;
       border-radius: 10px;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      max-width: 400px;
    }


        fetch(targetUrl, { method: 'HEAD' }).then(response => {
    .skill-block img {
          sessionStorage.setItem('langRedirectDone', '1');
      width: 64px;
          if (response.ok) {
      height: 64px;
            window.location.href = targetUrl;
      display: block;
          } else {
      margin-bottom: 8px;
            const fallbackUrl = '/index.php/' + baseTitle.split('/').map(encodeURIComponent).join('/');
    }
            if (window.location.pathname !== fallbackUrl) {
              window.location.href = fallbackUrl;
            }
          }
        }).catch(() => {
          sessionStorage.setItem('langRedirectDone', '1');
          const fallbackUrl = '/index.php/' + baseTitle.split('/').map(encodeURIComponent).join('/');
          if (window.location.pathname !== fallbackUrl) {
            window.location.href = fallbackUrl;
          }
        });


        return;
    .skill-name {
      font-weight: bold;
      font-size: 1.2em;
      margin-bottom: 6px;
    }


       }
    .skill-desc {
       font-size: 0.95em;
      color: #333;
    }
</style>
<body>


      // Contenedor de banderas
  <!-- Botones de banderas -->
      var container = document.createElement('div');
  <div class="language-buttons">
      container.className = 'language-buttons';
    <img class="flag-btn" data-lang="pt" src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" title="Português">
      container.style.position = 'absolute';
    <img class="flag-btn" data-lang="en" src="https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg" title="English">
      container.style.top = '1px';
    <img class="flag-btn" data-lang="es" src="https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg" title="Español">
      container.style.right = '438px';
    <img class="flag-btn" data-lang="pl" src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" title="Polski">
      container.style.display = 'flex';
  </div>
      container.style.padding = '6px 10px';
      container.style.gap = '8px';
      container.style.zIndex = '999';


      langs.forEach(function (lang) {
  <!-- Ejemplo de bloque de skill generado por el Módulo:Skill -->
        var pageTitle = baseTitle + (lang === 'pt' ? '' : '/' + lang);
  <div class="skill-block"
        var fullUrl = '/index.php/' + pageTitle.split('/').map(encodeURIComponent).join('/')
      data-name-pt="Chute"
      data-name-en="Kick"
      data-name-es="Patada"
      data-name-pl="Kopnięcie"
      data-desc-pt="Kalifa desfere um chute poderoso."
      data-desc-en="Kalifa delivers a powerful kick."
      data-desc-es="Kalifa lanza una patada poderosa."
      data-desc-pl="Kalifa zadaje potężne kopnięcie.">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Kick_icon.png/64px-Kick_icon.png" alt="">
    <div class="skill-name"></div>
    <div class="skill-desc"></div>
  </div>


        var link = document.createElement('a');
  <script>
        link.href = '#';
    // Actualiza todos los textos según el idioma activo en <html lang="">
        link.title = lang.toUpperCase();
    function updateTextsByLang() {
      const lang = document.documentElement.getAttribute("lang") || "pt";


         link.addEventListener('click', function (e) {
      document.querySelectorAll(".skill-block").forEach(block => {
          e.preventDefault();
         const name = block.getAttribute("data-name-" + lang);
        const desc = block.getAttribute("data-desc-" + lang);


          fetch(fullUrl, { method: 'HEAD' }).then(response => {
        const nameBox = block.querySelector(".skill-name");
            if (response.ok) {
        const descBox = block.querySelector(".skill-desc");
              localStorage.setItem('preferedLang', lang);
        const img = block.querySelector("img");
              sessionStorage.setItem('langRedirectDone', '1');
              window.location.href = fullUrl;
            } else {
              sessionStorage.setItem('langRedirectDone', '1');


              const langNames = { es: 'Español', en: 'English', pl: 'Polski' };
        if (nameBox && name) nameBox.textContent = name;
              const msgTranslations = {
        if (descBox && desc) descBox.textContent = desc;
                es: 'La versión en {lang} no está disponible.',
        if (img && name) img.setAttribute("alt", name);
                en: 'The {lang} version is not available.',
      });
                pl: 'Wersja w języku {lang} jest niedostępna.',
    }
                pt: 'A versão em {lang} não está disponível.'
              };
 
              if (lang !== 'pt') {
                const userLang = (navigator.language || 'en').substring(0, 2);
                const messageTemplate = msgTranslations[userLang] || msgTranslations['en'];
                const langLabel = langNames[lang] || lang;
                const msg = document.createElement('div');
                msg.textContent = messageTemplate.replace('{lang}', langLabel);
                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);
                setTimeout(() => {
                  msg.style.opacity = '0';
                  setTimeout(() => {
                    msg.remove();
                    window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
                  }, 500);
                }, 3000);
              } else {
                window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
              }
            }
          }).catch(() => {
            sessionStorage.setItem('langRedirectDone', '1');
            window.location.href = '/index.php/' + encodeURIComponent(baseTitle);
          });
        });


        var img = document.createElement('img');
    // Escuchar clics en las banderas
        img.src = langFlags[lang];
    document.querySelectorAll(".flag-btn").forEach(btn => {
        img.style.width = '32px';
      btn.addEventListener("click", () => {
        img.style.height = '24px';
        document.documentElement.setAttribute("lang", btn.dataset.lang);
        img.style.borderRadius = '6px';
         updateTextsByLang();
        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);
        container.appendChild(link);
       });
       });
    });


      document.body.appendChild(container);
    // Inicializar al cargar la página
     });
     updateTextsByLang();
   })();
   </script>
</script>
</body>

Edição das 04h10min de 27 de agosto de 2025

<style> 

   body {
     font-family: Arial, sans-serif;
     padding: 40px;
     background-color: #f9f9f9;
   }

   /* Widget de banderas */
   .language-buttons {
     position: fixed;
     top: 20px;
     right: 20px;
     display: flex;
     gap: 10px;
     background-color: #ffffffcc;
     padding: 6px 10px;
     border-radius: 8px;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
     z-index: 999;
   }

   .language-buttons img {
     width: 40px;
     height: 28px;
     border-radius: 6px;
     border: 1px solid #ccc;
     transition: transform 0.2s ease;
     object-fit: cover;
   }

   .language-buttons img:hover {
     transform: scale(1.1);
     cursor: pointer;
     border-color: #888;
   }

   /* Bloques de skill */
   .skill-block {
     margin-top: 40px;
     padding: 16px;
     border-radius: 10px;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     max-width: 400px;
   }

   .skill-block img {
     width: 64px;
     height: 64px;
     display: block;
     margin-bottom: 8px;
   }

   .skill-name {
     font-weight: bold;
     font-size: 1.2em;
     margin-bottom: 6px;
   }

   .skill-desc {
     font-size: 0.95em;
     color: #333;
   }

</style> <body> 

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

   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Kick_icon.png/64px-Kick_icon.png" alt="">

 <script>
   // Actualiza todos los textos según el idioma activo en <html lang="">
   function updateTextsByLang() {
     const lang = document.documentElement.getAttribute("lang") || "pt";

     document.querySelectorAll(".skill-block").forEach(block => {
       const name = block.getAttribute("data-name-" + lang);
       const desc = block.getAttribute("data-desc-" + lang);

       const nameBox = block.querySelector(".skill-name");
       const descBox = block.querySelector(".skill-desc");
       const img = block.querySelector("img");

       if (nameBox && name) nameBox.textContent = name;
       if (descBox && desc) descBox.textContent = desc;
       if (img && name) img.setAttribute("alt", name);
     });
   }

   // Escuchar clics en las banderas
   document.querySelectorAll(".flag-btn").forEach(btn => {
     btn.addEventListener("click", () => {
       document.documentElement.setAttribute("lang", btn.dataset.lang);
       updateTextsByLang();
     });
   });

   // Inicializar al cargar la página
   updateTextsByLang();
 </script>

</body>

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