Open MMV on hash change on file pages, add link

Change-Id: I4aa53d50bcd4880f341dfb59b7a451e2d5bda2ad

MultimediaViewer.php

@@ -686,6 +686,10 @@ $wgResourceModules += array(
 			'mmv.logger',
 			'mmv.HtmlUtils',
 		),
+
+		'messages' => array(
+			'multimediaviewer-view-expanded',
+		),
 	),
 
 	'mmv.bootstrap.autostart' => $wgMediaViewerResourceTemplate + array(

MultimediaViewerHooks.php

@@ -76,7 +76,7 @@ class MultimediaViewerHooks {
 	 * @return bool
 	 */
 	public static function getModulesForArticle( &$out, &$skin ) {
-		if ( count( $out->getFileSearchOptions() ) > 0 ) {
+		if ( count( $out->getFileSearchOptions() ) > 0 || $out->getTitle()->inNamespace( NS_FILE ) ) {
 			return self::getModules( $out );
 		}
 

i18n/en.json

@@ -92,5 +92,6 @@
     "multimediaviewer-feedback-popup-text": "Leave feedback about this new media viewing experience",
     "multimediaviewer-description-page-button-text": "More details",
     "multimediaviewer-description-page-popup-text": "More details on $1",
-	"multimediaviewer-commons-subtitle": "The free media repository"
+    "multimediaviewer-commons-subtitle": "The free media repository",
+    "multimediaviewer-view-expanded": "Expand view"
 }

i18n/qqq.json

@@ -96,6 +96,6 @@
     "multimediaviewer-feedback-popup-text": "Additional popup text of the button on top of the metadata panel which brings up a feedback survey.\n\nSee also:\n* {{msg-mw|Multimediaviewer-feedback-button-text}}",
     "multimediaviewer-description-page-button-text": "Text of the button on top of the metadata panel which links to the file description page.\n\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-popup-text}}",
     "multimediaviewer-description-page-popup-text": "Additional popup text of the button on top of the metadata panel which links to the file description page.\n\nParameters:\n* $1 - the name of the site where the file comes from (e.g. \"Wikimedia Commons\")\nSee also:\n* {{msg-mw|Multimediaviewer-description-page-button-text}}.",
-	"multimediaviewer-commons-subtitle": "Additional text to display under {{mw-msg|multimediaviewer-repository}} when the image is from Commons."
-
+    "multimediaviewer-commons-subtitle": "Additional text to display under {{mw-msg|multimediaviewer-repository}} when the image is from Commons.",
+    "multimediaviewer-view-expanded": "Label for a link on a file page to view the current image in the media viewer."
 }

resources/mmv/img/expand.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   width="100%"
+   height="100%"
+   viewBox="0 0 29 24"
+   id="Layer_1"
+   xml:space="preserve"><metadata
+   id="metadata13"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs11" />
+<g
+   id="g3">
+	<path
+   d="M 8,5.6 V 16.7 H 22.5 V 5.6 L 8,5.6 z m 12.9,8.8 H 9.5 l 3.4,-4.4 0.5,-0.2 3.2,3.4 1.7,-1 2.6,2.2 0,0 z"
+   id="path5"
+   style="fill:#777777" />
+	<polygon
+   points="6.5,7.2 6.5,18.4 22.1,18.4 22.1,17.6 7.3,17.6 7.3,7.2 "
+   id="polygon7"
+   style="fill:#777777" />
+</g>
+</svg>

resources/mmv/mmv.bootstrap.js

@@ -43,7 +43,7 @@
 
 		this.thumbsReadyDeferred = $.Deferred();
 		this.thumbs = [];
-		this.$thumbs = $( '.gallery .image img, a.image img' );
+		this.$thumbs = $( '.gallery .image img, a.image img, #file a img' );
 		this.processThumbs();
 	}
 
@@ -159,6 +159,22 @@
 			caption = this.htmlUtils.htmlToTextWithLinks( $thumbCaption.html() || '' );
 		}
 
+		if ( $thumb.closest( '#file' ).length > 0 ) {
+			// This is a file page. Make adjustments.
+			link = $thumb.closest( 'a' ).prop( 'href' );
+
+			$( '<p>' )
+				.append(
+					$link = $( '<a>' )
+						// It won't matter because we catch the click event anyway, but
+						// give the user some URL to see.
+						.prop( 'href', $thumb.closest( 'a' ).prop( 'href' ) )
+						.addClass( 'mw-mmv-view-expanded' )
+						.text( mw.message( 'multimediaviewer-view-expanded' ).text() )
+				)
+				.appendTo( $( '.fullMedia' ) );
+		}
+
 		// This is the data that will be passed onto the mmv
 		this.thumbs.push( {
 			thumb : thumb,

resources/mmv/mmv.bootstrap.less

@@ -1,3 +1,5 @@
+@expand-link-border-color: #dddddd;
+
 .mw-mmv-overlay {
 	position: fixed;
 	top: 0px;
@@ -25,3 +27,14 @@ body.mw-mmv-lightbox-open > :not(.mw-mmv-overlay, .mw-mmv-wrapper) {
 	/** Stop the article from scrolling in the background */
 	display: none;
 }
+
+.mw-mmv-view-expanded {
+	display: inline-block;
+	border: 1px solid @expand-link-border-color;
+	padding: 5px;
+	padding-left: 34px;
+	/* @embed */
+	background-image: url('img/expand.svg');
+	background-position: left;
+	background-repeat: no-repeat;
+}

tests/qunit/mmv/mmv.bootstrap.test.js

@@ -57,9 +57,9 @@
 		} );
 	} );
 
-	QUnit.test( 'Check viewer invoked when clicking on legit image links', 4, function ( assert ) {
+	QUnit.test( 'Check viewer invoked when clicking on legit image links', 7, function ( assert ) {
 		// TODO: Is <div class="gallery"><span class="image"><img/></span></div> valid ???
-		var div, link, link2, link3, bootstrap,
+		var div, link, link2, link3, link4, bootstrap,
 			viewer = { initWithThumbs : $.noop };
 
 		// Create gallery with legit link image
@@ -74,9 +74,22 @@
 		link3 = $( '<a>' ).addClass( 'noImage' ).appendTo( div );
 		$( '<img>' ).attr( 'src',  'thumb3.jpg' ).appendTo( link3 );
 
+		$( '<div>' ).addClass( 'fullMedia' ).appendTo( div );
+		$( '<img>' ).attr( 'src', 'thumb4.jpg' ).appendTo(
+			$( '<a>' )
+				.appendTo(
+					$( '<div>' )
+						.attr( 'id', 'file' )
+						.appendTo( '#qunit-fixture' )
+				)
+		);
+
 		// Create a new bootstrap object to trigger the DOM scan, etc.
 		bootstrap = createBootstrap( viewer );
 
+		link4 = $( '.fullMedia .mw-mmv-view-expanded' );
+		assert.ok( link4.length, 'Link for viewing expanded file was set up.' );
+
 		bootstrap.setupOverlay = function () {
 			assert.ok( true, 'Overlay was set up' );
 		};
@@ -91,6 +104,9 @@
 		// Click on legit link
 		link2.trigger( { type : 'click', which : 1 } );
 
+		// Click on legit link
+		link4.trigger( { type: 'click', which: 1 } );
+
 		bootstrap.setupOverlay = function () {
 			assert.ok( false, 'Overlay was not set up' );
 		};