diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 78e8b93bc..a5de6e683 100644 --- a/MultimediaViewer.php +++ b/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( diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index a7e2bd281..8e8f79ef9 100644 --- a/resources/mmv/mmv.js +++ b/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(); - } ); } ); }; diff --git a/resources/mmv/ui/mmv.ui.canvas.js b/resources/mmv/ui/mmv.ui.canvas.js index 8e2737adf..cddfa3a55 100644 --- a/resources/mmv/ui/mmv.ui.canvas.js +++ b/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' ); + } }; /** diff --git a/resources/mmv/ui/mmv.ui.canvas.less b/resources/mmv/ui/mmv.ui.canvas.less index d1f671875..c76ece272 100644 --- a/resources/mmv/ui/mmv.ui.canvas.less +++ b/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; } diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.js b/resources/mmv/ui/mmv.ui.canvasButtons.js index 16f456d46..f99e97b95 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.js +++ b/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 = $( '
' ) - .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 = $( '
' ) .addClass( 'mw-mmv-next-image disabled' ) .html( ' ' ); @@ -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' ); }; diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.less b/resources/mmv/ui/mmv.ui.canvasButtons.less index deab626b1..426fa3335 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.less +++ b/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 { diff --git a/tests/qunit/mmv/mmv.lightboxinterface.test.js b/tests/qunit/mmv/mmv.lightboxinterface.test.js index 63f70abef..00e477ccf 100644 --- a/tests/qunit/mmv/mmv.lightboxinterface.test.js +++ b/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(); diff --git a/tests/qunit/mmv/ui/mmv.ui.canvas.test.js b/tests/qunit/mmv/ui/mmv.ui.canvas.test.js index e007e416a..63d53edb1 100644 --- a/tests/qunit/mmv/ui/mmv.ui.canvas.test.js +++ b/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(), '', 'Image added to container.' ); + assert.strictEqual( canvas.$imageDiv.html(), '', 'Image added to container.' ); assert.ok( !canvas.$imageDiv.hasClass( 'empty' ), 'Canvas is visible.' ); canvas.empty(); diff --git a/tests/qunit/mmv/ui/mmv.ui.canvasButtons.test.js b/tests/qunit/mmv/ui/mmv.ui.canvasButtons.test.js index 64cf99818..c94fff073 100644 --- a/tests/qunit/mmv/ui/mmv.ui.canvasButtons.test.js +++ b/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, $( '
' ), $( '
' ) ); - - 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 ) );