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

diff --combined resources/src/mediawiki.page.gallery.js
index 7927f20,82ae393..892f044
--- 1/resources/src/mediawiki.page.gallery.js
--- 2/resources/src/mediawiki.page.gallery.js
+++ b/resources/src/mediawiki.page.gallery.js
@@@ -1,12 -1,12 +1,14 @@@
  /*!
 - * Show gallery captions when focused. Copied directly from jquery.mw-jump.js.
 - * Also Dynamically resize images to justify them.
 + * Enhance MediaWiki galleries (from the `<gallery>` parser tag).
 + *
 + * - Toggle gallery captions when focused.
 + * - Dynamically resize images to fill horizontal space.
   */
  ( 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
@@@ -207,6 -207,16 +209,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' ),
@@@ -234,7 -244,16 +246,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 ) {
@@@ -244,8 -263,8 +265,8 @@@
                                .addClass( 'mw-gallery-packed-overlay' )
                                .removeClass( 'mw-gallery-packed-hover' );
                } else {
 -                      // Note use of just "a", not a.image, since we want this to trigger if a link in
 -                      // the caption receives focus
 +                      // Note use of just `a`, not `a.image`, since we also want this to trigger if a link
 +                      // within the caption text receives focus.
                        $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';