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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(167 revisões intermediárias por 2 usuários não estão sendo mostradas)
Linha 1: Linha 1:
(function() {
<div class="language-switch">
    'use strict';
  <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>
    // Buscar todos los contenedores de personaje
  <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 personajeBoxes = document.querySelectorAll('.personaje-box');
  <a data-lang="pl"><img src="https://upload.wikimedia.org/wikipedia/en/1/12/Flag_of_Poland.svg" width="32" height="24"></a>
   
</div>
    personajeBoxes.forEach(initPersonaje);
 
   
<style>
    function initPersonaje(personajeBox) {
.language-switch {
        // Obtener el nombre del personaje del ID
  display: flex;
        const personajeId = personajeBox.id;
  gap: 6px;
        if (!personajeId) return;
  margin: 8px 0;
       
  justify-content: center;
        const nome = personajeId.replace('personaje-', '');
}
        const dataScript = document.getElementById(`personaje-data-${nome}`);
.language-switch img {
       
  border: 1px solid #ccc;
        if (!dataScript) {
  border-radius: 6px;
            console.error(`No se encontraron datos para el personaje: ${nome}`);
  cursor: pointer;
            return;
  transition: transform 0.2s ease, border-color 0.2s ease;
        }
}
       
.language-switch img:hover {
        let data;
  transform: scale(1.1);
        try {
  border-color: #333;
            data = JSON.parse(dataScript.textContent);
}
        } catch (e) {
.language-switch img.active {
            console.error('Error al parsear datos del personaje:', e);
  border-color: #000;
            return;
}
        }
</style>
       
 
        // Inicializar tabs
<script>
        initTabs(personajeBox);
(function () {
       
  let currentLang = 'pt'; // idioma por defecto
        // Inicializar habilidades
 
        initHabilidades(personajeBox, data.habilidades);
  const langSwitch = document.querySelector('.language-switch');
       
  if (langSwitch) {
        // Inicializar skins carousel
    langSwitch.querySelectorAll('a[data-lang]').forEach(btn => {
        initSkinsCarousel(personajeBox);
      btn.addEventListener('click', () => {
       
        currentLang = btn.dataset.lang;
        // Remover el script de datos
         langSwitch.querySelectorAll('img').forEach(img => img.classList.remove('active'));
        dataScript.remove();
         btn.querySelector('img').classList.add('active');
    }
 
   
         const active = document.querySelector('.skill-icon.active');
    function initTabs(container) {
        if (active) active.click();
        const buttons = container.querySelectorAll('.tab-btn');
      });
        const contents = container.querySelectorAll('.tab-content');
    });
       
 
        buttons.forEach(btn => {
    // Activar la bandera por defecto
            btn.addEventListener('click', () => {
    const defaultBtn = langSwitch.querySelector('a[data-lang="pt"] img');
                buttons.forEach(b => b.classList.remove('active'));
    if (defaultBtn) defaultBtn.classList.add('active');
                contents.forEach(c => c.classList.remove('active'));
  }
               
 
                btn.classList.add('active');
  const oldClicks = document.querySelectorAll('.skill-icon');
                const tabId = btn.dataset.tab;
  oldClicks.forEach(el => {
                const targetContent = container.querySelector(`#${tabId}`);
    el.addEventListener('click', () => {
                if (targetContent) {
      const name = el.dataset.nome || '';
                    targetContent.classList.add('active');
      const rawDesc = el.dataset.desc || '';
                }
      let descText = '';
            });
 
        });
      try {
    }
        const obj = JSON.parse(rawDesc);
   
        descText = obj[currentLang] || obj['pt'] || '';
    function initHabilidades(container, habilidades) {
      } catch (e) {
        const cuadrosContainer = container.querySelector('.cuadros-container');
        descText = rawDesc; // fallback si no es un JSON
        const descripcionContainer = container.querySelector('.descripcion-container');
      }
        const videoContainer = container.querySelector('.video-container');
 
       
      const attrs = el.dataset.atr || '';
        if (!cuadrosContainer || !descripcionContainer || !videoContainer) return;
      const descBox = document.querySelector('.desc-box');
       
      if (descBox) {
        const cuadros = cuadrosContainer.querySelectorAll('.cuadro');
        descBox.innerHTML = `<div class="skill-title"><h3>${name}</h3></div>${renderAttributes(attrs)}<div class="desc">${descText}</div>`;
       
      }
        cuadros.forEach((cuadro, index) => {
    });
            cuadro.addEventListener('click', () => {
  });
                const hab = habilidades[index];
                if (!hab) return;
               
                // Formatear descripción
                const descripcionFormateada = hab.desc.replace(/'''(.*?)'''/g, '<b>$1</b>');
               
                // Generar HTML de la descripción
                descripcionContainer.innerHTML = `
                    <div class="titulo-habilidad">
                        <h3>${hab.nome}</h3>
                        <div class="tooltip-container">
                            <button class="info-btn">i</button>
                            <span class="tooltip-text">
                                Información adicional sobre la habilidad, consejos o efectos especiales.
                            </span>
                        </div>
                    </div>
                    ${generarHTMLAtributos(hab.atr)}
                    <div class="desc">${descripcionFormateada}</div>
                `;
               
                // Mostrar video si existe
                videoContainer.innerHTML = hab.video ? `
                    <video width="100%" controls playsinline>
                        <source src="${hab.video}" type="video/webm">
                        Tu navegador no soporta el elemento video.
                    </video>
                ` : '';
               
                // Actualizar estado activo
                cuadros.forEach(c => c.classList.remove('activo'));
                cuadro.classList.add('activo');
            });
        });
       
        // Scroll horizontal con rueda del mouse
        cuadrosContainer.addEventListener('wheel', e => {
            if (e.deltaY) {
                e.preventDefault();
                cuadrosContainer.scrollLeft += e.deltaY;
            }
        });
       
        // Activar primera habilidad por defecto
        if (cuadros.length > 0) {
            cuadros[0].click();
        }
    }
   
    function generarHTMLAtributos(atributos) {
        if (!atributos) return '';
       
        const vals = atributos.split(',').map(v => v.trim());
        const labels = ['Poder PVE', 'Poder PVP', 'Energía', 'Recarga'];
        const icons = [
            '/images/7/7a/Icon-pve.png',
            '/images/5/5f/Icon-pvp.png',
            '/images/3/38/Icon-energy.png',
            '/images/b/b1/Icon-cooldown.png'
        ];
       
        return `
            <div class="attribute--cardsContainer">
                ${vals.map((v, i) => {
                    let valor = v === '-' ? '-' : parseInt(v);
                    if (i === 1 && !isNaN(valor)) {
                        valor = (valor > 0 ? '+' : '') + valor;
                    }
                    return `
                        <span class="simple-tooltip simple-tooltip-inline" data-tooltip="${labels[i]}">
                            <div class="cardAttribute">
                                <img src="${icons[i]}" class="cardAttribute--icon">
                                <h2 class="cardAttribute--value">${valor}${i === 0 && valor !== '-' ? ' seg' : ''}</h2>
                            </div>
                        </span>
                    `;
                }).join('')}
            </div>
        `;
    }
   
    function initSkinsCarousel(container) {
        const carousel = container.querySelector('.skins-carousel');
        const wrapper = container.querySelector('.skins-carousel-wrapper');
        const leftBtn = container.querySelector('.skins-arrow.left');
        const rightBtn = container.querySelector('.skins-arrow.right');
       
        if (!carousel || !wrapper || !leftBtn || !rightBtn) return;
       
        let isPredictingScroll = false;
       
        const getScrollAmount = () => carousel.clientWidth * 0.6;
       
        const hideArrow = btn => {
            if (!btn.classList.contains('desapareciendo') && btn.style.display !== 'none') {
                btn.classList.add('desapareciendo');
                setTimeout(() => {
                    btn.style.display = 'none';
                    btn.classList.remove('desapareciendo');
                }, 300);
            }
         };
       
        const showArrow = btn => {
            if (btn.style.display === 'none') {
                btn.style.display = 'inline-block';
                void btn.offsetWidth; // Force reflow
            }
            btn.classList.remove('desapareciendo');
         };
       
        const setArrowsState = scrollLeft => {
            const maxScroll = carousel.scrollWidth - carousel.clientWidth;
            const hasLeft = scrollLeft > 5;
            const hasRight = scrollLeft < maxScroll - 5;
           
            if (hasLeft) showArrow(leftBtn);
            else hideArrow(leftBtn);
           
            if (hasRight) showArrow(rightBtn);
            else hideArrow(rightBtn);
           
            wrapper.classList.toggle('has-left', hasLeft);
            wrapper.classList.toggle('has-right', hasRight);
        };
       
         const handleArrowClick = direction => {
            isPredictingScroll = true;
            const scrollLeft = carousel.scrollLeft;
            const maxScroll = carousel.scrollWidth - carousel.clientWidth;
           
            const nextScroll = direction === 'left'  
                ? Math.max(0, scrollLeft - getScrollAmount())
                : Math.min(maxScroll, scrollLeft + getScrollAmount());
           
            setArrowsState(nextScroll);
            carousel.scrollTo({ left: nextScroll, behavior: 'smooth' });
           
            // Esperar a que termine el scroll
            let lastPosition = -1;
            let stillCount = 0;
            const checkScroll = setInterval(() => {
                const currentPosition = Math.round(carousel.scrollLeft);
                if (currentPosition === lastPosition) {
                    if (++stillCount >= 2) {
                        clearInterval(checkScroll);
                        isPredictingScroll = false;
                        setArrowsState(currentPosition);
                    }
                } else {
                    lastPosition = currentPosition;
                    stillCount = 0;
                }
            }, 50);
        };
       
        // Event listeners
        carousel.addEventListener('scroll', () => {
            if (!isPredictingScroll) {
                setArrowsState(carousel.scrollLeft);
            }
        });
       
        // Resize observer para recalcular cuando cambie el tamaño
        if (window.ResizeObserver) {
            new ResizeObserver(() => {
                if (!isPredictingScroll) {
                    setArrowsState(carousel.scrollLeft);
                }
            }).observe(carousel);
        }
       
        leftBtn.addEventListener('click', () => handleArrowClick('left'));
        rightBtn.addEventListener('click', () => handleArrowClick('right'));
       
        // Estado inicial
        setArrowsState(carousel.scrollLeft);
    }
   
    // Inicializar tooltips simples
    function initSimpleTooltips() {
        const tooltipElements = document.querySelectorAll('[data-tooltip]');
       
        tooltipElements.forEach(element => {
            element.addEventListener('mouseenter', (e) => {
                const tooltip = document.createElement('div');
                tooltip.className = 'simple-tooltip-popup';
                tooltip.innerHTML = e.target.dataset.tooltip;
                document.body.appendChild(tooltip);
               
                const rect = e.target.getBoundingClientRect();
                tooltip.style.position = 'absolute';
                tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
                tooltip.style.top = rect.top - tooltip.offsetHeight - 8 + 'px';
                tooltip.style.zIndex = '9999';
                tooltip.style.background = '#222';
                tooltip.style.color = '#fff';
                tooltip.style.padding = '8px 10px';
                tooltip.style.borderRadius = '4px';
                tooltip.style.fontSize = '12px';
                tooltip.style.whiteSpace = 'nowrap';
                tooltip.style.boxShadow = '0 2px 10px rgba(0,0,0,0.5)';
                tooltip.style.pointerEvents = 'none';
            });
           
            element.addEventListener('mouseleave', () => {
                const tooltips = document.querySelectorAll('.simple-tooltip-popup');
                tooltips.forEach(tooltip => tooltip.remove());
            });
        });
    }
   
    // Inicializar tooltips después de que se cargue el contenido
    setTimeout(initSimpleTooltips, 100);
   
})();
})();
</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”