MediaWiki:Common.js: Difference between revisions

Revision as of 00:36, 21 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>
    `;

    $('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');
    }
});

// Dark mode toggle with better positioning
$(document).ready(function() {
    // Check if button already exists
    if ($('#dark-mode-toggle').length === 0) {
        // Create button with better visibility
        $('body').append(
            '<div id="dark-mode-toggle" style="' +
                'position: fixed; ' +
                'bottom: 20px; ' +
                'right: 20px; ' +
                'width: 50px; ' +
                'height: 50px; ' +
                'border-radius: 25px; ' +
                'background-color: #36c; ' +
                'color: white; ' +
                'text-align: center; ' +
                'line-height: 50px; ' +
                'cursor: pointer; ' +
                'font-size: 24px; ' +
                'z-index: 10000; ' +
                'box-shadow: 0 4px 8px rgba(0,0,0,0.3); ' +
                'border: 2px solid white; ' +
                'font-family: Arial, sans-serif;' +
            '">🌙</div>'
        );
    }
    
    // Check for saved preference
    if (localStorage.getItem('darkMode') === 'enabled') {
        enableDarkMode();
        $('#dark-mode-toggle').text('☀️'); // Sun icon when dark mode is on
    }
    
    $('#dark-mode-toggle').off('click').on('click', function() {
        if ($('body').hasClass('dark-mode')) {
            disableDarkMode();
            $(this).text('🌙'); // Moon icon
        } else {
            enableDarkMode();
            $(this).text('☀️'); // Sun icon
        }
    });
});

function enableDarkMode() {
    $('body').addClass('dark-mode');
    localStorage.setItem('darkMode', 'enabled');
    
    // Remove existing styles if any
    $('#dark-mode-styles').remove();
    
    // Add CSS dynamically
    var darkModeCSS = `
        body.dark-mode {
            background-color: #1a1a1a !important;
            color: #e0e0e0 !important;
        }
        body.dark-mode #content,
        body.dark-mode #mw-content-text,
        body.dark-mode .mw-body-content {
            background-color: #2d2d2d !important;
            color: #e0e0e0 !important;
        }
        body.dark-mode a:not(#dark-mode-toggle) {
            color: #8cb4ff !important;
        }
        body.dark-mode a:visited:not(#dark-mode-toggle) {
            color: #b38cff !important;
        }
        body.dark-mode #mw-head,
        body.dark-mode #mw-panel {
            background-color: #333 !important;
        }
        body.dark-mode .mw-footer {
            background-color: #333 !important;
            color: #ccc !important;
            border-color: #444 !important;
        }
        body.dark-mode h1, 
        body.dark-mode h2, 
        body.dark-mode h3, 
        body.dark-mode h4, 
        body.dark-mode h5, 
        body.dark-mode h6 {
            color: #fff !important;
            border-color: #444 !important;
        }
        body.dark-mode table {
            background-color: #2d2d2d !important;
            border-color: #444 !important;
        }
        body.dark-mode td, 
        body.dark-mode th {
            border-color: #444 !important;
        }
        body.dark-mode .catlinks {
            background-color: #333 !important;
            border-color: #444 !important;
        }
    `;
    
    $('head').append('<style id="dark-mode-styles">' + darkModeCSS + '</style>');
}

function disableDarkMode() {
    $('body').removeClass('dark-mode');
    localStorage.setItem('darkMode', 'disabled');
    $('#dark-mode-styles').remove();
}