Merge "resourceloader: Simplify StringSet fallback"

[lhc/web/wiklou.git] / resources / src / mediawiki.page.gallery.js

diff --git a/resources/src/mediawiki.page.gallery.js b/resources/src/mediawiki.page.gallery.js
index 9448ab8..3f35c4b 100644 (file)
--- a/resources/src/mediawiki.page.gallery.js
+++ b/resources/src/mediawiki.page.gallery.js
@@ -4,9 +4,11 @@
  * - Toggle gallery captions when focused.
  * - Dynamically resize images to fill horizontal space.
  */
-( function ( mw, $ ) {
+( function () {
        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
@@ -20,20 +22,17 @@
         */
        function justify() {
                var lastTop,
-                       $img,
-                       imgWidth,
-                       imgHeight,
-                       captionWidth,
                        rows = [],
                        $gallery = $( this );
 
                $gallery.children( 'li.gallerybox' ).each( function () {
-                       // Math.floor to be paranoid if things are off by 0.00000000001
-                       var top = Math.floor( $( this ).position().top ),
+                       var $img, imgWidth, imgHeight, outerWidth, captionWidth,
+                               // Math.floor, to be paranoid if things are off by 0.00000000001
+                               top = Math.floor( $( this ).position().top ),
                                $this = $( this );
 
                        if ( top !== lastTop ) {
-                               rows[ rows.length ] = [];
+                               rows.push( [] );
                                lastTop = top;
                        }
 
@@ -57,20 +56,21 @@
                        }
 
                        captionWidth = $this.children().children( 'div.gallerytextwrapper' ).width();
-                       rows[ rows.length - 1 ][ rows[ rows.length - 1 ].length ] = {
+                       outerWidth = $this.outerWidth();
+                       rows[ rows.length - 1 ].push( {
                                $elm: $this,
-                               width: $this.outerWidth(),
+                               width: outerWidth,
                                imgWidth: imgWidth,
-                               // XXX: can divide by 0 ever happen?
+                               // FIXME: Deal with devision by 0.
                                aspect: imgWidth / imgHeight,
                                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( 'width', outerWidth );
                        $this.data( 'captionWidth', captionWidth );
                } );
 
@@ -171,7 +171,6 @@
                                        $innerDiv = $outerDiv.children( 'div' ).first();
                                        $imageDiv = $innerDiv.children( 'div.thumb' );
                                        $imageElm = $imageDiv.find( 'img' ).first();
-                                       imageElm = $imageElm.length ? $imageElm[ 0 ] : null;
                                        $caption = $outerDiv.find( 'div.gallerytextwrapper' );
 
                                        // Since we are going to re-adjust the height, the vertical
@@ -193,8 +192,9 @@
                                                $caption.width( curRow[ j ].captionWidth + ( newWidth - curRow[ j ].imgWidth ) );
                                        }
 
-                                       if ( imageElm ) {
-                                               // We don't always have an img, e.g. in the case of an invalid file.
+                                       // We don't always have an img, e.g. in the case of an invalid file.
+                                       if ( $imageElm[ 0 ] ) {
+                                               imageElm = $imageElm[ 0 ];
                                                imageElm.width = newWidth;
                                                imageElm.height = preferredHeight;
                                        } else {
@@ -207,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' ),
@@ -223,8 +233,8 @@
                        $( this ).find( 'div.gallerytextwrapper' ).width( captionWidth );
 
                        $imageElm = $( this ).find( 'img' ).first();
-                       imageElm = $imageElm.length ? $imageElm[ 0 ] : null;
-                       if ( imageElm ) {
+                       if ( $imageElm[ 0 ] ) {
+                               imageElm = $imageElm[ 0 ];
                                imageElm.width = imgWidth;
                                imageElm.height = imgHeight;
                        } else {
@@ -234,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 ) {
@@ -246,7 +265,6 @@
                } else {
                        // Note use of just `a`, not `a.image`, since we also want this to trigger if a link
                        // within the caption text receives focus.
-                       // This is based on code from the 'jquery.mw-jump' module.
                        $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';
@@ -268,4 +286,4 @@
                        }
                } );
        } );
-}( mediaWiki, jQuery ) );
+}() );