557
edits
Main Page:mediawiki:common.js: Difference between revisions
no edit summary
(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); }); | ||
})(); | })(); | ||