Merge "Pull data from API, load title"

MultimediaViewer.php

@@ -66,6 +66,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 	'dependencies' => array(
 		'multilightbox',
 		'multilightbox.image',
+		'mediawiki.Title',
 	),
 
 	'messages' => array(

css/ext.multimediaViewer.css

@@ -82,4 +82,30 @@
 
 .mlb-fullscreen {
 	background-image: url( '../img/mw-fullscreen.svg' );
+
+.mw-mlb-file-title {
+	color: #FFFFFF;
+	vertical-align: middle;
+	margin-left: 10px;
+}
+
+.mw-mlb-image-metadata {
+	margin-top: 30px;
+	width: 100%;
+	position: relative;
+}
+
+.mw-mlb-image-desc-div,
+.mw-mlb-image-links-div {
+	width: 50%;
+	position: absolute;
+	top: 0px;
+}
+
+.mw-mlb-image-desc-div {
+	left: 0px;
+}
+
+.mw-mlb-image-links-div {
+	right: 0px;
 }

js/ext.multimediaViewer.js

@@ -16,24 +16,38 @@
  */
 
 ( function ( mw, $ ) {
-	var MultiLightbox, LightboxImage, lightboxHooks;
+	var MultiLightbox, LightboxImage, lightboxHooks,
+		iiprops = [
+			'timestamp',
+			'user',
+			'userid',
+			'comment',
+			'url',
+			'size',
+			'sha1',
+			'mime',
+			'mediatype',
+			'metadata'
+		];
 
 	function MultimediaViewer() {
 		var $thumbs = $( '.thumbimage' ),
 			urls = [],
 			viewer = this;
 
+		this.api = new mw.Api();
+		this.imageInfo = {};
+
 		$thumbs.each( function ( i, thumb ) {
-			var $thumb = $( thumb ),
+			var fileLink,
+				$thumb = $( thumb ),
 				$link = $thumb.closest( 'a.image' ),
 				$thumbContain = $link.closest( '.thumb' ),
 				$enlarge = $thumbContain.find( '.magnify a' ),
 				$links = $link.add( $enlarge ),
 				filePageLink = $link.prop( 'href' ),
-				filename = $thumb.prop( 'alt' ),
-				articlePath = mw.config.get( 'wgArticlePath' ),
-				index = urls.length,
-				fileLink = articlePath.replace( '$1', 'Special:Filepath/' + filename );
+				fileTitle = mw.Title.newFromImg( $thumb ),
+				index = urls.length;
 
 			$links.data( 'filePageLink', filePageLink );
 			urls.push( new LightboxImage( fileLink ) );
@@ -41,8 +55,30 @@
 
 			$links.click( function ( e ) {
 				e.preventDefault();
+
 				viewer.lightbox.currentIndex = index;
-				viewer.lightbox.open();
+
+				viewer.fetchImageInfo( fileTitle, function ( imageInfo ) {
+					var $title, title;
+
+					viewer.lightbox.images[index].src = imageInfo.imageinfo[0].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() );
+					}
+				} );
+
 				return false;
 			} );
 		} );
@@ -59,8 +95,152 @@
 
 			this.$imageDiv.append( this.$imageLink );
 		} );
+
+		lightboxHooks.register( 'modifyInterface', function () {
+			this.$imageDesc = $( '<p>' ).addClass( 'mw-mlb-image-desc' );
+			this.$imageDescDiv = $( '<div>' )
+				.addClass( 'mw-mlb-image-desc-div' )
+				.html( this.$imageLinks );
+
+			this.$imageLinks = $( '<ul>' ).addClass( 'mw-mlb-image-links' );
+			this.$imageLinkDiv = $( '<div>' )
+				.addClass( 'mw-mlb-image-links-div' )
+				.html( this.$imageLinks );
+
+			this.$imageMetadata = $( '<div>' )
+				.addClass( 'mw-mlb-image-metadata' )
+				.html( this.$imageDescDiv )
+				.append( this.$imageLinkDiv );
+
+			this.$wrapper.append( this.$imageMetadata );
+		} );
 	}
 
+	MultimediaViewer.prototype.fetchRepoInfo = function ( cb ) {
+		var viewer = this;
+
+		if ( this.repoInfo !== undefined ) {
+			cb( this.repoInfo );
+		} else {
+			this.api.get( {
+				action: 'query',
+				format: 'json',
+				meta: 'filerepoinfo'
+			}, function ( data ) {
+				if ( !data || !data.query ) {
+					// Damn, failure. Do it gracefully-ish.
+					cb( {} );
+				}
+
+				viewer.setRepoInfo( data.query.repos );
+				cb( viewer.repoInfo );
+			} );
+		}
+	};
+
+	MultimediaViewer.prototype.setRepoInfo = function ( repos ) {
+		var i, repo;
+
+		repos = repos || [];
+
+		if ( this.repoInfo === undefined ) {
+			this.repoInfo = {};
+		}
+
+		for ( i = 0; i < repos.length; i++ ) {
+			repo = repos[i];
+			this.repoInfo[repo.name] = repo;
+		}
+	};
+
+	MultimediaViewer.prototype.fetchImageInfo = function ( fileTitle, cb ) {
+		function apiCallback( sitename ) {
+			return function ( data ) {
+				var ii, iikeys, i;
+
+				if ( !data || !data.query ) {
+					// No information, oh well
+					return;
+				}
+
+				viewer.setRepoInfo( data.query.repos );
+
+				$.each( data.query.pages, function ( i, page ) {
+					imageInfo = page;
+					return false;
+				} );
+
+				if ( viewer.imageInfo[filename] === undefined ) {
+					if ( sitename === null ) {
+						viewer.imageInfo[filename] = imageInfo;
+					} else {
+						viewer.imageInfo[filename] = {};
+					}
+
+					viewer.imageInfo[filename].sites = {};
+
+					if ( !viewer.imageInfo[filename].imageinfo ||
+							viewer.imageInfo[filename].imageinfo.length === 0 ) {
+						viewer.imageInfo[filename].imageinfo = [{}];
+					}
+				}
+
+				viewer.imageInfo[filename].sites[sitename] = imageInfo;
+
+				ii = imageInfo.imageinfo[0];
+				iikeys = Object.keys( ii );
+				for ( i = 0; i < iikeys.length; i++ ) {
+					viewer.imageInfo[filename].imageinfo[0][iikeys[i]] = ii[iikeys[i]];
+				}
+
+				if ( imageInfo.title ) {
+					viewer.imageInfo[filename].title = imageInfo.title;
+				}
+
+				if ( imageInfo.pageid ) {
+					viewer.imageInfo[filename].pageid = imageInfo.pageid;
+				}
+
+				// Give back the information we have
+				cb( viewer.imageInfo[filename], viewer.repoInfo );
+			};
+		}
+
+		function fetchImageInfoCallback() {
+			var repoInfo;
+
+			if ( viewer.repoInfo !== undefined ) {
+				repoInfo = viewer.repoInfo;
+			}
+
+			if ( repoInfo === undefined ) {
+				apiArgs.meta = 'filerepoinfo';
+			}
+
+			viewer.api.get( apiArgs ).done( apiCallback( '' ) );
+		}
+
+		var imageInfo,
+			filename = fileTitle.getPrefixedText(),
+			apiArgs = {
+				action: 'query',
+				format: 'json',
+				titles: filename,
+				prop: 'imageinfo',
+				iiprop: iiprops.join( '|' )
+			},
+			viewer = this;
+
+		if ( this.imageInfo[filename] === undefined ) {
+			// Fetch it in the same API query as the image info
+			fetchImageInfoCallback();
+		} else {
+			this.fetchRepoInfo( function ( res ) {
+				cb( viewer.imageInfo[filename], res );
+			} );
+		}
+	};
+
 	$( function () {
 		MultiLightbox = window.MultiLightbox;
 		LightboxImage = window.LightboxImage;