mediawiki.special.watchlist: Optimize JavaScript code

* Create progress bar not before submit.
* Reenable the disabled reset button after response.
  Currently a reload of the watch list after reset may lead to a disabled
  reset button.
* Reduce indenting by make an early return.
* Add some line breaks for better readability.
* Add some comments.

Follows-up to 9ea1142fad935999ac64e2920321520c1bbbfb61

Change-Id: Ibfafa140172bae55be01383ef7a9899104d46938

diff --git a/resources/src/mediawiki.special/mediawiki.special.watchlist.js b/resources/src/mediawiki.special/mediawiki.special.watchlist.js
index bfe2c1c..223770f 100644 (file)
--- a/resources/src/mediawiki.special/mediawiki.special.watchlist.js
+++ b/resources/src/mediawiki.special/mediawiki.special.watchlist.js
@@ -3,15 +3,7 @@
  */
 ( function ( mw, $, OO ) {
        $( function () {
  */
 ( function ( mw, $, OO ) {
        $( function () {

-               var $resetForm = $( '#mw-watchlist-resetbutton' ),
-                       $progressBar = new OO.ui.ProgressBarWidget( { progress: false } ).$element;
-
-               $progressBar.css( {
-                       visibility: 'hidden',
-                       position: 'absolute',
-                       width: '100%'
-               } );
-               $resetForm.append( $progressBar );
+               var $progressBar, $resetForm = $( '#mw-watchlist-resetbutton' );

 
                // If the user wants to reset their watchlist, use an API call to do so (no reload required)
                // Adapted from a user script by User:NQ of English Wikipedia
 
                // If the user wants to reset their watchlist, use an API call to do so (no reload required)
                // Adapted from a user script by User:NQ of English Wikipedia


@@ -19,33 +11,50 @@
                $resetForm.submit( function ( event ) {
                        event.preventDefault();
 
                $resetForm.submit( function ( event ) {
                        event.preventDefault();
 

-                       OO.ui.confirm( mw.msg( 'watchlist-mark-all-visited' ) ).done( function ( confirmed ) {
+                       OO.ui.confirm( mw.msg( 'watchlist-mark-all-visited' ) )
+                       .done( function ( confirmed ) {

                                var $button;
 
                                var $button;
 

-                               if ( confirmed ) {
-                                       // Disable reset button to prevent multiple requests and show progress bar
-                                       $button = $resetForm.find( 'input[name=mw-watchlist-reset-submit]' ).prop( 'disabled', true );
-                                       $progressBar.css( 'visibility', 'visible' );
+                               if ( !confirmed ) {
+                                       return;
+                               }

 
 

-                                       // Use action=setnotificationtimestamp to mark all as visited,
-                                       // then set all watchlist lines accordingly
-                                       new mw.Api().postWithToken( 'csrf', {
-                                               formatversion: 2,
-                                               action: 'setnotificationtimestamp',
-                                               entirewatchlist: true
-                                       } ).done( function () {
-                                               $button.css( 'visibility', 'hidden' );
-                                               $progressBar.css( 'visibility', 'hidden' );
-                                               $( '.mw-changeslist-line-watched' )
-                                                       .removeClass( 'mw-changeslist-line-watched' )
-                                                       .addClass( 'mw-changeslist-line-not-watched' );
-                                       } ).fail( function () {
-                                               // On error, fall back to server-side reset
-                                               // First remove this submit listener and then re-submit the form
-                                               $resetForm.off( 'submit' ).submit();
-                                       } );
+                               // Disable reset button to prevent multiple requests
+                               $button = $resetForm.find( 'input[name=mw-watchlist-reset-submit]' );
+                               $button.prop( 'disabled', true );

 
 

+                               // Show progress bar
+                               if ( $progressBar ) {
+                                       $progressBar.css( 'visibility', 'visible' );
+                               } else {
+                                       $progressBar = new OO.ui.ProgressBarWidget( { progress: false } ).$element;
+                                       $progressBar.css( {
+                                               position: 'absolute',
+                                               width: '100%'
+                                       } );
+                                       $resetForm.append( $progressBar );

                                }
                                }

+
+                               // Use action=setnotificationtimestamp to mark all as visited,
+                               // then set all watchlist lines accordingly
+                               new mw.Api().postWithToken( 'csrf', {
+                                       formatversion: 2,
+                                       action: 'setnotificationtimestamp',
+                                       entirewatchlist: true
+                               } ).done( function () {
+                                       // Enable button again
+                                       $button.prop( 'disabled', false );
+                                       // Hide the button because further clicks can not generate any visual changes
+                                       $button.css( 'visibility', 'hidden' );
+                                       $progressBar.css( 'visibility', 'hidden' );
+                                       $( '.mw-changeslist-line-watched' )
+                                               .removeClass( 'mw-changeslist-line-watched' )
+                                               .addClass( 'mw-changeslist-line-not-watched' );
+                               } ).fail( function () {
+                                       // On error, fall back to server-side reset
+                                       // First remove this submit listener and then re-submit the form
+                                       $resetForm.off( 'submit' ).submit();
+                               } );

                        } );
                } );
 
                        } );
                } );