From 4adde1685a33d8e8b626306baeb493996de7d2e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20Tisza?= Date: Thu, 26 Jun 2014 01:26:49 +0000 Subject: [PATCH] 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 | 1 + resources/mmv/mmv.js | 4 +++ resources/mmv/ui/mmv.ui.canvas.js | 8 +++++- resources/mmv/ui/mmv.ui.canvasButtons.js | 14 ++++++++++ .../mmv/ui/mmv.ui.metadataPanelScroller.js | 24 +++++++++++++---- .../qunit/mmv/ui/mmv.ui.canvasButtons.test.js | 27 +++++++++++++++++++ 6 files changed, 72 insertions(+), 6 deletions(-) diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 6b548d1f4..dd81fd8cb 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -384,6 +384,7 @@ $wgResourceModules += array( 'mmv.ui', 'oojs', 'jquery.tipsy', + 'jquery.throttle-debounce', ), 'messages' => array( diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index dd3de196a..6e201337d 100644 --- a/resources/mmv/mmv.js +++ b/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(); + } ); } ); }; diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js index 3f100d29a..8e2737adf 100644 --- a/resources/mmv/ui/mmv.ui.canvas.js +++ b/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' ); }; /** diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.js b/resources/mmv/ui/mmv.ui.canvasButtons.js index 5f83011c6..16f456d46 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.js +++ b/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 */ diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js b/resources/mmv/ui/mmv.ui.metadataPanelScroller.js index c677f120b..3caf40c36 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.js +++ b/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; }; /** diff --git a/tests/qunit/mmv/ui/mmv.ui.canvasButtons.test.js b/tests/qunit/mmv/ui/mmv.ui.canvasButtons.test.js index c94fff073..64cf99818 100644 --- a/tests/qunit/mmv/ui/mmv.ui.canvasButtons.test.js +++ b/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, $( '
' ), $( '
' ) ); + + 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 ) );