mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-09-29 13:17:35 +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(
|
'messages' => array(
|
||||||
|
'multimediaviewer-viewfile-link',
|
||||||
'multimediaviewer-thumbnail-error',
|
'multimediaviewer-thumbnail-error',
|
||||||
),
|
),
|
||||||
|
|
||||||
|
@ -755,10 +756,6 @@ $wgResourceModules += array(
|
||||||
'mmv.ui',
|
'mmv.ui',
|
||||||
'oojs',
|
'oojs',
|
||||||
),
|
),
|
||||||
|
|
||||||
'messages' => array(
|
|
||||||
'multimediaviewer-viewfile-link',
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
|
|
||||||
'mmv.logging.Logger' => $wgMediaViewerResourceTemplate + array(
|
'mmv.logging.Logger' => $wgMediaViewerResourceTemplate + array(
|
||||||
|
|
|
@ -905,10 +905,6 @@
|
||||||
viewer.imageInfoProvider.get( viewer.currentImageFileTitle ).done( function ( imageInfo ) {
|
viewer.imageInfoProvider.get( viewer.currentImageFileTitle ).done( function ( imageInfo ) {
|
||||||
document.location = imageInfo.url;
|
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.imageRawMetadata = imageRawMetadata;
|
||||||
this.$image = $imageElement;
|
this.$image = $imageElement;
|
||||||
|
this.setUpImageClick();
|
||||||
|
|
||||||
this.$imageDiv.html( this.$image );
|
this.$imageDiv.html( this.$image );
|
||||||
};
|
};
|
||||||
|
@ -140,11 +141,30 @@
|
||||||
if ( !this.$image.is( imageElement ) ) { // http://bugs.jquery.com/ticket/4087
|
if ( !this.$image.is( imageElement ) ) { // http://bugs.jquery.com/ticket/4087
|
||||||
this.$image.replaceWith( $image );
|
this.$image.replaceWith( $image );
|
||||||
this.$image = $image;
|
this.$image = $image;
|
||||||
|
|
||||||
|
this.setUpImageClick();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setImageMaxDimensions();
|
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.
|
* Registers listeners.
|
||||||
*/
|
*/
|
||||||
|
@ -176,6 +196,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$imageDiv.off( 'click.mmv-canvas' );
|
this.$imageDiv.off( 'click.mmv-canvas' );
|
||||||
|
|
||||||
|
if ( this.$image ) {
|
||||||
|
this.$image.tipsy( 'hide' );
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -46,4 +46,6 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
background: url('//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png') repeat;
|
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.
|
* @param {jQuery} $fullscreenButton The fullscreen button from the parent class.
|
||||||
*/
|
*/
|
||||||
function CanvasButtons( $container, $closeButton, $fullscreenButton ) {
|
function CanvasButtons( $container, $closeButton, $fullscreenButton ) {
|
||||||
var buttons = this,
|
var buttons = this;
|
||||||
tooltipDelay = mw.config.get( 'wgMultimediaViewer').tooltipDelay;
|
|
||||||
|
|
||||||
mw.mmv.ui.Element.call( this, $container );
|
mw.mmv.ui.Element.call( this, $container );
|
||||||
|
|
||||||
this.$close = $closeButton;
|
this.$close = $closeButton;
|
||||||
this.$fullscreen = $fullscreenButton;
|
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>' )
|
this.$next = $( '<div>' )
|
||||||
.addClass( 'mw-mmv-next-image disabled' )
|
.addClass( 'mw-mmv-next-image disabled' )
|
||||||
.html( ' ' );
|
.html( ' ' );
|
||||||
|
@ -64,8 +50,7 @@
|
||||||
this.$buttons = this.$close
|
this.$buttons = this.$close
|
||||||
.add( this.$fullscreen )
|
.add( this.$fullscreen )
|
||||||
.add( this.$next )
|
.add( this.$next )
|
||||||
.add( this.$prev )
|
.add( this.$prev );
|
||||||
.add( this.$viewFile );
|
|
||||||
|
|
||||||
this.$buttons.appendTo( this.$container );
|
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
|
* Removes all UI things from the DOM, or hides them
|
||||||
*/
|
*/
|
||||||
CBP.unattach = function () {
|
CBP.unattach = function () {
|
||||||
this.$viewFile.tipsy( 'hide' );
|
|
||||||
this.$close.tipsy( 'hide' );
|
this.$close.tipsy( 'hide' );
|
||||||
this.$fullscreen.tipsy( 'hide' );
|
this.$fullscreen.tipsy( 'hide' );
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
|
|
||||||
.mw-mmv-close,
|
.mw-mmv-close,
|
||||||
.mw-mmv-fullscreen,
|
.mw-mmv-fullscreen,
|
||||||
.mw-mmv-viewfile,
|
|
||||||
.mw-mmv-next-image,
|
.mw-mmv-next-image,
|
||||||
.mw-mmv-prev-image {
|
.mw-mmv-prev-image {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -25,7 +24,6 @@
|
||||||
|
|
||||||
.mw-mmv-close.hidden,
|
.mw-mmv-close.hidden,
|
||||||
.mw-mmv-fullscreen.hidden,
|
.mw-mmv-fullscreen.hidden,
|
||||||
.mw-mmv-viewfile.hidden,
|
|
||||||
.mw-mmv-next-image.hidden,
|
.mw-mmv-next-image.hidden,
|
||||||
.mw-mmv-prev-image.hidden {
|
.mw-mmv-prev-image.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -34,14 +32,12 @@
|
||||||
.cursor-hidden {
|
.cursor-hidden {
|
||||||
.mw-mmv-close,
|
.mw-mmv-close,
|
||||||
.mw-mmv-fullscreen,
|
.mw-mmv-fullscreen,
|
||||||
.mw-mmv-viewfile,
|
|
||||||
.mw-mmv-next-image,
|
.mw-mmv-next-image,
|
||||||
.mw-mmv-prev-image {
|
.mw-mmv-prev-image {
|
||||||
cursor: none;
|
cursor: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-mmv-viewfile,
|
|
||||||
.mw-mmv-close,
|
.mw-mmv-close,
|
||||||
.mw-mmv-fullscreen {
|
.mw-mmv-fullscreen {
|
||||||
right: @buttons-offset;
|
right: @buttons-offset;
|
||||||
|
@ -81,25 +77,11 @@
|
||||||
height: 22px;
|
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 {
|
.jq-fullscreened {
|
||||||
.mw-mmv-fullscreen {
|
.mw-mmv-fullscreen {
|
||||||
/* @embed */
|
/* @embed */
|
||||||
background-image: url(img/mw-defullscreen-ltr.svg);
|
background-image: url(img/mw-defullscreen-ltr.svg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-mmv-viewfile {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw-mmv-next-image {
|
.mw-mmv-next-image {
|
||||||
|
|
|
@ -202,7 +202,7 @@
|
||||||
restoreScrollTo();
|
restoreScrollTo();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
QUnit.test( 'isAnyActiveButtonHovered', 25, function ( assert ) {
|
QUnit.test( 'isAnyActiveButtonHovered', 20, function ( assert ) {
|
||||||
var lightbox = new mw.mmv.LightboxInterface();
|
var lightbox = new mw.mmv.LightboxInterface();
|
||||||
|
|
||||||
stubScrollTo();
|
stubScrollTo();
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
|
|
||||||
assert.strictEqual( canvas.$image, $imageElem, 'Image element set correctly.' );
|
assert.strictEqual( canvas.$image, $imageElem, 'Image element set correctly.' );
|
||||||
assert.strictEqual( canvas.imageRawMetadata, imageRawMetadata, 'Raw metadata 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.' );
|
assert.ok( !canvas.$imageDiv.hasClass( 'empty' ), 'Canvas is visible.' );
|
||||||
|
|
||||||
canvas.empty();
|
canvas.empty();
|
||||||
|
|
|
@ -43,31 +43,4 @@
|
||||||
buttons.$next.click();
|
buttons.$next.click();
|
||||||
buttons.$prev.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 ) );
|
}( mediaWiki, jQuery ) );
|
||||||
|
|
Loading…
Reference in a new issue