Display a placeholder text when author and source are missing

Change-Id: I38478956c5a0b5f204e5caa43e54db651f297887

MultimediaViewer.php

@@ -554,6 +554,7 @@ $wgResourceModules += array(
 			'multimediaviewer-commons-subtitle',
 
 			'multimediaviewer-credit',
+			'multimediaviewer-credit-fallback',
 
 			'multimediaviewer-userpage-link',
 

i18n/en.json

@@ -15,6 +15,7 @@
 	"multimediaviewer-datetime-uploaded": "Uploaded: $1",
 	"multimediaviewer-userpage-link": "{{GENDER:$2|Uploaded}} by $1",
 	"multimediaviewer-credit": "$1 - $2",
+	"multimediaviewer-credit-fallback": "View author information",
 	"multimediaviewer-metadata-error": "Error: Could not load image data. $1",
 	"multimediaviewer-thumbnail-error": "Error: Could not load thumbnail data. $1",
 	"multimediaviewer-license-cc-by-1.0": "CC BY 1.0",

i18n/qqq.json

@@ -20,7 +20,8 @@
 	"multimediaviewer-datetime-created": "Used in JavaScript code. Parameters:\n* $1 - time and date\nSee also:\n* {{msg-mw|Multimediaviewer-datetime-uploaded}}\n\nNote that the date comes from the description page and can have various forms (e.g. \"2000-01-01\", \"1st January 2000\", \"1492\", \"16th century\"...)\n\nAlso, this might refer to the date when the picture was taken, or the date when the depcited work was made - the usage is not consistent. You should choose a translation that works in all cases.\n{{Identical|Created}}",
 	"multimediaviewer-datetime-uploaded": "Used in JavaScript code. Parameters:\n* $1 - time and date (formatted)\nSee also:\n* {{msg-mw|Multimediaviewer-datetime-created}}\n{{Identical|Uploaded}}",
 	"multimediaviewer-userpage-link": "Link to the user page for the uploader of the image.\n\nUsed in JavaScript code.\n\nParameters:\n* $1 - the username of the uploader\n* $2 - their gender",
-	"multimediaviewer-credit": "Credit line for images. Parameters:\n* $1 - HTML describing the author\n* $2 - HTML describing the source\n\nNeither parameters are usernames, so GENDER is useless. Both come directly from the API, the extended metadata imageinfo prop in particular.\n\nThey will usually be derived from the HTML output from wikitext on a file description page - however, no complicated HTML, only links, will be allowed.",
+	"multimediaviewer-credit": "Credit line for images. Parameters:\n* $1 - HTML describing the author\n* $2 - HTML describing the source\n\nNeither parameters are usernames, so GENDER is useless. Both come directly from the API, the extended metadata imageinfo prop in particular.\n\nThey will usually be derived from the HTML output from wikitext on a file description page - however, no complicated HTML, only links, will be allowed.\n\nSee also {{msg-mw|multimediaviewer-credit-fallback}}",
+	"multimediaviewer-credit-fallback": "Text shown in place of the credit line ({{msg-mw|multimediaviewer-credit}}) when neither author nor source information is available.",
 	"multimediaviewer-metadata-error": "Text shown when the information on the metadata panel could not be loaded.\n\nParameters:\n* $1 - the error message (not localized)\nSee also:\n* {{msg-mw|Multimediaviewer-thumbnail-error}}",
 	"multimediaviewer-thumbnail-error": "Text shown when the image could not be loaded. Parameters:\n* $1 - the error message (not localized)\nSee also:\n* {{msg-mw|Multimediaviewer-metadata-error}}",
 	"multimediaviewer-license-cc-by-1.0": "Very short label for the Creative Commons Attribution license, version 1.0, used in a link to the file information page that has more licensing information.\n{{Identical|CC BY}}",

resources/mmv/ui/mmv.ui.metadataPanel.js

@@ -197,7 +197,10 @@
 
 		this.$credit = $( '<p>' )
 			.addClass( 'mw-mmv-credit empty' )
-			.appendTo( this.$imageMetadataLeft );
+			.appendTo( this.$imageMetadataLeft )
+			.on( 'click.mmv-mp', '.mw-mmv-credit-fallback', function ( e ) {
+				panel.trackLinkClick( this, 'author-page', e );
+			} );
 
 		// we need an inline container for tipsy, otherwise it would be centered weirdly
 		this.$authorAndSource = $( '<span>' )
@@ -406,60 +409,59 @@
 	};
 
 	/**
-	 * Bignasty function for setting source and author. Both #setAuthor and
-	 * #setSource use this with some shortcuts.
+	 * Set source and author.
 	 * @param {string} source With unsafe HTML
 	 * @param {string} author With unsafe HTML
+	 * @param {string} filepageUrl URL of the file page (used when other data is not available)
 	 */
-	MPP.setCredit = function ( source, author ) {
-		this.source = source || null;
-		this.author = author || null;
-
+	MPP.setCredit = function ( source, author, filepageUrl ) {
+		// sanitization will be done by TruncatableTextField.set()
 		if ( author && source ) {
 			this.creditField.set(
 				mw.message(
 					'multimediaviewer-credit',
-					this.author,
-					this.source
+					this.wrapAuthor( author ),
+					this.wrapSource( source )
 				).plain()
 			);
 		} else if ( author ) {
-			this.creditField.set( this.author );
+			this.creditField.set( this.wrapAuthor( author ) );
 		} else if ( source ) {
-			this.creditField.set( this.source );
+			this.creditField.set( this.wrapSource( source ) );
+		} else {
+			this.creditField.set(
+				$( '<a>' )
+					.addClass( 'mw-mmv-credit-fallback' )
+					.prop( 'href', filepageUrl )
+					.text( mw.message( 'multimediaviewer-credit-fallback' ).plain() )
+			);
 		}
 
-		this.$credit.toggleClass( 'empty', !author && !source );
+		this.$credit.removeClass( 'empty' );
 	};
 
 	/**
-	 * Sets the source in the panel
+	 * Wraps a source string it with MediaViewer styles
 	 * @param {string} source Warning - unsafe HTML sometimes goes here
+	 * @return {string} unsafe HTML
 	 */
-	MPP.setSource = function ( source ) {
-		if ( source ) {
-			source = $( '<span>' )
-				.addClass( 'mw-mmv-source' )
-				.append( $.parseHTML( source ) )
-				.get( 0 ).outerHTML;
-		}
-
-		this.setCredit( source, this.author );
+	MPP.wrapSource = function ( source ) {
+		return $( '<span>' )
+			.addClass( 'mw-mmv-source' )
+			.append( $.parseHTML( source ) )
+			.get( 0 ).outerHTML;
 	};
 
 	/**
-	 * Sets the author in the panel
+	 * Wraps an author string with MediaViewer styles
 	 * @param {string} author Warning - unsafe HTML sometimes goes here
+	 * @return {string} unsafe HTML
 	 */
-	MPP.setAuthor = function ( author ) {
-		if ( author ) {
-			author = $( '<span>' )
-				.addClass( 'mw-mmv-author' )
-				.append( $.parseHTML( author ) )
-				.get( 0 ).outerHTML;
-		}
-
-		this.setCredit( this.source, author );
+	MPP.wrapAuthor = function ( author ) {
+		return $( '<span>' )
+			.addClass( 'mw-mmv-author' )
+			.append( $.parseHTML( author ) )
+			.get( 0 ).outerHTML;
 	};
 
 	/**
@@ -602,13 +604,7 @@
 			} );
 		}
 
-		if ( imageData.source ) {
-			this.setSource( imageData.source );
-		}
-
-		if ( imageData.author ) {
-			this.setAuthor( imageData.author );
-		}
+		this.setCredit( imageData.source, imageData.author, imageData.descriptionUrl );
 
 		this.buttons.set( imageData, repoData );
 		this.description.set( imageData.description, image.caption );

tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js

@@ -127,7 +127,7 @@
 		panel.setImageInfo( image, imageData, repoData, gender );
 
 		assert.strictEqual( panel.$title.text(), title, 'Title is correctly set' );
-		assert.ok( panel.$credit.hasClass( 'empty' ), 'Credit is empty' );
+		assert.ok( panel.$credit.text(), 'Default credit is shown' );
 		assert.strictEqual( panel.$license.prop( 'href' ), imageData.descriptionUrl,
 			'User is directed to file page for license information' );
 		assert.ok( !panel.$license.prop( 'target' ), 'License information opens in same window' );