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 ccb842d..bc4790b 100644 (file)
--- 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 1892967..e3ffbda 100644 (file)
--- 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 ) );