Main Page:mediawiki:common.js

/* 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 () {
     $root.find('table.sortable').each(function () {
       var $t = $(this);
       if (!$t.data('tablesorter-initialized')) {
         $t.tablesorter();
         $t.data('tablesorter-initialized', true);
       }
     });
     $root.find('.mw-collapsible').each(function () {
       var $c = $(this);
       if (!$c.data('collapsible-initialized')) {
         $c.makeCollapsible();
         $c.data('collapsible-initialized', true);
       }
     });
   });
 }

 // Wrap tables with a11y-friendly scroll container
 function wrapTables($root) {
   // Limit to page content; safer across skins
   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 explicitly opted out
     if ($table.closest('.table-responsive').length) return;
     if ($table.hasClass('no-responsive')) return;

     // Skip common layout/meta tables to avoid weird visuals
     if ($table.is('.infobox, .navbox, .toc, .metadata')) return;

     // Build accessible label from caption 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;
     }

     // Create wrapper and move table inside

var $wrapper = $('

', {

       'class': 'table-responsive',
       'role': 'region',
       'aria-label': label,
       'tabindex': 0
     });

     $table.before($wrapper);
     $wrapper.append($table);
   });
 }

 function enhance($content) {
   wrapTables($content);
   initTableFeatures($content);
 }

 // Run on initial page load
 $(function () { enhance($(document)); });

 // Run on content updates (VisualEditor, previews, AJAX, etc.)
 mw.hook('wikipage.content').add(function ($content) { enhance($content); });

})();