Add source and authour to the title div

Strips out complex formatting, which should be useful later on as well.

Depends on:

* core
:* I77303d8e535fc1c42e14cfb853814e5c434a81ec
* CommonsMetadata
:* I5e6bc45f9751641e16426231dabcc8277b86fee0

Change-Id: Id835fd8133b9762e7bec10783f4fa4b983177aed

MultimediaViewer.i18n.php

@@ -34,6 +34,7 @@ $messages['en'] = array(
 	'multimediaviewer-datetime-created' => 'Created on $1',
 	'multimediaviewer-datetime-uploaded' => 'Uploaded on $1',
 	'multimediaviewer-userpage-link' => '{{GENDER:$2|Uploaded}} by $1',
+	'multimediaviewer-credit' => '$1 - $2',
 );
 
 /** Message documentation (Message documentation)
@@ -48,6 +49,7 @@ $messages['qqq'] = array(
 	'multimedia-datetime-created' => 'Date and time the image or work was created. $1 is always a date string, no need to translate.',
 	'multimedia-datetime-uploaded' => 'Date and time the image was uploaded - fallback in case there is no data for creation date. $1 is always a date string, no need to translate.',
 	'multimediaviewer-userpage-link' => 'Link to the user page for the uploader of the image. $1 is the username of the uploader, $2 is their gender.',
+	'multimediaviewer-credit' => 'Credit line for images - $1 is HTML describing the authour, $2 is HTML describing the source. Neither are usernames, so GENDER is useless. Both come directly from the API, the extended metadata imageinfo prop in particular. They will usually be derived from the HTML output from wikitext on a file description page - however, no complicated HTML, only links, will be allowed.',
 );
 
 /** Arabic (العربية)

MultimediaViewer.php

@@ -75,6 +75,7 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 		'multimediaviewer-datetime-created',
 		'multimediaviewer-datetime-uploaded',
 		'multimediaviewer-userpage-link',
+		'multimediaviewer-credit',
 	),
 ), $moduleInfo );
 

css/ext.multimediaViewer.css

@@ -89,6 +89,10 @@
 	padding: 0px;
 }
 
+.mw-mlb-author {
+	font-weight: bold;
+}
+
 .mw-mlb-image-metadata {
 	margin-top: 30px;
 	width: 64%;

css/multilightbox.css

@@ -86,3 +86,7 @@
 .mlb-fullscreen-div .mlb-fullscreen {
 	background-image: url("../img/defullscreen.svg");
 }
+
+.mw-mlb-credit.empty {
+	display: none;
+}

js/ext.multimediaViewer.js

@@ -154,6 +154,7 @@
 						desc,
 						datetime, dtmsg,
 						username,
+						source, author,
 						ui = viewer.lightbox.iface,
 						innerInfo = imageInfo.imageinfo[0] || {};
 
@@ -238,6 +239,46 @@
 						}
 
 						ui.$datetimeLi.toggleClass( 'empty', !Boolean( datetime ) );
+
+						source = extmeta.Credit;
+						author = extmeta.Artist;
+
+						if ( source ) {
+							source = source.value;
+							ui.$source.html( source );
+						}
+
+						if ( author ) {
+							author = author.value;
+							ui.$author.html( author );
+						}
+
+						ui.$author.html(
+							whitelistHtml( ui.$author )
+						);
+
+						ui.$source.html(
+							whitelistHtml( ui.$source )
+						);
+
+						if ( source && author ) {
+							ui.$credit.html(
+								mw.message(
+									'multimediaviewer-credit',
+									ui.$author.get( 0 ).outerHTML,
+									ui.$source.get( 0 ).outerHTML
+								).plain()
+							);
+						} else {
+							// Clobber the contents and only have one of the fields
+							if ( source ) {
+								ui.$credit.html( ui.$source );
+							} else if ( author ) {
+								ui.$credit.html( ui.$author );
+							}
+						}
+
+						ui.$credit.toggleClass( 'empty', !Boolean( source ) && !Boolean( author ) );
 					}
 				} );
 
@@ -317,9 +358,29 @@
 			this.$title = $( '<p>' )
 				.addClass( 'mw-mlb-title' );
 
+			this.$source = $( '<span>' )
+				.addClass( 'mw-mlb-source' );
+
+			this.$author = $( '<span>' )
+				.addClass( 'mw-mlb-author' );
+
+			this.$credit = $( '<p>' )
+				.addClass( 'mw-mlb-credit' )
+				.addClass( 'empty' )
+				.html(
+					mw.message(
+						'multimediaviewer-credit',
+						this.$author.get( 0 ).outerHTML,
+						this.$source.get( 0 ).outerHTML
+					).plain()
+				);
+
 			this.$titleDiv = $( '<div>' )
 				.addClass( 'mw-mlb-title-contain' )
-				.append( this.$title );
+				.append(
+					this.$title,
+					this.$credit
+				);
 
 			this.$controlBar.append( this.$titleDiv );