From 1edfeefbdd334faed3801f7d755d9c78e5ac240f Mon Sep 17 00:00:00 2001
From: Mateusz Uzdowski <mateusz@silverstripe.com>
Date: Thu, 15 Nov 2012 12:14:06 +1300
Subject: [PATCH] BUG Remove extraneous layout calls.

Remove .layout() calls on redraw. It's unnessecary and means layout
actually gets triggered multiple times, making resizing very slow.
This was a hack to fix the positioning of ajax-replaced elements.

The problem is jLayout does not track replaced elements. We have
to trigger layout algorithm manually on the parents of the replaced DOM
so it can update internal structures and do the re-layout.

Relayouting only needed 3 levels down.
---
 admin/javascript/LeftAndMain.Content.js  |  4 ----
 admin/javascript/LeftAndMain.EditForm.js |  2 --
 admin/javascript/LeftAndMain.js          | 12 +++++++++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/admin/javascript/LeftAndMain.Content.js b/admin/javascript/LeftAndMain.Content.js
index a5130955f..824142f98 100644
--- a/admin/javascript/LeftAndMain.Content.js
+++ b/admin/javascript/LeftAndMain.Content.js
@@ -24,11 +24,9 @@
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
 				
 				// Force initialization of certain UI elements to avoid layout glitches
-				this.layout();
 				this.add(this.find('.cms-tabset')).redrawTabs();
 				this.find('.cms-content-header').redraw();
 				this.find('.cms-content-actions').redraw();
-				this.layout();
 			}
 		});
 
@@ -83,8 +81,6 @@
 		$('.cms-content .cms-content-fields').entwine({
 			redraw: function() {
 				if(window.debug) console.log('redraw', this.attr('class'), this.get(0));
-
-				this.layout();
 			}
 		});
 
diff --git a/admin/javascript/LeftAndMain.EditForm.js b/admin/javascript/LeftAndMain.EditForm.js
index 575f8a8a8..9a4f4e062 100644
--- a/admin/javascript/LeftAndMain.EditForm.js
+++ b/admin/javascript/LeftAndMain.EditForm.js
@@ -127,8 +127,6 @@
 				// Force initialization of tabsets to avoid layout glitches
 				this.add(this.find('.cms-tabset')).redrawTabs();
 				this.find('.cms-content-header').redraw();
-				
-				this.layout();
 			},
 
 			/**
diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js
index 1b24d35dd..e665a1753 100644
--- a/admin/javascript/LeftAndMain.js
+++ b/admin/javascript/LeftAndMain.js
@@ -155,7 +155,8 @@ jQuery.noConflict();
 					preview: this.children('.cms-preview')}
 				));
 				
-				// Do the layout - this also lays out children. We move from outside to inside, resizing to fit the parent
+				// Trigger layout algorithm once at the top. This also lays out children - we move from outside to
+				// inside, resizing to fit the parent.
 				this.layout();
 
 				// Redraw on all the children that need it
@@ -426,6 +427,8 @@ jQuery.noConflict();
 					// Set loading state and store element state
 					var origStyle = contentEl.attr('style');
 					var origVisible = contentEl.is(':visible');
+					var origParent = contentEl.parent();
+					var origParentLayoutApplied = (typeof origParent.data('jlayout')!=='undefined');
 					var layoutClasses = ['east', 'west', 'center', 'north', 'south'];
 					var elemClasses = contentEl.attr('class');
 					var origLayoutClasses = [];
@@ -452,6 +455,13 @@ jQuery.noConflict();
 
 					// Unset loading and restore element state (to avoid breaking existing panel visibility, e.g. with preview expanded)
 					if(origVisible) newContentEl.css('visibility', 'visible');
+
+					// Force jlayout to rebuild internal hierarchy to point to the new elements.
+					// This is only necessary for elements that are at least 3 levels deep. 2nd level elements will
+					// be taken care of when we lay out the top level element (.cms-container).
+					if (!origParent.is('.cms-container') && origParentLayoutApplied) {
+						origParent.layout();
+					}
 				});
 
 				// Re-init tabs (in case the form tag itself is a tabset)