' )
.addClass( 'cdx-button-group mw-mmv-filepage-buttons' )
.append( $mmvButton, $configButton );
// 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
} );
$mmvButton.on( 'click', () => {
if ( this.statusInfoDialog ) {
this.statusInfoDialog.close();
}
this.openImage( title );
return false;
} );
$configButton.on( 'click', () => {
if ( this.statusInfoDialog ) {
this.statusInfoDialog.close();
}
$( document ).one( 'mmv-metadata', () => {
$( document ).trigger( 'mmv-options-open' );
} );
this.openImage( title );
return false;
} );
if ( this.config.shouldShowStatusInfo() ) {
this.config.disableStatusInfo();
this.showStatusInfo();
}
}
/**
* Shows a popup notifying the user
*/
showStatusInfo() {
mw.loader.using( 'oojs-ui-core' ).done( () => {
const content = document.createElement( 'div' );
content.textContent = mw.message( 'multimediaviewer-disable-info' ).text();
const popupWidget = new OO.ui.PopupWidget( {
label: mw.message( 'multimediaviewer-disable-info-title' ).text(),
$content: $( content ),
padded: true,
head: true,
anchor: true,
align: 'center',
position: 'above',
autoFlip: false,
horizontalPosition: 'start',
// eslint-disable-next-line no-jquery/no-global-selector
$floatableContainer: $( '.mw-mmv-view-expanded' )
} );
popupWidget.$element.appendTo( document.body );
popupWidget.toggleClipping( true );
popupWidget.toggle( true );
} );
}
/**
* 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
*/
findCaption( $thumbContainer, $link ) {
let $thumbCaption;
if ( !$thumbContainer.length ) {
return $link.prop( 'title' ) || undefined;
}
const $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( () => {
// do not treat categories as galleries - the autogenerated caption they have is not helpful
return $thumbContainer.closest( '#mw-category-media' ).length;
} )
.not( () => {
// do not treat special file related pages as galleries
const $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 {mw.Title} title File title
*/
openImage( title ) {
this.ensureEventHandlersAreSetUp();
const hash = getMediaHash( title );
location.hash = hash;
history.replaceState( MANAGED_STATE, null, hash );
}
/**
* Handles a click event on a link
*
* @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).
*/
click( 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;
}
// Mark the state so that if the page is refreshed, we don't generate an extra history entry
this.openImage( 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
*/
isViewerHash() {
const path = location.hash.slice( 1 );
return path.match( ROUTE_REGEXP ) || path.match( LEGACY_ROUTE_REGEXP );
}
/**
* Handles the browser location hash on pageload or hash change
*/
hash() {
const isViewerHash = this.isViewerHash();
// 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 && !isViewerHash ) {
return;
}
const hash = location.hash;
if ( window.history.state !== MANAGED_STATE ) {
// First replace the current URL with a URL with a hash.
history.replaceState( null, null, '#' );
history.pushState( MANAGED_STATE, null, hash );
}
this.router.checkRoute();
}
/**
* Instantiates a new viewer if necessary
*
* @param {Function} localRequire
* @return {MultimediaViewer}
*/
getViewer( localRequire ) {
if ( this.viewer === undefined ) {
const { MultimediaViewer } = localRequire( 'mmv' );
this.viewer = new MultimediaViewer( this.config );
this.viewer.setupEventHandlers();
}
return this.viewer;
}
/**
* Listens to events on the window/document
*/
setupEventHandlers() {
/** @property {boolean} eventHandlersHaveBeenSetUp tracks domready event handler state */
this.eventHandlersHaveBeenSetUp = true;
// Interpret any hash that might already be in the url
this.hash( true );
$( document ).on( 'mmv-setup-overlay', () => {
this.setupOverlay();
} ).on( 'mmv-cleanup-overlay', () => {
this.cleanupOverlay();
} );
}
/**
* Cleans up event handlers, used for tests
*/
cleanupEventHandlers() {
$( 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.
*/
ensureEventHandlersAreSetUp() {
if ( !this.eventHandlersHaveBeenSetUp ) {
this.setupEventHandlers();
}
}
/**
* Sets up the overlay while the viewer loads
*/
setupOverlay() {
const $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 = $( '
' )
// Dark overlay should stay dark in dark mode
.addClass( 'mw-mmv-overlay mw-no-invert' );
}
this.savedScrollTop = $( window ).scrollTop();
$body.addClass( 'mw-mmv-lightbox-open' )
.append( this.$overlay );
}
/**
* Cleans up the overlay
*/
cleanupOverlay() {
$( 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( () => {
$( window ).scrollTop( this.savedScrollTop );
this.savedScrollTop = undefined;
} );
}
}
whenThumbsReady() {
return this.thumbsReadyDeferred.promise();
}
}
module.exports = { MultimediaViewerBootstrap, Config, HtmlUtils };
}() );