From d41f37f771b0c3622d1c976f08a212d13d20bc08 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Thu, 16 Feb 2012 11:45:07 +0100
Subject: [PATCH] MINOR Hiding collapsed panel views by CSS to avoid FOUC, and
 initialising component without triggering events to avoid redrawing the whole
 CMS layout twice due to it listening for panel changes

---
 admin/css/screen.css                  |  2 +-
 admin/javascript/LeftAndMain.Panel.js | 19 ++++++++++++-------
 admin/scss/_style.scss                |  1 +
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/admin/css/screen.css b/admin/css/screen.css
index 8b0ade0ee..d5dd4fb95 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -388,7 +388,7 @@ form.member-profile-form #Permissions .optionset li { float: none; width: auto;
 .cms-panel.collapsed .cms-panel-header * { display: none; }
 .cms-panel.collapsed .cms-panel-content { display: none; }
 .cms-panel .cms-panel-header { width: 100%; }
-.cms-panel .cms-panel-content-collapsed { width: 40px; }
+.cms-panel .cms-panel-content-collapsed { width: 40px; display: none; }
 .cms-panel .cms-panel-content-collapsed h2, .cms-panel .cms-panel-content-collapsed h3 { border-bottom: 0; margin-left: 8px; -moz-transform-origin: bottom left; -webkit-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
 .cms-panel .child-flyout-indicator { width: 0; height: 0; border-right: 3px dashed #1f1f1f; border-top: 3px solid transparent; border-left: 3px solid transparent; border-bottom: 3px dashed #1f1f1f; position: absolute; right: 1px; margin-top: -8px; display: none; /* To be shown by javascript, see LeftAndMain.Panel.js */ }
 .cms-panel .collapsed-flyout { display: block !important; left: 41px; margin-top: -40px; position: fixed; width: 191px; }
diff --git a/admin/javascript/LeftAndMain.Panel.js b/admin/javascript/LeftAndMain.Panel.js
index 760a4501d..ac7e0cf9f 100644
--- a/admin/javascript/LeftAndMain.Panel.js
+++ b/admin/javascript/LeftAndMain.Panel.js
@@ -56,7 +56,7 @@
 					if(typeof cookieCollapsed != 'undefined' && cookieCollapsed != null) collapsed = (cookieCollapsed == 'true');
 				} 
 				if(typeof collapsed == 'undefined') collapsed = jQuery(this).hasClass('collapsed');
-				this.togglePanel(!collapsed);
+				this.togglePanel(!collapsed, true);
 				
 				this._super();
 			},
@@ -70,11 +70,14 @@
 			},
 
 			/**
-			 * @param Boolean TRUE to expand, FALSE to collapse.
+			 * @param {Boolean} TRUE to expand, FALSE to collapse.
+			 * @param {Boolean} TRUE means that events won't be fired, which is useful for the component initialization phase.
 			 */
-			togglePanel: function(bool) {
-				this.trigger('beforetoggle.sspanel', bool);
-				this.trigger(bool ? 'beforeexpand' : 'beforecollapse');
+			togglePanel: function(bool, silent) {
+				if(!silent) {
+					this.trigger('beforetoggle.sspanel', bool);
+					this.trigger(bool ? 'beforeexpand' : 'beforecollapse');
+				}
 
 				this.toggleClass('collapsed', !bool);
 				var newWidth = bool ? this.getWidthExpanded() : this.getWidthCollapsed();
@@ -93,8 +96,10 @@
 				// Save collapsed state in cookie
 				if($.cookie && this.attr('id')) $.cookie('cms-panel-collapsed-' + this.attr('id'), !bool, {path: '/', expires: 31});
 				
-				this.trigger('toggle', bool);
-				this.trigger(bool ? 'expand' : 'collapse');
+				if(!silent) {
+					this.trigger('toggle', bool);
+					this.trigger(bool ? 'expand' : 'collapse');
+				}
 			},
 			
 			expandPanel: function(force) {
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 97dcae51a..6945d4753 100644
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -918,6 +918,7 @@ form.member-profile-form {
 
 	.cms-panel-content-collapsed {
 		width: 40px;
+		display: none; // Avoids FOUC
 
 		h2, h3 {
 			border-bottom: 0;