( 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 justify() {
var lastTop,
- $img,
- imgWidth,
- imgHeight,
- captionWidth,
rows = [],
$gallery = $( this );
$gallery.children( 'li.gallerybox' ).each( function () {
- // Math.floor to be paranoid if things are off by 0.00000000001
- var top = Math.floor( $( this ).position().top ),
+ var $img, imgWidth, imgHeight, outerWidth, captionWidth,
+ // Math.floor, to be paranoid if things are off by 0.00000000001
+ top = Math.floor( $( this ).position().top ),
$this = $( this );
if ( top !== lastTop ) {
- rows[ rows.length ] = [];
+ rows.push( [] );
lastTop = top;
}
}
captionWidth = $this.children().children( 'div.gallerytextwrapper' ).width();
- rows[ rows.length - 1 ][ rows[ rows.length - 1 ].length ] = {
+ outerWidth = $this.outerWidth();
+ rows[ rows.length - 1 ].push( {
$elm: $this,
- width: $this.outerWidth(),
+ width: outerWidth,
imgWidth: imgWidth,
- // XXX: can divide by 0 ever happen?
+ // FIXME: Deal with devision by 0.
aspect: imgWidth / imgHeight,
captionWidth: captionWidth,
height: imgHeight
- };
+ } );
// Save all boundaries so we can restore them on window resize
$this.data( 'imgWidth', imgWidth );
$this.data( 'imgHeight', imgHeight );
- $this.data( 'width', $this.outerWidth() );
+ $this.data( 'width', outerWidth );
$this.data( 'captionWidth', captionWidth );
} );
$innerDiv = $outerDiv.children( 'div' ).first();
$imageDiv = $innerDiv.children( 'div.thumb' );
$imageElm = $imageDiv.find( 'img' ).first();
- imageElm = $imageElm.length ? $imageElm[ 0 ] : null;
$caption = $outerDiv.find( 'div.gallerytextwrapper' );
// Since we are going to re-adjust the height, the vertical
$caption.width( curRow[ j ].captionWidth + ( newWidth - curRow[ j ].imgWidth ) );
}
- if ( imageElm ) {
- // We don't always have an img, e.g. in the case of an invalid file.
+ // We don't always have an img, e.g. in the case of an invalid file.
+ if ( $imageElm[ 0 ] ) {
+ imageElm = $imageElm[ 0 ];
imageElm.width = newWidth;
imageElm.height = preferredHeight;
} else {
}
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' ),
$( this ).find( 'div.gallerytextwrapper' ).width( captionWidth );
$imageElm = $( this ).find( 'img' ).first();
- imageElm = $imageElm.length ? $imageElm[ 0 ] : null;
- if ( imageElm ) {
+ if ( $imageElm[ 0 ] ) {
+ imageElm = $imageElm[ 0 ];
imageElm.width = imgWidth;
imageElm.height = imgHeight;
} else {
}
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 ) {
} else {
// Note use of just `a`, not `a.image`, since we also want this to trigger if a link
// within the caption text receives focus.
- // This is based on code from the 'jquery.mw-jump' module.
$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';