Merge "Fix interface creation"

css/ext.multimediaViewer.css

@@ -3,8 +3,6 @@
 	padding-left: 10px;
 	font-weight: bold;
 
-	color: white;
-
 	position: absolute;
 	bottom: 0px;
 	left: 0px;
@@ -40,9 +38,6 @@
 	right: 0px;
 	left: 0px;
 
-	background-color: black;
-	color: white;
-
 	text-align: left;
 	padding-left: 10px;
 }
@@ -52,7 +47,6 @@
 .mw-lightbox-extra-info-div a:visited,
 .mw-lightbox-extra-info-div a:active,
 .mw-lightbox-extra-info-div a:link {
-	color: white;
 	text-decoration: none;
 }
 
@@ -82,13 +76,19 @@
 
 .mlb-fullscreen {
 	background-image: url( '../img/mw-fullscreen.svg' );
+}
 
-.mw-mlb-file-title {
-	color: #FFFFFF;
+.mw-mlb-title-contain {
 	vertical-align: middle;
 	margin-left: 10px;
 }
 
+.mw-mlb-title {
+	margin-bottom: 1px;
+	margin-top: 0px;
+	padding: 0px;
+}
+
 .mw-mlb-image-metadata {
 	margin-top: 30px;
 	width: 100%;
@@ -109,3 +109,21 @@
 .mw-mlb-image-links-div {
 	right: 0px;
 }
+
+.mw-mlb-image-links li {
+	list-style: none;
+}
+
+.mw-mlb-image-links li:before {
+	display: inline-block;
+	vertical-align: middle;
+	height: 16px;
+	width: 16px;
+	content: ' ';
+	margin-right: 10px;
+	background-size: contain;
+}
+
+.mw-mlb-image-links li.empty:before {
+	background-image: none !important;
+}

js/ext.multimediaViewer.js

@@ -58,25 +58,18 @@
 
 				viewer.lightbox.currentIndex = index;
 
-				viewer.fetchImageInfo( fileTitle, function ( imageInfo ) {
-					var $title, title;
+				// Open with a basic thumbnail and no information - fill in async
+				viewer.lightbox.images[index].src = this.src;
+				viewer.lightbox.open();
 
-					viewer.lightbox.images[index].src = imageInfo.imageinfo[0].url;
+				viewer.fetchImageInfo( fileTitle, function ( imageInfo ) {
+					var ui = viewer.lightbox.iface,
+						innerInfo = imageInfo.imageinfo[0] || {};
+
+					viewer.lightbox.images[index].src = innerInfo.url;
 					viewer.lightbox.open();
 
-					$title = $( '.mw-mlb-file-title' );
-
-					title = new mw.Title( imageInfo.title );
-
-					if ( $title.length === 0 ) {
-						$( '.mlb-controls' ).append(
-							$( '<span>' )
-								.addClass( 'mw-mlb-file-title' )
-								.text( title.getNameText() )
-						);
-					} else {
-						$title.text( title.getNameText() );
-					}
+					ui.$title.text( fileTitle.getNameText() );
 				} );
 
 				return false;
@@ -97,12 +90,16 @@
 		} );
 
 		lightboxHooks.register( 'modifyInterface', function () {
-			this.$imageDesc = $( '<p>' ).addClass( 'mw-mlb-image-desc' );
+			this.$imageDesc = $( '<p>' )
+				.addClass( 'mw-mlb-image-desc' );
+
 			this.$imageDescDiv = $( '<div>' )
 				.addClass( 'mw-mlb-image-desc-div' )
-				.html( this.$imageLinks );
+				.html( this.$imageDesc );
+
+			this.$imageLinks = $( '<ul>' )
+				.addClass( 'mw-mlb-image-links' );
 
-			this.$imageLinks = $( '<ul>' ).addClass( 'mw-mlb-image-links' );
 			this.$imageLinkDiv = $( '<div>' )
 				.addClass( 'mw-mlb-image-links-div' )
 				.html( this.$imageLinks );
@@ -113,6 +110,15 @@
 				.append( this.$imageLinkDiv );
 
 			this.$wrapper.append( this.$imageMetadata );
+
+			this.$title = $( '<p>' )
+				.addClass( 'mw-mlb-title' );
+
+			this.$titleDiv = $( '<div>' )
+				.addClass( 'mw-mlb-title-contain' )
+				.append( this.$title );
+
+			this.$controlBar.append( this.$titleDiv );
 		} );
 	}
 

js/multilightbox/lightboxinterface.js

@@ -57,7 +57,7 @@
 			this.$main
 		);
 
-		lightboxHooks.callAll( 'modifyinterface', this );
+		lightboxHooks.callAll( 'modifyInterface', this );
 
 		window.addEventListener( 'keyup', function ( e ) {
 			if ( e.keyCode === 27 ) {