Migrate usage of wikibits in legacy protect.js and upload.js

Follows-up fcf4934a52.

protect:
* Use jQuery instead.
* Removing now-obsolete dependency.
* Make cell.appendChild more obvious and potentialy faster
  by grouping the dom actions in 1 sequence.

config:
* Removing obsolete dependency.

upload:
* Use jquery.spinner instead.
* Removing now-obsolete dependency.

jquery.spinner:
* While at it, updated documentation to be included in our
  jsduck index, similar to jquery.localize.

jsduck/external.js:
* Added @static to jQuery.ajax which was missing, it showed up
  between instance methods like jQuery#injectSpinner.

The only module left using mediawiki.legacy.wikibits is
mediawiki.legacy.ajax which remains in tact for now.

Bug: 56726
Change-Id: I712112626a99dc2d0090f554c56052770cd0ae88

diff --git a/maintenance/jsduck/config.json b/maintenance/jsduck/config.json
index 12458ee..e6e0f65 100644 (file)
--- a/maintenance/jsduck/config.json
+++ b/maintenance/jsduck/config.json
@@ -21,6 +21,7 @@
                "../../resources/mediawiki.action/mediawiki.action.view.postEdit.js",
                "../../resources/mediawiki.page/mediawiki.page.startup.js",
                "../../resources/mediawiki.api",
-               "../../resources/jquery/jquery.localize.js"
+               "../../resources/jquery/jquery.localize.js",
+               "../../resources/jquery/jquery.spinner.js"
        ]
 }

diff --git a/maintenance/jsduck/external.js b/maintenance/jsduck/external.js
index 7910ec8..4bb8369 100644 (file)
--- a/maintenance/jsduck/external.js
+++ b/maintenance/jsduck/external.js
@@ -5,6 +5,7 @@
 
 /**
  * @method ajax
+ * @static
  * @source <http://api.jquery.com/jQuery.ajax/>
  * @return {jqXHR}
  */

diff --git a/resources/Resources.php b/resources/Resources.php
index 463dec8..9eb5227 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1043,7 +1043,10 @@ return array(
                        'size-gigabytes',
                        'largefileserver',
                ),
-               'dependencies' => array( 'mediawiki.libs.jpegmeta', 'mediawiki.util' ),
+               'dependencies' => array(
+                       'mediawiki.libs.jpegmeta',
+                       'mediawiki.util',
+               ),
        ),
        'mediawiki.special.userlogin' => array(
                'styles' => array(
@@ -1124,7 +1127,6 @@ return array(
                'remoteBasePath' => $GLOBALS['wgStylePath'],
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
                'dependencies' => array(
-                       'mediawiki.legacy.wikibits',
                        'jquery.byteLimit',
                ),
                'position' => 'top',
@@ -1145,9 +1147,9 @@ return array(
                'remoteBasePath' => $GLOBALS['wgStylePath'],
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
                'dependencies' => array(
+                       'jquery.spinner',
                        'mediawiki.api',
                        'mediawiki.Title',
-                       'mediawiki.legacy.wikibits',
                        'mediawiki.util',
                ),
        ),

diff --git a/resources/jquery/jquery.spinner.js b/resources/jquery/jquery.spinner.js
index 93e30b9..27dabc6 100644 (file)
--- a/resources/jquery/jquery.spinner.js
+++ b/resources/jquery/jquery.spinner.js
@@ -1,7 +1,9 @@
 /**
- * jQuery spinner
+ * jQuery Spinner
  *
  * Simple jQuery plugin to create, inject and remove spinners.
+ *
+ * @class jQuery.plugin.spinner
  */
 ( function ( $ ) {
 
@@ -15,36 +17,37 @@
 
        $.extend({
                /**
-                * Creates a spinner element.
+                * Create a spinner element
                 *
                 * The argument is an object with options used to construct the spinner. These can be:
                 *
                 * It is a good practice to keep a reference to the created spinner to be able to remove it later.
-                * Alternatively one can use the id option and removeSpinner() (but make sure to choose an id
+                * Alternatively one can use the id option and #removeSpinner (but make sure to choose an id
                 * that's unlikely to cause conflicts, e.g. with extensions, gadgets or user scripts).
                 *
                 * CSS classes used:
-                *   .mw-spinner for every spinner
-                *   .mw-spinner-small / .mw-spinner-large for size
-                *   .mw-spinner-block / .mw-spinner-inline for display types
+                * - .mw-spinner for every spinner
+                * - .mw-spinner-small / .mw-spinner-large for size
+                * - .mw-spinner-block / .mw-spinner-inline for display types
                 *
-                * @example
                 *   // Create a large spinner reserving all available horizontal space.
                 *   var $spinner = $.createSpinner({ size: 'large', type: 'block' });
                 *   // Insert above page content.
                 *   $( '#mw-content-text' ).prepend( $spinner );
-                * @example
+                *
                 *   // Place a small inline spinner next to the "Save" button
                 *   var $spinner = $.createSpinner({ size: 'small', type: 'inline' });
                 *   // Alternatively, just `$.createSpinner();` as these are the default options.
                 *   $( '#wpSave' ).after( $spinner );
-                * @example
+                *
                 *   // The following two are equivalent:
                 *   $.createSpinner( 'magic' );
                 *   $.createSpinner({ id: 'magic' });
                 *
-                * @param {Object|String} opts [optional] ID string or options:
-                *  - id: If given, spinner will be given an id of "mw-spinner-<id>"
+                * @static
+                * @inheritable
+                * @param {Object|string} [opts] ID string or options:
+                *  - id: If given, spinner will be given an id of "mw-spinner-{id}"
                 *  - size: 'small' (default) or 'large' for a 20-pixel or 32-pixel spinner
                 *  - type: 'inline' (default) or 'block'. Inline creates an inline-block with width and
                 *    height equal to spinner size. Block is a block-level element with width 100%, height
@@ -72,10 +75,12 @@
                },
 
                /**
-                * Removes a spinner element.
+                * Remove a spinner element
                 *
-                * @param {String} id [optional] Id of the spinner, as passed to createSpinner.
-                * @return {jQuery} The (now detached) spinner.
+                * @static
+                * @inheritable
+                * @param {string} id Id of the spinner, as passed to #createSpinner
+                * @return {jQuery} The (now detached) spinner element
                 */
                removeSpinner: function ( id ) {
                        return $( '#mw-spinner-' + id ).remove();
@@ -83,13 +88,21 @@
        });
 
        /**
-        * Injects a spinner after the elements in the jQuery collection
-        * (as siblings, not children). Collection contents remain unchanged.
+        * Inject a spinner after each element in the collection
+        *
+        * Inserts spinner as siblings, not children, of the target elements.
+        * Collection contents remain unchanged.
         *
-        * @param {Object|String} opts See createSpinner() for description.
+        * @param {Object|string} [opts] See #createSpinner
         * @return {jQuery}
         */
        $.fn.injectSpinner = function ( opts ) {
                return this.after( $.createSpinner( opts ) );
        };
+
+       /**
+        * @class jQuery
+        * @mixins jQuery.plugin.spinner
+        */
+
 }( jQuery ) );

diff --git a/skins/common/protect.js b/skins/common/protect.js
index 462fa9c..dc142ca 100644 (file)
--- a/skins/common/protect.js
+++ b/skins/common/protect.js
@@ -38,15 +38,16 @@ var ProtectionForm = window.ProtectionForm = {
                        check = document.createElement( 'input' );
                        check.id = 'mwProtectUnchained';
                        check.type = 'checkbox';
-                       cell.appendChild( check );
-                       window.addClickHandler( check, function () {
+                       $( check ).click( function () {
                                ProtectionForm.onChainClick();
                        } );
 
-                       cell.appendChild( document.createTextNode( ' ' ) );
                        label = document.createElement( 'label' );
                        label.htmlFor = 'mwProtectUnchained';
                        label.appendChild( document.createTextNode( opts.labelText ) );
+
+                       cell.appendChild( check );
+                       cell.appendChild( document.createTextNode( ' ' ) );
                        cell.appendChild( label );
 
                        check.checked = !this.areAllTypesMatching();

diff --git a/skins/common/upload.js b/skins/common/upload.js
index 580cf25..d639f63 100644 (file)
--- a/skins/common/upload.js
+++ b/skins/common/upload.js
@@ -2,7 +2,8 @@
 ( function ( mw, $ ) {
 var    licenseSelectorCheck, wgUploadWarningObj, wgUploadLicenseObj, fillDestFilename,
        ajaxUploadDestCheck = mw.config.get( 'wgAjaxUploadDestCheck' ),
-       fileExtensions = mw.config.get( 'wgFileExtensions' );
+       fileExtensions = mw.config.get( 'wgFileExtensions' ),
+       $spinnerDestCheck, $spinnerLicense;
 
 licenseSelectorCheck = window.licenseSelectorCheck = function () {
        var selector = document.getElementById( 'wpLicense' ),
@@ -151,7 +152,7 @@ wgUploadWarningObj = window.wgUploadWarningObj = {
                if ( !ajaxUploadDestCheck || this.nameToCheck === '' ) {
                        return;
                }
-               window.injectSpinner( document.getElementById( 'wpDestFile' ), 'destcheck' );
+               $spinnerDestCheck = $.createSpinner().insertAfter( '#wpDestFile' );
 
                var uploadWarningObj = this;
                ( new mw.Api() ).get( {
@@ -170,7 +171,8 @@ wgUploadWarningObj = window.wgUploadWarningObj = {
        },
 
        processResult: function ( result, fileName ) {
-               window.removeSpinner( 'destcheck' );
+               $spinnerDestCheck.remove();
+               $spinnerDestCheck = undefined;
                this.setWarning( result.html );
                this.responseCache[fileName] = result.html;
        },
@@ -179,7 +181,7 @@ wgUploadWarningObj = window.wgUploadWarningObj = {
                var warningElt = document.getElementById( 'wpDestFile-warning' ),
                        ackElt = document.getElementsByName( 'wpDestFileWarningAck' );
 
-               this.setInnerHTML(warningElt, warning);
+               this.setInnerHTML( warningElt, warning );
 
                // Set a value in the form indicating that the warning is acknowledged and
                // doesn't need to be redisplayed post-upload
@@ -314,7 +316,8 @@ wgUploadLicenseObj = window.wgUploadLicenseObj = {
                                return;
                        }
                }
-               window.injectSpinner( document.getElementById( 'wpLicense' ), 'license' );
+
+               $spinnerLicense = $.createSpinner().insertAfter( '#wpLicense' );
 
                title = document.getElementById( 'wpDestFile' ).value;
                if ( !title ) {
@@ -333,7 +336,8 @@ wgUploadLicenseObj = window.wgUploadLicenseObj = {
        },
 
        processResult: function ( result, license ) {
-               window.removeSpinner( 'license' );
+               $spinnerLicense.remove();
+               $spinnerLicense = undefined;
                this.responseCache[license] = result.parse.text['*'];
                this.showPreview( this.responseCache[license] );
        },