Update resize.js to work with layout system

src/messenger/webim/styles/dialogs/default/js/compiled/scripts.js

@@ -1,2 +1,2 @@
-(function(a){var c=null,g=null,b,f=function(){null==c&&(c=a("#messages-region"),g=a("#avatar-region"));if(0!=c.size()){var d,e=0;a("body > *").not("#chat").each(function(){e+=a(this).outerHeight(!0)});e+=a("#chat").outerHeight(!0)-a("#messages-region").innerHeight();d=a(window).height()-e;var b=parseInt(c.css("minHeight"));b>=d&&(d=b);c.innerHeight(d);g.innerHeight(d)}};a(document).ready(f);a(window).load(function(){f();a("#messages-region").scrollTop(a("#messages-region").prop("scrollHeight"))}).resize(function(){b&&
+(function(j,b){var e=!1,f,h=function(){if(0!=b("#messages-region").size()){var a=b("#messages-region"),c=b("#avatar-region");if(!1===e){var d=0;b("body > *").each(function(){var a=b(this),c=a.offset(),a=a.height();d<c.top+a&&(d=c.top+a)});e=d-a.height()}var g=b(window).height()-e;g<parseInt(a.css("minHeight"))||(a.height(g),0<c.size()&&c.height(a.innerHeight()))}},k=function(){f&&clearTimeout(f);f=setTimeout(h,0)};j.Application.addInitializer(function(){var a=b("img").size(),c=0,d=function(){c++;
-clearTimeout(b);b=setTimeout(f,0)})})($);
+a==c&&(h(),b("#messages-region").scrollTop(b("#messages-region").prop("scrollHeight")),b(window).resize(k))};b("img").each(function(){var a=b(this);0<a.height()?d():a.load(d)})})})(Mibew,$);

src/messenger/webim/styles/dialogs/default/js/source/resize.js

@@ -1,39 +1,62 @@
-(function($){
+(function(Mibew, $){
 
-    var $msgRegion = null;
+    /**
-    var $avatarRegion = null;
+     * Total height of elements exclude #messages-region or false if it is not
+     * calculated yet
+     * @type Number|Boolean
+     */
+    var delta = false;
+
+    /**
+     * Timer id
+     * @type Number
+     */
     var t;
 
-    var getHeight = function() {
+    /**
-        var elementsHeight = 0;
+     * Stretch #messages-region to fill the window
-        $('body > *').not('#chat').each(function () {
+     */
-            elementsHeight += $(this).outerHeight(true);
-        });
-
-        elementsHeight += ($('#chat').outerHeight(true)
-            - $('#messages-region').innerHeight());
-
-        return ($(window).height() - elementsHeight);
-    }
-
     var updateHeight = function() {
-        if ($msgRegion == null) {
+        if ($('#messages-region').size() == 0) {
-            $msgRegion = $('#messages-region');
-            $avatarRegion = $('#avatar-region');
-        }
-        if ($msgRegion.size() == 0) {
             return;
         }
-        var newHeight = getHeight();
+        // Create shortcut for #messages-region
-        var minHeight = parseInt($msgRegion.css('minHeight'));
+        var $msgs = $('#messages-region');
+        var $ava = $('#avatar-region');
 
-        if (minHeight >= newHeight) {
+        // Calculate delta
-            newHeight = minHeight;
+        if (delta === false) {
+            var max = 0;
+            $('body > *').each(function() {
+                var $el = $(this);
+                var pos = $el.offset();
+                var height = $el.height();
+                if (max < (pos.top + height)) {
+                    max = pos.top + height
+                }
+            });
+            delta = max - $msgs.height();
+        }
+
+        // Check new height
+        var newHeight = $(window).height() - delta;
+
+        if (newHeight < parseInt($msgs.css('minHeight'))) {
+            return;
+        }
+
+        // Update messages region height
+        $msgs.height(newHeight);
+
+        // Update avatar region height
+        if ($ava.size() > 0) {
+            $ava.height($msgs.innerHeight());
         }
-        $msgRegion.innerHeight(newHeight);
-        $avatarRegion.innerHeight(newHeight);
     }
 
+    /**
+     * Fix bug with window resize event
+     */
     var updateHeightWrapper = function() {
         if (t) {
             clearTimeout(t);
@@ -41,15 +64,49 @@
         t = setTimeout(updateHeight, 0);
     }
 
-    $(document).ready(updateHeight);
+    // Stretch messages region after chat page initialize
-    $(window)
+    Mibew.Application.addInitializer(function() {
-        .load(function() {
+        /**
-            updateHeight();
+         * Contains total count of images on the page
-            // Scroll messages region to bottom
+         * @type Number
-            $('#messages-region').scrollTop(
+         */
-                $('#messages-region').prop('scrollHeight')
+        var totalImagesCount = $('img').size();
-            );
-        })
-        .resize(updateHeightWrapper);
 
-})($);
+        /**
+         * Contains count of loaded images
+         * @type Number
+         */
+        var imagesLoaded = 0;
+
+        /**
+         * Run then image loaded. If all images loaded run resizer.
+         * @type Function
+         */
+        var imageLoadCallback = function() {
+            imagesLoaded++;
+            if (totalImagesCount == imagesLoaded) {
+                updateHeight();
+                // Scroll messages region to bottom
+                $('#messages-region').scrollTop(
+                    $('#messages-region').prop('scrollHeight')
+                );
+                // Stretch messages region on resize
+                $(window).resize(updateHeightWrapper);
+            }
+        }
+
+        // Change size of message region only after all images will be loaded
+        $('img').each(function(){
+            // Shortcut for current image element
+            var $el = $(this);
+            // Check if image already loaded and cached.
+            // Cached image have height and do not triggers load event.
+            if ($el.height() > 0) {
+                imageLoadCallback();
+            } else {
+                $el.load(imageLoadCallback);
+            }
+        });
+    });
+
+})(Mibew, $);