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() {
    // Create toggle button in user menu
    $(function() {
        var $toggleButton = $('<li id="content-toggle"><span>Toggle Content Mode</span></li>');
        var $toggleMenu = $('<ul class="content-toggle-menu">' +
            '<li data-mode="anime">Caught up to Anime</li>' +
            '<li data-mode="manga">Caught up to Manga</li>' +
            '</ul>');
        
        $('#p-personal ul').append($toggleButton);
        $toggleButton.append($toggleMenu);
        
        // Get user's current preference from localStorage
        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) {
    // Hide all spoiler content first
    $('.manga-content, .anime-content').hide();
    
    // Show content based on selected mode
    if (mode === 'manga') {
        $('.manga-content, .anime-content').show();
    } else {
        $('.anime-content').show();
    }
    
    // Update active state in menu
    $('.content-toggle-menu li').removeClass('active');
    $('.content-toggle-menu li[data-mode="' + mode + '"]').addClass('active');
}

// MediaWiki:Common.css
#content-toggle {
    position: relative;
    cursor: pointer;
}

.content-toggle-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #a2a9b1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 5px 0;
    min-width: 160px;
}

#content-toggle:hover .content-toggle-menu {
    display: block;
}

.content-toggle-menu li {
    padding: 5px 15px;
    cursor: pointer;
}

.content-toggle-menu li:hover {
    background: #eaecf0;
}

.content-toggle-menu li.active {
    background: #36c;
    color: #fff;
}

/* Template for marking content */
<div class="manga-content">
This content is only visible when "Caught up to Manga" is selected
</div>

<div class="anime-content">
This content is visible to all users
</div>