MediaWiki:Common.js: Difference between revisions

Revision as of 22:56, 20 February 2026

$(document).ready(function() {
    // 1. Define HTML for both elements
    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 them to the body
    $('body').append(topButtonHTML + menuHTML);

    // 3. TOP BUTTON LOGIC: Smooth Scroll & Fade In/Out
    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) {
            $('.back-to-top-fixed').fadeIn();
        } else {
            $('.back-to-top-fixed').fadeOut();
        }
    });

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

    // 4. MENU LOGIC: 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"
            });
        }
    });

    // 5. MENU LOGIC: Hide Menu on Scroll Down (Desktop Only)
    var lastScrollTop = 0;
    $(window).scroll(function() {
        if ($(window).width() > 768) {
            var st = $(this).scrollTop();
            if (st > lastScrollTop && st > 500) {
                // Scrolling down - slide menu away
                $('#floatingMenu').css('right', '-220px');
            } else {
                // Scrolling up - bring menu back
                $('#floatingMenu').css('right', '20px');
            }
            lastScrollTop = st;
        }
    });

    // 6. TOGGLE EVENTS
    $('#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');
            }
        }
    });
});

var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
$('#scroll-progress').css("width", scrolled + "%");