UploadBooklet: Show image thumbnail in both steps

Bug: T115860
Change-Id: I0794206dad06fd0652e9b62884e8996e836b73b3

diff --git a/resources/Resources.php b/resources/Resources.php
index 60d4142..b9dd3fa 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1182,6 +1182,9 @@ return array(
                'scripts' => array(
                        'resources/src/mediawiki/mediawiki.Upload.BookletLayout.js',
                ),
+               'styles' => array(
+                       'resources/src/mediawiki/mediawiki.Upload.BookletLayout.css',
+               ),
                'dependencies' => array(
                        'oojs-ui',
                        'oojs-ui.styles.icons-content',

diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
index d8aa22f..daacb2a 100644 (file)
--- a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
+++ b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js
@@ -158,6 +158,8 @@
                        layout.getDateFromExif( file ).done( function ( date ) {
                                layout.dateWidget.setValue( date );
                        } );
+
+                       layout.updateFilePreview();
                } );
 
                return this.uploadForm;
@@ -179,6 +181,9 @@
        mw.ForeignStructuredUpload.BookletLayout.prototype.renderInfoForm = function () {
                var fieldset;
 
+               this.filePreview = new OO.ui.Widget( {
+                       classes: [ 'mw-upload-bookletLayout-filePreview' ]
+               } );
                this.filenameWidget = new OO.ui.TextInputWidget( {
                        required: true,
                        validate: /.+/
@@ -223,7 +228,10 @@
                                align: 'top'
                        } )
                ] );
-               this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
+               this.infoForm = new OO.ui.FormLayout( {
+                       classes: [ 'mw-upload-bookletLayout-infoForm' ],
+                       items: [ this.filePreview, fieldset ]
+               } );
 
                // Validation
                this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );

diff --git a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css
new file mode 100644 (file)
index 0000000..11bad8c
--- /dev/null
+++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.css
@@ -0,0 +1,19 @@
+.mw-upload-bookletLayout-filePreview {
+       width: 100%;
+       height: 1em;
+       background-color: #eee;
+       background-size: cover;
+       background-position: center center;
+       padding: 1.5em;
+       margin: -1.5em;
+       margin-bottom: 1.5em;
+}
+
+.mw-upload-bookletLayout-infoForm.mw-upload-bookletLayout-hasThumbnail .mw-upload-bookletLayout-filePreview {
+       height: 10em;
+}
+
+.mw-upload-bookletLayout-filePreview p {
+       line-height: 1em;
+       margin: 0;
+}
\ 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 b2f1981..eaab8c7 100644 (file)
--- a/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
+++ b/resources/src/mediawiki/mediawiki.Upload.BookletLayout.js
@@ -383,7 +383,8 @@
         * @return {OO.ui.FormLayout}
         */
        mw.Upload.BookletLayout.prototype.renderUploadForm = function () {
-               var fieldset;
+               var fieldset,
+                       layout = this;
 
                this.selectFileWidget = new OO.ui.SelectFileWidget( {
                        showDropTarget: true
@@ -395,9 +396,35 @@
                // Validation
                this.selectFileWidget.on( 'change', this.onUploadFormChange.bind( this ) );
 
+               this.selectFileWidget.on( 'change', function () {
+                       layout.updateFilePreview();
+               } );
+
                return this.uploadForm;
        };
 
+       /**
+        * Updates the file preview on the info form when a file is added.
+        *
+        * @protected
+        */
+       mw.Upload.BookletLayout.prototype.updateFilePreview = function () {
+               this.selectFileWidget.loadAndGetImageUrl().done( function ( url ) {
+                       this.filePreview.$element.find( 'p' ).remove();
+                       this.filePreview.$element.css( 'background-image', 'url(' + url + ')' );
+                       this.infoForm.$element.addClass( 'mw-upload-bookletLayout-hasThumbnail' );
+               }.bind( this ) ).fail( function () {
+                       this.filePreview.$element.find( 'p' ).remove();
+                       if ( this.selectFileWidget.getValue() ) {
+                               this.filePreview.$element.append(
+                                       $( '<p>' ).text( this.selectFileWidget.getValue().name )
+                               );
+                       }
+                       this.filePreview.$element.css( 'background-image', '' );
+                       this.infoForm.$element.removeClass( 'mw-upload-bookletLayout-hasThumbnail' );
+               }.bind( this ) );
+       };
+
        /**
         * Handle change events to the upload form
         *
@@ -419,6 +446,9 @@
        mw.Upload.BookletLayout.prototype.renderInfoForm = function () {
                var fieldset;
 
+               this.filePreview = new OO.ui.Widget( {
+                       classes: [ 'mw-upload-bookletLayout-filePreview' ]
+               } );
                this.filenameWidget = new OO.ui.TextInputWidget( {
                        indicator: 'required',
                        required: true,
@@ -447,7 +477,10 @@
                                help: mw.msg( 'upload-form-label-infoform-description-tooltip' )
                        } )
                ] );
-               this.infoForm = new OO.ui.FormLayout( { items: [ fieldset ] } );
+               this.infoForm = new OO.ui.FormLayout( {
+                       classes: [ 'mw-upload-bookletLayout-infoForm' ],
+                       items: [ this.filePreview, fieldset ]
+               } );
 
                this.filenameWidget.on( 'change', this.onInfoFormChange.bind( this ) );
                this.descriptionWidget.on( 'change', this.onInfoFormChange.bind( this ) );