Main Page:mediawiki:common.js: Difference between revisions

From Ekatra Wiki
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:
/* Auto-wrap nearly all content tables for horizontal scrolling on small screens.
/* ==========================================================
   Excludes common layout/meta tables and those explicitly marked .no-responsive.
  MediaWiki:Common.js
  Also (re)initializes sorting and collapsible behavior on both desktop & mobile. */
   Purpose: Ensure tables are responsive, sortable, and collapsible
            across desktop (Vector) and mobile (Minerva).
  ========================================================== */


(function () {
(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
   /* --- Wrap tables for responsive scrolling --- */
   function wrapTables($root) {
   function wrapTables($root) {
    // Limit to page content; safer across skins
     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 explicitly opted out
       // 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 to avoid weird visuals
       // Skip common layout/meta tables
       if ($table.is('.infobox, .navbox, .toc, .metadata')) return;
       if ($table.is('.infobox, .navbox, .toc, .metadata')) return;


       // Build accessible label from caption if present
       // 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:
       }
       }


       // Create wrapper and move table inside
       // 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);
     initTableFeatures($content);
     initCollapsible($content);
    initSortable($content);
   }
   }


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


   // Run on content updates (VisualEditor, previews, AJAX, etc.)
   /* 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); });

})();