From: Bartosz Dziewoński <matma.rex@gmail.com>
Date: Tue, 8 May 2018 19:12:00 +0000 (+0200)
Subject: mw.page.gallery: Prevent jumpiness due to viewport height changes
X-Git-Tag: 1.34.0-rc.0~5309^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/password.php?a=commitdiff_plain;h=a53b0146d9627824c99d89f11cfd42e0d90c2998;p=lhc%2Fweb%2Fwiklou.git

mw.page.gallery: Prevent jumpiness due to viewport height changes

* Do not recalculate if only viewport height has changed, but not
  width. Viewport height doesn't affect this at all.
* Set a min-height on the gallery element before resetting image
  dimensions so that content following it only reflows once, when
  we calculate dimensions again.

Bug: T194193
Change-Id: I6362863cc0f3f7b76c9ec7437d37ff6762ecf153
---

diff --git a/resources/src/mediawiki.page.gallery.js b/resources/src/mediawiki.page.gallery.js
index 79937e5706..82ae3938ac 100644
--- a/resources/src/mediawiki.page.gallery.js
+++ b/resources/src/mediawiki.page.gallery.js
@@ -5,6 +5,8 @@
 ( 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
@@ -205,6 +207,16 @@
 	}
 
 	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' ),
@@ -232,7 +244,16 @@
 	}
 
 	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 ) {