mediawiki.page.gallery: Clean up $galleries variable

Follows-up a50c7c4181.

Instead of initialising it to an empty object and executing wasteful
code in the other functions, keep it undefined until it is defined
and use it conditionally.

Also:
* Add comment to justify() documentating what the 'this' context is.
* Return early in resize handle if $galleries hasn't been initialised yet.

Change-Id: Ib93f87e71dacfd1aad8bbb7d5559e999f4f00eb3

diff --git a/resources/src/mediawiki.page/mediawiki.page.gallery.js b/resources/src/mediawiki.page/mediawiki.page.gallery.js
index 3658ed8..9514070 100644 (file)
--- a/resources/src/mediawiki.page/mediawiki.page.gallery.js
+++ b/resources/src/mediawiki.page/mediawiki.page.gallery.js
@@ -3,11 +3,18 @@
  * Also Dynamically resize images to justify them.
  */
 ( function ( mw, $ ) {
-       // Is there a better way to detect a touchscreen? Current check taken from stack overflow.
-       var isTouchScreen = !!( window.ontouchstart !== undefined || window.DocumentTouch !== undefined && document instanceof window.DocumentTouch ),
-               $galleries = $();
+       var $galleries,
+               bound = 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
+               );
 
-       // Now on to justification.
+       /**
+        * Perform the layout justification.
+        * @ignore
+        * @context {HTMLElement} A `ul.mw-gallery-*` element
+        */
        function justify() {
                var lastTop,
                        $img,
@@ -196,6 +203,37 @@
                }() );
        }
 
+       function handleResizeStart() {
+               $galleries.children( 'li' ).each( function () {
+                       var imgWidth = $( this ).data( 'imgWidth' ),
+                               imgHeight = $( this ).data( 'imgHeight' ),
+                               width = $( this ).data( 'width' ),
+                               captionWidth = $( this ).data( 'captionWidth' ),
+                               $innerDiv = $( this ).children( 'div' ).first(),
+                               $imageDiv = $innerDiv.children( 'div.thumb' ),
+                               $imageElm, imageElm;
+
+                       // Restore original sizes so we can arrange the elements as on freshly loaded page
+                       $( this ).width( width );
+                       $innerDiv.width( width );
+                       $imageDiv.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;
+                       } else {
+                               $imageDiv.height( imgHeight );
+                       }
+               } );
+       }
+
+       function handleResizeEnd() {
+               $galleries.each( justify );
+       }
+
        mw.hook( 'wikipage.content' ).add( function ( $content ) {
                if ( isTouchScreen ) {
                        // Always show the caption for a touch screen.
@@ -216,38 +254,14 @@
                // Call the justification asynchronous because live preview fires the hook with detached $content.
                setTimeout( function () {
                        $galleries.each( justify );
-               } );
-       } );
 
-       $( function () {
-               $( 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' ),
-                                       $innerDiv = $( this ).children( 'div' ).first(),
-                                       $imageDiv = $innerDiv.children( 'div.thumb' ),
-                                       $imageElm, imageElm;
-
-                               // Restore original sizes so we can arrange the elements as on freshly loaded page
-                               $( this ).width( width );
-                               $innerDiv.width( width );
-                               $imageDiv.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;
-                               } else {
-                                       $imageDiv.height( imgHeight );
-                               }
-                       } );
-               } ) );
-               $( window ).resize( $.debounce( 300, function () {
-                       $galleries.each( justify );
-               } ) );
+                       // Bind here instead of in the top scope as the callbacks use $galleries.
+                       if ( !bound ) {
+                               bound = true;
+                               $( window )
+                                       .resize( $.debounce( 300, true, handleResizeStart ) )
+                                       .resize( $.debounce( 300, handleResizeEnd ) );
+                       }
+               } );
        } );
 }( mediaWiki, jQuery ) );