summaryrefslogtreecommitdiff
path: root/frontend/beta/js/YUI-extensions/widgets/SplitBar.js
Unidiff
Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/SplitBar.js') (more/less context) (show whitespace changes)
-rw-r--r--frontend/beta/js/YUI-extensions/widgets/SplitBar.js468
1 files changed, 468 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/widgets/SplitBar.js b/frontend/beta/js/YUI-extensions/widgets/SplitBar.js
new file mode 100644
index 0000000..855d138
--- a/dev/null
+++ b/frontend/beta/js/YUI-extensions/widgets/SplitBar.js
@@ -0,0 +1,468 @@
1/*
2 * splitbar.js, version .7
3 * Copyright(c) 2006, Jack Slocum.
4 * Code licensed under the BSD License
5 */
6if(YAHOO.util.DragDropMgr){
7 YAHOO.util.DragDropMgr.clickTimeThresh = 350;
8}
9/**
10 * @class YAHOO.ext.SplitBar
11 * @extends YAHOO.ext.util.Observable
12 * Creates draggable splitter bar functionality from two elements.
13 * <br><br>
14 * Usage:
15 * <pre><code>
16var split = new YAHOO.ext.SplitBar('elementToDrag', 'elementToSize',
17 YAHOO.ext.SplitBar.HORIZONTAL, YAHOO.ext.SplitBar.LEFT);
18split.setAdapter(new YAHOO.ext.SplitBar.AbsoluteLayoutAdapter("container"));
19split.minSize = 100;
20split.maxSize = 600;
21split.animate = true;
22split.onMoved.subscribe(splitterMoved);
23</code></pre>
24 * @requires YAHOO.ext.Element
25 * @requires YAHOO.util.Dom
26 * @requires YAHOO.util.Event
27 * @requires YAHOO.util.CustomEvent
28 * @requires YAHOO.util.DDProxy
29 * @requires YAHOO.util.Anim (optional) to support animation
30 * @requires YAHOO.util.Easing (optional) to support animation
31 * @constructor
32 * Create a new SplitBar
33 * @param {String/HTMLElement/Element} dragElement The element to be dragged and act as the SplitBar.
34 * @param {String/HTMLElement/Element} resizingElement The element to be resized based on where the SplitBar element is dragged
35 * @param {Number} orientation (optional) Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
36 * @param {Number} placement (optional) Either YAHOO.ext.SplitBar.LEFT or YAHOO.ext.SplitBar.RIGHT for horizontal or
37 YAHOO.ext.SplitBar.TOP or YAHOO.ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the intial position
38 position of the SplitBar).
39 */
40YAHOO.ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
41
42 /** @private */
43 this.el = YAHOO.ext.Element.get(dragElement, true);
44 this.el.dom.unselectable = 'on';
45 /** @private */
46 this.resizingEl = YAHOO.ext.Element.get(resizingElement, true);
47
48 /**
49 * @private
50 * The orientation of the split. Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
51 * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
52 * @type Number
53 */
54 this.orientation = orientation || YAHOO.ext.SplitBar.HORIZONTAL;
55
56 /**
57 * The minimum size of the resizing element. (Defaults to 0)
58 * @type Number
59 */
60 this.minSize = 0;
61
62 /**
63 * The maximum size of the resizing element. (Defaults to 2000)
64 * @type Number
65 */
66 this.maxSize = 2000;
67
68 this.onMoved = new YAHOO.util.CustomEvent("SplitBarMoved", this);
69
70 /**
71 * Whether to animate the transition to the new size
72 * @type Boolean
73 */
74 this.animate = false;
75
76 /**
77 * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
78 * @type Boolean
79 */
80 this.useShim = false;
81
82 /** @private */
83 this.shim = null;
84
85 if(!existingProxy){
86 /** @private */
87 this.proxy = YAHOO.ext.SplitBar.createProxy(this.orientation);
88 }else{
89 this.proxy = getEl(existingProxy).dom;
90 }
91 /** @private */
92 this.dd = new YAHOO.util.DDProxy(this.el.dom.id, "SplitBars", {dragElId : this.proxy.id});
93
94 /** @private */
95 this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
96
97 /** @private */
98 this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
99
100 /** @private */
101 this.dragSpecs = {};
102
103 /**
104 * @private The adapter to use to positon and resize elements
105 */
106 this.adapter = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
107 this.adapter.init(this);
108
109 if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
110 /** @private */
111 this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? YAHOO.ext.SplitBar.LEFT : YAHOO.ext.SplitBar.RIGHT);
112 this.el.setStyle('cursor', 'e-resize');
113 }else{
114 /** @private */
115 this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? YAHOO.ext.SplitBar.TOP : YAHOO.ext.SplitBar.BOTTOM);
116 this.el.setStyle('cursor', 'n-resize');
117 }
118
119 this.events = {
120 /**
121 * @event resize
122 * Fires when the splitter is moved (alias for moved)
123 * @param {YAHOO.ext.SplitBar} this
124 * @param {Number} newSize the new width or height
125 */
126 'resize' : this.onMoved,
127 /**
128 * @event moved
129 * Fires when the splitter is moved
130 * @param {YAHOO.ext.SplitBar} this
131 * @param {Number} newSize the new width or height
132 */
133 'moved' : this.onMoved,
134 /**
135 * @event beforeresize
136 * Fires before the splitter is dragged
137 * @param {YAHOO.ext.SplitBar} this
138 */
139 'beforeresize' : new YAHOO.util.CustomEvent('beforeresize')
140 }
141}
142
143YAHOO.extendX(YAHOO.ext.SplitBar, YAHOO.ext.util.Observable, {
144 onStartProxyDrag : function(x, y){
145 this.fireEvent('beforeresize', this);
146 if(this.useShim){
147 if(!this.shim){
148 this.shim = YAHOO.ext.SplitBar.createShim();
149 }
150 this.shim.setVisible(true);
151 }
152 YAHOO.util.Dom.setStyle(this.proxy, 'display', 'block');
153 var size = this.adapter.getElementSize(this);
154 this.activeMinSize = this.getMinimumSize();;
155 this.activeMaxSize = this.getMaximumSize();;
156 var c1 = size - this.activeMinSize;
157 var c2 = Math.max(this.activeMaxSize - size, 0);
158 if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
159 this.dd.resetConstraints();
160 this.dd.setXConstraint(
161 this.placement == YAHOO.ext.SplitBar.LEFT ? c1 : c2,
162 this.placement == YAHOO.ext.SplitBar.LEFT ? c2 : c1
163 );
164 this.dd.setYConstraint(0, 0);
165 }else{
166 this.dd.resetConstraints();
167 this.dd.setXConstraint(0, 0);
168 this.dd.setYConstraint(
169 this.placement == YAHOO.ext.SplitBar.TOP ? c1 : c2,
170 this.placement == YAHOO.ext.SplitBar.TOP ? c2 : c1
171 );
172 }
173 this.dragSpecs.startSize = size;
174 this.dragSpecs.startPoint = [x, y];
175
176 YAHOO.util.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
177 },
178
179 /**
180 * @private Called after the drag operation by the DDProxy
181 */
182 onEndProxyDrag : function(e){
183 YAHOO.util.Dom.setStyle(this.proxy, 'display', 'none');
184 var endPoint = YAHOO.util.Event.getXY(e);
185 if(this.useShim){
186 this.shim.setVisible(false);
187 }
188 var newSize;
189 if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
190 newSize = this.dragSpecs.startSize +
191 (this.placement == YAHOO.ext.SplitBar.LEFT ?
192 endPoint[0] - this.dragSpecs.startPoint[0] :
193 this.dragSpecs.startPoint[0] - endPoint[0]
194 );
195 }else{
196 newSize = this.dragSpecs.startSize +
197 (this.placement == YAHOO.ext.SplitBar.TOP ?
198 endPoint[1] - this.dragSpecs.startPoint[1] :
199 this.dragSpecs.startPoint[1] - endPoint[1]
200 );
201 }
202 newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
203 if(newSize != this.dragSpecs.startSize){
204 this.adapter.setElementSize(this, newSize);
205 this.onMoved.fireDirect(this, newSize);
206 }
207 },
208
209 /**
210 * Get the adapter this SplitBar uses
211 * @return The adapter object
212 */
213 getAdapter : function(){
214 return this.adapter;
215 },
216
217 /**
218 * Set the adapter this SplitBar uses
219 * @param {Object} adapter A SplitBar adapter object
220 */
221 setAdapter : function(adapter){
222 this.adapter = adapter;
223 this.adapter.init(this);
224 },
225
226 /**
227 * Gets the minimum size for the resizing element
228 * @return {Number} The minimum size
229 */
230 getMinimumSize : function(){
231 return this.minSize;
232 },
233
234 /**
235 * Sets the minimum size for the resizing element
236 * @param {Number} minSize The minimum size
237 */
238 setMinimumSize : function(minSize){
239 this.minSize = minSize;
240 },
241
242 /**
243 * Gets the maximum size for the resizing element
244 * @return {Number} The maximum size
245 */
246 getMaximumSize : function(){
247 return this.maxSize;
248 },
249
250 /**
251 * Sets the maximum size for the resizing element
252 * @param {Number} maxSize The maximum size
253 */
254 setMaximumSize : function(maxSize){
255 this.maxSize = maxSize;
256 },
257
258 /**
259 * Sets the initialize size for the resizing element
260 * @param {Number} size The initial size
261 */
262 setCurrentSize : function(size){
263 var oldAnimate = this.animate;
264 this.animate = false;
265 this.adapter.setElementSize(this, size);
266 this.animate = oldAnimate;
267 },
268
269 /**
270 * Destroy this splitbar.
271 * @param {Boolean} removeEl True to remove the element
272 */
273 destroy : function(removeEl){
274 if(this.shim){
275 this.shim.remove();
276 }
277 this.dd.unreg();
278 this.proxy.parentNode.removeChild(this.proxy);
279 if(removeEl){
280 this.el.remove();
281 }
282 }
283});
284
285/**
286 * @private static Create the shim to drag over iframes
287 */
288YAHOO.ext.SplitBar.createShim = function(){
289 var shim = document.createElement('div');
290 shim.unselectable = 'on';
291 YAHOO.util.Dom.generateId(shim, 'split-shim');
292 YAHOO.util.Dom.setStyle(shim, 'width', '100%');
293 YAHOO.util.Dom.setStyle(shim, 'height', '100%');
294 YAHOO.util.Dom.setStyle(shim, 'position', 'absolute');
295 YAHOO.util.Dom.setStyle(shim, 'background', 'white');
296 YAHOO.util.Dom.setStyle(shim, 'z-index', 11000);
297 window.document.body.appendChild(shim);
298 var shimEl = YAHOO.ext.Element.get(shim);
299 shimEl.setOpacity(.01);
300 shimEl.setXY([0, 0]);
301 return shimEl;
302};
303
304/**
305 * @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.
306 */
307YAHOO.ext.SplitBar.createProxy = function(orientation){
308 var proxy = document.createElement('div');
309 proxy.unselectable = 'on';
310 YAHOO.util.Dom.generateId(proxy, 'split-proxy');
311 YAHOO.util.Dom.setStyle(proxy, 'position', 'absolute');
312 YAHOO.util.Dom.setStyle(proxy, 'visibility', 'hidden');
313 YAHOO.util.Dom.setStyle(proxy, 'z-index', 11001);
314 YAHOO.util.Dom.setStyle(proxy, 'background-color', "#aaa");
315 if(orientation == YAHOO.ext.SplitBar.HORIZONTAL){
316 YAHOO.util.Dom.setStyle(proxy, 'cursor', 'e-resize');
317 }else{
318 YAHOO.util.Dom.setStyle(proxy, 'cursor', 'n-resize');
319 }
320 // the next 2 fix IE abs position div height problem
321 YAHOO.util.Dom.setStyle(proxy, 'line-height', '0px');
322 YAHOO.util.Dom.setStyle(proxy, 'font-size', '0px');
323 window.document.body.appendChild(proxy);
324 return proxy;
325};
326
327/**
328 * @class YAHOO.ext.SplitBar.BasicLayoutAdapter
329 * Default Adapter. It assumes the splitter and resizing element are not positioned
330 * elements and only gets/sets the width of the element. Generally used for table based layouts.
331 */
332YAHOO.ext.SplitBar.BasicLayoutAdapter = function(){
333};
334
335YAHOO.ext.SplitBar.BasicLayoutAdapter.prototype = {
336 // do nothing for now
337 init : function(s){
338
339 },
340 /**
341 * Called before drag operations to get the current size of the resizing element.
342 * @param {YAHOO.ext.SplitBar} s The SplitBar using this adapter
343 */
344 getElementSize : function(s){
345 if(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
346 return s.resizingEl.getWidth();
347 }else{
348 return s.resizingEl.getHeight();
349 }
350 },
351
352 /**
353 * Called after drag operations to set the size of the resizing element.
354 * @param {YAHOO.ext.SplitBar} s The SplitBar using this adapter
355 * @param {Number} newSize The new size to set
356 * @param {Function} onComplete A function to be invoke when resizing is complete
357 */
358 setElementSize : function(s, newSize, onComplete){
359 if(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
360 if(!YAHOO.util.Anim || !s.animate){
361 s.resizingEl.setWidth(newSize);
362 if(onComplete){
363 onComplete(s, newSize);
364 }
365 }else{
366 s.resizingEl.setWidth(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
367 }
368 }else{
369
370 if(!YAHOO.util.Anim || !s.animate){
371 s.resizingEl.setHeight(newSize);
372 if(onComplete){
373 onComplete(s, newSize);
374 }
375 }else{
376 s.resizingEl.setHeight(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
377 }
378 }
379 }
380};
381
382/**
383 *@class YAHOO.ext.SplitBar.AbsoluteLayoutAdapter
384 * @extends YAHOO.ext.SplitBar.BasicLayoutAdapter
385 * Adapter that moves the splitter element to align with the resized sizing element.
386 * Used with an absolute positioned SplitBar.
387 * @param {String/HTMLElement/Element} container The container that wraps around the absolute positioned content. If it's
388 * document.body, make sure you assign an id to the body element.
389 */
390YAHOO.ext.SplitBar.AbsoluteLayoutAdapter = function(container){
391 this.basic = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
392 this.container = getEl(container);
393}
394
395YAHOO.ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
396 init : function(s){
397 this.basic.init(s);
398 //YAHOO.util.Event.on(window, 'resize', this.moveSplitter.createDelegate(this, [s]));
399 },
400
401 getElementSize : function(s){
402 return this.basic.getElementSize(s);
403 },
404
405 setElementSize : function(s, newSize, onComplete){
406 this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
407 },
408
409 moveSplitter : function(s){
410 var yes = YAHOO.ext.SplitBar;
411 switch(s.placement){
412 case yes.LEFT:
413 s.el.setX(s.resizingEl.getRight());
414 break;
415 case yes.RIGHT:
416 s.el.setStyle('right', (this.container.getWidth() - s.resizingEl.getLeft()) + 'px');
417 break;
418 case yes.TOP:
419 s.el.setY(s.resizingEl.getBottom());
420 break;
421 case yes.BOTTOM:
422 s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
423 break;
424 }
425 }
426};
427
428/**
429 * Orientation constant - Create a vertical SplitBar
430 * @static
431 * @type Number
432 */
433YAHOO.ext.SplitBar.VERTICAL = 1;
434
435/**
436 * Orientation constant - Create a horizontal SplitBar
437 * @static
438 * @type Number
439 */
440YAHOO.ext.SplitBar.HORIZONTAL = 2;
441
442/**
443 * Placement constant - The resizing element is to the left of the splitter element
444 * @static
445 * @type Number
446 */
447YAHOO.ext.SplitBar.LEFT = 1;
448
449/**
450 * Placement constant - The resizing element is to the right of the splitter element
451 * @static
452 * @type Number
453 */
454YAHOO.ext.SplitBar.RIGHT = 2;
455
456/**
457 * Placement constant - The resizing element is positioned above the splitter element
458 * @static
459 * @type Number
460 */
461YAHOO.ext.SplitBar.TOP = 3;
462
463/**
464 * Placement constant - The resizing element is positioned under splitter element
465 * @static
466 * @type Number
467 */
468YAHOO.ext.SplitBar.BOTTOM = 4;