MediaWiki:Common.js

/* Any JavaScript here will be loaded for all users on every page load. */
// MediaWiki:Common.js
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
    $(function() {
        // Create a simple mode selector as a normal navigation item
        var $modeSelector = $(
            '<li class="mw-list-item mode-nav-item">' +
                '<span class="mode-text">Mode: <span class="current-mode">Anime</span></span>' +
                '<div class="mode-menu">' +
                    '<a class="mode-option" data-mode="anime">Anime Mode</a>' +
                    '<a class="mode-option" data-mode="manga">Manga Mode</a>' +
                '</div>' +
            '</li>'
        );

        // Insert it into the navigation list at the top
        $('#mw-navigation .vector-menu-content ul').first().prepend($modeSelector);
        
        // Initialize from stored preference
        var currentMode = localStorage.getItem('contentMode') || 'anime';
        updateContentDisplay(currentMode);
        
        // Handle mode selection
        $('.mode-option').on('click', function(e) {
            e.preventDefault();
            var mode = $(this).data('mode');
            localStorage.setItem('contentMode', mode);
            updateContentDisplay(mode);
            $('.mode-menu').removeClass('visible');
        });

        // Toggle menu visibility
        $('.mode-text').on('click', function(e) {
            e.preventDefault();
            $('.mode-menu').toggleClass('visible');
        });

        // Close menu when clicking elsewhere
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.mode-nav-item').length) {
                $('.mode-menu').removeClass('visible');
            }
        });
    });
});

function updateContentDisplay(mode) {
    // Update content visibility
    $('.manga-content, .anime-content').hide();
    if (mode === 'manga') {
        $('.manga-content, .anime-content').show();
    } else {
        $('.anime-content').show();
    }
    
    // Update the mode display text
    $('.current-mode').text(mode.charAt(0).toUpperCase() + mode.slice(1));
    
    // Update active state in menu
    $('.mode-option').removeClass('active');
    $('.mode-option[data-mode="' + mode + '"]').addClass('active');
}