MediaWiki:Common.js: Difference between revisions

Revision as of 22:58, 20 February 2026

$(document).ready(function() {
    // 1. Define HTML for all elements
    var progressBarHTML = '<div id="scroll-progress"></div>';
    var topButtonHTML = '<div class="back-to-top-fixed" style="display:none;"><a href="#">↑ TOP</a></div>';
    var menuHTML = `
        <div class="floating-menu" id="floatingMenu">
            <div class="floating-menu-header" id="menuHeader">
                <span>📋 QUICK NAV</span>
                <span class="arrow">▼</span>
            </div>
            <div class="floating-menu-items">
                <a href="/index.php/Main_Page">🏠 Main Page</a>
                <a href="/index.php/First_Steps">🚀 First Steps</a>
                <a href="/index.php/VIP">👑 VIP</a>
                <a href="/index.php/Enchant_Stones">💎 Enchant Stones</a>
                <a href="/index.php/Nyangvines">🐱 Nyangvines</a>
                <a href="/index.php/Custom_Systems">⚙️ Custom Systems</a>
                <a href="/index.php/Monthly_Kachua">📅 Monthly Kachua</a>
                <a href="/index.php/Troubleshooting">🔧 Troubleshooting</a>
                <a href="/index.php/Card_Trader_and_Kachua_Tokens">🃏 Card and Tokens</a>
                <a href="/index.php/Equipment_Enhancement">🛡️ EQ Enhancement</a>
            </div>
        </div>
        <div class="floating-menu-toggle" id="menuToggle">☰</div>
    `;

    // 2. Append everything to the body at once
    $('body').append(progressBarHTML + topButtonHTML + menuHTML);

    // 3. SCROLL LOGIC (Progress Bar, Top Button, and Hide Menu)
    var lastScrollTop = 0;

    $(window).scroll(function() {
        var st = $(this).scrollTop();
        
        // A. Update Progress Bar
        var docHeight = $(document).height() - $(window).height();
        var scrolled = (st / docHeight) * 100;
        $('#scroll-progress').css("width", scrolled + "%");

        // B. Top Button Fade In/Out
        if (st > 300) {
            $('.back-to-top-fixed').fadeIn();
        } else {
            $('.back-to-top-fixed').fadeOut();
        }

        // C. Hide Menu on Scroll Down (Desktop Only)
        if ($(window).width() > 768) {
            if (st > lastScrollTop && st > 500) {
                $('#floatingMenu').css('right', '-220px');
            } else {
                $('#floatingMenu').css('right', '20px');
            }
        }
        lastScrollTop = st;
    });

    // 4. TOP BUTTON CLICK
    $('.back-to-top-fixed a').click(function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 400);
    });

    // 5. HIGHLIGHT ACTIVE PAGE
    var currentPath = window.location.pathname;
    $('.floating-menu-items a').each(function() {
        if (currentPath.includes($(this).attr('href'))) {
            $(this).css({
                "background": "rgba(255, 106, 0, 0.1)",
                "border-left": "3px solid #FF6A00",
                "font-weight": "bold"
            });
        }
    });

    // 6. TOGGLE EVENTS
    $('#menuHeader').click(function() {
        $('#floatingMenu').toggleClass('collapsed');
    });

    $('#menuToggle').click(function() {
        $('#floatingMenu').toggleClass('mobile-visible');
    });

    // Close mobile menu when clicking outside
    $(document).click(function(event) {
        if ($(window).width() <= 768) {
            if (!$(event.target).closest('#floatingMenu, #menuToggle').length) {
                $('#floatingMenu').removeClass('mobile-visible');
            }
        }
    });
});