From 3768d9a620cda02e163b69b282bdd66e60e6ae90 Mon Sep 17 00:00:00 2001
From: m4tx <m4tx@m4tx.pl>
Date: Sun, 4 Jan 2015 08:32:52 +0100
Subject: [PATCH] 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
---
 resources/Resources.php                       |  3 ++
 .../mediawiki.page/mediawiki.page.gallery.js  | 43 ++++++++++++++++---
 2 files changed, 41 insertions(+), 5 deletions(-)

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 ) );
-- 
2.20.1