diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php index 3053703d..c0514e20 100644 --- a/code/LeftAndMain.php +++ b/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', 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 diff --git a/thirdparty/jquery-getscrollbarwidth/.piston.yml b/thirdparty/jquery-getscrollbarwidth/.piston.yml new file mode 100644 index 00000000..e740a57a --- /dev/null +++ b/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 diff --git a/thirdparty/jquery-getscrollbarwidth/README.markdown b/thirdparty/jquery-getscrollbarwidth/README.markdown new file mode 100644 index 00000000..46a95702 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/thirdparty/jquery-getscrollbarwidth/example.html b/thirdparty/jquery-getscrollbarwidth/example.html new file mode 100644 index 00000000..994bfceb --- /dev/null +++ b/thirdparty/jquery-getscrollbarwidth/example.html @@ -0,0 +1,24 @@ + + + + + jQuery getScrollBarWidth example + + + + + + +

jQuery getScrollbarWidth Snippet Example

+

The scrollbar width is

+
+ + \ No newline at end of file diff --git a/thirdparty/jquery-getscrollbarwidth/jquery.getscrollbarwidth.js b/thirdparty/jquery-getscrollbarwidth/jquery.getscrollbarwidth.js new file mode 100644 index 00000000..53a22b02 --- /dev/null +++ b/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 = $('') + .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'), + $textarea2 = $('') + .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'); + scrollbarWidth = $textarea1.width() - $textarea2.width(); + $textarea1.add($textarea2).remove(); + } else { + var $div = $('
') + .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 }) + .prependTo('body').append('
').find('div') + .css({ width: '100%', height: 200 }); + scrollbarWidth = 100 - $div.width(); + $div.parent().remove(); + } + } + return scrollbarWidth; + }; +})(jQuery); \ No newline at end of file