mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-12-25 14:14:26 +00:00
31c93b79fa
Bug: T164410 Change-Id: I4275c15733b10cff68a20b19e5fb195a88fafebf
286 lines
8 KiB
JavaScript
286 lines
8 KiB
JavaScript
/*
|
|
* This file is part of the MediaWiki extension MultimediaViewer.
|
|
*
|
|
* MultimediaViewer is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 2 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* MultimediaViewer is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
( function ( mw, $, oo ) {
|
|
var CBP;
|
|
|
|
/**
|
|
* Represents the buttons which are displayed over the image - next, previous, close
|
|
* and fullscreen.
|
|
*
|
|
* @class mw.mmv.ui.CanvasButtons
|
|
* @extends mw.mmv.ui.Element
|
|
* @constructor
|
|
* @param {jQuery} $container The parent element we should put the buttons into.
|
|
* @param {jQuery} $closeButton The close button element from the parent class.
|
|
* @param {jQuery} $fullscreenButton The fullscreen button from the parent class.
|
|
*/
|
|
function CanvasButtons( $container, $closeButton, $fullscreenButton ) {
|
|
var buttons = this,
|
|
tooltipDelay = mw.config.get( 'wgMultimediaViewer' ).tooltipDelay;
|
|
|
|
mw.mmv.ui.Element.call( this, $container );
|
|
|
|
this.$close = $closeButton;
|
|
this.$fullscreen = $fullscreenButton;
|
|
|
|
this.$reuse = $( '<button>' )
|
|
.addClass( 'mw-mmv-reuse-button' )
|
|
.html( ' ' )
|
|
.prop( 'title', mw.message( 'multimediaviewer-reuse-link' ).text() )
|
|
.tipsy( {
|
|
delayIn: tooltipDelay,
|
|
gravity: this.correctEW( 'se' )
|
|
} );
|
|
|
|
this.$options = $( '<button>' )
|
|
.text( ' ' )
|
|
.prop( 'title', mw.message( 'multimediaviewer-options-tooltip' ).text() )
|
|
.addClass( 'mw-mmv-options-button' )
|
|
.tipsy( {
|
|
delayIn: tooltipDelay,
|
|
gravity: this.correctEW( 'se' )
|
|
} );
|
|
|
|
this.$download = $( '<button>' )
|
|
.addClass( 'mw-mmv-download-button' )
|
|
.html( ' ' )
|
|
.prop( 'title', mw.message( 'multimediaviewer-download-link' ).text() )
|
|
.tipsy( {
|
|
delayIn: tooltipDelay,
|
|
gravity: this.correctEW( 'se' )
|
|
} );
|
|
|
|
this.$next = $( '<button>' )
|
|
.prop( 'title', mw.message( 'multimediaviewer-next-image-alt-text' ).text() )
|
|
.addClass( 'mw-mmv-next-image disabled' )
|
|
.html( ' ' );
|
|
|
|
this.$prev = $( '<button>' )
|
|
.prop( 'title', mw.message( 'multimediaviewer-prev-image-alt-text' ).text() )
|
|
.addClass( 'mw-mmv-prev-image disabled' )
|
|
.html( ' ' );
|
|
|
|
this.$nav = this.$next
|
|
.add( this.$prev );
|
|
|
|
this.$buttons = this.$close
|
|
.add( this.$download )
|
|
.add( this.$reuse )
|
|
.add( this.$fullscreen )
|
|
.add( this.$options )
|
|
.add( this.$next )
|
|
.add( this.$prev );
|
|
|
|
this.$buttons.appendTo( this.$container );
|
|
|
|
$( document ).on( 'mmv-close', function () {
|
|
buttons.$nav.addClass( 'disabled' );
|
|
} );
|
|
|
|
this.$close.click( function () {
|
|
$container.trigger( $.Event( 'mmv-close' ) );
|
|
} );
|
|
|
|
this.$next.click( function () {
|
|
buttons.emit( 'next' );
|
|
} );
|
|
|
|
this.$prev.click( function () {
|
|
buttons.emit( 'prev' );
|
|
} );
|
|
}
|
|
oo.inheritClass( CanvasButtons, mw.mmv.ui.Element );
|
|
CBP = CanvasButtons.prototype;
|
|
|
|
/**
|
|
* Sets the top offset for the navigation buttons.
|
|
*
|
|
* @param {number} offset
|
|
*/
|
|
CBP.setOffset = function ( offset ) {
|
|
this.$nav.css( {
|
|
top: offset
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Stops the fading animation of the buttons and cancel any opacity value
|
|
*/
|
|
CBP.stopFade = function () {
|
|
this.$buttons
|
|
.stop( true )
|
|
.removeClass( 'hidden' )
|
|
.css( 'opacity', '' );
|
|
|
|
this.$container.trigger( $.Event( 'mmv-fade-stopped' ) );
|
|
};
|
|
|
|
/**
|
|
* Toggles buttons being disabled or not
|
|
*
|
|
* @param {boolean} showPrevButton
|
|
* @param {boolean} showNextButton
|
|
*/
|
|
CBP.toggle = function ( showPrevButton, showNextButton ) {
|
|
this.$next.toggleClass( 'disabled', !showPrevButton );
|
|
this.$prev.toggleClass( 'disabled', !showNextButton );
|
|
};
|
|
|
|
/**
|
|
* Fades out the active buttons
|
|
*/
|
|
CBP.fadeOut = function () {
|
|
var buttons = this;
|
|
|
|
// We don't use animation chaining because delay() can't be stop()ed
|
|
this.buttonsFadeTimeout = setTimeout( function () {
|
|
buttons.$buttons.not( '.disabled' ).animate( { opacity: 0 }, 1000, 'swing',
|
|
function () {
|
|
buttons.$buttons.addClass( 'hidden' );
|
|
buttons.$container.trigger( $.Event( 'mmv-faded-out' ) );
|
|
} );
|
|
}, 1500 );
|
|
};
|
|
|
|
/**
|
|
* Checks if any active buttons are currently hovered, given a position
|
|
*
|
|
* @param {number} x The horizontal coordinate of the position
|
|
* @param {number} y The vertical coordinate of the position
|
|
* @return {boolean}
|
|
*/
|
|
CBP.isAnyActiveButtonHovered = function ( x, y ) {
|
|
// We don't use mouseenter/mouseleave events because content is subject
|
|
// to change underneath the cursor, eg. when entering fullscreen or
|
|
// when going prev/next (the button can disappear when reaching ends)
|
|
var hovered = false;
|
|
|
|
this.$buttons.not( '.disabled' ).each( function ( idx, e ) {
|
|
var $e = $( e ),
|
|
offset = $e.offset();
|
|
|
|
if ( y >= offset.top &&
|
|
// using css( 'height' ) & css( 'width' ) instead of .height()
|
|
// and .width() since those don't include padding, and as a
|
|
// result can return a smaller size than is actually the button
|
|
y <= offset.top + parseInt( $e.css( 'height' ) ) &&
|
|
x >= offset.left &&
|
|
x <= offset.left + parseInt( $e.css( 'width' ) ) ) {
|
|
hovered = true;
|
|
}
|
|
} );
|
|
|
|
return hovered;
|
|
};
|
|
|
|
/**
|
|
* Reveals all active buttons and schedule a fade out if needed
|
|
*
|
|
* @param {Object} [mousePosition] Mouse position containing 'x' and 'y' properties
|
|
*/
|
|
CBP.revealAndFade = function ( mousePosition ) {
|
|
if ( this.buttonsFadeTimeout ) {
|
|
clearTimeout( this.buttonsFadeTimeout );
|
|
}
|
|
|
|
// Stop ongoing animations and make sure the buttons that need to be displayed are displayed
|
|
this.stopFade();
|
|
|
|
// mousePosition can be empty, for instance when we enter fullscreen and haven't
|
|
// recorded a real mousemove event yet
|
|
if ( !mousePosition ||
|
|
!this.isAnyActiveButtonHovered( mousePosition.x, mousePosition.y ) ) {
|
|
this.fadeOut();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @event mmv-reuse-open
|
|
* Fired when the button to open the reuse dialog is clicked.
|
|
*/
|
|
/**
|
|
* Registers listeners.
|
|
*/
|
|
CBP.attach = function () {
|
|
var buttons = this;
|
|
|
|
this.$reuse.on( 'click.mmv-canvasButtons', function ( e ) {
|
|
$( document ).trigger( 'mmv-reuse-open', e );
|
|
e.stopPropagation(); // the dialog would take it as an outside click and close
|
|
} );
|
|
this.handleEvent( 'mmv-reuse-opened', function () {
|
|
buttons.$reuse.addClass( 'open' );
|
|
} );
|
|
this.handleEvent( 'mmv-reuse-closed', function () {
|
|
buttons.$reuse.removeClass( 'open' );
|
|
} );
|
|
|
|
this.$download.on( 'click.mmv-canvasButtons', function ( e ) {
|
|
$( document ).trigger( 'mmv-download-open', e );
|
|
e.stopPropagation();
|
|
} );
|
|
this.handleEvent( 'mmv-download-opened', function () {
|
|
buttons.$download.addClass( 'open' );
|
|
} );
|
|
this.handleEvent( 'mmv-download-closed', function () {
|
|
buttons.$download.removeClass( 'open' );
|
|
} );
|
|
|
|
this.$options.on( 'click.mmv-canvasButtons', function ( e ) {
|
|
$( document ).trigger( 'mmv-options-open', e );
|
|
e.stopPropagation();
|
|
} );
|
|
this.handleEvent( 'mmv-options-opened', function () {
|
|
buttons.$options.addClass( 'open' );
|
|
} );
|
|
this.handleEvent( 'mmv-options-closed', function () {
|
|
buttons.$options.removeClass( 'open' );
|
|
} );
|
|
|
|
this.$download
|
|
.add( this.$reuse )
|
|
.add( this.$options )
|
|
.add( this.$close )
|
|
.add( this.$fullscreen )
|
|
.each( function () {
|
|
$( this ).tipsy( 'enable' );
|
|
} );
|
|
};
|
|
|
|
/**
|
|
* Removes all UI things from the DOM, or hides them
|
|
*/
|
|
CBP.unattach = function () {
|
|
this.$download
|
|
.add( this.$reuse )
|
|
.add( this.$options )
|
|
.add( this.$close )
|
|
.add( this.$fullscreen )
|
|
.off( 'click.mmv-canvasButtons' )
|
|
.each( function () {
|
|
$( this ).tipsy( 'hide' ).tipsy( 'disable' );
|
|
} );
|
|
};
|
|
|
|
CBP.empty = function () {
|
|
this.$reuse.removeClass( 'open' );
|
|
};
|
|
|
|
mw.mmv.ui.CanvasButtons = CanvasButtons;
|
|
}( mediaWiki, jQuery, OO ) );
|