Fix bug in spinner code

Needed to use $.createSpinner instead of hacking in the image directly,
else bits.wikimedia.org won't work as expected. Will test on beta.

Change-Id: I0eba356f7910fd6a3173ed66c601fd42264ff336

MultimediaViewer.php

@@ -68,6 +68,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 		'multilightbox.image',
 		'mediawiki.Title',
 		'jquery.ui.dialog',
+		'jquery.spinner',
 	),
 
 	'messages' => array(

css/ext.multimediaViewer.css

@@ -211,3 +211,16 @@
 	padding-top: 20px;
 	width: 50%;
 }
+
+.mlb-image .mw-spinner {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.mlb-image.empty .mw-spinner {
+	display: block;
+}
+
+.mlb-image.empty img {
+	display: none;
+}

js/ext.multimediaViewer.js

@@ -90,15 +90,24 @@
 
 				viewer.lightbox.currentIndex = index;
 
-				// Open with a basic thumbnail and no information - fill in async
-				viewer.lightbox.images[index].src = mw.config.get( 'wgScriptPath', '' ) + '/resources/jquery/images/spinner-large.gif';
+				// Open with the already-loaded thumbnail
+				// Avoids trying to load /wiki/Undefined and doesn't
+				// cost any network time - the library currently needs
+				// some src attribute to work. Will fix.
+				viewer.lightbox.images[index].src = $this.closest( '.thumb' ).find( '.image img' ).prop( 'src' );
 				viewer.lightbox.open();
+				viewer.lightbox.iface.$imageDiv.append( $.createSpinner( {
+					id: 'mw-mlb-loading-spinner',
+					size: 'large'
+				} ) );
 
 				viewer.fetchImageInfo( fileTitle, function ( imageInfo ) {
 					var imageEle = new Image();
 
 					imageEle.onload = function () {
 						viewer.lightbox.iface.replaceImageWith( imageEle );
+						viewer.lightbox.iface.$imageDiv.removeClass( 'empty' );
+						$.removeSpinner( 'mw-mlb-loading-spinner' );
 						viewer.setImageInfo( fileTitle, imageInfo );
 					};
 
@@ -148,18 +157,12 @@
 			return false;
 		} );
 
-		lightboxHooks.register( 'imageLoaded', function () {
-			// Add link wrapper to the image div, put image inside it
-			this.$imageLink = $( '<a>' )
-			.addClass( 'mw-mlb-image-link' )
-			.html( this.$image.detach() );
-
-		this.$imageDiv.append( this.$imageLink );
-		} );
-
 		lightboxHooks.register( 'modifyInterface', function () {
 			var ui = this;
 
+			this.$imageDiv
+				.addClass( 'empty' );
+
 			this.$imageDesc = $( '<p>' )
 				.addClass( 'mw-mlb-image-desc' );
 
@@ -434,6 +437,8 @@
 			this.$useFile.data( 'src', null );
 
 			this.$useFileLi.addClass( 'empty' );
+
+			this.$imageDiv.addClass( 'empty' );
 		} );
 	}
 

js/multilightbox/lightboxinterface.js

@@ -141,7 +141,7 @@
 	LIP.load = function ( image ) {
 		var ele = image.getImageElement( function () {
 				iface.$image = $( ele );
-				iface.$imageDiv.html( ele );
+				iface.$imageDiv.append( iface.$image );
 				image.globalMaxWidth = iface.$image.width();
 				image.globalMaxHeight = iface.$image.height();
 				image.autoResize( ele, iface.isFullScreen ? 0.9 : 0.5 );