From 6c922bd32b92e994d74211f9f04886fcf10ba1ec Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Mon, 5 Sep 2011 15:04:28 +0200
Subject: [PATCH] BUGFIX Allowing overflowing "insert link/image/flash" panel
 in CMS to scroll (AIR-17)

---
 css/layout.css            | 22 ++++++++++-------
 javascript/LeftAndMain.js | 52 +++++++++++++++++++++------------------
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/css/layout.css b/css/layout.css
index 785b8314..ebc68fd4 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -518,8 +518,7 @@ ul.tree li.Root span.Root span.c a {
 iframe {
 	border: none;
 }
-/* Content Panel Design
- * This is our new right hand pane for inserting images and links etc
+/* Panel for inserting images and links etc
  */
 #contentPanel {
 	background-color: #fff;
@@ -528,17 +527,22 @@ iframe {
 	border: 1px solid #ACBBCC;
 	top: 45px;
 	padding: 0;
-	margin-right: 10px;
-	overflow: hidden;
+	overflow: auto;
+	overflow-x: hidden;
 	font-size: 12px;
 }
 
+#contentPanel form {
+	width: 100%;
+	background: url("../images/textures/obar-18.gif") repeat-x top left;
+}
+
 #contentPanel div,
 #contentPanel p#TargetBlank {
 	margin-left: 0;
 }
 #contentPanel div.TreeDropdownField {
-	width: 180px;
+	width: 181px;
 }
 #contentPanel div.TreeDropdownField span.items {
 	width: 155px;
@@ -570,10 +574,11 @@ iframe {
 }
 
 #contentPanel fieldset {
-	padding: 5px;
+	padding: 0 5px;
 }
 #contentPanel h2 {
-	margin: -5px -5px 0 -5px;
+	margin: 0 0 5px 0;
+	background: none; /* See '#contentPanel > form' */
 }
 	#contentPanel .thumbnailstrip h2 {
 		font-size: 1.1em;
@@ -594,7 +599,6 @@ iframe {
 	background:#E9E9E9 none repeat scroll 0%;
 	display:block;
 	padding:3px;
-	width:98%;
 }
 #contentPanel input.text {
 	border:1px solid #A7A7A7;
@@ -682,7 +686,7 @@ iframe {
 	border: 2px solid #e4e3e3;
 }
 #contentPanel div.Actions {
-	margin: 2px 5px 0 0;
+	padding: 10px 5px 10px 0;
 	text-align: right;
 }
 #contentPanel #FolderImages a.selectedImage img,
diff --git a/javascript/LeftAndMain.js b/javascript/LeftAndMain.js
index 8625f22f..a0a051a7 100644
--- a/javascript/LeftAndMain.js
+++ b/javascript/LeftAndMain.js
@@ -51,6 +51,8 @@ DraggableSeparator.prototype = {
 
 function fixRightWidth() {
 	if(!$('right')) return;
+	
+	var contentPanel = jQuery('#contentPanel');
 
 	// Absolutely position all the elements
 	var sep = getDimension($('left'),'width') + getDimension($('left'),'left');
@@ -62,10 +64,21 @@ function fixRightWidth() {
 	var leftWidth = parseInt($('left').offsetWidth);
 	var sepWidth = parseInt($('separator').offsetWidth - 8);
 	var rightWidth = bodyWidth - leftWidth - sepWidth -18;
+	// hardcoded to avoid confusion when flipping between scrollbar widths
+	var contentPanelDefaultWidth = 205; 
 	
 	// Extra pane in right for insert image/flash/link things
-	if($('contentPanel') && $('contentPanel').style.display != "none") {
-		rightWidth -= 210;
+	if(contentPanel.is(':visible')) {
+		rightWidth -= contentPanelDefaultWidth - sepWidth;
+		if(contentPanel.hasScrollbar()) {
+			rightWidth -= jQuery.getScrollbarWidth();
+			contentPanel.width(contentPanelDefaultWidth + jQuery.getScrollbarWidth());
+		} else {
+			contentPanel.width(contentPanelDefaultWidth);
+		}
+		// Always set the contained element to the original width (excluding potential scrollbar widths)
+		contentPanel.children('form:visible').width(contentPanelDefaultWidth);
+		
 		$('contentPanel').style.left = leftWidth + sepWidth + rightWidth + sepWidth + 23 + 'px';
 	}
 
@@ -189,27 +202,7 @@ window.onresize = function(init) {
 
 	if(typeof fitToParent == 'function') {
 		if($('Form_EditForm')) fitToParent('Form_EditForm', 4);
-		if($('Form_AddForm')) fitToParent('Form_AddForm', 4);
-		
-		if($('Form_EditorToolbarImageForm') && $('Form_EditorToolbarImageForm').style.display == "block") {
-			fitToParent('Form_EditorToolbarImageForm', 5);
-			fitToParent($('Form_EditorToolbarImageForm').getElementsByTagName('fieldset')[0]);
-			if(navigator.appName == "Microsoft Internet Explorer") {
-				fitToParent('Image');
-			} else {
-				fitToParent('Image', 250);
-			}
-		}
-		if($('Form_EditorToolbarFlashForm') && $('Form_EditorToolbarFlashForm').style.display == "block") {
-			fitToParent('Form_EditorToolbarFlashForm', 5);
-			fitToParent($('Form_EditorToolbarFlashForm').getElementsByTagName('fieldset')[0]);
-			if(navigator.appName == "Microsoft Internet Explorer") {
-				fitToParent('Flash');
-			} else {
-				fitToParent('Flash', 130);
-			}
-		}
-	
+		if($('Form_AddForm')) fitToParent('Form_AddForm', 4);	
 	}
 	if(typeof fixHeight_left == 'function') fixHeight_left();
 	if(typeof fixRightWidth == 'function') fixRightWidth();
@@ -899,6 +892,17 @@ function nullConverter(url) {
 	return url;
 }
 
+(function($) {
+	$.fn.hasScrollbar = function(dir) {
+		var fn = (dir == 'x') ? 'scrollLeft' : 'scrollTop';
+		var origScroll = this[fn]();
+		this[fn](1); // do a fake scroll 
+		var hasScrollbar = (this[fn]() !== 0); // did it have any effect?
+		this[fn](origScroll); // scroll back
+		return hasScrollbar;
+	};
+})(jQuery);
+
 Behaviour.register({
     'textarea.htmleditor' : {
         initialize : function() {
@@ -914,4 +918,4 @@ Behaviour.register({
 			}
         }
     }
-})
+});
\ No newline at end of file