Merge "Go to the original image on image clicks"

MultimediaViewer.php

@@ -344,6 +344,7 @@ $wgResourceModules += array(
 		),
 
 		'messages' => array(
+			'multimediaviewer-viewfile-link',
 			'multimediaviewer-thumbnail-error',
 		),
 
@@ -755,10 +756,6 @@ $wgResourceModules += array(
 			'mmv.ui',
 			'oojs',
 		),
-
-		'messages' => array(
-			'multimediaviewer-viewfile-link',
-		),
 	),
 
 	'mmv.logging.Logger' => $wgMediaViewerResourceTemplate + array(

resources/mmv/mmv.js

@@ -905,10 +905,6 @@
 			viewer.imageInfoProvider.get( viewer.currentImageFileTitle ).done( function ( imageInfo ) {
 				document.location = imageInfo.url;
 			} );
-		} ).on( 'mmv-image-click', function () {
-			viewer.ui.panel.scroller.toggle( 'down' ).done( function () {
-				viewer.ui.buttons.showImageClickedHelp();
-			} );
 		} );
 	};
 

resources/mmv/ui/mmv.ui.canvas.js

@@ -105,6 +105,7 @@
 
 		this.imageRawMetadata = imageRawMetadata;
 		this.$image = $imageElement;
+		this.setUpImageClick();
 
 		this.$imageDiv.html( this.$image );
 	};
@@ -140,11 +141,30 @@
 		if ( !this.$image.is( imageElement ) ) { // http://bugs.jquery.com/ticket/4087
 			this.$image.replaceWith( $image );
 			this.$image = $image;
+
+			this.setUpImageClick();
 		}
 
 		this.setImageMaxDimensions();
 	};
 
+	/**
+	 * Registers click listener on the image, and a tooltip.
+	 */
+	C.setUpImageClick = function () {
+		var tooltipDelay = mw.config.get( 'wgMultimediaViewer').tooltipDelay;
+
+		this.$image
+			.prop( 'title', mw.message( 'multimediaviewer-viewfile-link' ) )
+			.tipsy( {
+				delayIn: tooltipDelay
+			} )
+			.on( 'click.mmv-view-original', function () {
+				mw.mmv.actionLogger.log( 'view-original-file' );
+				$( document ).trigger( 'mmv-viewfile' );
+			} );
+	};
+
 	/**
 	 * Registers listeners.
 	 */
@@ -176,6 +196,10 @@
 		}
 
 		this.$imageDiv.off( 'click.mmv-canvas' );
+
+		if ( this.$image ) {
+			this.$image.tipsy( 'hide' );
+		}
 	};
 
 	/**

resources/mmv/ui/mmv.ui.canvas.less

@@ -46,4 +46,6 @@
 	margin-right: auto;
 	margin-left: auto;
 	background: url('//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png') repeat;
+	cursor: pointer;
+	cursor: zoom-in;
 }

resources/mmv/ui/mmv.ui.canvasButtons.js

@@ -29,27 +29,13 @@
 	 * @param {jQuery} $fullscreenButton The fullscreen button from the parent class.
 	 */
 	function CanvasButtons( $container, $closeButton, $fullscreenButton ) {
-		var buttons = this,
-			tooltipDelay = mw.config.get( 'wgMultimediaViewer').tooltipDelay;
+		var buttons = this;
 
 		mw.mmv.ui.Element.call( this, $container );
 
 		this.$close = $closeButton;
 		this.$fullscreen = $fullscreenButton;
 
-		this.$viewFile = $( '<div>' )
-			.text( ' ' )
-			.prop( 'title', mw.message( 'multimediaviewer-viewfile-link' ).text() )
-			.tipsy( {
-				delayIn: tooltipDelay,
-				gravity: this.isRTL() ? 'sw' : 'se'
-			} )
-			.addClass( 'mw-mmv-viewfile' )
-			.click( function () {
-				mw.mmv.actionLogger.log( 'view-original-file' );
-				$( document ).trigger( 'mmv-viewfile' );
-			} );
-
 		this.$next = $( '<div>' )
 			.addClass( 'mw-mmv-next-image disabled' )
 			.html( '&nbsp;' );
@@ -64,8 +50,7 @@
 		this.$buttons = this.$close
 			.add( this.$fullscreen )
 			.add( this.$next )
-			.add( this.$prev )
-			.add( this.$viewFile );
+			.add( this.$prev );
 
 		this.$buttons.appendTo( this.$container );
 
@@ -182,25 +167,10 @@
 		}
 	};
 
-	/**
-	 * Shows usage help when the user clicked on the image (presumably to get to the original file).
-	 */
-	CBP.showImageClickedHelp = function () {
-		var buttons = this;
-
-		this.debouncedTooltipHide = this.debouncedTooltipHide || $.debounce( 3000, function () {
-			buttons.$viewFile.tipsy( 'hide' );
-		} );
-
-		this.$viewFile.tipsy( 'show' );
-		this.debouncedTooltipHide();
-	};
-
 	/**
 	 * Removes all UI things from the DOM, or hides them
 	 */
 	CBP.unattach = function () {
-		this.$viewFile.tipsy( 'hide' );
 		this.$close.tipsy( 'hide' );
 		this.$fullscreen.tipsy( 'hide' );
 	};

resources/mmv/ui/mmv.ui.canvasButtons.less

@@ -6,7 +6,6 @@
 
 .mw-mmv-close,
 .mw-mmv-fullscreen,
-.mw-mmv-viewfile,
 .mw-mmv-next-image,
 .mw-mmv-prev-image {
 	cursor: pointer;
@@ -25,7 +24,6 @@
 
 .mw-mmv-close.hidden,
 .mw-mmv-fullscreen.hidden,
-.mw-mmv-viewfile.hidden,
 .mw-mmv-next-image.hidden,
 .mw-mmv-prev-image.hidden {
 	display: none;
@@ -34,14 +32,12 @@
 .cursor-hidden {
 	.mw-mmv-close,
 	.mw-mmv-fullscreen,
-	.mw-mmv-viewfile,
 	.mw-mmv-next-image,
 	.mw-mmv-prev-image {
 		cursor: none;
 	}
 }
 
-.mw-mmv-viewfile,
 .mw-mmv-close,
 .mw-mmv-fullscreen {
 	right: @buttons-offset;
@@ -81,25 +77,11 @@
 	height: 22px;
 }
 
-.mw-mmv-viewfile {
-	bottom: (@buttons-offset + @metadatabar-above-fold-height);
-	/* @embed */
-	background-image: url(img/mw-open-control-ltr.svg);
-	width: 23px;
-	height: 23px;
-	margin-bottom: 14px;
-}
-
-
 .jq-fullscreened {
 	.mw-mmv-fullscreen {
 		/* @embed */
 		background-image: url(img/mw-defullscreen-ltr.svg);
 	}
-
-	.mw-mmv-viewfile {
-		display: none;
-	}
 }
 
 .mw-mmv-next-image {

tests/qunit/mmv/mmv.lightboxinterface.test.js

@@ -202,7 +202,7 @@
 		restoreScrollTo();
 	} );
 
-	QUnit.test( 'isAnyActiveButtonHovered', 25, function ( assert ) {
+	QUnit.test( 'isAnyActiveButtonHovered', 20, function ( assert ) {
 		var lightbox = new mw.mmv.LightboxInterface();
 
 		stubScrollTo();

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

@@ -43,7 +43,7 @@
 
 		assert.strictEqual( canvas.$image, $imageElem, 'Image element set correctly.' );
 		assert.strictEqual( canvas.imageRawMetadata, imageRawMetadata, 'Raw metadata set correctly.' );
-		assert.strictEqual( canvas.$imageDiv.html(), '<img>', 'Image added to container.' );
+		assert.strictEqual( canvas.$imageDiv.html(), '<img original-title="View original file">', 'Image added to container.' );
 		assert.ok( !canvas.$imageDiv.hasClass( 'empty' ), 'Canvas is visible.' );
 
 		canvas.empty();

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

@@ -43,31 +43,4 @@
 		buttons.$next.click();
 		buttons.$prev.click();
 	} );
-
-	QUnit.test( 'View original tooltip', 5, function( assert ) {
-		var clock = this.sandbox.useFakeTimers(),
-			$qf = $( '#qunit-fixture' ),
-			buttons = new mw.mmv.ui.CanvasButtons( $qf, $( '<div>' ), $( '<div>' ) );
-
-		function isViewOriginalTooltipVisible( buttons ) {
-			var tipsy = buttons.$viewFile.tipsy( true ); // returns the tipsy object
-			return tipsy.$tip && tipsy.$tip[0] && $.contains( document, tipsy.$tip[0] );
-		}
-
-		assert.ok( !isViewOriginalTooltipVisible( buttons ), 'The help tooltip is not visible initially' );
-		buttons.showImageClickedHelp();
-		clock.tick( 100 );
-		assert.ok( isViewOriginalTooltipVisible( buttons ), 'The tooltip is visible after the image was clicked' );
-		clock.tick( 5000 );
-		assert.ok( !isViewOriginalTooltipVisible( buttons ), 'The tooltip disappears eventually' );
-
-		buttons.showImageClickedHelp();
-		clock.tick( 2000 );
-		buttons.showImageClickedHelp();
-		clock.tick( 2000 );
-		assert.ok( isViewOriginalTooltipVisible( buttons ), 'The tooltip stays visible for longer when the image is clicked while it is visible' );
-		clock.tick( 2000 );
-		assert.ok( !isViewOriginalTooltipVisible( buttons ), 'The tooltip still disappears eventually' );
-
-	} );
 }( mediaWiki, jQuery ) );