MarkTraceur has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/255418

Change subject: Create arrow steps in JavaScript
......................................................................

Create arrow steps in JavaScript

Needed to add some things to the step UI classes, and also shifted
around how the steps themselves are constructed so it makes more
sense.

Change-Id: I7f28750f0ffb960e502e0356946cd78c68c64ed1
---
M includes/specials/SpecialUploadWizard.php
M resources/mw.UploadWizard.js
M resources/ui/uw.ui.Deed.js
M resources/ui/uw.ui.Details.js
M resources/ui/uw.ui.Step.js
M resources/ui/uw.ui.Thanks.js
M resources/ui/uw.ui.Tutorial.js
M resources/ui/uw.ui.Upload.js
M resources/ui/uw.ui.Wizard.js
9 files changed, 79 insertions(+), 69 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UploadWizard 
refs/changes/18/255418/1

diff --git a/includes/specials/SpecialUploadWizard.php 
b/includes/specials/SpecialUploadWizard.php
index 405f40f..ee0065b 100644
--- a/includes/specials/SpecialUploadWizard.php
+++ b/includes/specials/SpecialUploadWizard.php
@@ -392,15 +392,6 @@
                                        '&nbsp;<img src="' . 
$wgExtensionAssetsPath . 
'/UploadWizard/resources/images/24px-spinner-0645ad.gif" width="24" height="24" 
/>&nbsp;' .
                                '</div>' .
 
-                               // the arrow steps - hide until styled
-                               '<ul id="mwe-upwiz-steps" 
style="display:none;">' .
-                                       '<li 
id="mwe-upwiz-step-tutorial"><div>' . $this->msg( 'mwe-upwiz-step-tutorial' 
)->escaped() . '</div></li>' .
-                                       '<li id="mwe-upwiz-step-file"><div>' . 
$this->msg( 'mwe-upwiz-step-file' )->escaped() . '</div></li>' .
-                                       '<li id="mwe-upwiz-step-deeds"><div>' . 
$this->msg( 'mwe-upwiz-step-deeds' )->escaped() . '</div></li>' .
-                                       '<li id="mwe-upwiz-step-details"><div>' 
. $this->msg( 'mwe-upwiz-step-details' )->escaped() . '</div></li>' .
-                                       '<li id="mwe-upwiz-step-thanks"><div>' 
. $this->msg( 'mwe-upwiz-step-thanks' )->escaped() . '</div></li>' .
-                               '</ul>' .
-
                                // the individual steps, all at once - hide 
until needed
                                '<div id="mwe-upwiz-content">' .
 
diff --git a/resources/mw.UploadWizard.js b/resources/mw.UploadWizard.js
index 588e774..0a505e4 100644
--- a/resources/mw.UploadWizard.js
+++ b/resources/mw.UploadWizard.js
@@ -5,7 +5,7 @@
 ( function ( mw, uw, $, OO ) {
 
        mw.UploadWizard = function ( config ) {
-               var maxSimPref, wizard;
+               var maxSimPref, wizard = this;
 
                this.uploads = [];
                this.api = new mw.Api( { ajax: { timeout: 0 } } );
@@ -16,8 +16,9 @@
                // Shortcut for local references
                this.config = config;
 
+               this.steps = [];
+
                maxSimPref = mw.user.options.get( 'upwiz_maxsimultaneous' );
-               wizard = this;
 
                if ( maxSimPref !== 'default' ) {
                        if ( maxSimPref > 0 ) {
@@ -28,54 +29,6 @@
                }
 
                this.maxSimultaneousConnections = 
config.maxSimultaneousConnections;
-
-               this.steps = {
-                       tutorial: new uw.controller.Tutorial( this.api ),
-
-                       file: new uw.controller.Upload( config )
-                               .on( 'flickr-ui-init', function () {
-                                       wizard.flickrInterfaceInit();
-                                       uw.eventFlowLogger.logEvent( 
'flickr-upload-button-clicked' );
-                               } )
-
-                               .on( 'load', function () {
-                                       wizard.reset();
-                                       wizard.resetFileStepUploads();
-                               } ),
-
-                       deeds: new uw.controller.Deed( this.api, config )
-                               .on( 'load', function () {
-                                       wizard.removeErrorUploads();
-                               } ),
-
-                       details: new uw.controller.Details( config )
-                               .on( 'details-error', function () {
-                                       wizard.steps.details.showErrors();
-                               } )
-
-                               .on( 'finalize-details-after-removal', function 
() {
-                                       wizard.removeErrorUploads();
-                                       wizard.steps.details.moveFrom();
-                               } ),
-
-                       thanks: new uw.controller.Thanks( config )
-                               .on( 'reset-wizard', function () {
-                                       wizard.reset();
-                               } )
-               };
-
-               $.each( this.steps, function ( name, step ) {
-                       step
-                               .on( 'no-uploads', function () {
-                                       wizard.bailAndMoveToFile();
-                               } );
-               } );
-
-               this.steps.tutorial.setNextStep( this.steps.file );
-               this.steps.file.setNextStep( this.steps.deeds );
-               this.steps.deeds.setNextStep( this.steps.details );
-               this.steps.details.setNextStep( this.steps.thanks );
-               this.steps.thanks.setNextStep( this.steps.file );
 
                this.allowCloseWindow = mw.confirmCloseWindow( {
                        message: function () {
@@ -138,11 +91,68 @@
                createInterface: function () {
                        this.ui = new uw.ui.Wizard( this );
 
+                       this.initialiseSteps();
+
                        // "select" the first step - highlight, make it 
visible, hide all others
                        this.steps.tutorial.moveTo();
                },
 
                /**
+                * Initialise the steps in the wizard
+                */
+               initialiseSteps: function () {
+                       var wizard = this;
+
+                       this.steps = {
+                               tutorial: new uw.controller.Tutorial( this.api 
),
+
+                               file: new uw.controller.Upload( this.config )
+                                       .on( 'flickr-ui-init', function () {
+                                               wizard.flickrInterfaceInit();
+                                               uw.eventFlowLogger.logEvent( 
'flickr-upload-button-clicked' );
+                                       } )
+
+                                       .on( 'load', function () {
+                                               wizard.reset();
+                                               wizard.resetFileStepUploads();
+                                       } ),
+
+                               deeds: new uw.controller.Deed( this.api, 
this.config )
+                                       .on( 'load', function () {
+                                               wizard.removeErrorUploads();
+                                       } ),
+
+                               details: new uw.controller.Details( this.config 
)
+                                       .on( 'details-error', function () {
+                                               
wizard.steps.details.showErrors();
+                                       } )
+
+                                       .on( 'finalize-details-after-removal', 
function () {
+                                               wizard.removeErrorUploads();
+                                               wizard.steps.details.moveFrom();
+                                       } ),
+
+                               thanks: new uw.controller.Thanks( this.config )
+                                       .on( 'reset-wizard', function () {
+                                               wizard.reset();
+                                       } )
+                       };
+
+                       $.each( this.steps, function ( name, step ) {
+                               step
+                                       .on( 'no-uploads', function () {
+                                               wizard.bailAndMoveToFile();
+                                       } );
+                       } );
+
+                       this.steps.tutorial.setNextStep( this.steps.file );
+                       this.steps.file.setNextStep( this.steps.deeds );
+                       this.steps.deeds.setNextStep( this.steps.details );
+                       this.steps.details.setNextStep( this.steps.thanks );
+                       this.steps.thanks.setNextStep( this.steps.file );
+               },
+
+               /**
                 * Initiates the Interface to upload media from Flickr.
                 * Called when the user clicks on the 'Add images from Flickr' 
button.
                 */
diff --git a/resources/ui/uw.ui.Deed.js b/resources/ui/uw.ui.Deed.js
index e7e2f17..1a6a563 100644
--- a/resources/ui/uw.ui.Deed.js
+++ b/resources/ui/uw.ui.Deed.js
@@ -27,7 +27,7 @@
                uw.ui.Step.call(
                        this,
                        $( '#mwe-upwiz-stepdiv-deeds' ),
-                       $( '#mwe-upwiz-step-deeds' )
+                       'deeds'
                );
 
                this.addNextButton();
diff --git a/resources/ui/uw.ui.Details.js b/resources/ui/uw.ui.Details.js
index da4e108..6f3832c 100644
--- a/resources/ui/uw.ui.Details.js
+++ b/resources/ui/uw.ui.Details.js
@@ -33,7 +33,7 @@
                uw.ui.Step.call(
                        this,
                        $( '#mwe-upwiz-stepdiv-details' ),
-                       $( '#mwe-upwiz-step-details' )
+                       'details'
                );
 
                this.nextButton = new OO.ui.ButtonWidget( {
diff --git a/resources/ui/uw.ui.Step.js b/resources/ui/uw.ui.Step.js
index 9d8a455..3c9e2c5 100644
--- a/resources/ui/uw.ui.Step.js
+++ b/resources/ui/uw.ui.Step.js
@@ -25,11 +25,18 @@
         * @param {jQuery} $div The div that contains the step.
         * @param {jQuery} $arrow The arrow that represents the step.
         */
-       uw.ui.Step = function UWUIStep( $div, $arrow ) {
+       uw.ui.Step = function UWUIStep( $div, name ) {
                OO.EventEmitter.call( this );
 
+               this.name = name;
                this.$div = $div;
-               this.$arrow = $arrow;
+               this.$arrow = $( '<li>' )
+                       .attr( 'id', 'mwe-upwiz-step-' + this.name )
+                       .append(
+                               $( '<div>' ).text( mw.message( 
'mwe-upwiz-step-' + this.name ).text() )
+                       );
+
+               $( '#mwe-upwiz-steps' ).append( this.$arrow );
        };
 
        OO.mixinClass( uw.ui.Step, OO.EventEmitter );
diff --git a/resources/ui/uw.ui.Thanks.js b/resources/ui/uw.ui.Thanks.js
index db560a6..d6ea8ee 100644
--- a/resources/ui/uw.ui.Thanks.js
+++ b/resources/ui/uw.ui.Thanks.js
@@ -33,9 +33,11 @@
                uw.ui.Step.call(
                        this,
                        $( '#mwe-upwiz-stepdiv-thanks' ),
-                       $( '#mwe-upwiz-step-thanks' )
+                       'thanks'
                );
 
+               $( '#mwe-upwiz-steps' ).arrowSteps();
+
                if ( this.isObjectReferenceGiven() ) {
                        this.getDelayNotice().prependTo( this.$div );
                }
diff --git a/resources/ui/uw.ui.Tutorial.js b/resources/ui/uw.ui.Tutorial.js
index 96ff98e..91c4798 100644
--- a/resources/ui/uw.ui.Tutorial.js
+++ b/resources/ui/uw.ui.Tutorial.js
@@ -54,7 +54,7 @@
                uw.ui.Step.call(
                        this,
                        $( '#mwe-upwiz-stepdiv-tutorial' ),
-                       $( '#mwe-upwiz-step-tutorial' )
+                       'tutorial'
                );
 
                // 'Skip tutorial' checkbox
diff --git a/resources/ui/uw.ui.Upload.js b/resources/ui/uw.ui.Upload.js
index 7508e44..1dbf217 100644
--- a/resources/ui/uw.ui.Upload.js
+++ b/resources/ui/uw.ui.Upload.js
@@ -32,7 +32,7 @@
                uw.ui.Step.call(
                        this,
                        $( '#mwe-upwiz-stepdiv-file' ),
-                       $( '#mwe-upwiz-step-file' )
+                       'file'
                );
 
                this.$uploadCtrl = $( '#mwe-upwiz-upload-ctrls' );
diff --git a/resources/ui/uw.ui.Wizard.js b/resources/ui/uw.ui.Wizard.js
index c7586d3..56a2529 100644
--- a/resources/ui/uw.ui.Wizard.js
+++ b/resources/ui/uw.ui.Wizard.js
@@ -122,10 +122,10 @@
         * Initializes the arrow steps above the wizard.
         */
        uw.ui.Wizard.prototype.initArrowSteps = function () {
-               $( '#mwe-upwiz-steps' )
+               $( '<ul>' )
+                       .attr( 'id', 'mwe-upwiz-steps' )
                        .addClass( 'ui-helper-clearfix ui-state-default 
ui-widget ui-helper-reset ui-helper-clearfix' )
-                       .arrowSteps()
-                       .show();
+                       .insertBefore( '#mwe-upwiz-content' );
        };
 
 }( mediaWiki, jQuery, mediaWiki.uploadWizard, OO ) );

-- 
To view, visit https://gerrit.wikimedia.org/r/255418
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I7f28750f0ffb960e502e0356946cd78c68c64ed1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UploadWizard
Gerrit-Branch: master
Gerrit-Owner: MarkTraceur <mtrac...@member.fsf.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to