' )
.addClass( 'mw-ui-button-group mw-mmv-filepage-buttons' )
.append( $link, $configLink );
// eslint-disable-next-line no-jquery/no-global-selector
$( '.fullMedia' ).append(
$filepageButtons,
$( '
' )
.css( 'clear', 'both' )
);
this.thumbs.push( {
thumb: $thumb.get( 0 ),
$thumb: $thumb,
title: title,
link: link
} );
$link.on( 'click', function () {
if ( bs.statusInfoDialog ) {
bs.statusInfoDialog.close();
}
bs.openImage( this, title );
return false;
} );
$configLink.on( 'click', function () {
if ( bs.statusInfoDialog ) {
bs.statusInfoDialog.close();
}
bs.openImage( this, title ).then( function () {
$( document ).trigger( 'mmv-options-open' );
} );
return false;
} );
if ( this.config.shouldShowStatusInfo() ) {
this.config.disableStatusInfo();
this.showStatusInfo();
}
};
/**
* Shows a popup notifying the user
*/
MMVB.showStatusInfo = function () {
var bs = this;
mw.loader.using( 'mmv.ui.tipsyDialog' ).done( function () {
/** @property {mw.mmv.ui.TipsyDialog} statusInfoDialog popup on the file page explaining how to re-enable */
// eslint-disable-next-line no-jquery/no-global-selector
bs.statusInfoDialog = new mw.mmv.ui.TipsyDialog( $( '.mw-mmv-view-expanded' ), { gravity: 'sw' } );
bs.statusInfoDialog.setContent(
mw.message( 'multimediaviewer-disable-info-title' ).plain(),
mw.message( 'multimediaviewer-disable-info' ).escaped()
);
// tipsy mispositions the tooltip, probably because it does the positioning before the buttons are
// displayed and the page is reflown. Adding some delay seems to help.
setTimeout( function () {
bs.statusInfoDialog.open();
}, 1000 );
} );
};
/**
* Finds the caption for an image.
*
* @param {jQuery} $thumbContainer The container for the thumbnail.
* @param {jQuery} $link The link that encompasses the thumbnail.
* @return {string|undefined} Unsafe HTML may be present - caution
*/
MMVB.findCaption = function ( $thumbContainer, $link ) {
var $thumbCaption, $potentialCaptions;
if ( !$thumbContainer.length ) {
return $link.prop( 'title' ) || undefined;
}
$potentialCaptions = $thumbContainer.find( '.thumbcaption' );
if ( $potentialCaptions.length < 2 ) {
$thumbCaption = $potentialCaptions.eq( 0 );
} else {
// Template:Multiple_image or some such; try to find closest caption to the image
// eslint-disable-next-line no-jquery/no-sizzle
$thumbCaption = $link.closest( ':has(> .thumbcaption)', $thumbContainer )
.find( '> .thumbcaption' );
}
if ( !$thumbCaption.length ) { // gallery, maybe
$thumbCaption = $thumbContainer
.closest( '.gallerybox' )
.not( function () {
// do not treat categories as galleries - the autogenerated caption they have is not helpful
return $thumbContainer.closest( '#mw-category-media' ).length;
} )
.not( function () {
// do not treat special file related pages as galleries
var $specialFileRelatedPages = $(
'.page-Special_NewFiles, ' +
'.page-Special_MostLinkedFiles,' +
'.page-Special_MostGloballyLinkedFiles, ' +
'.page-Special_UncategorizedFiles, ' +
'.page-Special_UnusedFiles'
);
return $thumbContainer.closest( $specialFileRelatedPages ).length;
} )
.find( '.gallerytext' );
}
if ( $thumbCaption.find( '.magnify' ).length ) {
$thumbCaption = $thumbCaption.clone();
$thumbCaption.find( '.magnify' ).remove();
}
return this.htmlUtils.htmlToTextWithTags( $thumbCaption.html() || '' );
};
/**
* Opens MediaViewer and loads the given thumbnail. Requires processThumb() to be called first.
*
* @param {HTMLElement} element Clicked element
* @param {mw.Title} title File title
* @return {jQuery.Promise}
*/
MMVB.openImage = function ( element, title ) {
this.ensureEventHandlersAreSetUp();
return this.loadViewer( true ).then( function ( viewer ) {
viewer.loadImageByTitle( title, false );
} );
};
/**
* Handles a click event on a link
*
* @param {HTMLElement} element Clicked element
* @param {jQuery.Event} e jQuery event object
* @param {mw.Title} title File title
* @return {boolean} a value suitable for an event handler (ie. true if the click should be handled
* by the browser).
*/
MMVB.click = function ( element, e, title ) {
// Do not interfere with non-left clicks or if modifier keys are pressed.
if ( ( e.button !== 0 && e.which !== 1 ) || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) {
return true;
}
// Don't load if someone has specifically stopped us from doing so
if ( !this.config.isMediaViewerEnabledOnClick() ) {
return true;
}
// Don't load if we already tried loading and it failed
if ( this.viewerIsBroken ) {
return true;
}
this.openImage( element, title );
// calling this late so that in case of errors users at least get to the file page
e.preventDefault();
return false;
};
/**
* Returns true if the hash part of the current URL is one that's owned by MMV.
*
* @return {boolean}
* @private
*/
MMVB.isViewerHash = function () {
var path = location.hash.slice( 1 );
return path.match( mw.mmv.ROUTE_REGEXP ) || path.match( mw.mmv.LEGACY_ROUTE_REGEXP );
};
/**
* Handles the browser location hash on pageload or hash change
*/
MMVB.hash = function () {
var bootstrap = this;
// There is no point loading the mmv if it isn't loaded yet for hash changes unrelated to the mmv
// Such as anchor links on the page
if ( !this.viewerInitialized && !this.isViewerHash() ) {
return;
}
this.loadViewer( this.isViewerHash() ).then( function ( viewer ) {
viewer.router.checkRoute();
// this is an ugly temporary fix to avoid a black screen of death when
// the page is loaded with an invalid MMV url
if ( !viewer.isOpen ) {
bootstrap.cleanupOverlay();
}
} );
};
/**
* Instantiates a new viewer if necessary
*
* @return {mw.mmv.MultimediaViewer}
*/
MMVB.getViewer = function () {
if ( this.viewer === undefined ) {
this.viewer = new mw.mmv.MultimediaViewer( this.config );
this.viewer.setupEventHandlers();
mw.mmv.viewer = this.viewer;
}
return this.viewer;
};
/**
* Listens to events on the window/document
*/
MMVB.setupEventHandlers = function () {
var self = this;
/** @property {boolean} eventHandlersHaveBeenSetUp tracks domready event handler state */
this.eventHandlersHaveBeenSetUp = true;
// Interpret any hash that might already be in the url
self.hash( true );
$( document ).on( 'mmv-setup-overlay', function () {
self.setupOverlay();
} ).on( 'mmv-cleanup-overlay', function () {
self.cleanupOverlay();
} );
};
/**
* Cleans up event handlers, used for tests
*/
MMVB.cleanupEventHandlers = function () {
$( document ).off( 'mmv-setup-overlay mmv-cleanup-overlay' );
this.eventHandlersHaveBeenSetUp = false;
};
/**
* Makes sure event handlers are set up properly via MultimediaViewerBootstrap.setupEventHandlers().
* Called before loading the main mmv module. At this point, event handers for MultimediaViewerBootstrap
* should have been set up, but due to bug 70756 it cannot be guaranteed.
*/
MMVB.ensureEventHandlersAreSetUp = function () {
if ( !this.eventHandlersHaveBeenSetUp ) {
this.setupEventHandlers();
}
};
/**
* Sets up the overlay while the viewer loads
*/
MMVB.setupOverlay = function () {
var $body = $( document.body );
// There are situations where we can call setupOverlay while the overlay is already there,
// such as inside this.hash(). In that case, do nothing
if ( $body.hasClass( 'mw-mmv-lightbox-open' ) ) {
return;
}
if ( !this.$overlay ) {
this.$overlay = $( '
' )
.addClass( 'mw-mmv-overlay' );
}
this.savedScrollTop = $( window ).scrollTop();
$body.addClass( 'mw-mmv-lightbox-open' )
.append( this.$overlay );
};
/**
* Cleans up the overlay
*/
MMVB.cleanupOverlay = function () {
var bootstrap = this;
$( document.body ).removeClass( 'mw-mmv-lightbox-open' );
if ( this.$overlay ) {
this.$overlay.remove();
}
if ( this.savedScrollTop !== undefined ) {
// setTimeout because otherwise Chrome will scroll back to top after the popstate event handlers run
setTimeout( function () {
$( window ).scrollTop( bootstrap.savedScrollTop );
bootstrap.savedScrollTop = undefined;
} );
}
};
MMVB.whenThumbsReady = function () {
return this.thumbsReadyDeferred.promise();
};
mw.mmv.MultimediaViewerBootstrap = MultimediaViewerBootstrap;
}() );