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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Página substituída por 'function activarFlechasCarrusel() { const carousel = document.querySelector('.skins-carousel'); const wrapper = document.querySelector('.skins-carousel-wrapper'...')
Etiqueta: Substituído
 
(222 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
function activarFlechasCarrusel() {
<div class="language-switch">
    const carousel = document.querySelector('.skins-carousel');
  <a data-lang="pt"><img src="https://upload.wikimedia.org/wikipedia/en/0/05/Flag_of_Brazil.svg" width="32" height="24"></a>
    const wrapper = document.querySelector('.skins-carousel-wrapper');
  <a data-lang="es"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" width="32" height="24"></a>
    const leftBtn = document.querySelector('.skins-arrow.left');
  <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>
    const rightBtn = document.querySelector('.skins-arrow.right');
  <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
</div>


    const skinCard = carousel.querySelector('.skin-card');
<style>
    if (!skinCard) return;
.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>


    const cardStyle = getComputedStyle(skinCard);
<script>
    const cardWidth = skinCard.offsetWidth + parseInt(cardStyle.marginRight || 0) + parseInt(cardStyle.marginLeft || 0);
(function () {
    const scrollAmount = cardWidth;
  let currentLang = 'pt'; // idioma por defecto


    function hideArrow(btn) {
  const langSwitch = document.querySelector('.language-switch');
        if (!btn.classList.contains('desapareciendo') && btn.style.display !== 'none') {
  if (langSwitch) {
            btn.classList.add('desapareciendo');
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
            setTimeout(() => {
      btn.addEventListener('click', () => {
                btn.style.display = 'none';
        currentLang = btn.dataset.lang;
                btn.classList.remove('desapareciendo');
        langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
            }, 300);
        btn.querySelector('img').classList.add('active');
        }
    }


    function showArrow(btn) {
         const active = document.querySelector('.skill-icon.active');
         if (btn.style.display === 'none') {
        if (active) active.click();
            btn.style.display = 'inline-block';
      });
            void btn.offsetWidth;
    });
        }
        btn.classList.remove('desapareciendo');
    }
 
    function updateArrows() {
        const scrollLeft = Math.round(carousel.scrollLeft);
        const maxScrollLeft = Math.round(carousel.scrollWidth - carousel.clientWidth);
 
        const hasLeft = scrollLeft > 5;
        const hasRight = scrollLeft < maxScrollLeft - 5;


        if (hasLeft) showArrow(leftBtn);
    // Activar la bandera por defecto
        else hideArrow(leftBtn);
    const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
    if (defaultBtn) defaultBtn.classList.add('active');
  }


        if (hasRight) showArrow(rightBtn);
  const oldClicks = document.querySelectorAll('.skill-icon');
        else hideArrow(rightBtn);
  oldClicks.forEach(el => {
    el.addEventListener('click', () => {
      const name = el.dataset.nome || '';
      const rawDesc = el.dataset.desc || '';
      let descText = '';


         wrapper.classList.toggle('has-left', hasLeft);
      try {
         wrapper.classList.toggle('has-right', hasRight);
         const obj = JSON.parse(rawDesc);
    }
         descText = obj[currentLang] || obj['pt'] || '';
      } catch (e) {
        descText = rawDesc; // fallback si no es un JSON
      }


    function scrollToAndTrack(targetScroll) {
      const attrs = el.dataset.atr || '';
        carousel.scrollTo({ left: targetScroll, behavior: 'smooth' });
      const descBox = document.querySelector('.desc-box');
 
      if (descBox) {
        // Track scroll position every few ms until it's "stable"
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
        let lastPosition = null;
      }
        let stableCount = 0;
        const checkInterval = setInterval(() => {
            const current = carousel.scrollLeft;
            if (current === lastPosition) {
                stableCount++;
                if (stableCount >= 3) {
                    clearInterval(checkInterval);
                    updateArrows(); // final check
                }
            } else {
                stableCount = 0;
                lastPosition = current;
            }
        }, 50);
    }
 
    leftBtn.addEventListener('click', () => {
        const scrollLeft = carousel.scrollLeft;
        const nextScroll = Math.max(0, scrollLeft - scrollAmount);
        scrollToAndTrack(nextScroll);
    });
 
    rightBtn.addEventListener('click', () => {
        const scrollLeft = carousel.scrollLeft;
        const maxScrollLeft = carousel.scrollWidth - carousel.clientWidth;
        const nextScroll = Math.min(maxScrollLeft, scrollLeft + scrollAmount);
        scrollToAndTrack(nextScroll);
     });
     });
 
  });
    // Recalcular siempre que haya scroll (por si es manual)
})();
    carousel.addEventListener('scroll', updateArrows);
</script>
 
    new ResizeObserver(updateArrows).observe(carousel);
 
    updateArrows();
}

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”