resources/src/mediawiki.special.preferences.ooui/skinPrefs.js

   1 /*!
   2  * Special:Preferences skin section enhancements.
   3  * When the skin tab is infused by OOUI, toggle skin preferences based on skin state.
   4  */
   5
   6 ( function () {
   7         function invalidateSkinPrefsDisplay( $root ) {
   8                 const
   9                         // The skin preferences section. Skins with preferences should use the
  10                         // section `rendering/skin/skin-prefs` toa dd skin specific preferences
  11                         // in their onGetPreferences() hook.
  12                         // At time of writing, this functionality is only used by Vector and Monobook.
  13                         $skinPrefs = $root.find( '#mw-prefsection-rendering-skin-skin-prefs' ),
  14                         // oo-ui-fieldLayout is the wrapper class name for each preference. When all wrappers are
  15                         // disabled by hide-if (oo-ui-fieldLayout-disabled), the whole section should be hidden.
  16                         show = !!$skinPrefs.find( '.oo-ui-fieldLayout' ).not( '.oo-ui-fieldLayout-disabled' ).length;
  17
  18                 $skinPrefs.parent().css( 'display', show ? '' : 'none' );
  19         }
  20
  21         function onHTMLFormEnhance( $root ) {
  22                 const $skins = $root.find( '#mw-input-wpskin' );
  23                 // Don't kick in before this tab panel is infused and hide-if executed (T352358).
  24                 if ( !$skins.length || $skins.closest( '.mw-htmlform-autoinfuse-lazy' ).length ) {
  25                         return;
  26                 }
  27
  28                 // No need to listen for subsequent events.
  29                 mw.hook( 'htmlform.enhance' ).remove( onHTMLFormEnhance );
  30
  31                 // Set the initial skin preference display state based on the skin selected.
  32                 invalidateSkinPrefsDisplay( $root );
  33
  34                 // Observe skin radio state selection changes.
  35                 OO.ui.infuse( $skins ).on( 'change', () => {
  36                         invalidateSkinPrefsDisplay( $root );
  37                 } );
  38         }
  39
  40         // Wait for the tab to be infused by OOUI before manipulating it further. htmlform.enhance is
  41         // emitted on page load by resources/src/mediawiki.htmlform/htmlform.js, again for each tab
  42         // infused by resources/src/mediawiki.special.preferences.ooui/tabs.js, and possibly other
  43         // scenarios.
  44         mw.hook( 'htmlform.enhance' ).add( onHTMLFormEnhance );
  45 }() );