Add remote image repository information to list

Change-Id: Icfab093a44530949d1672a683fb8d4c0e7b901fc

MultimediaViewer.i18n.php

@@ -30,6 +30,7 @@ $messages['en'] = array(
 	'multimediaviewer-pref' => 'Media Viewer',
 	'multimediaviewer-pref-desc' => 'Improve your multimedia viewing experience with this new tool. It displays images in larger size on pages that have thumbnails. Images are shown in a nicer lightbox overlay, and can also be viewed in full-size.',
 	'multimediaviewer-file-page' => 'Go to corresponding file page',
+	'multimediaviewer-repository' => 'Learn more on $1',
 );
 
 /** Message documentation (Message documentation)
@@ -40,6 +41,7 @@ $messages['qqq'] = array(
 	'multimediaviewer-pref' => 'Preference title',
 	'multimediaviewer-pref-desc' => 'Description of preference',
 	'multimediaviewer-file-page' => 'Text for a link to the file page for an image.',
+	'multimediaviewer-repository' => 'Link to the repository where the image is hosted. $1 is the display name of that site.',
 );
 
 /** Arabic (العربية)

MultimediaViewer.php

@@ -71,6 +71,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 
 	'messages' => array(
 		'multimediaviewer-file-page',
+		'multimediaviewer-repository',
 	),
 ), $moduleInfo );
 

css/ext.multimediaViewer.css

@@ -124,6 +124,10 @@
 	background-size: contain;
 }
 
+.mw-mlb-image-links li.mw-mlb-repo-li:before {
+	background-image: url( '../img/repo.svg' );
+}
+
 .mw-mlb-image-links li.empty:before {
 	background-image: none !important;
 }

img/repo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="64" height="64" version="1.1"><circle r="9" cy="32" cx="32" fill="#939598" fill-opacity="1" /><circle r="26" cy="32" cx="32" fill="none" stroke-width="12" stroke="#939598" /><g style="fill:#939598" transform="translate(32,12)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(47,18) rotate(45)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(52,32) rotate(90)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(47,47) rotate(135)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(32,52) rotate(180)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(12,32) rotate(270)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(18,18) rotate(315)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g><g style="fill:#939598" transform="translate(18,46.5) rotate(225)"><path stroke="#006398" stroke-width="3" d="M 0 0 L 0 3" /><polygon points="-4,3 4,3 0,11" /></g></svg>

js/ext.multimediaViewer.js

@@ -63,13 +63,41 @@
 				viewer.lightbox.open();
 
 				viewer.fetchImageInfo( fileTitle, function ( imageInfo ) {
-					var ui = viewer.lightbox.iface,
+					var repoInfo, articlePath,
+						ui = viewer.lightbox.iface,
 						innerInfo = imageInfo.imageinfo[0] || {};
 
 					viewer.lightbox.images[index].src = innerInfo.url;
 					viewer.lightbox.open();
 
 					ui.$title.text( fileTitle.getNameText() );
+
+					if ( viewer.repoInfo ) {
+						repoInfo = viewer.repoInfo[imageInfo.imagerepository];
+					}
+
+					if ( repoInfo ) {
+						if ( repoInfo.displayname ) {
+							ui.$repo.text(
+								mw.message( 'multimediaviewer-repository', repoInfo.displayname ).text()
+							);
+						} else {
+							ui.$repo.text(
+								mw.message( 'multimediaviewer-repository', mw.config.get( 'wgSiteName' ) ).text()
+							);
+						}
+
+						if ( repoInfo.server && repoInfo.articlepath ) {
+							articlePath = repoInfo.server + repoInfo.articlepath;
+						} else {
+							articlePath = mw.config.get( 'wgArticlePath' );
+						}
+
+						ui.$repo
+							.prop( 'href', articlePath.replace( '$1', fileTitle.getPrefixedText() ) );
+					}
+
+					ui.$repoLi.toggleClass( 'empty', !Boolean( repoInfo ) );
 				} );
 
 				return false;
@@ -83,10 +111,10 @@
 		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() );
+			.addClass( 'mw-mlb-image-link' )
+			.html( this.$image.detach() );
 
-			this.$imageDiv.append( this.$imageLink );
+		this.$imageDiv.append( this.$imageLink );
 		} );
 
 		lightboxHooks.register( 'modifyInterface', function () {
@@ -111,6 +139,17 @@
 
 			this.$wrapper.append( this.$imageMetadata );
 
+			this.$repo = $( '<a>' )
+				.addClass( 'mw-mlb-repo' )
+				.prop( 'href', '#' );
+
+			this.$repoLi = $( '<li>' )
+				.addClass( 'mw-mlb-repo-li' )
+				.addClass( 'empty' )
+				.append( this.$repo );
+
+			this.$imageLinks.append( this.$repoLi );
+
 			this.$title = $( '<p>' )
 				.addClass( 'mw-mlb-title' );
 
@@ -136,6 +175,7 @@
 				if ( !data || !data.query ) {
 					// Damn, failure. Do it gracefully-ish.
 					cb( {} );
+					return;
 				}
 
 				viewer.setRepoInfo( data.query.repos );
@@ -162,8 +202,6 @@
 	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;
@@ -193,16 +231,6 @@
 
 				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;
 				}
@@ -223,7 +251,7 @@
 				apiArgs.meta = 'filerepoinfo';
 			}
 
-			viewer.api.get( apiArgs ).done( apiCallback( '' ) );
+			viewer.api.get( apiArgs ).done( apiCallback( null ) );
 		}
 
 		var imageInfo,