MediaWiki:Common.js: Difference between revisions

Revision as of 22:53, 20 February 2026

$(document).ready(function() {
    // 1. Create floating menu (Included your new items)
    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>
    `;
    
    $('body').append(menuHTML);

    // 2. ACTIVE PAGE HIGHLIGHTING
    // This finds which link matches the current URL and adds an 'active' class
    var currentPath = window.location.pathname;
    $('.floating-menu-items a').each(function() {
        if ($(this).attr('href') === currentPath) {
            $(this).addClass('active-link').css({
                "background": "rgba(255, 106, 0, 0.1)",
                "border-left": "3px solid #FF6A00",
                "font-weight": "bold"
            });
        }
    });

    // 3. HIDE ON SCROLL (Desktop only)
    var lastScrollTop = 0;
    $(window).scroll(function() {
        if ($(window).width() > 768) {
            var st = $(this).scrollTop();
            if (st > lastScrollTop && st > 300) {
                // Scrolling down - Hide
                $('#floatingMenu').css('right', '-200px');
            } else {
                // Scrolling up - Show
                $('#floatingMenu').css('right', '20px');
            }
            lastScrollTop = st;
        }
    });

    // --- Original Functionality ---
    $('#menuHeader').click(function() {
        $('#floatingMenu').toggleClass('collapsed');
    });
    
    $('#menuToggle').click(function() {
        $('#floatingMenu').toggleClass('mobile-visible');
    });
    
    $(document).click(function(event) {
        if ($(window).width() <= 768) {
            if (!$(event.target).closest('#floatingMenu, #menuToggle').length) {
                $('#floatingMenu').removeClass('mobile-visible');
            }
        }
    });
});