Matthias Mullie has uploaded a new change for review.
https://gerrit.wikimedia.org/r/314022
Change subject: Only paint the elements once we move into a step, instead of on
construct
......................................................................
Only paint the elements once we move into a step, instead of on construct
Thing were currently inconsistently being added to DOM.
Some on construct, some when changing steps, ...
Things will be a lot easier when we just do all render-related
thingies (all this.$div manipulations) when we want to display
a step.
I've also consolidated all button-related code inside
each step's addNextButton method - should also make things cleaner.
This will be important once we introduce a "back" button: now
we'll always get a newly generated this.$div.
Change-Id: Ic7356d7ccfcdcf894c1230d391a0a7a654341d5f
---
M resources/controller/uw.controller.Details.js
M resources/ui/steps/uw.ui.Deed.js
M resources/ui/steps/uw.ui.Details.js
M resources/ui/steps/uw.ui.Tutorial.js
M resources/ui/steps/uw.ui.Upload.js
M resources/ui/uw.ui.Step.js
6 files changed, 147 insertions(+), 107 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UploadWizard
refs/changes/22/314022/1
diff --git a/resources/controller/uw.controller.Details.js
b/resources/controller/uw.controller.Details.js
index 9b06a38..03f77c6 100644
--- a/resources/controller/uw.controller.Details.js
+++ b/resources/controller/uw.controller.Details.js
@@ -55,6 +55,8 @@
uw.controller.Details.prototype.moveTo = function ( uploads ) {
var successes = 0;
+ uw.controller.Step.prototype.moveTo.call( this, uploads );
+
$.each( uploads, function ( i, upload ) {
if ( upload && upload.state !== 'aborted' &&
upload.state !== 'error' ) {
successes++;
@@ -87,8 +89,6 @@
} );
$( uploads[ 0 ].details.div ).after(
this.copyMetadataWidget.$element );
}
-
- uw.controller.Step.prototype.moveTo.call( this, uploads );
};
uw.controller.Details.prototype.empty = function () {
diff --git a/resources/ui/steps/uw.ui.Deed.js b/resources/ui/steps/uw.ui.Deed.js
index 31e5650..362e97f 100644
--- a/resources/ui/steps/uw.ui.Deed.js
+++ b/resources/ui/steps/uw.ui.Deed.js
@@ -29,6 +29,14 @@
'deeds'
);
+ this.addNextButton();
+ };
+
+ OO.inheritClass( uw.ui.Deed, uw.ui.Step );
+
+ uw.ui.Deed.prototype.moveTo = function ( uploads ) {
+ uw.ui.Step.prototype.moveTo.call( this, uploads );
+
this.$div.prepend(
$( '<div>' )
.attr( 'id', 'mwe-upwiz-deeds-thumbnails' )
@@ -40,11 +48,11 @@
.attr( 'id', 'mwe-upwiz-deeds-custom' )
.addClass( 'ui-helper-clearfix' )
);
+ };
- this.addNextButton();
+ uw.ui.Deed.prototype.addNextButton = function () {
+ uw.ui.Step.prototype.addNextButton.call( this );
this.nextButton.$element.hide();
};
-
- OO.inheritClass( uw.ui.Deed, uw.ui.Step );
}( mediaWiki, jQuery, mediaWiki.uploadWizard, OO ) );
diff --git a/resources/ui/steps/uw.ui.Details.js
b/resources/ui/steps/uw.ui.Details.js
index 97877e1..e82c616 100644
--- a/resources/ui/steps/uw.ui.Details.js
+++ b/resources/ui/steps/uw.ui.Details.js
@@ -35,26 +35,15 @@
'details'
);
- this.$div.prepend(
- $( '<div>' )
- .attr( 'id', 'mwe-upwiz-macro-files' )
- .addClass( 'mwe-upwiz-filled-filelist
ui-corner-all' )
- );
-
this.$errorCount = $( '<div>' )
.attr( 'id', 'mwe-upwiz-details-error-count' );
this.$warningCount = $( '<div>' )
.attr( 'id', 'mwe-upwiz-details-warning-count' );
- this.$buttons.append( this.$errorCount, this.$warningCount );
this.nextButton = new OO.ui.ButtonWidget( {
label: mw.message( 'mwe-upwiz-next-details' ).text(),
flags: [ 'progressive', 'primary' ]
} ).on( 'click', startDetails );
-
- this.$buttons.append(
- $( '<div>' ).addClass( 'mwe-upwiz-file-next-all-ok
mwe-upwiz-file-endchoice' ).append( this.nextButton.$element )
- );
this.nextButtonDespiteFailures = new OO.ui.ButtonWidget( {
label: mw.message(
'mwe-upwiz-next-file-despite-failures' ).text(),
@@ -67,6 +56,40 @@
label: mw.message( 'mwe-upwiz-file-retry' ).text(),
flags: [ 'progressive', 'primary' ]
} ).on( 'click', startDetails );
+
+ this.retryButtonAllFailed = new OO.ui.ButtonWidget( {
+ label: mw.message( 'mwe-upwiz-file-retry' ).text(),
+ flags: [ 'progressive', 'primary' ]
+ } ).on( 'click', startDetails );
+
+ this.addNextButton();
+ };
+
+ OO.inheritClass( uw.ui.Details, uw.ui.Step );
+
+ uw.ui.Details.prototype.moveTo = function ( uploads ) {
+ uw.ui.Step.prototype.moveTo.call( this, uploads );
+
+ this.$div.prepend(
+ $( '<div>' )
+ .attr( 'id', 'mwe-upwiz-macro-files' )
+ .addClass( 'mwe-upwiz-filled-filelist
ui-corner-all' )
+ );
+
+ // set default buttons visibility (can be altered in controller
later)
+ this.$div.find( '.mwe-upwiz-file-next-some-failed' ).hide();
+ this.$div.find( '.mwe-upwiz-file-next-all-failed' ).hide();
+ this.$div.find( '.mwe-upwiz-file-next-all-ok' ).show();
+ };
+
+ uw.ui.Details.prototype.addNextButton = function () {
+ this.$buttons.append( this.$errorCount, this.$warningCount );
+
+ this.$buttons.append(
+ $( '<div>' )
+ .addClass( 'mwe-upwiz-file-next-all-ok
mwe-upwiz-file-endchoice' )
+ .append( this.nextButton.$element )
+ );
this.$buttons.append(
$( '<div>' )
@@ -83,12 +106,6 @@
} ).$element
)
);
-
- this.retryButtonAllFailed = new OO.ui.ButtonWidget( {
- label: mw.message( 'mwe-upwiz-file-retry' ).text(),
- flags: [ 'progressive', 'primary' ]
- } ).on( 'click', startDetails );
-
this.$buttons.append(
$( '<div>' )
.addClass( 'mwe-upwiz-file-next-all-failed
mwe-upwiz-file-endchoice' )
@@ -104,8 +121,6 @@
)
);
};
-
- OO.inheritClass( uw.ui.Details, uw.ui.Step );
/**
* Empty out all upload information.
diff --git a/resources/ui/steps/uw.ui.Tutorial.js
b/resources/ui/steps/uw.ui.Tutorial.js
index 10ebb3e..d55cbd2 100644
--- a/resources/ui/steps/uw.ui.Tutorial.js
+++ b/resources/ui/steps/uw.ui.Tutorial.js
@@ -56,15 +56,6 @@
'tutorial'
);
- this.$div.prepend(
- $( '<div>' )
- .attr( 'id', 'mwe-upwiz-tutorial' )
- .append(
- // TODO move this to JavaScript, too.
- $( '#mwe-upwiz-tutorial-html' ).show()
- )
- );
-
// 'Skip tutorial' checkbox
this.skipCheckbox = new PopupCheckboxInputWidget( {
id: 'mwe-upwiz-skip',
@@ -89,20 +80,47 @@
ui.emit( 'skip-tutorial-click',
ui.skipCheckbox.isSelected() );
} );
+ // grab the tutorial HTML that was injected into this document
+ this.tutorialHtml = $( '#mwe-upwiz-tutorial-html' );
+
// Helpdesk link click
$( '#mwe-upwiz-tutorial-helpdesk' ).click( function () {
ui.emit( 'helpdesk-click' );
} );
this.addNextButton();
+ };
- this.$div.find( '.mwe-upwiz-buttons' ).append(
+ OO.inheritClass( uw.ui.Tutorial, uw.ui.Step );
+
+ uw.ui.Tutorial.prototype.moveTo = function ( uploads ) {
+ uw.ui.Step.prototype.moveTo.call( this, uploads );
+
+ this.$div.prepend(
+ $( '<div>' )
+ .attr( 'id', 'mwe-upwiz-tutorial' )
+ .append(
+ // TODO move this to JavaScript, too.
+ this.tutorialHtml.show()
+ )
+ );
+ };
+
+ uw.ui.Tutorial.prototype.addNextButton = function () {
+ var ui = this;
+
+ this.nextButton = new OO.ui.ButtonWidget( {
+ classes: [ 'mwe-upwiz-button-next' ],
+ label: mw.message( 'mwe-upwiz-next' ).text(),
+ flags: [ 'progressive', 'primary' ]
+ } ).on( 'click', function () {
+ ui.emit( 'next-step' );
+ } );
+
+ this.$buttons.append(
new OO.ui.HorizontalLayout( {
items: [ this.skipCheckbox,
this.skipCheckboxLabel, this.nextButton ]
} ).$element
);
};
-
- OO.inheritClass( uw.ui.Tutorial, uw.ui.Step );
-
}( mediaWiki, jQuery, mediaWiki.uploadWizard, OO ) );
diff --git a/resources/ui/steps/uw.ui.Upload.js
b/resources/ui/steps/uw.ui.Upload.js
index fa1bbef..05e5f91 100644
--- a/resources/ui/steps/uw.ui.Upload.js
+++ b/resources/ui/steps/uw.ui.Upload.js
@@ -67,27 +67,11 @@
this.$flickrSelectList
);
- this.$div.prepend(
- $( '<div>' )
- .attr( 'id', 'mwe-upwiz-files' )
- .append(
- this.$flickrSelectListContainer,
- $( '<div>' )
- .attr( 'id',
'mwe-upwiz-filelist' )
- .addClass( 'ui-corner-all' ),
- this.$uploadCtrl
- )
- );
-
-
this.addFile = new OO.ui.ButtonWidget( {
id: 'mwe-upwiz-add-file',
label: mw.message( 'mwe-upwiz-add-file-0-free' ).text(),
flags: [ 'constructive', 'primary' ]
} );
-
- // append <input type="file"> to button
- this.setupFileInputCtrl( this.addFile.$element.find(
'.oo-ui-buttonElement-button' ) );
this.$addFileContainer.prepend( this.addFile.$element );
@@ -112,21 +96,6 @@
upload.emit( 'next-step' );
} );
- this.$buttons.append(
- $( '<div>' )
- .addClass( 'mwe-upwiz-file-next-all-ok
mwe-upwiz-file-endchoice' )
- .append(
- new OO.ui.HorizontalLayout( {
- items: [
- new OO.ui.LabelWidget( {
- label:
mw.message( 'mwe-upwiz-file-all-ok' ).text()
- } ),
- this.nextStepButtonAllOk
- ]
- } ).$element
- )
- );
-
this.retryButtonSomeFailed = new OO.ui.ButtonWidget( {
label: mw.message( 'mwe-upwiz-file-retry' ).text(),
flags: [ 'progressive' ]
@@ -142,22 +111,6 @@
upload.emit( 'next-step' );
} );
- this.$buttons.append(
- $( '<div>' )
- .addClass( 'mwe-upwiz-file-next-some-failed
mwe-upwiz-file-endchoice' )
- .append(
- new OO.ui.HorizontalLayout( {
- items: [
- new OO.ui.LabelWidget( {
- label:
mw.message( 'mwe-upwiz-file-some-failed' ).text()
- } ),
-
this.retryButtonSomeFailed,
-
this.nextStepButtonSomeFailed
- ]
- } ).$element
- )
- );
-
this.retryButtonAllFailed = new OO.ui.ButtonWidget( {
label: mw.message( 'mwe-upwiz-file-retry' ).text(),
flags: [ 'progressive' ]
@@ -166,29 +119,13 @@
upload.emit( 'retry' );
} );
- this.$buttons.append(
- $( '<div>' )
- .addClass( 'mwe-upwiz-file-next-all-failed
mwe-upwiz-file-endchoice' )
- .append(
- new OO.ui.HorizontalLayout( {
- items: [
- new OO.ui.LabelWidget( {
- label:
mw.message( 'mwe-upwiz-file-all-failed' ).text()
- } ),
-
this.retryButtonAllFailed
- ]
- } ).$element
- )
- );
-
this.$fileList = $( '#mwe-upwiz-filelist' );
this.$progress = $( '<div>' )
.attr( 'id', 'mwe-upwiz-progress' )
.addClass( 'ui-helper-clearfix' );
- // Apparently this makes sense.
- this.$buttons.append( this.$progress );
+ this.addNextButton();
};
OO.inheritClass( uw.ui.Upload, uw.ui.Step );
@@ -333,11 +270,76 @@
this.$fileList.removeClass( 'mwe-upwiz-filled-filelist' );
+ this.$div.prepend(
+ $( '<div>' )
+ .attr( 'id', 'mwe-upwiz-files' )
+ .append(
+ this.$flickrSelectListContainer,
+ $( '<div>' )
+ .attr( 'id',
'mwe-upwiz-filelist' )
+ .addClass( 'ui-corner-all' ),
+ this.$uploadCtrl
+ )
+ );
+
+ // append <input type="file"> to button
+ this.setupFileInputCtrl( this.addFile.$element.find(
'.oo-ui-buttonElement-button' ) );
+
// Show the upload button, and the add file button
$( '#mwe-upwiz-upload-ctrls' ).show();
$( '#mwe-upwiz-add-file' ).show();
};
+ uw.ui.Upload.prototype.addNextButton = function () {
+ this.$buttons.append(
+ $( '<div>' )
+ .addClass( 'mwe-upwiz-file-next-all-ok
mwe-upwiz-file-endchoice' )
+ .append(
+ new OO.ui.HorizontalLayout( {
+ items: [
+ new OO.ui.LabelWidget( {
+ label:
mw.message( 'mwe-upwiz-file-all-ok' ).text()
+ } ),
+ this.nextStepButtonAllOk
+ ]
+ } ).$element
+ )
+ );
+
+ this.$buttons.append(
+ $( '<div>' )
+ .addClass( 'mwe-upwiz-file-next-some-failed
mwe-upwiz-file-endchoice' )
+ .append(
+ new OO.ui.HorizontalLayout( {
+ items: [
+ new OO.ui.LabelWidget( {
+ label:
mw.message( 'mwe-upwiz-file-some-failed' ).text()
+ } ),
+
this.retryButtonSomeFailed,
+
this.nextStepButtonSomeFailed
+ ]
+ } ).$element
+ )
+ );
+
+ this.$buttons.append(
+ $( '<div>' )
+ .addClass( 'mwe-upwiz-file-next-all-failed
mwe-upwiz-file-endchoice' )
+ .append(
+ new OO.ui.HorizontalLayout( {
+ items: [
+ new OO.ui.LabelWidget( {
+ label:
mw.message( 'mwe-upwiz-file-all-failed' ).text()
+ } ),
+
this.retryButtonAllFailed
+ ]
+ } ).$element
+ )
+ );
+
+ this.$buttons.append( this.$progress );
+ };
+
/**
* Hide the buttons for moving to the next step.
*/
diff --git a/resources/ui/uw.ui.Step.js b/resources/ui/uw.ui.Step.js
index 565ac19..4a6fd1c 100644
--- a/resources/ui/uw.ui.Step.js
+++ b/resources/ui/uw.ui.Step.js
@@ -34,8 +34,7 @@
this.$div = $( '<div>' )
.attr( 'id', 'mwe-upwiz-stepdiv-' + this.name )
.addClass( 'mwe-upwiz-stepdiv' )
- .hide()
- .append( this.$buttons );
+ .hide();
$( '#mwe-upwiz-content' ).append( this.$div );
@@ -59,7 +58,7 @@
var offset = $( 'h1:first' ).offset();
this.uploads = uploads;
- this.$div.show();
+ this.$div.append( this.$buttons ).show();
$( '#mwe-upwiz-steps' ).arrowStepsHighlight( this.$arrow );
$( 'html, body' ).animate( {
@@ -72,7 +71,7 @@
* Move out of the step.
*/
uw.ui.Step.prototype.moveFrom = function () {
- this.$div.hide();
+ this.$div.children().detach();
};
/**
@@ -85,8 +84,6 @@
*/
uw.ui.Step.prototype.addNextButton = function () {
var ui = this;
-
- this.$buttons = this.$div.find( '.mwe-upwiz-buttons' );
this.nextButton = new OO.ui.ButtonWidget( {
classes: [ 'mwe-upwiz-button-next' ],
--
To view, visit https://gerrit.wikimedia.org/r/314022
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic7356d7ccfcdcf894c1230d391a0a7a654341d5f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UploadWizard
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
