* Also Dynamically resize images to justify them.
*/
( function ( mw, $ ) {
- // Is there a better way to detect a touchscreen? Current check taken from stack overflow.
- var isTouchScreen = !!( window.ontouchstart !== undefined || window.DocumentTouch !== undefined && document instanceof window.DocumentTouch ),
- $galleries = $();
+ var $galleries,
+ bound = 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
+ );
- // Now on to justification.
+ /**
+ * Perform the layout justification.
+ *
+ * @ignore
+ * @context {HTMLElement} A `ul.mw-gallery-*` element
+ */
function justify() {
var lastTop,
$img,
$this = $( this );
if ( top !== lastTop ) {
- rows[rows.length] = [];
+ rows[ rows.length ] = [];
lastTop = top;
}
$img = $this.find( 'div.thumb a.image img' );
- if ( $img.length && $img[0].height ) {
- imgHeight = $img[0].height;
- imgWidth = $img[0].width;
+ if ( $img.length && $img[ 0 ].height ) {
+ imgHeight = $img[ 0 ].height;
+ imgWidth = $img[ 0 ].width;
} else {
// If we don't have a real image, get the containing divs width/height.
// Note that if we do have a real image, using this method will generally
}
captionWidth = $this.children().children( 'div.gallerytextwrapper' ).width();
- rows[rows.length - 1][rows[rows.length - 1].length] = {
+ rows[ rows.length - 1 ][ rows[ rows.length - 1 ].length ] = {
$elm: $this,
width: $this.outerWidth(),
imgWidth: imgWidth,
maxWidth = $gallery.width();
combinedAspect = 0;
combinedPadding = 0;
- curRow = rows[i];
+ curRow = rows[ i ];
curRowHeight = 0;
for ( j = 0; j < curRow.length; j++ ) {
if ( curRowHeight === 0 ) {
- if ( isFinite( curRow[j].height ) ) {
+ if ( isFinite( curRow[ j ].height ) ) {
// Get the height of this row, by taking the first
// non-out of bounds height
- curRowHeight = curRow[j].height;
+ curRowHeight = curRow[ j ].height;
}
}
- if ( curRow[j].aspect === 0 || !isFinite( curRow[j].aspect ) ) {
+ if ( curRow[ j ].aspect === 0 || !isFinite( curRow[ j ].aspect ) ) {
// One of the dimensions are 0. Probably should
// not try to resize.
- combinedPadding += curRow[j].width;
+ combinedPadding += curRow[ j ].width;
} else {
- combinedAspect += curRow[j].aspect;
- combinedPadding += curRow[j].width - curRow[j].imgWidth;
+ combinedAspect += curRow[ j ].aspect;
+ combinedPadding += curRow[ j ].width - curRow[ j ].imgWidth;
}
}
}
for ( j = 0; j < curRow.length; j++ ) {
- newWidth = preferredHeight * curRow[j].aspect;
- padding = curRow[j].width - curRow[j].imgWidth;
- $outerDiv = curRow[j].$elm;
+ newWidth = preferredHeight * curRow[ j ].aspect;
+ padding = curRow[ j ].width - curRow[ j ].imgWidth;
+ $outerDiv = curRow[ j ].$elm;
$innerDiv = $outerDiv.children( 'div' ).first();
$imageDiv = $innerDiv.children( 'div.thumb' );
$imageElm = $imageDiv.find( 'img' ).first();
- imageElm = $imageElm.length ? $imageElm[0] : null;
+ imageElm = $imageElm.length ? $imageElm[ 0 ] : null;
$caption = $outerDiv.find( 'div.gallerytextwrapper' );
// Since we are going to re-adjust the height, the vertical
$outerDiv.width( newWidth + padding );
$innerDiv.width( newWidth + padding );
$imageDiv.width( newWidth );
- $caption.width( curRow[j].captionWidth + ( newWidth - curRow[j].imgWidth ) );
+ $caption.width( curRow[ j ].captionWidth + ( newWidth - curRow[ j ].imgWidth ) );
}
if ( imageElm ) {
}() );
}
+ function handleResizeStart() {
+ $galleries.children( 'li' ).each( function () {
+ var imgWidth = $( this ).data( 'imgWidth' ),
+ imgHeight = $( this ).data( 'imgHeight' ),
+ width = $( this ).data( 'width' ),
+ captionWidth = $( this ).data( 'captionWidth' ),
+ $innerDiv = $( this ).children( 'div' ).first(),
+ $imageDiv = $innerDiv.children( 'div.thumb' ),
+ $imageElm, imageElm;
+
+ // Restore original sizes so we can arrange the elements as on freshly loaded page
+ $( this ).width( width );
+ $innerDiv.width( width );
+ $imageDiv.width( imgWidth );
+ $( this ).find( 'div.gallerytextwrapper' ).width( captionWidth );
+
+ $imageElm = $( this ).find( 'img' ).first();
+ imageElm = $imageElm.length ? $imageElm[ 0 ] : null;
+ if ( imageElm ) {
+ imageElm.width = imgWidth;
+ imageElm.height = imgHeight;
+ } else {
+ $imageDiv.height( imgHeight );
+ }
+ } );
+ }
+
+ function handleResizeEnd() {
+ $galleries.each( justify );
+ }
+
mw.hook( 'wikipage.content' ).add( function ( $content ) {
if ( isTouchScreen ) {
// Always show the caption for a touch screen.
// Call the justification asynchronous because live preview fires the hook with detached $content.
setTimeout( function () {
$galleries.each( justify );
- } );
- } );
- $( function () {
- $( window ).resize( $.debounce( 300, true, function () {
- $galleries.children( 'li' ).each( function () {
- var imgWidth = $( this ).data( 'imgWidth' ),
- imgHeight = $( this ).data( 'imgHeight' ),
- width = $( this ).data( 'width' ),
- captionWidth = $( this ).data( 'captionWidth' ),
- $innerDiv = $( this ).children( 'div' ).first(),
- $imageDiv = $innerDiv.children( 'div.thumb' ),
- $imageElm, imageElm;
-
- // Restore original sizes so we can arrange the elements as on freshly loaded page
- $( this ).width( width );
- $innerDiv.width( width );
- $imageDiv.width( imgWidth );
- $( this ).find( 'div.gallerytextwrapper' ).width( captionWidth );
-
- $imageElm = $( this ).find( 'img' ).first();
- imageElm = $imageElm.length ? $imageElm[0] : null;
- if ( imageElm ) {
- imageElm.width = imgWidth;
- imageElm.height = imgHeight;
- } else {
- $imageDiv.height( imgHeight );
- }
- } );
- } ) );
- $( window ).resize( $.debounce( 300, function () {
- $galleries.each( justify );
- } ) );
+ // Bind here instead of in the top scope as the callbacks use $galleries.
+ if ( !bound ) {
+ bound = true;
+ $( window )
+ .resize( $.debounce( 300, true, handleResizeStart ) )
+ .resize( $.debounce( 300, handleResizeEnd ) );
+ }
+ } );
} );
}( mediaWiki, jQuery ) );
dépôts / lhc / web / wiklou.git / blobdiff