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

   1 /*!
   2  * JavaScript for Special:Preferences: Enable save button and prevent the window being accidentally
   3  * closed when any form field is changed.
   4  */
   5 ( function () {
   6         $( () => {
   7                 // Check if all of the form values are unchanged.
   8                 // (This function could be changed to infuse and check OOUI widgets, but that would only make it
   9                 // slower and more complicated. It works fine to treat them as HTML elements.)
  10                 function isPrefsChanged() {
  11                         // eslint-disable-next-line no-jquery/no-sizzle
  12                         const $inputs = $( '#mw-prefs-form :input[name]' );
  13
  14                         for ( let index = 0; index < $inputs.length; index++ ) {
  15                                 const input = $inputs[ index ];
  16                                 const $input = $( input );
  17
  18                                 // Different types of inputs have different methods for accessing defaults
  19                                 if ( $input.is( 'select' ) ) {
  20                                         // <select> has the property defaultSelected for each option
  21                                         for ( let optIndex = 0; optIndex < input.options.length; optIndex++ ) {
  22                                                 const opt = input.options[ optIndex ];
  23                                                 if ( opt.selected !== opt.defaultSelected ) {
  24                                                         return true;
  25                                                 }
  26                                         }
  27                                 } else if ( $input.is( 'input' ) || $input.is( 'textarea' ) ) {
  28                                         // <input> has defaultValue or defaultChecked
  29                                         const inputType = input.type;
  30                                         if ( inputType === 'radio' || inputType === 'checkbox' ) {
  31                                                 if ( input.checked !== input.defaultChecked ) {
  32                                                         return true;
  33                                                 }
  34                                         } else if ( input.value !== input.defaultValue ) {
  35                                                 return true;
  36                                         }
  37                                 }
  38                         }
  39
  40                         return false;
  41                 }
  42
  43                 const saveButton = OO.ui.infuse( $( '#prefcontrol' ) );
  44
  45                 // Disable the button to save preferences unless preferences have changed
  46                 // Check if preferences have been changed before JS has finished loading
  47                 saveButton.setDisabled( !isPrefsChanged() );
  48                 // Attach capturing event handlers to the document, to catch events inside OOUI dropdowns:
  49                 // * Use capture because OO.ui.SelectWidget also does, and it stops event propagation,
  50                 //   so the event is not fired on descendant elements
  51                 // * Attach to the document because the dropdowns are in the .oo-ui-defaultOverlay element
  52                 //   (and it doesn't exist yet at this point, so we can't attach them to it)
  53                 [ 'change', 'keyup', 'mouseup' ].forEach( ( eventType ) => {
  54                         document.addEventListener( eventType, () => {
  55                                 // Make sure SelectWidget's event handlers run first
  56                                 setTimeout( () => {
  57                                         saveButton.setDisabled( !isPrefsChanged() );
  58                                 } );
  59                         }, true );
  60                 } );
  61
  62                 // Prompt users if they try to leave the page without saving.
  63                 const allowCloseWindow = mw.confirmCloseWindow( {
  64                         test: isPrefsChanged
  65                 } );
  66                 $( '#mw-prefs-form' ).on( 'submit', allowCloseWindow.release );
  67         } );
  68 }() );