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 simple mode selector as a normal navigation item
var $modeSelector = $(
'<li class="mw-list-item mode-nav-item">' +
'<span class="mode-text">Mode: <span class="current-mode">Anime</span></span>' +
'<div class="mode-menu">' +
'<a class="mode-option" data-mode="anime">Anime Mode</a>' +
'<a class="mode-option" data-mode="manga">Manga Mode</a>' +
'</div>' +
'</li>'
);
// Insert it into the navigation list at the top
$('#mw-navigation .vector-menu-content ul').first().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-text').on('click', function(e) {
e.preventDefault();
$('.mode-menu').toggleClass('visible');
});
// Close menu when clicking elsewhere
$(document).on('click', function(e) {
if (!$(e.target).closest('.mode-nav-item').length) {
$('.mode-menu').removeClass('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 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');
}