MediaWiki:Common.js
From Hidden Mickey Wiki
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. */
// JavaScript code to save checkbox state and restore it when the page loads
$(document).ready(function() {
// Function to save the state of checkboxes to localStorage
function saveCheckboxState() {
$('input[type="checkbox"]').each(function() {
localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
});
}
// Function to load the state of checkboxes from localStorage
function loadCheckboxState() {
$('input[type="checkbox"]').each(function() {
const savedState = localStorage.getItem($(this).attr('id'));
if (savedState !== null) {
$(this).prop('checked', savedState === 'true');
}
});
}
// Load the saved checkbox state when the page is loaded
loadCheckboxState();
// Save the checkbox state whenever a checkbox is changed
$('input[type="checkbox"]').change(function() {
saveCheckboxState();
});
});
// Adjust the search box width
$(document).ready(function () {
$('#searchInput').css('width', '600px'); // Adjust width as needed
});
/* === Settings dropdown (site-wide) ===
Put this in MediaWiki:Common.js
*/
mw.loader.using(['mediawiki.util']).done(function () {
$(function () {
// Helper to build menu items (edit this array to change links)
var menuItems = [
{ title: 'Preferences', page: 'Special:Preferences' },
{ title: 'Watchlist', page: 'Special:Watchlist' },
{ title: 'My talk', page: 'Special:MyTalk' },
{ title: 'Recent changes', page: 'Special:RecentChanges' }
];
// Build DOM
var $menu = $('<div id="mw-settings-dropdown" class="mw-settings-dropdown" role="navigation" aria-label="Settings"></div>');
var $button = $('<button class="mw-settings-button" aria-haspopup="true" aria-expanded="false" aria-controls="mw-settings-list">Settings ▾</button>');
var $list = $('<ul id="mw-settings-list" class="mw-settings-list" hidden></ul>');
menuItems.forEach(function (it) {
var href = mw.util.getUrl(it.page);
var $li = $('<li></li>');
var $a = $('<a></a>').attr('href', href).text(it.title);
$li.append($a);
$list.append($li);
});
$menu.append($button, $list);
// Try several insertion targets (common across skins); first match wins
var targets = [
'#mw-navbar-right', // Tweeki / some custom headers
'#p-personal', // older Vector / MonoBook personal tools container
'#mw-head-base', // some skins
'#mw-head', // fallback header container
'#p-navigation', // left nav
'body' // ultimate fallback
];
var inserted = false;
for (var i = 0; i < targets.length; i++) {
var $t = $(targets[i]).first();
if ($t.length) {
// If target has a UL (portlet), insert as <li> there; else append the widget
var $ul = $t.is('ul') ? $t : $t.find('ul').first();
if ($ul && $ul.length) {
// wrap dropdown in an <li> so markup fits portlet lists
var $liWrap = $('<li id="pt-settings" class="mw-portlet-item"></li>');
$liWrap.append($menu);
$ul.append($liWrap);
} else {
$t.append($menu);
}
inserted = true;
break;
}
}
if (!inserted) $('body').append($menu);
// Toggle behavior (click / outside click / keyboard)
$button.on('click', function (e) {
var expanded = $(this).attr('aria-expanded') === 'true';
if (expanded) {
$(this).attr('aria-expanded', 'false');
$list.attr('hidden', 'hidden');
} else {
$(this).attr('aria-expanded', 'true');
$list.removeAttr('hidden');
$list.find('a').first().focus();
}
e.stopPropagation();
});
// Close if clicking outside
$(document).on('click', function () {
$button.attr('aria-expanded', 'false');
$list.attr('hidden', 'hidden');
});
$menu.on('click', function (e) { e.stopPropagation(); });
// Keyboard: Esc closes; Down/Enter/Space opens
$(document).on('keydown', function (e) {
if (e.key === 'Escape') {
$button.attr('aria-expanded', 'false');
$list.attr('hidden', 'hidden');
}
});
$button.on('keydown', function (e) {
if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
$button.click();
}
});
});
});