From 8f1db81e8312ee41c044c3f06288a1325fa5dad7 Mon Sep 17 00:00:00 2001 From: Dmitriy Simushev Date: Fri, 15 Feb 2013 10:00:58 +0000 Subject: [PATCH] Update resize.js to work with layout system --- .../dialogs/default/js/compiled/scripts.js | 4 +- .../dialogs/default/js/source/resize.js | 131 +++++++++++++----- 2 files changed, 96 insertions(+), 39 deletions(-) diff --git a/src/messenger/webim/styles/dialogs/default/js/compiled/scripts.js b/src/messenger/webim/styles/dialogs/default/js/compiled/scripts.js index 46d40239..26b225f6 100644 --- a/src/messenger/webim/styles/dialogs/default/js/compiled/scripts.js +++ b/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&& -clearTimeout(b);b=setTimeout(f,0)})})($); +(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 *').not('#chat').each(function () { - elementsHeight += $(this).outerHeight(true); - }); - - elementsHeight += ($('#chat').outerHeight(true) - - $('#messages-region').innerHeight()); - - return ($(window).height() - elementsHeight); - } - + /** + * Stretch #messages-region to fill the window + */ var updateHeight = function() { - if ($msgRegion == null) { - $msgRegion = $('#messages-region'); - $avatarRegion = $('#avatar-region'); - } - if ($msgRegion.size() == 0) { + if ($('#messages-region').size() == 0) { return; } - var newHeight = getHeight(); - var minHeight = parseInt($msgRegion.css('minHeight')); + // Create shortcut for #messages-region + var $msgs = $('#messages-region'); + var $ava = $('#avatar-region'); - if (minHeight >= newHeight) { - newHeight = minHeight; + // Calculate delta + 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); - $(window) - .load(function() { - updateHeight(); - // Scroll messages region to bottom - $('#messages-region').scrollTop( - $('#messages-region').prop('scrollHeight') - ); - }) - .resize(updateHeightWrapper); + // Stretch messages region after chat page initialize + Mibew.Application.addInitializer(function() { + /** + * Contains total count of images on the page + * @type Number + */ + var totalImagesCount = $('img').size(); -})($); \ No newline at end of file + /** + * 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, $); \ No newline at end of file