Main Page:mediawiki:common.js: Difference between revisions
Jump to navigation
Jump to search
(Created page with "→Auto-wrap nearly all content tables for horizontal scrolling on small screens. Excludes common layout/meta tables and those explicitly marked .no-responsive. Also (re)initializes sorting and collapsible behavior on both desktop & mobile.: (function () { // Initialize features (sortable + collapsible) in a safe, mobile-friendly way function initTableFeatures($root) { mw.loader.using(['jquery.tablesorter', 'jquery.makeCollapsible']).then(function () {...") |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* ========================================================== | ||
MediaWiki:Common.js | |||
Purpose: Ensure tables are responsive, sortable, and collapsible | |||
across desktop (Vector) and mobile (Minerva). | |||
========================================================== */ | |||
(function () { | (function () { | ||
/ | /* --- Wrap tables for responsive scrolling --- */ | ||
function wrapTables($root) { | function wrapTables($root) { | ||
var $scope = $root.find('.mw-parser-output').addBack('.mw-parser-output'); | var $scope = $root.find('.mw-parser-output').addBack('.mw-parser-output'); | ||
if (!$scope.length) $scope = $root; | if (!$scope.length) $scope = $root; | ||
| Line 33: | Line 15: | ||
var $table = $(this); | var $table = $(this); | ||
// Skip if already wrapped, or | // Skip if already wrapped, or marked no-responsive | ||
if ($table.closest('.table-responsive').length) return; | if ($table.closest('.table-responsive').length) return; | ||
if ($table.hasClass('no-responsive')) return; | if ($table.hasClass('no-responsive')) return; | ||
// Skip common layout/meta tables | // Skip common layout/meta tables | ||
if ($table.is('.infobox, .navbox, .toc, .metadata')) return; | if ($table.is('.infobox, .navbox, .toc, .metadata')) return; | ||
// | // Use caption as label if present | ||
var label = 'Scrollable table'; | var label = 'Scrollable table'; | ||
var $cap = $table.children('caption').first(); | var $cap = $table.children('caption').first(); | ||
| Line 48: | Line 30: | ||
} | } | ||
// | // Wrap with scrollable div | ||
var $wrapper = $('<div>', { | var $wrapper = $('<div>', { | ||
'class': 'table-responsive', | 'class': 'table-responsive', | ||
| Line 61: | Line 43: | ||
} | } | ||
/* --- Initialize collapsible tables --- */ | |||
function initCollapsible($root) { | |||
mw.loader.using('jquery.makeCollapsible').then(function () { | |||
$root.find('.mw-collapsible').each(function () { | |||
var $c = $(this); | |||
if (!$c.data('collapsible-initialized')) { | |||
$c.makeCollapsible(); | |||
$c.data('collapsible-initialized', true); | |||
} | |||
}); | |||
}); | |||
} | |||
/* --- Initialize sortable tables --- */ | |||
function initSortable($root) { | |||
mw.loader.using(['jquery.tablesorter', 'jquery.tablesorter.styles']).then(function () { | |||
$root.find('table.sortable').each(function () { | |||
var $t = $(this); | |||
if (!$t.hasClass('tablesorter-processed')) { | |||
$t.tablesorter(); | |||
} | |||
}); | |||
}); | |||
} | |||
/* --- Enhance page content --- */ | |||
function enhance($content) { | function enhance($content) { | ||
wrapTables($content); | wrapTables($content); | ||
initCollapsible($content); | |||
initSortable($content); | |||
} | } | ||
/ | /* Run on initial load */ | ||
$(function () { enhance($(document)); }); | $(function () { enhance($(document)); }); | ||
/ | /* Run again when new content is injected (e.g., VisualEditor, AJAX) */ | ||
mw.hook('wikipage.content').add(function ($content) { enhance($content); }); | mw.hook('wikipage.content').add(function ($content) { enhance($content); }); | ||
})(); | })(); | ||
Revision as of 16:32, 26 August 2025
/* ==========================================================
MediaWiki:Common.js
Purpose: Ensure tables are responsive, sortable, and collapsible
across desktop (Vector) and mobile (Minerva).
========================================================== */
(function () {
/* --- Wrap tables for responsive scrolling --- */
function wrapTables($root) {
var $scope = $root.find('.mw-parser-output').addBack('.mw-parser-output');
if (!$scope.length) $scope = $root;
$scope.find('table').each(function () {
var $table = $(this);
// Skip if already wrapped, or marked no-responsive
if ($table.closest('.table-responsive').length) return;
if ($table.hasClass('no-responsive')) return;
// Skip common layout/meta tables
if ($table.is('.infobox, .navbox, .toc, .metadata')) return;
// Use caption as label if present
var label = 'Scrollable table';
var $cap = $table.children('caption').first();
if ($cap.length) {
var capText = ($cap.text() || ).trim();
if (capText) label = 'Scrollable table: ' + capText;
}
// Wrap with scrollable div
var $wrapper = $('
', {
'class': 'table-responsive',
'role': 'region',
'aria-label': label,
'tabindex': 0
});
$table.before($wrapper);
$wrapper.append($table);
});
}
/* --- Initialize collapsible tables --- */
function initCollapsible($root) {
mw.loader.using('jquery.makeCollapsible').then(function () {
$root.find('.mw-collapsible').each(function () {
var $c = $(this);
if (!$c.data('collapsible-initialized')) {
$c.makeCollapsible();
$c.data('collapsible-initialized', true);
}
});
});
}
/* --- Initialize sortable tables --- */
function initSortable($root) {
mw.loader.using(['jquery.tablesorter', 'jquery.tablesorter.styles']).then(function () {
$root.find('table.sortable').each(function () {
var $t = $(this);
if (!$t.hasClass('tablesorter-processed')) {
$t.tablesorter();
}
});
});
}
/* --- Enhance page content --- */
function enhance($content) {
wrapTables($content);
initCollapsible($content);
initSortable($content);
}
/* Run on initial load */
$(function () { enhance($(document)); });
/* Run again when new content is injected (e.g., VisualEditor, AJAX) */
mw.hook('wikipage.content').add(function ($content) { enhance($content); });
})();