BUGFIX Allowing overflowing "insert link/image/flash" panel in CMS to scroll (AIR-17)

code/LeftAndMain.php

@@ -281,6 +281,7 @@ class LeftAndMain extends Controller {
 				THIRDPARTY_DIR . '/scriptaculous/controls.js',
 				THIRDPARTY_DIR . '/greybox/AmiJS.js',
 				THIRDPARTY_DIR . '/greybox/greybox.js',
+				CMS_DIR . '/thirdparty/jquery-getscrollbarwidth/jquery.getscrollbarwidth.js',
 				CMS_DIR . '/javascript/LeftAndMain.js',
 				CMS_DIR . '/javascript/LeftAndMain_left.js',
 				CMS_DIR . '/javascript/LeftAndMain_right.js',

css/layout.css

@@ -518,8 +518,7 @@ ul.tree li.Root span.Root span.c a {
 iframe {
 	border: none;
 }
-/* Content Panel Design
+/* Panel for inserting images and links etc
- * This is our new right hand pane 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: auto;
-	overflow: hidden;
+	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,

javascript/LeftAndMain.js

@@ -52,6 +52,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');
 	$('separator').style.left = (sep + 2) + 'px';
@@ -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") {
+	if(contentPanel.is(':visible')) {
-		rightWidth -= 210;
+		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';
 	}
 
@@ -190,26 +203,6 @@ 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(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({
 			}
         }
     }
-})
+});

thirdparty/jquery-getscrollbarwidth/.piston.yml

@@ -0,0 +1,8 @@
+--- 
+format: 1
+handler: 
+  commit: d04ef8794e8459cd65529efa3e623a9f3764d142
+  branch: master
+lock: false
+repository_class: Piston::Git::Repository
+repository_url: https://github.com/brandonaaron/jquery-getscrollbarwidth.git

thirdparty/jquery-getscrollbarwidth/README.markdown

@@ -0,0 +1,10 @@
+# Get Scrollbar Width
+
+A jQuery plugin to retrieve the width of a system scrollbar.
+
+
+## License
+
+The Get Scrollbar Width plugin is dual licensed *(just like jQuery)* under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.opensource.org/licenses/gpl-license.php) licenses.
+
+Copyright (c) 2008 [Brandon Aaron](http://brandonaaron.net)

thirdparty/jquery-getscrollbarwidth/example.html

@@ -0,0 +1,24 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
+		<title>jQuery getScrollBarWidth example</title>
+		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+		<script src="jquery.getScrollbarWidth.js" type="text/javascript" charset="utf-8"></script>
+		<script type="text/javascript" charset="utf-8">
+			$(function() {
+				$('#width').text( $.getScrollbarWidth() );
+			});
+		</script>
+		<style type="text/css" media="screen">
+			#example { width: 100px; height: 100px; overflow: auto; }
+				#example div { width: 100%; height: 200px; background: #ccc; border: 1px solid #000; }
+		</style>
+	</head>
+	<body>
+		<h1>jQuery <code>getScrollbarWidth</code> Snippet Example</h1>
+		<p>The scrollbar width is <span id="width"></span></p>
+		<div id="example"><div></div></div>
+	</body>
+</html>

thirdparty/jquery-getscrollbarwidth/jquery.getscrollbarwidth.js

@@ -0,0 +1,31 @@
+/*! Copyright (c) 2008 Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ */
+
+/**
+ * Gets the width of the OS scrollbar
+ */
+(function($) {
+	var scrollbarWidth = 0;
+	$.getScrollbarWidth = function() {
+		if ( !scrollbarWidth ) {
+			if ( $.browser.msie ) {
+				var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
+						.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
+					$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
+						.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
+				scrollbarWidth = $textarea1.width() - $textarea2.width();
+				$textarea1.add($textarea2).remove();
+			} else {
+				var $div = $('<div />')
+					.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
+					.prependTo('body').append('<div />').find('div')
+						.css({ width: '100%', height: 200 });
+				scrollbarWidth = 100 - $div.width();
+				$div.parent().remove();
+			}
+		}
+		return scrollbarWidth;
+	};
+})(jQuery);