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

   1 /*!
   2  * JavaScript for Special:Preferences: editfont field enhancements.
   3  */
   4 ( function () {
   5         mw.hook( 'htmlform.enhance' ).add( ( $root ) => {
   6                 const $target = $root.find( '#mw-input-wpeditfont' );
   7
   8                 if (
   9                         // This preference could theoretically be disabled ($wgHiddenPrefs)
  10                         !$target.length ||
  11                         $target.closest( '.mw-htmlform-autoinfuse-lazy' ).length
  12                 ) {
  13                         return;
  14                 }
  15
  16                 const widget = OO.ui.infuse( $target );
  17
  18                 // Style options
  19                 widget.dropdownWidget.menu.items.forEach( ( item ) => {
  20                         // The following classes are used here:
  21                         // * mw-editfont-monospace
  22                         // * mw-editfont-sans-serif
  23                         // * mw-editfont-serif
  24                         item.$label.addClass( 'mw-editfont-' + item.getData() );
  25                 } );
  26
  27                 let lastValue;
  28
  29                 function updateLabel( value ) {
  30                         // Style selected item label
  31                         // The following classes are used here:
  32                         // * mw-editfont-monospace
  33                         // * mw-editfont-sans-serif
  34                         // * mw-editfont-serif
  35                         widget.dropdownWidget.$label
  36                                 .removeClass( 'mw-editfont-' + lastValue )
  37                                 .addClass( 'mw-editfont-' + value );
  38                         lastValue = value;
  39                 }
  40
  41                 widget.on( 'change', updateLabel );
  42                 updateLabel( widget.getValue() );
  43
  44         } );
  45 }() );