From 90a8212c140a0b2e1fbbbed152a74941cc457a0d Mon Sep 17 00:00:00 2001 From: Prateek Saxena Date: Thu, 11 Feb 2016 20:51:39 +0530 Subject: [PATCH] mw.Upload.BookletLayout/Dialog: Add determinate progress bar The BookletLayout now emits events during the upload file phase. It uses these events to update a progress bar at the top of infoForm. Bug: T115861 Change-Id: I0fd7f21f3fc1ef042330b7571c247e09c24d1a5c --- resources/Resources.php | 1 + ...i.ForeignStructuredUpload.BookletLayout.js | 9 ++++++ .../mediawiki.Upload.BookletLayout.css | 16 ++++++++++ .../mediawiki.Upload.BookletLayout.js | 30 +++++++++++++++++-- 4 files changed, 54 insertions(+), 2 deletions(-) diff --git a/resources/Resources.php b/resources/Resources.php index b9dd3fa426..bb88414dba 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1189,6 +1189,7 @@ return array( 'oojs-ui', 'oojs-ui.styles.icons-content', 'oojs-ui.styles.icons-editing-advanced', + 'moment', 'mediawiki.Title', 'mediawiki.user', 'mediawiki.Upload', diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js index 23e80b992e..1fabe179a5 100644 --- a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js +++ b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js @@ -184,6 +184,11 @@ this.filePreview = new OO.ui.Widget( { classes: [ 'mw-upload-bookletLayout-filePreview' ] } ); + this.progressBarWidget = new OO.ui.ProgressBarWidget( { + progress: 0 + } ); + this.filePreview.$element.append( this.progressBarWidget.$element ); + this.filenameWidget = new OO.ui.TextInputWidget( { required: true, validate: /.+/ @@ -240,6 +245,10 @@ this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) ); this.dateWidget.on( 'change', this.onInfoFormChange.bind( this ) ); + this.on( 'fileUploadProgress', function ( progress ) { + this.progressBarWidget.setProgress( progress * 100 ); + }.bind( this ) ); + return this.infoForm; }; diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css index 11bad8c2c0..68062d02f0 100644 --- a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css +++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css @@ -7,6 +7,7 @@ padding: 1.5em; margin: -1.5em; margin-bottom: 1.5em; + position: relative; } .mw-upload-bookletLayout-infoForm.mw-upload-bookletLayout-hasThumbnail .mw-upload-bookletLayout-filePreview { @@ -16,4 +17,19 @@ .mw-upload-bookletLayout-filePreview p { line-height: 1em; margin: 0; +} + +.mw-upload-bookletLayout-filePreview .oo-ui-progressBarWidget { + border: none; + border-radius: 0; + background-color: transparent; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +.mw-upload-bookletLayout-filePreview .oo-ui-progressBarWidget-bar { + background-color: #347bff; + height: 0.5em; } \ No newline at end of file diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js index eaab8c7b47..33b10bdd30 100644 --- a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js +++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js @@ -1,4 +1,5 @@ -( function ( $, mw ) { +/*global moment*/ +( function ( $, mw, moment ) { /** * mw.Upload.BookletLayout encapsulates the process of uploading a file @@ -96,6 +97,14 @@ /* Events */ + /** + * Progress events for the uploaded file + * + * @event fileUploadProgress + * @param {number} progress In percentage + * @param {Object} duration Duration object from `moment.duration()` + */ + /** * The file has finished uploading * @@ -198,11 +207,13 @@ * file object. * * @protected + * @fires fileUploadProgress * @fires fileUploaded * @return {jQuery.Promise} */ mw.Upload.BookletLayout.prototype.uploadFile = function () { var deferred = $.Deferred(), + startTime = new Date(), layout = this, file = this.getFile(); @@ -224,6 +235,11 @@ // really be an error... var errorMessage = layout.getErrorMessageForStateDetails(); deferred.reject( errorMessage ); + }, function ( progress ) { + var elapsedTime = new Date() - startTime, + estimatedTotalTime = ( 1 / progress ) * elapsedTime, + estimatedRemainingTime = moment.duration( estimatedTotalTime - elapsedTime ); + layout.emit( 'fileUploadProgress', progress, estimatedRemainingTime ); } ); // If there is an error in uploading, come back to the upload page @@ -449,6 +465,11 @@ this.filePreview = new OO.ui.Widget( { classes: [ 'mw-upload-bookletLayout-filePreview' ] } ); + this.progressBarWidget = new OO.ui.ProgressBarWidget( { + progress: 0 + } ); + this.filePreview.$element.append( this.progressBarWidget.$element ); + this.filenameWidget = new OO.ui.TextInputWidget( { indicator: 'required', required: true, @@ -482,6 +503,10 @@ items: [ this.filePreview, fieldset ] } ); + this.on( 'fileUploadProgress', function ( progress ) { + this.progressBarWidget.setProgress( progress * 100 ); + }.bind( this ) ); + this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) ); this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) ); @@ -608,9 +633,10 @@ */ mw.Upload.BookletLayout.prototype.clear = function () { this.selectFileWidget.setValue( null ); + this.progressBarWidget.setProgress( 0 ); this.filenameWidget.setValue( null ).setValidityFlag( true ); this.descriptionWidget.setValue( null ).setValidityFlag( true ); this.filenameUsageWidget.setValue( null ); }; -}( jQuery, mediaWiki ) ); +}( jQuery, mediaWiki, moment ) ); -- 2.20.1