From 3b40711b98970a7e0f0b6709fbdc6d3ddd55dea0 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Thu, 13 Jun 2013 17:31:28 +0200
Subject: [PATCH] BUG Resize infinite loops in IE8 (fixes #575)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IE8 gets a bit confused and fires resize events
when element dimensions in the DOM are changed
as a result of a resize event, causing an infinite loop.
Apart from artificially throttling the event, the only solution
I've found is to check for actual window dimension changes.
http://stackoverflow.com/questions/12366315/window-resize-event-continually-fires-in-ie7?lq=1

This implicitly fixes an issue where TreeDropdownField panel isn't
accessible in the "Insert Media" popup, because the resize event happes
to be triggered by the popup overlay, and in effect closes the drop down
panel right after opening it.

Relating to the jQuery UI component, there's a host of issues and discussions around this, but no solution…
http://bugs.jquery.com/ticket/4097
http://bugs.jqueryui.com/ticket/4758
http://bugs.jqueryui.com/ticket/4065
http://bugs.jqueryui.com/ticket/7514
http://bugs.jqueryui.com/ticket/8881
https://groups.google.com/forum/?fromgroups#!topic/jquery-ui/fDSvwAKL6Go
http://www.mail-archive.com/jquery-ui@googlegroups.com/msg04839.html
---
 admin/javascript/LeftAndMain.js | 24 +++++++++++++++++++++++-
 javascript/TreeDropdownField.js | 18 ++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js
index 09a948267..66a3445f9 100644
--- a/admin/javascript/LeftAndMain.js
+++ b/admin/javascript/LeftAndMain.js
@@ -4,6 +4,25 @@ jQuery.noConflict();
  * File: LeftAndMain.js
  */
 (function($) {
+
+	var windowWidth, windowHeight;
+	$(window).bind('resize.leftandmain', function(e) {
+		// Entwine's 'fromWindow::onresize' does not trigger on IE8. Use synthetic event.
+		var cb = function() {$('.cms-container').trigger('windowresize');};
+
+		// Workaround to avoid IE8 infinite loops when elements are resized as a result of this event 
+		if($.browser.msie && parseInt($.browser.version, 10) < 9) {
+			var newWindowWidth = $(window).width(), newWindowHeight = $(window).height();
+			if(newWindowWidth != windowWidth || newWindowHeight != windowHeight) {
+				windowWidth = newWindowWidth;
+				windowHeight = newWindowHeight;
+				cb();
+			}
+		} else {
+			cb();
+		}
+	});
+
 	// setup jquery.entwine
 	$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
 	$.entwine('ss', function($) {
@@ -133,7 +152,10 @@ jQuery.noConflict();
 
 			fromWindow: {
 				onstatechange: function(){ this.handleStateChange(); },
-				onresize: function(){ this.redraw(); }
+			},
+
+			'onwindowresize': function() {
+				this.redraw();
 			},
 
 			'from .cms-panel': {
diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js
index 45b5afb5c..659ffe291 100644
--- a/javascript/TreeDropdownField.js
+++ b/javascript/TreeDropdownField.js
@@ -4,8 +4,22 @@
 		 * On resize of any close the open treedropdownfields
 		 * as we'll need to redo with widths
 		 */
-		$(window).resize(function() {
-			$('.TreeDropdownField').closePanel();
+		var windowWidth, windowHeight;
+		$(window).bind('resize.treedropdownfield', function() {
+			// Entwine's 'fromWindow::onresize' does not trigger on IE8. Use synthetic event.
+			var cb = function() {$('.TreeDropdownField').closePanel();};
+
+			// Workaround to avoid IE8 infinite loops when elements are resized as a result of this event 
+			if($.browser.msie && parseInt($.browser.version, 10) < 9) {
+				var newWindowWidth = $(window).width(), newWindowHeight = $(window).height();
+				if(newWindowWidth != windowWidth || newWindowHeight != windowHeight) {
+					windowWidth = newWindowWidth;
+					windowHeight = newWindowHeight;
+					cb();
+				}
+			} else {
+				cb();
+			}
 		});
 		
 		var strings = {