4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.bootstrap.SplitBar
15 * @extends Roo.util.Observable
16 * Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
20 var split = new Roo.bootstrap.SplitBar("elementToDrag", "elementToSize",
21 Roo.bootstrap.SplitBar.HORIZONTAL, Roo.bootstrap.SplitBar.LEFT);
22 split.setAdapter(new Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter("container"));
26 split.on('moved', splitterMoved);
29 * Create a new SplitBar
30 * @config {String/HTMLElement/Roo.Element} dragElement The element to be dragged and act as the SplitBar.
31 * @config {String/HTMLElement/Roo.Element} resizingElement The element to be resized based on where the SplitBar element is dragged
32 * @config {Number} orientation (optional) Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
33 * @config {Number} placement (optional) Either Roo.bootstrap.SplitBar.LEFT or Roo.bootstrap.SplitBar.RIGHT for horizontal or
34 Roo.bootstrap.SplitBar.TOP or Roo.bootstrap.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
35 position of the SplitBar).
37 Roo.bootstrap.SplitBar = function(cfg){
43 // resizingElement: el,
45 // orientation : Either Roo.bootstrap.SplitBar.HORIZONTAL
46 // placement : Roo.bootstrap.SplitBar.LEFT ,
50 this.el = Roo.get(cfg.dragElement, true);
51 this.el.dom.unselectable = "on";
53 this.resizingEl = Roo.get(cfg.resizingElement, true);
57 * The orientation of the split. Either Roo.bootstrap.SplitBar.HORIZONTAL or Roo.bootstrap.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
58 * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
61 this.orientation = cfg.orientation || Roo.bootstrap.SplitBar.HORIZONTAL;
64 * The minimum size of the resizing element. (Defaults to 0)
70 * The maximum size of the resizing element. (Defaults to 2000)
76 * Whether to animate the transition to the new size
82 * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
90 if(!cfg.existingProxy){
92 this.proxy = Roo.bootstrap.SplitBar.createProxy(this.orientation);
94 this.proxy = Roo.get(cfg.existingProxy).dom;
97 this.dd = new Roo.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
100 this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
103 this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
109 * @private The adapter to use to positon and resize elements
111 this.adapter = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
112 this.adapter.init(this);
114 if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
116 this.placement = cfg.placement || (this.el.getX() > this.resizingEl.getX() ? Roo.bootstrap.SplitBar.LEFT : Roo.bootstrap.SplitBar.RIGHT);
117 this.el.addClass("roo-splitbar-h");
120 this.placement = cfg.placement || (this.el.getY() > this.resizingEl.getY() ? Roo.bootstrap.SplitBar.TOP : Roo.bootstrap.SplitBar.BOTTOM);
121 this.el.addClass("roo-splitbar-v");
127 * Fires when the splitter is moved (alias for {@link #event-moved})
128 * @param {Roo.bootstrap.SplitBar} this
129 * @param {Number} newSize the new width or height
134 * Fires when the splitter is moved
135 * @param {Roo.bootstrap.SplitBar} this
136 * @param {Number} newSize the new width or height
140 * @event beforeresize
141 * Fires before the splitter is dragged
142 * @param {Roo.bootstrap.SplitBar} this
144 "beforeresize" : true,
149 Roo.util.Observable.call(this);
152 Roo.extend(Roo.bootstrap.SplitBar, Roo.util.Observable, {
153 onStartProxyDrag : function(x, y){
154 this.fireEvent("beforeresize", this);
156 var o = Roo.DomHelper.insertFirst(document.body, {cls: "roo-drag-overlay", html: " "}, true);
158 o.enableDisplayMode("block");
159 // all splitbars share the same overlay
160 Roo.bootstrap.SplitBar.prototype.overlay = o;
162 this.overlay.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
164 Roo.get(this.proxy).setDisplayed("block");
165 var size = this.adapter.getElementSize(this);
166 this.activeMinSize = this.getMinimumSize();;
167 this.activeMaxSize = this.getMaximumSize();;
168 var c1 = size - this.activeMinSize;
169 var c2 = Math.max(this.activeMaxSize - size, 0);
170 if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
171 this.dd.resetConstraints();
172 this.dd.setXConstraint(
173 this.placement == Roo.bootstrap.SplitBar.LEFT ? c1 : c2,
174 this.placement == Roo.bootstrap.SplitBar.LEFT ? c2 : c1
176 this.dd.setYConstraint(0, 0);
178 this.dd.resetConstraints();
179 this.dd.setXConstraint(0, 0);
180 this.dd.setYConstraint(
181 this.placement == Roo.bootstrap.SplitBar.TOP ? c1 : c2,
182 this.placement == Roo.bootstrap.SplitBar.TOP ? c2 : c1
185 this.dragSpecs.startSize = size;
186 this.dragSpecs.startPoint = [x, y];
187 Roo.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
191 * @private Called after the drag operation by the DDProxy
193 onEndProxyDrag : function(e){
194 Roo.get(this.proxy).setDisplayed(false);
195 var endPoint = Roo.lib.Event.getXY(e);
200 if(this.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
201 newSize = this.dragSpecs.startSize +
202 (this.placement == Roo.bootstrap.SplitBar.LEFT ?
203 endPoint[0] - this.dragSpecs.startPoint[0] :
204 this.dragSpecs.startPoint[0] - endPoint[0]
207 newSize = this.dragSpecs.startSize +
208 (this.placement == Roo.bootstrap.SplitBar.TOP ?
209 endPoint[1] - this.dragSpecs.startPoint[1] :
210 this.dragSpecs.startPoint[1] - endPoint[1]
213 newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
214 if(newSize != this.dragSpecs.startSize){
215 if(this.fireEvent('beforeapply', this, newSize) !== false){
216 this.adapter.setElementSize(this, newSize);
217 this.fireEvent("moved", this, newSize);
218 this.fireEvent("resize", this, newSize);
224 * Get the adapter this SplitBar uses
225 * @return The adapter object
227 getAdapter : function(){
232 * Set the adapter this SplitBar uses
233 * @param {Object} adapter A SplitBar adapter object
235 setAdapter : function(adapter){
236 this.adapter = adapter;
237 this.adapter.init(this);
241 * Gets the minimum size for the resizing element
242 * @return {Number} The minimum size
244 getMinimumSize : function(){
249 * Sets the minimum size for the resizing element
250 * @param {Number} minSize The minimum size
252 setMinimumSize : function(minSize){
253 this.minSize = minSize;
257 * Gets the maximum size for the resizing element
258 * @return {Number} The maximum size
260 getMaximumSize : function(){
265 * Sets the maximum size for the resizing element
266 * @param {Number} maxSize The maximum size
268 setMaximumSize : function(maxSize){
269 this.maxSize = maxSize;
273 * Sets the initialize size for the resizing element
274 * @param {Number} size The initial size
276 setCurrentSize : function(size){
277 var oldAnimate = this.animate;
278 this.animate = false;
279 this.adapter.setElementSize(this, size);
280 this.animate = oldAnimate;
284 * Destroy this splitbar.
285 * @param {Boolean} removeEl True to remove the element
287 destroy : function(removeEl){
292 this.proxy.parentNode.removeChild(this.proxy);
300 * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
302 Roo.bootstrap.SplitBar.createProxy = function(dir){
303 var proxy = new Roo.Element(document.createElement("div"));
304 proxy.unselectable();
305 var cls = 'roo-splitbar-proxy';
306 proxy.addClass(cls + ' ' + (dir == Roo.bootstrap.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
307 document.body.appendChild(proxy.dom);
312 * @class Roo.bootstrap.SplitBar.BasicLayoutAdapter
313 * Default Adapter. It assumes the splitter and resizing element are not positioned
314 * elements and only gets/sets the width of the element. Generally used for table based layouts.
316 Roo.bootstrap.SplitBar.BasicLayoutAdapter = function(){
319 Roo.bootstrap.SplitBar.BasicLayoutAdapter.prototype = {
320 // do nothing for now
325 * Called before drag operations to get the current size of the resizing element.
326 * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
328 getElementSize : function(s){
329 if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
330 return s.resizingEl.getWidth();
332 return s.resizingEl.getHeight();
337 * Called after drag operations to set the size of the resizing element.
338 * @param {Roo.bootstrap.SplitBar} s The SplitBar using this adapter
339 * @param {Number} newSize The new size to set
340 * @param {Function} onComplete A function to be invoked when resizing is complete
342 setElementSize : function(s, newSize, onComplete){
343 if(s.orientation == Roo.bootstrap.SplitBar.HORIZONTAL){
345 s.resizingEl.setWidth(newSize);
347 onComplete(s, newSize);
350 s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
355 s.resizingEl.setHeight(newSize);
357 onComplete(s, newSize);
360 s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
367 *@class Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter
368 * @extends Roo.bootstrap.SplitBar.BasicLayoutAdapter
369 * Adapter that moves the splitter element to align with the resized sizing element.
370 * Used with an absolute positioned SplitBar.
371 * @param {String/HTMLElement/Roo.Element} container The container that wraps around the absolute positioned content. If it's
372 * document.body, make sure you assign an id to the body element.
374 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter = function(container){
375 this.basic = new Roo.bootstrap.SplitBar.BasicLayoutAdapter();
376 this.container = Roo.get(container);
379 Roo.bootstrap.SplitBar.AbsoluteLayoutAdapter.prototype = {
384 getElementSize : function(s){
385 return this.basic.getElementSize(s);
388 setElementSize : function(s, newSize, onComplete){
389 this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
392 moveSplitter : function(s){
393 var yes = Roo.bootstrap.SplitBar;
396 s.el.setX(s.resizingEl.getRight());
399 s.el.setStyle("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
402 s.el.setY(s.resizingEl.getBottom());
405 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
412 * Orientation constant - Create a vertical SplitBar
416 Roo.bootstrap.SplitBar.VERTICAL = 1;
419 * Orientation constant - Create a horizontal SplitBar
423 Roo.bootstrap.SplitBar.HORIZONTAL = 2;
426 * Placement constant - The resizing element is to the left of the splitter element
430 Roo.bootstrap.SplitBar.LEFT = 1;
433 * Placement constant - The resizing element is to the right of the splitter element
437 Roo.bootstrap.SplitBar.RIGHT = 2;
440 * Placement constant - The resizing element is positioned above the splitter element
444 Roo.bootstrap.SplitBar.TOP = 3;
447 * Placement constant - The resizing element is positioned under splitter element
451 Roo.bootstrap.SplitBar.BOTTOM = 4;