Show help tooltip for "view original file" button on image click

Change-Id: Ia9e20f55bcdd0482e78a6e9aa5a0625ec2717e78
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/712

MultimediaViewer.php

@@ -384,6 +384,7 @@ $wgResourceModules += array(
 			'mmv.ui',
 			'oojs',
 			'jquery.tipsy',
+			'jquery.throttle-debounce',
 		),
 
 		'messages' => array(

resources/mmv/mmv.js

@@ -881,6 +881,10 @@
 			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

@@ -56,7 +56,7 @@
 		this.$imageWrapper = $imageWrapper;
 
 		/**
-		 * Main container of image and metadata, needed to propagate resize events.
+		 * Main container of image and metadata, needed to propagate events.
 		 * @property {jQuery}
 		 * @private
 		 */
@@ -158,6 +158,10 @@
 			};
 			window.addEventListener( 'resize', this.resizeListener );
 		}
+
+		this.$imageDiv.on( 'click.mmv-canvas', 'img', function () {
+			canvas.$mainWrapper.trigger( $.Event( 'mmv-image-click' ) );
+		} );
 	};
 
 	/**
@@ -170,6 +174,8 @@
 			window.removeEventListener( 'resize', this.resizeListener );
 			this.resizeListener = null;
 		}
+
+		this.$imageDiv.off( 'click.mmv-canvas' );
 	};
 
 	/**

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

@@ -182,6 +182,20 @@
 		}
 	};
 
+	/**
+	 * 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
 	 */

resources/mmv/ui/mmv.ui.metadataPanelScroller.js

@@ -117,22 +117,36 @@
 
 	/**
 	 * Toggles the metadata div being totally visible.
+	 * @param {string} [forceDirection] 'up' or 'down' makes the panel move on that direction (and is a noop
+	 *  if the panel is already at the upmost/bottommost position); without the parameter, the panel position
+	 *  is toggled. (Partially open counts as open.)
+	 * @return {jQuery.Deferred} a deferred which resolves after the animation has finished.
 	 */
 	MPSP.toggle = function ( forceDirection ) {
-		var scrollTopWhenOpen = this.$container.outerHeight() - this.$controlBar.outerHeight(),
+		var deferred = $.Deferred(),
+			scrollTopWhenOpen = this.$container.outerHeight() - this.$controlBar.outerHeight(),
 			scrollTopWhenClosed = 0,
 			scrollTop = $.scrollTo().scrollTop(),
 			panelIsOpen = scrollTop > scrollTopWhenClosed,
 			scrollTopTarget = panelIsOpen ? scrollTopWhenClosed : scrollTopWhenOpen,
-			wasOpen = scrollTopTarget === scrollTopWhenOpen;
+			isOpening = scrollTopTarget === scrollTopWhenOpen;
 
 		if ( forceDirection ) {
 			scrollTopTarget = forceDirection === 'down' ? scrollTopWhenClosed : scrollTopWhenOpen;
 		}
 
-		mw.mmv.actionLogger.log( wasOpen ? 'metadata-open' : 'metadata-close' );
-
-		$.scrollTo( scrollTopTarget, this.toggleScrollDuration );
+		// don't log / animate if the panel is already in the end position
+		if ( scrollTopTarget === scrollTop ) {
+			deferred.resolve();
+		} else {
+			mw.mmv.actionLogger.log( isOpening ? 'metadata-open' : 'metadata-close' );
+			$.scrollTo( scrollTopTarget, this.toggleScrollDuration, {
+				onAfter: function () {
+					deferred.resolve();
+				}
+			} );
+		}
+		return deferred;
 	};
 
 	/**

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

@@ -43,4 +43,31 @@
 		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 ) );