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.

/* Any JavaScript here will be loaded for all users on every page load. */
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
    $(function() {
        // Create a single unified toggle button with dropdown
        var $toggleContainer = $('<li class="vector-menu-dropdown vector-menu vector-menu-portal mw-list-item" id="content-mode-toggle">' +
            '<a class="vector-menu-heading vector-menu-checkbox-expanded">' +
            '<span class="vector-menu-heading-label">Mode: </span>' +
            '<span class="mode-label">Anime</span>' +
            '</a>' +
            '<div class="vector-menu-content">' +
            '<ul class="menu">' +
            '<li data-mode="anime"><a>Caught up to Anime</a></li>' +
            '<li data-mode="manga"><a>Caught up to Manga</a></li>' +
            '</ul>' +
            '</div>' +
            '</li>');

        // Insert at the start of the left navigation
        $('#mw-panel .vector-menu-portal:first').before($toggleContainer);
        
        // Get user's current preference
        var currentMode = localStorage.getItem('contentMode') || 'anime';
        updateContentDisplay(currentMode);
        
        // Handle toggle clicks
        $('#content-mode-toggle .menu li').on('click', function() {
            var mode = $(this).data('mode');
            localStorage.setItem('contentMode', mode);
            updateContentDisplay(mode);
        });

        // Toggle dropdown on click
        $('#content-mode-toggle > a').on('click', function(e) {
            e.preventDefault();
            $('#content-mode-toggle').toggleClass('vector-menu-expanded');
        });
    });
});

function updateContentDisplay(mode) {
    $('.manga-content, .anime-content').hide();
    
    if (mode === 'manga') {
        $('.manga-content, .anime-content').show();
    } else {
        $('.anime-content').show();
    }
    
    // Update menu state
    $('#content-mode-toggle .menu li').removeClass('active');
    $('#content-mode-toggle .menu li[data-mode="' + mode + '"]').addClass('active');
    
    // Update label
    $('#content-mode-toggle .mode-label').text(mode.charAt(0).toUpperCase() + mode.slice(1));
}