Matthias Mullie has uploaded a new change for review.
https://gerrit.wikimedia.org/r/318240
Change subject: [WIP] Move flickr interface to upload step
......................................................................
[WIP] Move flickr interface to upload step
Change-Id: Idf1f1be48b1afe5f4c9195691d952f440d30ca22
---
M resources/controller/uw.controller.Upload.js
M resources/mw.FlickrChecker.js
M resources/mw.UploadWizard.js
M resources/ui/steps/uw.ui.Upload.js
4 files changed, 121 insertions(+), 120 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/UploadWizard
refs/changes/40/318240/1
diff --git a/resources/controller/uw.controller.Upload.js
b/resources/controller/uw.controller.Upload.js
index 740e0da..baeb4bc 100644
--- a/resources/controller/uw.controller.Upload.js
+++ b/resources/controller/uw.controller.Upload.js
@@ -33,7 +33,6 @@
new uw.ui.Upload( config )
.connect( this, {
retry: 'retry',
- 'flickr-ui-init': [ 'emit',
'flickr-ui-init' ]
} ),
api,
config
diff --git a/resources/mw.FlickrChecker.js b/resources/mw.FlickrChecker.js
index e59dbd9..6672eee 100644
--- a/resources/mw.FlickrChecker.js
+++ b/resources/mw.FlickrChecker.js
@@ -1,20 +1,12 @@
// Only turning these jscs options off for ''this file''
/* jscs:disable disallowDanglingUnderscores,
requireCamelCaseOrUpperCaseIdentifiers */
( function ( mw, $, OO ) {
- mw.FlickrChecker = function ( wizard, upload ) {
- this.wizard = wizard;
- this.upload = upload;
+ mw.FlickrChecker = function ( ui, selectButton ) {
+ this.ui = ui;
this.imageUploads = [];
this.apiUrl = mw.UploadWizard.config.flickrApiUrl;
this.apiKey = mw.UploadWizard.config.flickrApiKey;
-
- this.selectButton = new OO.ui.ButtonWidget( {
- id: 'mwe-upwiz-select-flickr',
- label: mw.message( 'mwe-upwiz-add-file-0-free' ).text(),
- flags: [ 'constructive', 'primary' ]
- } );
-
- $( '#mwe-upwiz-flickr-select-list-container' ).append(
this.selectButton.$element );
+ this.selectButton = selectButton;
};
/**
@@ -113,7 +105,8 @@
} else {
// XXX show user the message that the URL
entered was not valid
mw.errorDialog( mw.message(
'mwe-upwiz-url-invalid', 'Flickr' ).escaped() );
- this.wizard.flickrInterfaceReset();
+ this.$spinner.remove();
+ this.ui.flickrInterfaceReset();
}
},
@@ -470,11 +463,10 @@
checker.setImageURL(
image )
);
} ) ).done( function () {
- // Once this is done for all
images, add them to the wizard
-
checker.wizard.steps.file.addUploads( uploads );
+ checker.ui.emit( 'files-added',
uploads );
} ).always( function () {
checker.$spinner.remove();
-
checker.wizard.flickrInterfaceDestroy();
+
checker.ui.flickrInterfaceDestroy();
} );
} );
@@ -494,7 +486,8 @@
}
} ).fail( function ( message ) {
mw.errorDialog( message );
- checker.wizard.flickrInterfaceReset();
+ checker.$spinner.remove();
+ checker.ui.flickrInterfaceReset();
} );
},
@@ -575,14 +568,15 @@
checker.setUploadDescription(
flickrUpload, photo.description._content ),
checker.setImageURL( 0 )
).done( function () {
- checker.wizard.steps.file.addUploads( [
flickrUpload ] );
+ checker.ui.emit( 'files-added', [
flickrUpload ] );
} ).always( function () {
checker.$spinner.remove();
- checker.wizard.flickrInterfaceDestroy();
+ checker.ui.flickrInterfaceDestroy();
} );
} ).fail( function ( message ) {
mw.errorDialog( message );
- checker.wizard.flickrInterfaceReset();
+ checker.$spinner.remove();
+ checker.ui.flickrInterfaceReset();
} );
},
@@ -727,7 +721,8 @@
upload.url = largestSize.source;
} else {
mw.errorDialog( mw.message(
'mwe-upwiz-error-no-image-retrieved', 'Flickr' ).escaped() );
- checker.wizard.flickrInterfaceReset();
+ checker.$spinner.remove();
+ checker.ui.flickrInterfaceReset();
return $.Deferred().reject();
}
} );
diff --git a/resources/mw.UploadWizard.js b/resources/mw.UploadWizard.js
index 2f26b62..cccf4b5 100644
--- a/resources/mw.UploadWizard.js
+++ b/resources/mw.UploadWizard.js
@@ -50,7 +50,7 @@
*/
bailAndMoveToFile: function () {
// destroy the flickr interface if it exists
- this.flickrInterfaceDestroy();
+ this.steps.file.ui.flickrInterfaceDestroy();
// fix various other pages that may have state
$.each( this.steps, function ( i, step ) {
@@ -80,12 +80,7 @@
( this.config.tutorial &&
this.config.tutorial.skip );
this.steps.tutorial = new uw.controller.Tutorial(
this.api, this.config );
- this.steps.file = new uw.controller.Upload( this.api,
this.config )
- .on( 'flickr-ui-init', function () {
- wizard.flickrInterfaceInit();
- uw.eventFlowLogger.logEvent(
'flickr-upload-button-clicked' );
- } );
-
+ this.steps.file = new uw.controller.Upload( this.api,
this.config );
this.steps.deeds = new uw.controller.Deed( this.api,
this.config );
this.steps.details = new uw.controller.Details(
this.api, this.config );
this.steps.thanks = new uw.controller.Thanks( this.api,
this.config );
@@ -118,94 +113,6 @@
this.steps.thanks.setNextStep( this.steps.file );
$( '#mwe-upwiz-steps' ).arrowSteps();
- },
-
- /**
- * Initiates the Interface to upload media from Flickr.
- * Called when the user clicks on the 'Add images from Flickr'
button.
- */
- flickrInterfaceInit: function () {
- var $disclaimer,
- wizard = this,
- checker = new mw.FlickrChecker( this,
this.upload ),
- // The input that will hold a flickr URL
entered by the user; will be appended to a form
- $flickrInput = $( '<input
id="mwe-upwiz-flickr-input" type="text" />' ),
- // A container holding a form
- $flickrContainer = $( '<div
id="mwe-upwiz-upload-add-flickr-container"></div>' ),
- // Form whose submit event will be listened to
and prevented
- $flickrForm = $( '<form
id="mwe-upwiz-flickr-url-form"></form>' )
- .appendTo( $flickrContainer ),
- flickrButton = new OO.ui.ButtonInputWidget( {
- id: 'mwe-upwiz-upload-ctrl-flickr',
- label: mw.message(
'mwe-upwiz-add-flickr' ).text(),
- flags: [ 'progressive', 'primary' ],
- type: 'submit'
- } );
-
- $flickrForm.append( flickrButton.$element );
-
- // Hide containers for selecting files
- $( '#mwe-upwiz-add-file-container,
#mwe-upwiz-upload-ctrl-flickr-container' ).hide();
-
- // Add placeholder text to the Flickr URL input field
- $flickrInput.placeholder( mw.message(
'mwe-upwiz-flickr-input-placeholder' ).text() );
-
- // Insert form into the page
- $( '#mwe-upwiz-files' ).prepend( $flickrContainer );
-
- // Add disclaimer
- $disclaimer = mw.message(
'mwe-upwiz-flickr-disclaimer1' ).parse() +
- '<br/>' + mw.message(
'mwe-upwiz-flickr-disclaimer2' ).parse();
- $disclaimer = $( '<div
id="mwe-upwiz-flickr-disclaimer"></div>' ).html( $disclaimer );
- $( '#mwe-upwiz-upload-add-flickr-container' ).append(
$disclaimer );
-
- // Save temporarily
- this.flickrButton = flickrButton;
-
- // Insert input field into the form and set up submit
action
- $flickrForm.prepend( $flickrInput ).submit( function ()
{
- flickrButton.setDisabled( true );
- wizard.flickrChecker( checker );
- // TODO Any particular reason to
stopPropagation ?
- return false;
- } );
-
- $flickrInput.focus();
- },
-
- /**
- * Responsible for fetching license of the provided media.
- */
- flickrChecker: function ( checker ) {
- var flickrInputUrl = $( '#mwe-upwiz-flickr-input'
).val();
- checker.getLicenses().done( function () {
- checker.checkFlickr( flickrInputUrl );
- } );
- },
-
- /**
- * Reset the interface if there is a problem while fetching the
images from the URL entered by the user.
- */
- flickrInterfaceReset: function () {
- // first destroy it completely, then reshow the add
button
- this.flickrInterfaceDestroy();
- this.flickrButton.setDisabled( false );
- $( '#mwe-upwiz-upload-add-flickr-container' ).show();
- $( '#mwe-upwiz-upload-add-flickr' ).prop( 'disabled',
false );
- },
-
- /**
- * Removes the flickr interface.
- */
- flickrInterfaceDestroy: function () {
- $( '.mw-spinner' ).remove();
- $( '#mwe-upwiz-flickr-input' ).val( '' );
- $( '#mwe-upwiz-flickr-select-list' ).empty();
- $( '#mwe-upwiz-flickr-select-list-container' ).unbind();
- $( '#mwe-upwiz-select-flickr' ).remove();
- $( '#mwe-upwiz-flickr-select-list-container' ).hide();
- $( '#mwe-upwiz-upload-add-flickr-container' ).hide();
- $( '#mwe-upwiz-upload-add-flickr' ).prop( 'disabled',
true );
},
/**
diff --git a/resources/ui/steps/uw.ui.Upload.js
b/resources/ui/steps/uw.ui.Upload.js
index fda8dd9..ebd5a61 100644
--- a/resources/ui/steps/uw.ui.Upload.js
+++ b/resources/ui/steps/uw.ui.Upload.js
@@ -81,12 +81,54 @@
label: mw.message( 'mwe-upwiz-add-file-flickr'
).text(),
flags: 'constructive'
} ).on( 'click', function () {
- upload.emit( 'flickr-ui-init' );
+ upload.flickrInterfaceInit();
+ uw.eventFlowLogger.logEvent(
'flickr-upload-button-clicked' );
} );
-
this.$flickrAddFileContainer.append(
this.addFlickrFile.$element );
- this.$flickrSelect = $( '#mwe-upwiz-select-flickr' );
+ // Button to move on & upload the files that were
selected
+ this.flickrSelectButton = new OO.ui.ButtonWidget( {
+ id: 'mwe-upwiz-select-flickr',
+ label: mw.message( 'mwe-upwiz-add-file-0-free'
).text(),
+ flags: [ 'constructive', 'primary' ]
+ } );
+ this.$flickrSelectListContainer.append(
this.flickrSelectButton.$element );
+
+ // @todo: I may actually not want only 1 of this object
after all, but rather create it when we need to select new images - I assume
that's the reason I'm getting duplicates now
+ this.flickrChecker = new mw.FlickrChecker( this,
this.flickrSelectButton );
+
+ // A container holding a form
+ this.$flickrContainer = $( '<div
id="mwe-upwiz-upload-add-flickr-container"></div>' );
+
+ // Form whose submit event will be listened to and
prevented
+ this.$flickrForm = $( '<form
id="mwe-upwiz-flickr-url-form"></form>' )
+ .appendTo( this.$flickrContainer )
+ .on( 'submit', function () {
+ upload.flickrButton.setDisabled( true );
+ upload.flickrCheck();
+ // TODO Any particular reason to
stopPropagation ?
+ return false;
+ } );
+
+ // The input that will hold a flickr URL entered by the
user; will be appended to a form
+ this.$flickrInput = $( '<input
id="mwe-upwiz-flickr-input" type="text" />' )
+ .prependTo( this.$flickrForm );
+
+ this.flickrButton = new OO.ui.ButtonInputWidget( {
+ id: 'mwe-upwiz-upload-ctrl-flickr',
+ label: mw.message( 'mwe-upwiz-add-flickr'
).text(),
+ flags: [ 'progressive', 'primary' ],
+ type: 'submit'
+ } );
+ this.$flickrForm.append( this.flickrButton.$element );
+
+ // Add disclaimer
+ $( '<div id="mwe-upwiz-flickr-disclaimer"></div>' )
+ .html(
+ mw.message(
'mwe-upwiz-flickr-disclaimer1' ).parse() +
+ '<br/>' + mw.message(
'mwe-upwiz-flickr-disclaimer2' ).parse()
+ )
+ .appendTo( this.$flickrContainer );
}
this.nextStepButtonAllOk = new OO.ui.ButtonWidget( {
@@ -276,7 +318,7 @@
// empty the flickr lists
this.$flickrSelectList.empty();
this.$flickrSelectListContainer.unbind();
- this.$flickrSelect.unbind();
+ this.flickrSelectButton.$element.unbind();
};
uw.ui.Upload.prototype.moveTo = function ( uploads ) {
@@ -427,4 +469,62 @@
return this.config.UploadFromUrl && this.config.flickrApiKey
!== '';
};
+ /**
+ * Initiates the Interface to upload media from Flickr.
+ * Called when the user clicks on the 'Add images from Flickr' button.
+ */
+ uw.ui.Upload.prototype.flickrInterfaceInit = function () {
+ // Hide containers for selecting files, and show the flickr
interface instead
+ this.$addFileContainer.hide();
+ this.$flickrAddFileContainer.hide();
+ this.$flickrContainer.show();
+ this.flickrSelectButton.$element.show();
+ this.flickrButton.setDisabled( false );
+
+ // Add placeholder text to the Flickr URL input field
+ this.$flickrInput.placeholder( mw.message(
'mwe-upwiz-flickr-input-placeholder' ).text() );
+
+ // Insert form into the page
+ this.$div.find( '#mwe-upwiz-files' ).prepend(
this.$flickrContainer );
+
+ this.$flickrInput.focus();
+ };
+
+ /**
+ * Responsible for fetching license of the provided media.
+ */
+ uw.ui.Upload.prototype.flickrCheck = function () {
+ var ui = this,
+ flickrInputUrl = this.$flickrInput.val();
+
+ this.flickrChecker.getLicenses().done( function () {
+ ui.flickrChecker.checkFlickr( flickrInputUrl );
+ } );
+ };
+
+ /**
+ * Reset the interface if there is a problem while fetching the images
from
+ * the URL entered by the user.
+ */
+ uw.ui.Upload.prototype.flickrInterfaceReset = function () {
+ // first destroy it completely, then reshow the add button
+ this.flickrInterfaceDestroy();
+ this.flickrButton.setDisabled( false );
+ this.$flickrContainer.show();
+ this.flickrSelectButton.$element.show();
+ };
+
+ /**
+ * Removes the flickr interface.
+ */
+ uw.ui.Upload.prototype.flickrInterfaceDestroy = function () {
+ this.$flickrInput.val( '' );
+ this.$flickrSelectList.empty();
+ this.$flickrSelectListContainer.unbind();
+ this.$flickrSelectListContainer.hide();
+ this.$flickrContainer.hide();
+ this.flickrButton.setDisabled( true );
+ this.flickrSelectButton.$element.hide();
+ };
+
}( mediaWiki, jQuery, mediaWiki.uploadWizard, OO ) );
--
To view, visit https://gerrit.wikimedia.org/r/318240
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idf1f1be48b1afe5f4c9195691d952f440d30ca22
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/UploadWizard
Gerrit-Branch: master
Gerrit-Owner: Matthias Mullie <mmul...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
