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() {
    // 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>
    `;

    $('body').append(progressBarHTML + topButtonHTML + menuHTML);

    var lastScrollTop = 0;

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

        // B. Top Button Fade
        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;

        // D. Section Tracker: Highlights the link if the URL matches current page
        var currentPath = window.location.pathname;
        $('.floating-menu-items a').each(function() {
            if (currentPath.includes($(this).attr('href'))) {
                $(this).addClass('reading-now');
            } else {
                $(this).removeClass('reading-now');
            }
        });
    });

    // Toggle Events
    $('#menuHeader').click(function() { $('#floatingMenu').toggleClass('collapsed'); });
    $('#menuToggle').click(function() { $('#floatingMenu').toggleClass('mobile-visible'); });
    $('.back-to-top-fixed a').click(function(e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 400);
    });
});

// Add smooth scrolling to anchor links
$(document).ready(function() {
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.hash);
        if (target.length) {
            $('html, body').animate({
                scrollTop: target.offset().top - 50
            }, 500);
        }
    });
});

// Sticky header on scroll
$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('#mw-head').addClass('sticky-header');
    } else {
        $('#mw-head').removeClass('sticky-header');
    }
});

// Custom collapsible for Ragnawiki
$(document).ready(function() {
    // Find all collapsible containers
    $('.mw-collapsible').each(function() {
        var $container = $(this);
        
        // Find the header (first element with ragnawiki-card-header class)
        var $header = $container.find('.ragnawiki-card-header').first();
        
        if ($header.length) {
            // Make header clickable
            $header.css('cursor', 'pointer');
            
            // Add click handler
            $header.on('click', function(e) {
                e.preventDefault();
                
                // Toggle collapsed class
                if ($container.hasClass('mw-collapsed')) {
                    $container.removeClass('mw-collapsed');
                } else {
                    $container.addClass('mw-collapsed');
                }
            });
            
            // Ensure content is hidden if container has mw-collapsed class
            if ($container.hasClass('mw-collapsed')) {
                $container.find('.mw-collapsible-content').hide();
            } else {
                $container.find('.mw-collapsible-content').show();
            }
        }
    });
    
    // Also handle nested collapsibles inside Past Heroes section
    $('.ragnawiki-card .mw-collapsible').each(function() {
        var $container = $(this);
        var $header = $container.find('.ragnawiki-card-header').first();
        
        if ($header.length) {
            $header.css('cursor', 'pointer');
            
            $header.on('click', function(e) {
                e.preventDefault();
                
                if ($container.hasClass('mw-collapsed')) {
                    $container.removeClass('mw-collapsed');
                } else {
                    $container.addClass('mw-collapsed');
                }
            });
            
            if ($container.hasClass('mw-collapsed')) {
                $container.find('.mw-collapsible-content').hide();
            } else {
                $container.find('.mw-collapsible-content').show();
            }
        }
    });
});

// Ragnawiki Custom Collapsible
(function() {
    // Function to initialize collapsibles
    function initRagnawikiCollapsible() {
        // Find all collapsible containers
        var containers = document.querySelectorAll('.mw-collapsible');
        
        containers.forEach(function(container) {
            // Find the header (first element with ragnawiki-card-header class)
            var header = container.querySelector('.ragnawiki-card-header');
            
            if (header && !header.hasAttribute('data-collapsible-initialized')) {
                // Mark as initialized
                header.setAttribute('data-collapsible-initialized', 'true');
                
                // Set cursor style
                header.style.cursor = 'pointer';
                
                // Get the content
                var content = container.querySelector('.mw-collapsible-content');
                
                if (content) {
                    // Initially hide if container has mw-collapsed class
                    if (container.classList.contains('mw-collapsed')) {
                        content.style.display = 'none';
                    } else {
                        content.style.display = 'block';
                    }
                    
                    // Add click handler
                    header.addEventListener('click', function(e) {
                        e.preventDefault();
                        
                        // Toggle collapsed class
                        if (container.classList.contains('mw-collapsed')) {
                            container.classList.remove('mw-collapsed');
                            content.style.display = 'block';
                        } else {
                            container.classList.add('mw-collapsed');
                            content.style.display = 'none';
                        }
                    });
                }
            }
        });
    }
    
    // Run when DOM is loaded
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initRagnawikiCollapsible);
    } else {
        initRagnawikiCollapsible();
    }
    
    // Also run after MediaWiki's JavaScript (in case it modifies the DOM)
    if (typeof mw !== 'undefined' && mw.hook) {
        mw.hook('wikipage.content').add(initRagnawikiCollapsible);
    }
})();