From e80ea1c4e3b527c6311779b4a3d80502ad51a086 Mon Sep 17 00:00:00 2001
From: Prateek Saxena <prtksxna@gmail.com>
Date: Thu, 11 Feb 2016 18:17:40 +0530
Subject: [PATCH] UploadBooklet: Show image thumbnail in both steps

Bug: T115860
Change-Id: I0794206dad06fd0652e9b62884e8996e836b73b3
---
 resources/Resources.php                       |  3 ++
 ...i.ForeignStructuredUpload.BookletLayout.js | 10 ++++-
 .../mediawiki.Upload.BookletLayout.css        | 19 ++++++++++
 .../mediawiki.Upload.BookletLayout.js         | 37 ++++++++++++++++++-
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 resources/src/mediawiki/mediawiki.Upload.BookletLayout.css

diff --git a/resources/Resources.php b/resources/Resources.php
index 60d4142496..b9dd3fa426 100644
--- 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 d8aa22fc7a..daacb2aa97 100644
--- 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
index 0000000000..11bad8c2c0
--- /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 b2f1981d50..eaab8c7b47 100644
--- 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 ) );
-- 
2.20.1