From: m4tx <m4tx@m4tx.pl>
Date: Sun, 4 Jan 2015 07:32:52 +0000 (+0100)
Subject: Adjust images in packed gallery on window resize
X-Git-Tag: 1.31.0-rc.0~12720^2~1
X-Git-Url: http://git.cyclocoop.org/fichier?a=commitdiff_plain;h=3768d9a620cda02e163b69b282bdd66e60e6ae90;p=lhc%2Fweb%2Fwiklou.git

Adjust images in packed gallery on window resize

Original element sizes are stored in data(), and on window resize,
they are restored, so elements can be justified as on just loaded
page.

Bug: T55664
Change-Id: I286e0a4c8230c11619ca30f8f3b66778de835a33
---

diff --git a/resources/Resources.php b/resources/Resources.php
index ccb842ded6..bc4790b9af 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1220,6 +1220,9 @@ return array(
 
 	'mediawiki.page.gallery' => array(
 		'scripts' => 'resources/src/mediawiki.page/mediawiki.page.gallery.js',
+		'dependencies' => array(
+			'jquery.throttle-debounce',
+		)
 	),
 	'mediawiki.page.ready' => array(
 		'scripts' => 'resources/src/mediawiki.page/mediawiki.page.ready.js',
diff --git a/resources/src/mediawiki.page/mediawiki.page.gallery.js b/resources/src/mediawiki.page/mediawiki.page.gallery.js
index 1892967a33..e3ffbdacb3 100644
--- a/resources/src/mediawiki.page/mediawiki.page.gallery.js
+++ b/resources/src/mediawiki.page/mediawiki.page.gallery.js
@@ -27,13 +27,12 @@
 		}
 
 		// Now on to justification.
-		// We may still get ragged edges if someone resizes their window. Could bind to
-		// that event, otoh do we really want to constantly be resizing galleries?
-		$( galleries ).each( function () {
+		function justify() {
 			var lastTop,
 				$img,
 				imgWidth,
 				imgHeight,
+				captionWidth,
 				rows = [],
 				$gallery = $( this );
 
@@ -66,15 +65,22 @@
 					imgHeight = 0;
 				}
 
+				captionWidth = $this.children().children( 'div.gallerytextwrapper' ).width();
 				rows[rows.length - 1][rows[rows.length - 1].length] = {
 					$elm: $this,
 					width: $this.outerWidth(),
 					imgWidth: imgWidth,
 					// XXX: can divide by 0 ever happen?
 					aspect: imgWidth / imgHeight,
-					captionWidth: $this.children().children( 'div.gallerytextwrapper' ).width(),
+					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( 'captionWidth', captionWidth );
 			} );
 
 			( function () {
@@ -207,6 +213,33 @@
 					}
 				}
 			}() );
-		} );
+		}
+
+		$( galleries ).each( justify );
+		$( 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' ),
+					$imageElm, imageElm;
+
+				// Restore original sizes so we can arrange the elements as on freshly loaded page
+				$( this ).width( width );
+				$( this ).children( 'div' ).first().width( width );
+				$( this ).children( 'div' ).first().children( 'div.thumb' ).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;
+				}
+			} );
+		} ) );
+		$( window ).resize( $.debounce( 300, function () {
+			$( galleries ).each( justify );
+		} ) );
 	} );
 }( jQuery ) );