MediaWiki:Common.js: Difference between revisions
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 | // Create a simpler toggle that matches the existing navigation style | ||
var $toggleContainer = $('< | 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>' | |||
'</div>' | ); | ||
// Insert | // Insert it after the existing Mode: Manga text | ||
$(' | $('.vector-menu-portal:first').prepend($toggleContainer); | ||
// | // Initialize with stored preference | ||
var currentMode = localStorage.getItem('contentMode') || 'anime'; | var currentMode = localStorage.getItem('contentMode') || 'anime'; | ||
updateContentDisplay(currentMode); | updateContentDisplay(currentMode); | ||
// Handle | // Handle mode selection | ||
$(' | $('.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 | // Toggle options visibility | ||
$(' | $('.mode-toggle').on('click', function() { | ||
$('.mode-options').toggleClass('visible'); | |||
$(' | |||
}); | }); | ||
}); | }); | ||
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 | // Update interface | ||
$(' | $('.mode-label').text(mode.charAt(0).toUpperCase() + mode.slice(1)); | ||
$(' | $('.mode-option').removeClass('active'); | ||
$('.mode-option[data-mode="' + mode + '"]').addClass('active'); | |||
} | } |
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');
}