/*!
- * Show gallery captions when focused. Copied directly from jquery.mw-jump.js.
- * Also Dynamically resize images to justify them.
+ * Enhance MediaWiki galleries (from the `<gallery>` parser tag).
+ *
+ * - Toggle gallery captions when focused.
+ * - Dynamically resize images to fill horizontal space.
*/
( function ( mw, $ ) {
var $galleries,
bound = false,
+ lastWidth = window.innerWidth,
+ justifyNeeded = false,
// Is there a better way to detect a touchscreen? Current check taken from stack overflow.
isTouchScreen = !!( window.ontouchstart !== undefined ||
window.DocumentTouch !== undefined && document instanceof window.DocumentTouch
}
function handleResizeStart() {
+ // Only do anything if window width changed. We don't care about the height.
+ if ( lastWidth === window.innerWidth ) {
+ return;
+ }
+
+ justifyNeeded = true;
+ // Temporarily set min-height, so that content following the gallery is not reflowed twice
+ $galleries.css( 'min-height', function () {
+ return $( this ).height();
+ } );
$galleries.children( 'li.gallerybox' ).each( function () {
var imgWidth = $( this ).data( 'imgWidth' ),
imgHeight = $( this ).data( 'imgHeight' ),
}
function handleResizeEnd() {
- $galleries.each( justify );
+ // If window width never changed during the resize, don't do anything.
+ if ( justifyNeeded ) {
+ justifyNeeded = false;
+ lastWidth = window.innerWidth;
+ $galleries
+ // Remove temporary min-height
+ .css( 'min-height', '' )
+ // Recalculate layout
+ .each( justify );
+ }
}
mw.hook( 'wikipage.content' ).add( function ( $content ) {
.addClass( 'mw-gallery-packed-overlay' )
.removeClass( 'mw-gallery-packed-hover' );
} else {
- // Note use of just "a", not a.image, since we want this to trigger if a link in
- // the caption receives focus
+ // Note use of just `a`, not `a.image`, since we also want this to trigger if a link
+ // within the caption text receives focus.
$content.find( 'ul.mw-gallery-packed-hover li.gallerybox' ).on( 'focus blur', 'a', function ( e ) {
// Confusingly jQuery leaves e.type as focusout for delegated blur events
var gettingFocus = e.type !== 'blur' && e.type !== 'focusout';