mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 05:07:36 +00:00
Merge "Go to the original image on image clicks"
This commit is contained in:
commit
79f1ee4a09
|
@ -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(
|
||||
|
|
|
@ -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();
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
|
|
|
@ -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' );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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( ' ' );
|
||||
|
@ -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' );
|
||||
};
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -202,7 +202,7 @@
|
|||
restoreScrollTo();
|
||||
} );
|
||||
|
||||
QUnit.test( 'isAnyActiveButtonHovered', 25, function ( assert ) {
|
||||
QUnit.test( 'isAnyActiveButtonHovered', 20, function ( assert ) {
|
||||
var lightbox = new mw.mmv.LightboxInterface();
|
||||
|
||||
stubScrollTo();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 ) );
|
||||
|
|
Loading…
Reference in a new issue