resources/src/mediawiki.action/mediawiki.action.edit.collapsibleFooter.js

   1 ( function ( mw ) {
   2         var collapsibleLists, handleOne;
   3
   4         // Collapsible lists of categories and templates
   5         // If changing or removing a storeKey, ensure there is a strategy for old keys.
   6         // E.g. detect existence via requestIdleCallback and remove. (T121646)
   7         collapsibleLists = [
   8                 {
   9                         listSel: '.templatesUsed ul',
  10                         togglerSel: '.mw-templatesUsedExplanation',
  11                         storeKey: 'mwedit-state-templatesUsed'
  12                 },
  13                 {
  14                         listSel: '.hiddencats ul',
  15                         togglerSel: '.mw-hiddenCategoriesExplanation',
  16                         storeKey: 'mwedit-state-hiddenCategories'
  17                 },
  18                 {
  19                         listSel: '.preview-limit-report-wrapper',
  20                         togglerSel: '.mw-limitReportExplanation',
  21                         storeKey: 'mwedit-state-limitReport'
  22                 }
  23         ];
  24
  25         handleOne = function ( $list, $toggler, storeKey ) {
  26                 // Collapsed by default
  27                 var isCollapsed = mw.storage.get( storeKey ) !== 'expanded';
  28
  29                 // Style the toggler with an arrow icon and add a tabIndex and a role for accessibility
  30                 $toggler.addClass( 'mw-editfooter-toggler' ).prop( 'tabIndex', 0 ).attr( 'role', 'button' );
  31                 $list.addClass( 'mw-editfooter-list' );
  32
  33                 $list.makeCollapsible( {
  34                         $customTogglers: $toggler,
  35                         linksPassthru: true,
  36                         plainMode: true,
  37                         collapsed: isCollapsed
  38                 } );
  39
  40                 $toggler.addClass( isCollapsed ? 'mw-icon-arrow-collapsed' : 'mw-icon-arrow-expanded' );
  41
  42                 $list.on( 'beforeExpand.mw-collapsible', function () {
  43                         $toggler.removeClass( 'mw-icon-arrow-collapsed' ).addClass( 'mw-icon-arrow-expanded' );
  44                         mw.storage.set( storeKey, 'expanded' );
  45                 } );
  46
  47                 $list.on( 'beforeCollapse.mw-collapsible', function () {
  48                         $toggler.removeClass( 'mw-icon-arrow-expanded' ).addClass( 'mw-icon-arrow-collapsed' );
  49                         mw.storage.set( storeKey, 'collapsed' );
  50                 } );
  51         };
  52
  53         mw.hook( 'wikipage.editform' ).add( function ( $editForm ) {
  54                 var i;
  55                 for ( i = 0; i < collapsibleLists.length; i++ ) {
  56                         // Pass to a function for iteration-local variables
  57                         handleOne(
  58                                 $editForm.find( collapsibleLists[ i ].listSel ),
  59                                 $editForm.find( collapsibleLists[ i ].togglerSel ),
  60                                 collapsibleLists[ i ].storeKey
  61                         );
  62                 }
  63         } );
  64 }( mediaWiki ) );