MediaWiki:Common.js: Difference between revisions

From Medalist Wiki
No edit summary
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
// MediaWiki:Common.js
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
mw.loader.using(['mediawiki.api', 'mediawiki.util'], function() {
     $(function() {
     $(function() {
         // Create a single unified toggle button with dropdown
         // Create a simpler toggle that matches the existing navigation style
         var $toggleContainer = $('<li class="vector-menu-dropdown vector-menu vector-menu-portal mw-list-item" id="content-mode-toggle">' +
         var $toggleContainer = $(
            '<a class="vector-menu-heading vector-menu-checkbox-expanded">' +
            '<div class="content-mode-selector">' +
            '<span class="vector-menu-heading-label">Mode: </span>' +
                '<div class="mode-toggle vector-menu-heading">' +
            '<span class="mode-label">Anime</span>' +
                    'Mode: <span class="mode-label">Anime</span>' +
            '</a>' +
                '</div>' +
            '<div class="vector-menu-content">' +
                '<div class="mode-options">' +
            '<ul class="menu">' +
                    '<a class="mode-option" data-mode="anime">Caught up to Anime</a>' +
            '<li data-mode="anime"><a>Caught up to Anime</a></li>' +
                    '<a class="mode-option" data-mode="manga">Caught up to Manga</a>' +
            '<li data-mode="manga"><a>Caught up to Manga</a></li>' +
                '</div>' +
            '</ul>' +
             '</div>'
             '</div>' +
        );
            '</li>');


         // Insert at the start of the left navigation
         // Insert it after the existing Mode: Manga text
         $('#mw-panel .vector-menu-portal:first').before($toggleContainer);
         $('.vector-menu-portal:first').prepend($toggleContainer);
          
          
         // Get user's current preference
         // Initialize with stored preference
         var currentMode = localStorage.getItem('contentMode') || 'anime';
         var currentMode = localStorage.getItem('contentMode') || 'anime';
         updateContentDisplay(currentMode);
         updateContentDisplay(currentMode);
          
          
         // Handle toggle clicks
         // Handle mode selection
         $('#content-mode-toggle .menu li').on('click', function() {
         $('.mode-option').on('click', function(e) {
            e.preventDefault();
             var mode = $(this).data('mode');
             var mode = $(this).data('mode');
             localStorage.setItem('contentMode', mode);
             localStorage.setItem('contentMode', mode);
Line 30: Line 31:
         });
         });


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


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

Revision as of 17:57, 6 February 2025

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