MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

$(document).ready(function() {
    // ===========================================
    // Remove any existing elements first
    // ===========================================
    $('.floating-menu, .floating-menu-toggle, .back-to-top-fixed').remove();
    
    // ===========================================
    // Add both elements at once
    // ===========================================
    var elementsHTML = `
        <!-- Quick Nav Menu -->
        <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>
        
        <!-- Mobile Menu Toggle -->
        <div class="floating-menu-toggle" id="menuToggle">☰</div>
        
        <!-- Back to Top Button -->
        <div class="back-to-top-fixed" id="backToTop">
            <a href="#">↑ TOP</a>
        </div>
        
        <!-- Progress Bar -->
        <div id="scroll-progress"></div>
    `;
    
    // Append all elements at once
    $('body').append(elementsHTML);
    
    // ===========================================
    // Log to confirm elements were added
    // ===========================================
    console.log('Quick Nav added:', $('#floatingMenu').length);
    console.log('Back to Top added:', $('#backToTop').length);
    console.log('Progress Bar added:', $('#scroll-progress').length);
    
    // ===========================================
    // Scroll Handler
    // ===========================================
    var lastScrollTop = 0;
    
    $(window).scroll(function() {
        var st = $(this).scrollTop();
        
        // Progress Bar
        var docHeight = $(document).height() - $(window).height();
        var scrolled = (st / docHeight) * 100;
        $('#scroll-progress').css("width", scrolled + "%");
        
        // Back to Top Button
        if (st > 300) { 
            $('#backToTop').fadeIn(300); 
        } else { 
            $('#backToTop').fadeOut(300); 
        }
        
        // 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;
    });
    
    // ===========================================
    // Toggle Events
    // ===========================================
    $('#menuHeader').click(function() { 
        $('#floatingMenu').toggleClass('collapsed'); 
    });
    
    $('#menuToggle').click(function(e) { 
        e.stopPropagation();
        $('#floatingMenu').toggleClass('mobile-visible');
        
        // Close menu when clicking outside
        $(document).one('click', function(e) {
            if (!$(e.target).closest('#floatingMenu, #menuToggle').length) {
                $('#floatingMenu').removeClass('mobile-visible');
            }
        });
    });
    
    // Close menu with Escape key
    $(document).keyup(function(e) {
        if (e.key === "Escape") {
            $('#floatingMenu').removeClass('mobile-visible');
        }
    });
    
    // ===========================================
    // Back to Top Click Handler
    // ===========================================
    $('#backToTop a').click(function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 400);
        
        // Button feedback
        $(this).css('transform', 'scale(0.9)');
        setTimeout(() => {
            $(this).css('transform', 'scale(1)');
        }, 200);
    });
    
    // ===========================================
    // Section Tracker
    // ===========================================
    function updateActiveSection() {
        var currentPath = window.location.pathname;
        $('.floating-menu-items a').each(function() {
            var href = $(this).attr('href');
            if (currentPath.includes(href) || currentPath === href) {
                $(this).addClass('reading-now');
            } else {
                $(this).removeClass('reading-now');
            }
        });
    }
    
    updateActiveSection();
    
    // ===========================================
    // Hover Effects
    // ===========================================
    $('#backToTop a').hover(
        function() { 
            $(this).css({
                'background': 'linear-gradient(135deg, #FF7A20, #F4B400)',
                'transform': 'translateY(-5px) scale(1.1)',
                'box-shadow': '0 6px 20px rgba(0,0,0,0.4)'
            });
        },
        function() { 
            $(this).css({
                'background': 'linear-gradient(135deg, #FF6A00, #D93800)',
                'transform': 'translateY(0) scale(1)',
                'box-shadow': '0 4px 15px rgba(0,0,0,0.3)'
            });
        }
    );
    
    // ===========================================
    // Responsive Handler
    // ===========================================
    $(window).resize(function() {
        if ($(window).width() > 768) {
            $('#floatingMenu').removeClass('mobile-visible');
            $('#floatingMenu').css('right', '20px');
        } else {
            $('#floatingMenu').css('right', '');
        }
    });
    
    // ===========================================
    // Initialize states
    // ===========================================
    // Check if menu should start collapsed
    if (localStorage.getItem('quickNavCollapsed') === 'true') {
        $('#floatingMenu').addClass('collapsed');
    }
    
    // Save collapse state
    $('#menuHeader').click(function() {
        localStorage.setItem('quickNavCollapsed', $('#floatingMenu').hasClass('collapsed'));
    });
    
    // ===========================================
    // Smooth Scrolling for Anchor Links
    // ===========================================
    $('a[href^="#"]').not('.no-smooth').on('click', function(e) {
        e.preventDefault();
        var target = $(this.hash);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 60
            }, 500);
        }
    });
    
    console.log('✅ All elements initialized successfully');
});