From dd3df43e37a4b1d3c6faf9482513307d5ddf804d Mon Sep 17 00:00:00 2001
From: Mark Holmquist <mtraceur@member.fsf.org>
Date: Thu, 31 Oct 2013 15:03:59 -0700
Subject: [PATCH] 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                  |  1 +
 css/ext.multimediaViewer.css          | 13 +++++++++++++
 js/ext.multimediaViewer.js            | 27 ++++++++++++++++-----------
 js/multilightbox/lightboxinterface.js |  2 +-
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index 998f07b78..93fe8be8b 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -68,6 +68,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 		'multilightbox.image',
 		'mediawiki.Title',
 		'jquery.ui.dialog',
+		'jquery.spinner',
 	),
 
 	'messages' => array(
diff --git a/css/ext.multimediaViewer.css b/css/ext.multimediaViewer.css
index 13f68da53..b5dd2ab7c 100644
--- a/css/ext.multimediaViewer.css
+++ b/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;
+}
diff --git a/js/ext.multimediaViewer.js b/js/ext.multimediaViewer.js
index 8444a55e9..36c35df42 100755
--- a/js/ext.multimediaViewer.js
+++ b/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' );
 		} );
 	}
 
diff --git a/js/multilightbox/lightboxinterface.js b/js/multilightbox/lightboxinterface.js
index fab6b19cd..3812fccb4 100644
--- a/js/multilightbox/lightboxinterface.js
+++ b/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 );