Display correct file type on download button

Works, but awkward - the extension name changes a little later than the button
text itself. This is hard to avoid since we don't know beforehand
what the thumbnail type is - we have to wait for the API request.
(We can't do thumbnail URL guessing here since we cannot catch the 404 error.)

In general the whole API handling here is not so good, with a separate API
request going out when we should just get all size options in a single request,
when the user opens the reuse panel.

Change-Id: I502b7cb4e99d8af348d7d1967eb8343ec0f926fe
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/471

resources/mmv/ui/mmv.ui.reuse.download.js

@@ -143,34 +143,54 @@
 	 */
 	DP.handleSizeSwitch = function ( item ) {
 		var download = this,
-			value = item.getData(),
-			message = mw.message(
-				'multimediaviewer-download-' + value.name + '-button-name' ).text(),
-			sizeMessage = mw.message( 'multimediaviewer-embed-dimensions-with-file-format',
-				mw.message( 'multimediaviewer-embed-dimensions', value.width, value.height ).text(),
-				this.imageExtension
-			).text();
-
-		// Update button label and size strings to reflect new selected size
-		this.$downloadButton.html(
-			'<span class="multimediaviewer-download-image-size-name">' +
-			message + '</span>' +
-			'<span class="multimediaviewer-download-image-size">' +
-			sizeMessage + '</span>'
-		);
+			value = item.getData();
 
 		// Disable download while we get the image
 		this.$downloadButton.addClass( 'disabledLink' );
+		// Set a temporary message. It will be updated once we have the file type.
+		this.setButtonText( value.name, this.imageExtension, value.width, value.height );
 
 		this.utils.getThumbnailUrlPromise( value.width ).done( function ( thumbnail ) {
 			download.$downloadButton.attr( 'href', thumbnail.url + '?download' );
 			download.$previewLink.attr( 'href', thumbnail.url );
-
+			download.setButtonText( value.name, download.getExtensionFromUrl( thumbnail.url ),
+				value.width, value.height );
 			// Re-enable download
 			download.$downloadButton.removeClass( 'disabledLink' );
 		} );
 	};
 
+	/**
+	 * Sets the text of the download button.
+	 * @param {string} sizeClass A size class such as 'small'
+	 * @param {string} extension file extension
+	 * @param {number} width
+	 * @param {number} height
+	 */
+	DP.setButtonText = function( sizeClass, extension, width, height ) {
+		var sizeClasMessage, sizeMessage, dimensionMessage;
+
+		sizeClasMessage = mw.message( 'multimediaviewer-download-' + sizeClass + '-button-name' ).text();
+		dimensionMessage = mw.message( 'multimediaviewer-embed-dimensions', width, height ).text();
+		sizeMessage = mw.message( 'multimediaviewer-embed-dimensions-with-file-format',
+			dimensionMessage, extension ).text();
+
+		// Update button label and size strings to reflect new selected size
+		this.$downloadButton.html(
+			'<span class="multimediaviewer-download-image-size-name">' + sizeClasMessage + '</span>'
+				+ '<span class="multimediaviewer-download-image-size">' + sizeMessage + '</span>'
+		);
+	};
+
+	/**
+	 * Chops off the extension part of an URL.
+	 * @param {string} url
+	 */
+	DP.getExtensionFromUrl = function( url ) {
+		var urlParts = url.split( '.' );
+		return urlParts[urlParts.length - 1];
+	};
+
 	/**
 	 * Sets the data on the element.
 	 *

tests/qunit/mmv/ui/mmv.ui.reuse.download.test.js

@@ -16,14 +16,10 @@
  */
 
 ( function ( mw, $ ) {
-	function makeDownload() {
-		return new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) );
-	}
-
 	QUnit.module( 'mmv.ui.reuse.download', QUnit.newMwEnvironment() );
 
 	QUnit.test( 'Sanity test, object creation and UI construction', 6, function ( assert ) {
-		var download = makeDownload();
+		var download = new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) );
 
 		assert.ok( download, 'download UI element is created.' );
 		assert.strictEqual( download.$pane.length, 1, 'Pane div created.' );
@@ -34,11 +30,11 @@
 	} );
 
 	QUnit.test( 'set()/empty():', 5, function ( assert ) {
-		var download = makeDownload(),
+		var download = new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) ),
 			src = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
 			image = { // fake mw.mmv.model.Image
 				title: new mw.Title( 'File:Foobar.jpg' ),
-				url: src,
+				url: src
 			};
 
 		assert.strictEqual( download.imageExtension, undefined, 'Image extension is not set.' );
@@ -60,10 +56,10 @@
 	} );
 
 	QUnit.test( 'attach()/unattach():', 2, function ( assert ) {
-		var download = makeDownload(),
+		var download = new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) ),
 			image = {
 				title: new mw.Title( 'File:Foobar.jpg' ),
-				url: 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg',
+				url: 'https://upload.wikimedia.org/wikipedia/commons/3/3a/Foobar.jpg'
 			};
 
 		download.set( image );
@@ -111,7 +107,7 @@
 	} );
 
 	QUnit.test( 'handleSizeSwitch():', 6, function ( assert ) {
-		var download = makeDownload(),
+		var download = new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) ),
 			newImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/3a/NewFoobar.jpg';
 
 		assert.strictEqual( download.$downloadButton.html(), '', 'Button has empty content.' );
@@ -129,4 +125,22 @@
 		assert.strictEqual( download.$previewLink.attr( 'href' ), newImageUrl, 'Preview link href updated.' );
 	} );
 
+	QUnit.test( 'setButtonText() sanity check:', 2, function ( assert ) {
+		var download = new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) ),
+			message;
+
+		download.setButtonText( 'large', 'jpg', 100, 200 );
+		assert.ok( true, 'Setting the text did not cause any errors' );
+
+		message = download.$downloadButton.html();
+		download.setButtonText( 'small', 'png', 1000, 2000 );
+		assert.notStrictEqual( download.$downloadButton.html(), message, 'Button text was updated' );
+	} );
+
+	QUnit.test( 'getExtensionFromUrl():', 1, function ( assert ) {
+		var download = new mw.mmv.ui.reuse.Download( $( '#qunit-fixture' ) );
+
+		assert.strictEqual( download.getExtensionFromUrl( 'http://example.com/bing/foo.bar.png' ),
+			'png', 'Extension is parsed correctly' );
+	} );
 }( mediaWiki, jQuery ) );