MediaWiki:Common.js

From Medalist Wiki
Revision as of 17:57, 6 February 2025 by Zhiktang (talk | contribs)

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 simpler toggle that matches the existing navigation style
        var $toggleContainer = $(
            '<div class="content-mode-selector">' +
                '<div class="mode-toggle vector-menu-heading">' +
                    'Mode: <span class="mode-label">Anime</span>' +
                '</div>' +
                '<div class="mode-options">' +
                    '<a class="mode-option" data-mode="anime">Caught up to Anime</a>' +
                    '<a class="mode-option" data-mode="manga">Caught up to Manga</a>' +
                '</div>' +
            '</div>'
        );

        // Insert it after the existing Mode: Manga text
        $('.vector-menu-portal:first').prepend($toggleContainer);
        
        // Initialize with 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);
        });

        // Toggle options visibility
        $('.mode-toggle').on('click', function() {
            $('.mode-options').toggleClass('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 interface
    $('.mode-label').text(mode.charAt(0).toUpperCase() + mode.slice(1));
    $('.mode-option').removeClass('active');
    $('.mode-option[data-mode="' + mode + '"]').addClass('active');
}