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

diff --git a/resources/Resources.php b/resources/Resources.php
index b9dd3fa..bb88414 100644 (file)
--- 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 23e80b9..1fabe17 100644 (file)
--- 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 11bad8c..68062d0 100644 (file)
--- 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 eaab8c7..33b10bd 100644 (file)
--- 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 ) );