Add info links for Media Viewer

Bug: 56332
Change-Id: I2d229481693735a4662f1d898bd0f19c200e39bc

MultimediaViewer.i18n.php

@@ -56,6 +56,9 @@ $messages['en'] = array(
 	'multimediaviewer-use-file-owt' => 'Use this file on a wiki page, as a thumbnail',
 	'multimediaviewer-use-file-own' => 'Use this file on a wiki page, inline',
 	'multimediaviewer-use-file-offwiki' => 'Use this file on another website',
+
+	'multimediaviewer-about-mmv' => 'About Media Viewer',
+	'multimediaviewer-discuss-mmv' => 'Leave feedback',
 );
 
 /** Message documentation (Message documentation)
@@ -112,6 +115,9 @@ They will usually be derived from the HTML output from wikitext on a file descri
 	'multimediaviewer-use-file-owt' => 'Label for wikitext used to show an image with the thumb option and a helpful caption. Similar to the Commons gadget stockPhoto.',
 	'multimediaviewer-use-file-own' => 'Label for wikitext used to show an image inline with a helpful title attribute. Similar to the Commons gadget stockPhoto.',
 	'multimediaviewer-use-file-offwiki' => 'Label for HTML used to show an image on an external site, with a link back to the wiki. Similar to the Commons gadget stockPhoto.',
+	
+	'multimediaviewer-about-mmv' => 'Text for a link to a page with more information about Media Viewer software.',
+	'multimediaviewer-discuss-mmv' => 'Text for a link to a page where the user can discuss the Media Viewer software.',
 );
 
 /** Arabic (العربية)

MultimediaViewer.php

@@ -81,6 +81,8 @@ $wgResourceModules['ext.multimediaViewer'] = array_merge( array(
 		'multimediaviewer-use-file-owt',
 		'multimediaviewer-use-file-own',
 		'multimediaviewer-use-file-offwiki',
+		'multimediaviewer-about-mmv',
+		'multimediaviewer-discuss-mmv',
 	),
 ), $moduleInfo );
 
@@ -124,6 +126,7 @@ foreach ( $licenses as $license ) {
 $wgAutoloadClasses['MultimediaViewerHooks'] = __DIR__ . '/MultimediaViewerHooks.php';
 $wgHooks['GetBetaFeaturePreferences'][] = 'MultimediaViewerHooks::getBetaPreferences';
 $wgHooks['BeforePageDisplay'][] = 'MultimediaViewerHooks::getModules';
+$wgHooks['ResourceLoaderGetConfigVars'][] = 'MultimediaViewerHooks::resourceLoaderGetConfigVars';
 
 $wgExtensionCredits['other'][] = array(
 	'path' => __FILE__,

MultimediaViewerHooks.php

@@ -22,6 +22,11 @@
  */
 
 class MultimediaViewerHooks {
+	/** Link to more information about this module */
+	protected static $infoLink = '//mediawiki.org/wiki/Special:MyLanguage/Multimedia/About_Media_Viewer';
+
+	/** Link to a page where this module can be discussed */
+	protected static $discussionLink = '//mediawiki.org/wiki/Special:MyLanguage/Talk:Multimedia/About_Media_Viewer';
 
 	/*
 	 * Handler for BeforePageDisplay hook
@@ -31,7 +36,7 @@ class MultimediaViewerHooks {
 	 * @param Skin $skin
 	 * @return bool
 	 */
-	static function getModules( &$out, &$skin ) {
+	public static function getModules( &$out, &$skin ) {
 		if ( class_exists( 'BetaFeatures')
 			&& !BetaFeatures::isFeatureEnabled( $out->getUser(), 'multimedia-viewer' ) ) {
 			return true;
@@ -44,17 +49,30 @@ class MultimediaViewerHooks {
 	}
 
 	// Add a beta preference to gate the feature
-	static function getBetaPreferences( $user, &$prefs ) {
+	public static function getBetaPreferences( $user, &$prefs ) {
 		global $wgExtensionAssetsPath;
 
 		$prefs['multimedia-viewer'] = array(
 			'label-message' => 'multimediaviewer-pref',
 			'desc-message' => 'multimediaviewer-pref-desc',
-			'info-link' => 'https://mediawiki.org/wiki/Multimedia/Media_Viewer',
-			'discussion-link' => 'https://mediawiki.org/wiki/Talk:Multimedia/Media_Viewer',
+			'info-link' => self::$infoLink,
+			'discussion-link' => self::$discussionLink,
 			'screenshot' => $wgExtensionAssetsPath . '/MultimediaViewer/img/viewer.svg',
 		);
 
 		return true;
 	}
+
+	/**
+	 * Export variables used in both PHP and JS to keep DRY
+	 * @param array $vars
+	 * @return bool
+	 */
+	public static function resourceLoaderGetConfigVars( &$vars ) {
+		$vars['wgMultimediaViewer'] = array(
+			'infoLink' => self::$infoLink,
+			'discussionLink' => self::$discussionLink,
+		);
+		return true;
+	}
 }

css/ext.multimediaViewer.css

@@ -104,23 +104,14 @@
 
 .mw-mlb-image-desc-div,
 .mw-mlb-image-links-div {
+	display: inline-block;
 	width: 50%;
-	position: absolute;
-	top: 0px;
-}
-
-.mw-mlb-image-desc-div {
-	left: 0px;
 }
 
 .mw-mlb-image-desc {
 	color: #6f7073;
 }
 
-.mw-mlb-image-links-div {
-	right: 0px;
-}
-
 .mw-mlb-image-links li {
 	list-style: none;
 	font-size: 0.8em;
@@ -214,3 +205,9 @@
 .mw-mlb-use-file-dialog input {
 	width: 100%;
 }
+
+.mw-mlb-mmv-about-links {
+	font-size: 0.8em;
+	padding-top: 20px;
+	width: 50%;
+}

js/ext.multimediaViewer.js

@@ -181,6 +181,26 @@
 
 			this.$postDiv.append( this.$imageMetadata );
 
+			this.$mmvAboutLink = $( '<a>' )
+				.prop( 'href', mw.config.get( 'wgMultimediaViewer' ).infoLink )
+				.text( mw.message( 'multimediaviewer-about-mmv' ).text() )
+				.addClass( 'mw-mlb-mmv-about-link' );
+
+			this.$mmvDiscussLink = $( '<a>' )
+				.prop( 'href', mw.config.get( 'wgMultimediaViewer' ).discussionLink )
+				.text( mw.message( 'multimediaviewer-discuss-mmv' ).text() )
+				.addClass( 'mw-mlb-mmv-discuss-link' );
+
+			this.$mmvAboutLinks = $( '<div>' )
+				.addClass( 'mw-mlb-mmv-about-links' )
+				.append(
+					this.$mmvAboutLink,
+					' | ',
+					this.$mmvDiscussLink
+				);
+
+			this.$imageMetadata.append( this.$mmvAboutLinks );
+
 			this.$repo = $( '<a>' )
 				.addClass( 'mw-mlb-repo' )
 				.prop( 'href', '#' );