Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/SplitBar.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/widgets/SplitBar.js | 468 |
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 | */ | ||
6 | if(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> | ||
16 | var split = new YAHOO.ext.SplitBar('elementToDrag', 'elementToSize', | ||
17 | YAHOO.ext.SplitBar.HORIZONTAL, YAHOO.ext.SplitBar.LEFT); | ||
18 | split.setAdapter(new YAHOO.ext.SplitBar.AbsoluteLayoutAdapter("container")); | ||
19 | split.minSize = 100; | ||
20 | split.maxSize = 600; | ||
21 | split.animate = true; | ||
22 | split.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 | */ | ||
40 | YAHOO.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 | |||
143 | YAHOO.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 | */ | ||
288 | YAHOO.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 | */ | ||
307 | YAHOO.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 | */ | ||
332 | YAHOO.ext.SplitBar.BasicLayoutAdapter = function(){ | ||
333 | }; | ||
334 | |||
335 | YAHOO.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 | */ | ||
390 | YAHOO.ext.SplitBar.AbsoluteLayoutAdapter = function(container){ | ||
391 | this.basic = new YAHOO.ext.SplitBar.BasicLayoutAdapter(); | ||
392 | this.container = getEl(container); | ||
393 | } | ||
394 | |||
395 | YAHOO.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 | */ | ||
433 | YAHOO.ext.SplitBar.VERTICAL = 1; | ||
434 | |||
435 | /** | ||
436 | * Orientation constant - Create a horizontal SplitBar | ||
437 | * @static | ||
438 | * @type Number | ||
439 | */ | ||
440 | YAHOO.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 | */ | ||
447 | YAHOO.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 | */ | ||
454 | YAHOO.ext.SplitBar.RIGHT = 2; | ||
455 | |||
456 | /** | ||
457 | * Placement constant - The resizing element is positioned above the splitter element | ||
458 | * @static | ||
459 | * @type Number | ||
460 | */ | ||
461 | YAHOO.ext.SplitBar.TOP = 3; | ||
462 | |||
463 | /** | ||
464 | * Placement constant - The resizing element is positioned under splitter element | ||
465 | * @static | ||
466 | * @type Number | ||
467 | */ | ||
468 | YAHOO.ext.SplitBar.BOTTOM = 4; | ||