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. */
// MediaWiki:Common.js
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
    $(function() {
        // Create a prominent button-style mode selector
        var $modeSelector = $(
            '<div class="mode-selector-container">' +
                '<button class="mode-toggle-button">' +
                    '<span class="current-mode-label">Currently viewing: </span>' +
                    '<span class="current-mode">Anime</span> content' +
                    '<span class="toggle-arrow">▼</span>' +
                '</button>' +
                '<div class="mode-menu">' +
                    '<div class="mode-menu-header">Select Content Mode:</div>' +
                    '<a class="mode-option" data-mode="anime">' +
                        '<span class="mode-title">Anime Mode</span>' +
                        '<span class="mode-description">Show content up to the latest anime episode</span>' +
                    '</a>' +
                    '<a class="mode-option" data-mode="manga">' +
                        '<span class="mode-title">Manga Mode</span>' +
                        '<span class="mode-description">Show all content including manga spoilers</span>' +
                    '</a>' +
                '</div>' +
            '</div>'
        );

        // Insert it at the top of the navigation area
        $('#mw-navigation').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-toggle-button').on('click', function(e) {
            e.preventDefault();
            $('.mode-menu').toggleClass('visible');
            $(this).toggleClass('active');
            $('.toggle-arrow').text($('.mode-menu').hasClass('visible') ? '▲' : '▼');
        });

        // Close menu when clicking elsewhere
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.mode-selector-container').length) {
                $('.mode-menu').removeClass('visible');
                $('.mode-toggle-button').removeClass('active');
                $('.toggle-arrow').text('▼');
            }
        });
    });
});

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