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 the toggle button with a more modern style matching your toolbar
        var $toggleButton = $('<a id="content-toggle" class="mw-echo-notifications-badge">' +
            '<span>Content Mode</span>' +
            '</a>');
        
        var $toggleMenu = $('<div class="content-toggle-menu vector-menu-content">' +
            '<ul>' +
            '<li data-mode="anime"><a>Caught up to Anime</a></li>' +
            '<li data-mode="manga"><a>Caught up to Manga</a></li>' +
            '</ul>' +
            '</div>');
        
        // Insert next to your other toolbar items
        $('.vector-user-links, #p-personal').append(
            $('<li class="mw-list-item" id="pt-content-toggle"></li>').append($toggleButton)
        );
        $toggleButton.after($toggleMenu);
        
        // Get user's current preference
        var currentMode = localStorage.getItem('contentMode') || 'anime';
        updateContentDisplay(currentMode);
        
        // Handle toggle clicks
        $('.content-toggle-menu li').on('click', function() {
            var mode = $(this).data('mode');
            localStorage.setItem('contentMode', mode);
            updateContentDisplay(mode);
        });
    });
});

function updateContentDisplay(mode) {
    $('.manga-content, .anime-content').hide();
    
    if (mode === 'manga') {
        $('.manga-content, .anime-content').show();
    } else {
        $('.anime-content').show();
    }
    
    // Update visual state in menu
    $('.content-toggle-menu li').removeClass('active');
    $('.content-toggle-menu li[data-mode="' + mode + '"]').addClass('active');
    
    // Update button text to show current mode
    $('#content-toggle span').text('Mode: ' + (mode === 'manga' ? 'Manga' : 'Anime'));
}