mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
BUGFIX Allowing overflowing "insert link/image/flash" panel in CMS to scroll (AIR-17)
This commit is contained in:
Ingo Schommer
parent
d81f882b4f
commit
5e74e4da3c
@ -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',
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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({
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
8
thirdparty/jquery-getscrollbarwidth/.piston.yml
vendored
Normal file
8
thirdparty/jquery-getscrollbarwidth/.piston.yml
vendored
Normal file
@ -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
|
||||
10
thirdparty/jquery-getscrollbarwidth/README.markdown
vendored
Normal file
10
thirdparty/jquery-getscrollbarwidth/README.markdown
vendored
Normal file
@ -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)
|
||||
24
thirdparty/jquery-getscrollbarwidth/example.html
vendored
Normal file
24
thirdparty/jquery-getscrollbarwidth/example.html
vendored
Normal file
@ -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>
|
||||
31
thirdparty/jquery-getscrollbarwidth/jquery.getscrollbarwidth.js
vendored
Normal file
31
thirdparty/jquery-getscrollbarwidth/jquery.getscrollbarwidth.js
vendored
Normal file
@ -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);
|
||||
Loading…
Reference in New Issue
Block a user