MediaWiki:Common.js: mudanças entre as edições

/* =======================================================
   ARVORE DE HABILIDADE
   ======================================================= */
document.addEventListener('DOMContentLoaded', function () {
    var cards = document.querySelectorAll('.skill-card');
    cards.forEach(function (card) {
        card.addEventListener('click', function () {
            card.style.filter = 'brightness(1.2)';
            setTimeout(function () { card.style.filter = 'brightness(1)'; }, 150);
        });
    });
});


/* =======================================================
   BOTAO VOLTAR AO TOPO
   ======================================================= */
$(function () {
    var $button = $('<button id="back-to-top" title="Voltar ao Topo">↑ Topo</button>');
    $('body').append($button);

    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $button.fadeIn();
        } else {
            $button.fadeOut();
        }
    });

    $button.click(function () {
        $('html, body').animate({ scrollTop: 0 }, 'slow');
        return false;
    });
});


/* =======================================================
   ARVORE DE CLASSES
   ======================================================= */
document.addEventListener('DOMContentLoaded', function () {
    var cells = document.querySelectorAll('.ragnarok-tree td[class^="evo-"]');

    cells.forEach(function (cell) {
        var link = cell.querySelector('a');
        if (link) {
            cell.style.cursor = 'pointer';
            cell.addEventListener('click', function () { window.location.href = link.href; });
        }

        cell.addEventListener('mouseenter', function () {
            var familyClass = Array.from(this.classList).find(function (c) { return c.startsWith('evo-'); });
            if (!familyClass || familyClass === 'evo-all') return;

            var myPos    = this.getAttribute('data-pos');
            var prevEl   = this.closest('table').previousElementSibling;
            var isClass1 = prevEl && prevEl.innerText.includes('Classe 1');
            var isClass2 = prevEl && prevEl.innerText.includes('Classe 2');

            if (isClass1) {
                document.querySelectorAll('.' + familyClass).forEach(function (el) {
                    el.classList.add('highlight-active');
                });
            } else if (isClass2) {
                this.classList.add('highlight-active');
                var table3 = document.querySelector('table:nth-of-type(3)');
                if (table3) {
                    table3.querySelectorAll('.' + familyClass).forEach(function (el) {
                        if (el.getAttribute('data-pos') === myPos) el.classList.add('highlight-active');
                    });
                }
            } else {
                this.classList.add('highlight-active');
            }
        });

        cell.addEventListener('mouseleave', function () {
            document.querySelectorAll('.highlight-active').forEach(function (el) {
                el.classList.remove('highlight-active');
            });
        });
    });
});




/* =======================================================
   CARROSSEL FARMLAND
   ======================================================= */
mw.hook('wikipage.content').add(function () {

    var carousel = document.getElementById('farmlandCarousel');
    if (!carousel) return;

    var wrapper  = carousel.querySelector('.carousel-wrapper');
    var container = carousel.querySelector('.carousel-container');
    var slides   = carousel.querySelectorAll('.carousel-slide');
    var dotsWrap = carousel.querySelector('.carousel-dots');
    var progBar  = carousel.querySelector('.carousel-progress');
    var nextBtn  = carousel.querySelector('.carousel-arrow.right');
    var prevBtn  = carousel.querySelector('.carousel-arrow.left');

    if (!container || slides.length === 0) return;

    var DELAY = 3500;
    var total = slides.length;
    var idx   = 1;
    var timer, busy = false;

    /* Clones para loop infinito sem flash */
    var firstClone = slides[0].cloneNode(true);
    var lastClone  = slides[total - 1].cloneNode(true);
    firstClone.classList.add('clone');
    lastClone.classList.add('clone');
    container.appendChild(firstClone);
    container.insertBefore(lastClone, slides[0]);

    var allSlides = container.querySelectorAll('.carousel-slide');

    /* Força layout correto (crítico no MediaWiki) */
    container.style.display    = 'flex';
    container.style.transition = 'none';
    allSlides.forEach(function (s) {
        s.style.minWidth   = '100%';
        s.style.flexShrink = '0';
    });
    container.style.transform = 'translateX(-' + (idx * 100) + '%)';

    /* Dots */
    dotsWrap.innerHTML = '';
    var dots = [];
    for (var i = 0; i < total; i++) {
        var dot = document.createElement('span');
        dot.className = 'dot';
        dotsWrap.appendChild(dot);
        dots.push(dot);
        (function (n) {
            dot.onclick = function () { goTo(n + 1); resetAuto(); };
        })(i);
    }

    function updateDots() {
        var ai = idx - 1;
        if (ai < 0) ai = total - 1;
        if (ai >= total) ai = 0;
        dots.forEach(function (d, i) {
            d.classList.toggle('active', i === ai);
        });
    }

    function goTo(i, animate) {
        if (busy) return;
        busy = true;
        idx  = i;
        container.style.transition = (animate === false)
            ? 'none'
            : 'transform 0.5s cubic-bezier(.4,0,.2,1)';
        container.style.transform = 'translateX(-' + (idx * 100) + '%)';
        updateDots();
    }

    container.addEventListener('transitionend', function () {
        if (allSlides[idx] && allSlides[idx].classList.contains('clone')) {
            container.style.transition = 'none';
            idx = (idx === 0) ? total : 1;
            container.style.transform = 'translateX(-' + (idx * 100) + '%)';
            updateDots();
        }
        busy = false;
    });

    function next() { goTo(idx + 1); resetAuto(); }
    function prev() { goTo(idx - 1); resetAuto(); }

    if (nextBtn) nextBtn.onclick = next;
    if (prevBtn) prevBtn.onclick = prev;

    /* Barra de progresso */
    function startProg() {
        if (!progBar) return;
        progBar.style.transition = 'none';
        progBar.style.width = '0%';
        setTimeout(function () {
            progBar.style.transition = 'width ' + DELAY + 'ms linear';
            progBar.style.width = '100%';
        }, 30);
    }

    function startAuto() {
        timer = setInterval(function () { goTo(idx + 1); startProg(); }, DELAY);
        startProg();
    }

    function stopAuto() {
        clearInterval(timer);
        if (progBar) { progBar.style.transition = 'none'; progBar.style.width = '0%'; }
    }

    function resetAuto() { clearInterval(timer); startAuto(); }

    /* Pausa no hover */
    if (wrapper) {
        wrapper.addEventListener('mouseenter', stopAuto);
        wrapper.addEventListener('mouseleave', startAuto);
    }

    /* Swipe mobile */
    var startX = 0;
    if (wrapper) {
        wrapper.addEventListener('touchstart', function (e) { startX = e.touches[0].clientX; });
        wrapper.addEventListener('touchend', function (e) {
            var diff = startX - e.changedTouches[0].clientX;
            if (Math.abs(diff) > 40) { diff > 0 ? next() : prev(); }
        });
    }

    updateDots();
    startAuto();
});