resources/src/mediawiki.special.preferences/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         $( function () {
   7                 var allowCloseWindow, saveButton, restoreButton,
   8                         oouiEnabled = $( '#mw-prefs-form' ).hasClass( 'mw-htmlform-ooui' );
   9
  10                 // Check if all of the form values are unchanged.
  11                 // (This function could be changed to infuse and check OOUI widgets, but that would only make it
  12                 // slower and more complicated. It works fine to treat them as HTML elements.)
  13                 function isPrefsChanged() {
  14                         var inputs = $( '#mw-prefs-form :input[name]' ),
  15                                 input, $input, inputType,
  16                                 index, optIndex,
  17                                 opt;
  18
  19                         for ( index = 0; index < inputs.length; index++ ) {
  20                                 input = inputs[ index ];
  21                                 $input = $( input );
  22
  23                                 // Different types of inputs have different methods for accessing defaults
  24                                 if ( $input.is( 'select' ) ) {
  25                                         // <select> has the property defaultSelected for each option
  26                                         for ( optIndex = 0; optIndex < input.options.length; optIndex++ ) {
  27                                                 opt = input.options[ optIndex ];
  28                                                 if ( opt.selected !== opt.defaultSelected ) {
  29                                                         return true;
  30                                                 }
  31                                         }
  32                                 } else if ( $input.is( 'input' ) || $input.is( 'textarea' ) ) {
  33                                         // <input> has defaultValue or defaultChecked
  34                                         inputType = input.type;
  35                                         if ( inputType === 'radio' || inputType === 'checkbox' ) {
  36                                                 if ( input.checked !== input.defaultChecked ) {
  37                                                         return true;
  38                                                 }
  39                                         } else if ( input.value !== input.defaultValue ) {
  40                                                 return true;
  41                                         }
  42                                 }
  43                         }
  44
  45                         return false;
  46                 }
  47
  48                 if ( oouiEnabled ) {
  49                         saveButton = OO.ui.infuse( $( '#prefcontrol' ) );
  50                         restoreButton = OO.ui.infuse( $( '#mw-prefs-restoreprefs' ) );
  51
  52                         // Disable the button to save preferences unless preferences have changed
  53                         // Check if preferences have been changed before JS has finished loading
  54                         saveButton.setDisabled( !isPrefsChanged() );
  55                         // Attach capturing event handlers to the document, to catch events inside OOUI dropdowns:
  56                         // * Use capture because OO.ui.SelectWidget also does, and it stops event propagation,
  57                         //   so the event is not fired on descendant elements
  58                         // * Attach to the document because the dropdowns are in the .oo-ui-defaultOverlay element
  59                         //   (and it doesn't exist yet at this point, so we can't attach them to it)
  60                         [ 'change', 'keyup', 'mouseup' ].forEach( function ( eventType ) {
  61                                 document.addEventListener( eventType, function () {
  62                                         // Make sure SelectWidget's event handlers run first
  63                                         setTimeout( function () {
  64                                                 saveButton.setDisabled( !isPrefsChanged() );
  65                                         } );
  66                                 }, true );
  67                         } );
  68                 } else {
  69                         // Disable the button to save preferences unless preferences have changed
  70                         // Check if preferences have been changed before JS has finished loading
  71                         $( '#prefcontrol' ).prop( 'disabled', !isPrefsChanged() );
  72                         $( '#preferences > fieldset' ).on( 'change keyup mouseup', function () {
  73                                 $( '#prefcontrol' ).prop( 'disabled', !isPrefsChanged() );
  74                         } );
  75                 }
  76
  77                 // Set up a message to notify users if they try to leave the page without
  78                 // saving.
  79                 allowCloseWindow = mw.confirmCloseWindow( {
  80                         test: isPrefsChanged,
  81                         message: mw.msg( 'prefswarning-warning', mw.msg( 'saveprefs' ) ),
  82                         namespace: 'prefswarning'
  83                 } );
  84                 $( '#mw-prefs-form' ).on( 'submit', allowCloseWindow.release );
  85                 if ( oouiEnabled ) {
  86                         restoreButton.on( 'click', function () {
  87                                 allowCloseWindow.release();
  88                                 // The default behavior of events in OOUI is always prevented. Follow the link manually.
  89                                 // Note that middle-click etc. still works, as it doesn't emit a OOUI 'click' event.
  90                                 location.href = restoreButton.getHref();
  91                         } );
  92                 } else {
  93                         $( '#mw-prefs-restoreprefs' ).on( 'click', allowCloseWindow.release );
  94                 }
  95         } );
  96 }() );