Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/BasicDialog.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/widgets/BasicDialog.js | 1046 |
1 files changed, 1046 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/widgets/BasicDialog.js b/frontend/beta/js/YUI-extensions/widgets/BasicDialog.js new file mode 100644 index 0000000..3912568 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/widgets/BasicDialog.js | |||
@@ -0,0 +1,1046 @@ | |||
1 | /** | ||
2 | * @class YAHOO.ext.BasicDialog | ||
3 | * @extends YAHOO.ext.util.Observable | ||
4 | * Lightweight Dialog Class. | ||
5 | * | ||
6 | * The code below lists all configuration options along with the default value. | ||
7 | * If the default value is what you want you can leave it out: | ||
8 | * <pre><code> | ||
9 | var dlg = new YAHOO.ext.BasicDialog('element-id', { | ||
10 | autoCreate: false, (true to auto create from scratch, or DomHelper Object) | ||
11 | title: null, (title to set at config time) | ||
12 | width: (css), | ||
13 | height: (css), | ||
14 | x: 200, //(defaults to center screen if blank) | ||
15 | y: 500, //(defaults to center screen if blank) | ||
16 | animateTarget: null,// (no animation) This is the id or element to animate from | ||
17 | resizable: true, | ||
18 | minHeight: 80, | ||
19 | minWidth: 200, | ||
20 | modal: false, | ||
21 | autoScroll: true, | ||
22 | closable: true, | ||
23 | constraintoviewport: true, | ||
24 | draggable: true, | ||
25 | autoTabs: false, (if true searches child nodes for elements with class ydlg-tab and converts them to tabs) | ||
26 | tabTag: 'div', // the tag name of tab elements | ||
27 | proxyDrag: false, (drag a proxy element rather than the dialog itself) | ||
28 | fixedcenter: false, | ||
29 | shadow: false, | ||
30 | buttonAlign: 'right', | ||
31 | minButtonWidth: 75, | ||
32 | shim: false // true to create an iframe shim to | ||
33 | // keep selects from showing through | ||
34 | }); | ||
35 | </code></pre> | ||
36 | * @constructor | ||
37 | * Create a new BasicDialog. | ||
38 | * @param {String/HTMLElement/YAHOO.ext.Element} el The id of or container element | ||
39 | * @param {Object} config configuration options | ||
40 | */ | ||
41 | YAHOO.ext.BasicDialog = function(el, config){ | ||
42 | this.el = getEl(el); | ||
43 | var dh = YAHOO.ext.DomHelper; | ||
44 | if(!this.el && config && config.autoCreate){ | ||
45 | if(typeof config.autoCreate == 'object'){ | ||
46 | if(!config.autoCreate.id){ | ||
47 | config.autoCreate.id = el; | ||
48 | } | ||
49 | this.el = dh.append(document.body, | ||
50 | config.autoCreate, true); | ||
51 | }else{ | ||
52 | this.el = dh.append(document.body, | ||
53 | {tag: 'div', id: el}, true); | ||
54 | } | ||
55 | } | ||
56 | el = this.el; | ||
57 | el.setDisplayed(true); | ||
58 | el.hide = this.hideAction; | ||
59 | this.id = el.id; | ||
60 | el.addClass('ydlg'); | ||
61 | |||
62 | YAHOO.ext.util.Config.apply(this, config); | ||
63 | |||
64 | this.proxy = el.createProxy('ydlg-proxy'); | ||
65 | this.proxy.hide = this.hideAction; | ||
66 | this.proxy.setOpacity(.5); | ||
67 | this.proxy.hide(); | ||
68 | |||
69 | if(config.width){ | ||
70 | el.setWidth(config.width); | ||
71 | } | ||
72 | if(config.height){ | ||
73 | el.setHeight(config.height); | ||
74 | } | ||
75 | this.size = el.getSize(); | ||
76 | if(typeof config.x != 'undefined' && typeof config.y != 'undefined'){ | ||
77 | this.xy = [config.x,config.y]; | ||
78 | }else{ | ||
79 | this.xy = el.getCenterXY(true); | ||
80 | } | ||
81 | // find the header, body and footer | ||
82 | var cn = el.dom.childNodes; | ||
83 | for(var i = 0, len = cn.length; i < len; i++) { | ||
84 | var node = cn[i]; | ||
85 | if(node && node.nodeType == 1){ | ||
86 | if(YAHOO.util.Dom.hasClass(node, 'ydlg-hd')){ | ||
87 | this.header = getEl(node, true); | ||
88 | }else if(YAHOO.util.Dom.hasClass(node, 'ydlg-bd')){ | ||
89 | this.body = getEl(node, true); | ||
90 | }else if(YAHOO.util.Dom.hasClass(node, 'ydlg-ft')){ | ||
91 | /** | ||
92 | * The footer element | ||
93 | * @type YAHOO.ext.Element | ||
94 | */ | ||
95 | this.footer = getEl(node, true); | ||
96 | } | ||
97 | } | ||
98 | } | ||
99 | |||
100 | if(!this.header){ | ||
101 | /** | ||
102 | * The header element | ||
103 | * @type YAHOO.ext.Element | ||
104 | */ | ||
105 | this.header = this.body ? | ||
106 | dh.insertBefore(this.body.dom, {tag: 'div', cls:'ydlg-hd'}, true) : | ||
107 | dh.append(el.dom, {tag: 'div', cls:'ydlg-hd'}, true); | ||
108 | } | ||
109 | if(this.title){ | ||
110 | this.header.update(this.title); | ||
111 | } | ||
112 | // this element allows the dialog to be focused for keyboard event | ||
113 | this.focusEl = dh.append(el.dom, {tag: 'a', href:'#', cls:'ydlg-focus', tabIndex:'-1'}, true); | ||
114 | this.focusEl.swallowEvent('click', true); | ||
115 | if(!this.body){ | ||
116 | /** | ||
117 | * The body element | ||
118 | * @type YAHOO.ext.Element | ||
119 | */ | ||
120 | this.body = dh.append(el.dom, {tag: 'div', cls:'ydlg-bd'}, true); | ||
121 | } | ||
122 | // wrap the header for special rendering | ||
123 | var hl = dh.insertBefore(this.header.dom, {tag: 'div', cls:'ydlg-hd-left'}); | ||
124 | var hr = dh.append(hl, {tag: 'div', cls:'ydlg-hd-right'}); | ||
125 | hr.appendChild(this.header.dom); | ||
126 | |||
127 | // wrap the body and footer for special rendering | ||
128 | this.bwrap = dh.insertBefore(this.body.dom, {tag: 'div', cls:'ydlg-dlg-body'}, true); | ||
129 | this.bwrap.dom.appendChild(this.body.dom); | ||
130 | if(this.footer) this.bwrap.dom.appendChild(this.footer.dom); | ||
131 | |||
132 | this.bg = this.el.createChild({ | ||
133 | tag: 'div', cls:'ydlg-bg', | ||
134 | html: '<div class="ydlg-bg-left"><div class="ydlg-bg-right"><div class="ydlg-bg-center"> </div></div></div>' | ||
135 | }); | ||
136 | this.centerBg = getEl(this.bg.dom.firstChild.firstChild.firstChild); | ||
137 | |||
138 | |||
139 | if(this.autoScroll !== false && !this.autoTabs){ | ||
140 | this.body.setStyle('overflow', 'auto'); | ||
141 | } | ||
142 | if(this.closable !== false){ | ||
143 | this.el.addClass('ydlg-closable'); | ||
144 | this.close = dh.append(el.dom, {tag: 'div', cls:'ydlg-close'}, true); | ||
145 | this.close.mon('click', this.closeClick, this, true); | ||
146 | this.close.addClassOnOver('ydlg-close-over'); | ||
147 | } | ||
148 | if(this.resizable !== false){ | ||
149 | this.el.addClass('ydlg-resizable'); | ||
150 | this.resizer = new YAHOO.ext.Resizable(el, { | ||
151 | minWidth: this.minWidth || 80, | ||
152 | minHeight:this.minHeight || 80, | ||
153 | handles: 'all', | ||
154 | pinned: true | ||
155 | }); | ||
156 | this.resizer.on('beforeresize', this.beforeResize, this, true); | ||
157 | this.resizer.on('resize', this.onResize, this, true); | ||
158 | } | ||
159 | if(this.draggable !== false){ | ||
160 | el.addClass('ydlg-draggable'); | ||
161 | if (!this.proxyDrag) { | ||
162 | var dd = new YAHOO.util.DD(el.dom.id, 'WindowDrag'); | ||
163 | } | ||
164 | else { | ||
165 | var dd = new YAHOO.util.DDProxy(el.dom.id, 'WindowDrag', {dragElId: this.proxy.id}); | ||
166 | } | ||
167 | dd.setHandleElId(this.header.id); | ||
168 | dd.endDrag = this.endMove.createDelegate(this); | ||
169 | dd.startDrag = this.startMove.createDelegate(this); | ||
170 | dd.onDrag = this.onDrag.createDelegate(this); | ||
171 | this.dd = dd; | ||
172 | } | ||
173 | if(this.modal){ | ||
174 | this.mask = dh.append(document.body, {tag: 'div', cls:'ydlg-mask'}, true); | ||
175 | this.mask.enableDisplayMode('block'); | ||
176 | this.mask.hide(); | ||
177 | this.el.addClass('ydlg-modal'); | ||
178 | } | ||
179 | if(this.shadow){ | ||
180 | this.shadow = el.createProxy({tag: 'div', cls:'ydlg-shadow'}); | ||
181 | this.shadow.setOpacity(.3); | ||
182 | this.shadow.setVisibilityMode(YAHOO.ext.Element.VISIBILITY); | ||
183 | this.shadow.setDisplayed('block'); | ||
184 | this.shadow.hide = this.hideAction; | ||
185 | this.shadow.hide(); | ||
186 | }else{ | ||
187 | this.shadowOffset = 0; | ||
188 | } | ||
189 | // adding an iframe shim to FF kills the cursor on the PC, but is needed on the Mac | ||
190 | // where it (luckily) does not kill the cursor | ||
191 | if(!YAHOO.ext.util.Browser.isGecko || YAHOO.ext.util.Browser.isMac){ | ||
192 | if(this.shim){ | ||
193 | this.shim = this.el.createShim(); | ||
194 | this.shim.hide = this.hideAction; | ||
195 | this.shim.hide(); | ||
196 | } | ||
197 | }else{ | ||
198 | this.shim = false; | ||
199 | } | ||
200 | if(this.autoTabs){ | ||
201 | this.initTabs(); | ||
202 | } | ||
203 | this.syncBodyHeight(); | ||
204 | this.events = { | ||
205 | /** | ||
206 | * @event keydown | ||
207 | * Fires when a key is pressed | ||
208 | * @param {YAHOO.ext.BasicDialog} this | ||
209 | * @param {YAHOO.ext.EventObject} e | ||
210 | */ | ||
211 | 'keydown' : true, | ||
212 | /** | ||
213 | * @event move | ||
214 | * Fires when this dialog is moved by the user. | ||
215 | * @param {YAHOO.ext.BasicDialog} this | ||
216 | * @param {Number} x The new page X | ||
217 | * @param {Number} y The new page Y | ||
218 | */ | ||
219 | 'move' : true, | ||
220 | /** | ||
221 | * @event resize | ||
222 | * Fires when this dialog is resized by the user. | ||
223 | * @param {YAHOO.ext.BasicDialog} this | ||
224 | * @param {Number} width The new width | ||
225 | * @param {Number} height The new height | ||
226 | */ | ||
227 | 'resize' : true, | ||
228 | /** | ||
229 | * @event beforehide | ||
230 | * Fires before this dialog is hidden. | ||
231 | * @param {YAHOO.ext.BasicDialog} this | ||
232 | */ | ||
233 | 'beforehide' : true, | ||
234 | /** | ||
235 | * @event hide | ||
236 | * Fires when this dialog is hidden. | ||
237 | * @param {YAHOO.ext.BasicDialog} this | ||
238 | */ | ||
239 | 'hide' : true, | ||
240 | /** | ||
241 | * @event beforeshow | ||
242 | * Fires before this dialog is shown. | ||
243 | * @param {YAHOO.ext.BasicDialog} this | ||
244 | */ | ||
245 | 'beforeshow' : true, | ||
246 | /** | ||
247 | * @event show | ||
248 | * Fires when this dialog is shown. | ||
249 | * @param {YAHOO.ext.BasicDialog} this | ||
250 | */ | ||
251 | 'show' : true | ||
252 | }; | ||
253 | el.mon('keydown', this.onKeyDown, this, true); | ||
254 | el.mon("mousedown", this.toFront, this, true); | ||
255 | |||
256 | YAHOO.ext.EventManager.onWindowResize(this.adjustViewport, this, true); | ||
257 | this.el.hide(); | ||
258 | YAHOO.ext.DialogManager.register(this); | ||
259 | }; | ||
260 | |||
261 | YAHOO.extendX(YAHOO.ext.BasicDialog, YAHOO.ext.util.Observable, { | ||
262 | shadowOffset: 3, | ||
263 | minHeight: 80, | ||
264 | minWidth: 200, | ||
265 | minButtonWidth: 75, | ||
266 | defaultButton: null, | ||
267 | buttonAlign: 'right', | ||
268 | /** | ||
269 | * Sets the dialog title. | ||
270 | * @param {String} text | ||
271 | * @return {YAHOO.ext.BasicDialog} this | ||
272 | */ | ||
273 | setTitle : function(text){ | ||
274 | this.header.update(text); | ||
275 | return this; | ||
276 | }, | ||
277 | |||
278 | closeClick : function(){ | ||
279 | this.hide(); | ||
280 | }, | ||
281 | |||
282 | /** | ||
283 | * Reinitializes the tabs component, clearing out old tabs and finding new ones. | ||
284 | * @return {YAHOO.ext.TabPanel} tabs The tabs component | ||
285 | */ | ||
286 | initTabs : function(){ | ||
287 | var tabs = this.getTabs(); | ||
288 | while(tabs.getTab(0)){ | ||
289 | tabs.removeTab(0); | ||
290 | } | ||
291 | var tabEls = YAHOO.util.Dom.getElementsByClassName('ydlg-tab', this.tabTag || 'div', this.el.dom); | ||
292 | if(tabEls.length > 0){ | ||
293 | for(var i = 0, len = tabEls.length; i < len; i++) { | ||
294 | var tabEl = tabEls[i]; | ||
295 | tabs.addTab(YAHOO.util.Dom.generateId(tabEl), tabEl.title); | ||
296 | tabEl.title = ''; | ||
297 | } | ||
298 | tabs.activate(0); | ||
299 | } | ||
300 | return tabs; | ||
301 | }, | ||
302 | |||
303 | beforeResize : function(){ | ||
304 | this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40); | ||
305 | }, | ||
306 | |||
307 | onResize : function(){ | ||
308 | this.refreshSize(); | ||
309 | this.syncBodyHeight(); | ||
310 | this.adjustAssets(); | ||
311 | this.fireEvent('resize', this, this.size.width, this.size.height); | ||
312 | }, | ||
313 | |||
314 | onKeyDown : function(e){ | ||
315 | if(this.isVisible()){ | ||
316 | this.fireEvent('keydown', this, e); | ||
317 | } | ||
318 | }, | ||
319 | |||
320 | /** | ||
321 | * Resizes the dialog. | ||
322 | * @param {Number} width | ||
323 | * @param {Number} height | ||
324 | * @return {YAHOO.ext.BasicDialog} this | ||
325 | */ | ||
326 | resizeTo : function(width, height){ | ||
327 | this.el.setSize(width, height); | ||
328 | this.size = {width: width, height: height}; | ||
329 | this.syncBodyHeight(); | ||
330 | if(this.fixedcenter){ | ||
331 | this.center(); | ||
332 | } | ||
333 | if(this.isVisible()){ | ||
334 | this.constrainXY(); | ||
335 | this.adjustAssets(); | ||
336 | } | ||
337 | this.fireEvent('resize', this, width, height); | ||
338 | return this; | ||
339 | }, | ||
340 | |||
341 | |||
342 | /** | ||
343 | * Resizes the dialog to fit the specified content size. | ||
344 | * @param {Number} width | ||
345 | * @param {Number} height | ||
346 | * @return {YAHOO.ext.BasicDialog} this | ||
347 | */ | ||
348 | setContentSize : function(w, h){ | ||
349 | h += this.getHeaderFooterHeight() + this.body.getMargins('tb'); | ||
350 | w += this.body.getMargins('lr') + this.bwrap.getMargins('lr') + this.centerBg.getPadding('lr'); | ||
351 | //if(!this.el.isBorderBox()){ | ||
352 | h += this.body.getPadding('tb') + this.bwrap.getBorderWidth('tb') + this.body.getBorderWidth('tb') + this.el.getBorderWidth('tb'); | ||
353 | w += this.body.getPadding('lr') + this.bwrap.getBorderWidth('lr') + this.body.getBorderWidth('lr') + this.bwrap.getPadding('lr') + this.el.getBorderWidth('lr'); | ||
354 | //} | ||
355 | if(this.tabs){ | ||
356 | h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins('tb') + this.tabs.bodyEl.getPadding('tb'); | ||
357 | w += this.tabs.bodyEl.getMargins('lr') + this.tabs.bodyEl.getPadding('lr'); | ||
358 | } | ||
359 | this.resizeTo(w, h); | ||
360 | return this; | ||
361 | }, | ||
362 | |||
363 | /** | ||
364 | * Adds a key listener for when this dialog is displayed | ||
365 | * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options: | ||
366 | * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)} | ||
367 | * @param {Function} fn The function to call | ||
368 | * @param {Object} scope (optional) The scope of the function | ||
369 | * @return {YAHOO.ext.BasicDialog} this | ||
370 | */ | ||
371 | addKeyListener : function(key, fn, scope){ | ||
372 | var keyCode, shift, ctrl, alt; | ||
373 | if(typeof key == 'object' && !(key instanceof Array)){ | ||
374 | keyCode = key['key']; | ||
375 | shift = key['shift']; | ||
376 | ctrl = key['ctrl']; | ||
377 | alt = key['alt']; | ||
378 | }else{ | ||
379 | keyCode = key; | ||
380 | } | ||
381 | var handler = function(dlg, e){ | ||
382 | if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){ | ||
383 | var k = e.getKey(); | ||
384 | if(keyCode instanceof Array){ | ||
385 | for(var i = 0, len = keyCode.length; i < len; i++){ | ||
386 | if(keyCode[i] == k){ | ||
387 | fn.call(scope || window, dlg, k, e); | ||
388 | return; | ||
389 | } | ||
390 | } | ||
391 | }else{ | ||
392 | if(k == keyCode){ | ||
393 | fn.call(scope || window, dlg, k, e); | ||
394 | } | ||
395 | } | ||
396 | } | ||
397 | }; | ||
398 | this.on('keydown', handler); | ||
399 | return this; | ||
400 | }, | ||
401 | |||
402 | /** | ||
403 | * Returns the TabPanel component (if autoTabs) | ||
404 | * @return {YAHOO.ext.TabPanel} | ||
405 | */ | ||
406 | getTabs : function(){ | ||
407 | if(!this.tabs){ | ||
408 | this.el.addClass('ydlg-auto-tabs'); | ||
409 | this.body.addClass(this.tabPosition == 'bottom' ? 'ytabs-bottom' : 'ytabs-top'); | ||
410 | this.tabs = new YAHOO.ext.TabPanel(this.body.dom, this.tabPosition == 'bottom'); | ||
411 | } | ||
412 | return this.tabs; | ||
413 | }, | ||
414 | |||
415 | /** | ||
416 | * Adds a button. | ||
417 | * @param {String/Object} config A string becomes the button text, an object is expected to be a valid YAHOO.ext.DomHelper element config | ||
418 | * @param {Function} handler The function called when the button is clicked | ||
419 | * @param {Object} scope (optional) The scope of the handler function | ||
420 | * @return {YAHOO.ext.Button} | ||
421 | */ | ||
422 | addButton : function(config, handler, scope){ | ||
423 | var dh = YAHOO.ext.DomHelper; | ||
424 | if(!this.footer){ | ||
425 | this.footer = dh.append(this.bwrap.dom, {tag: 'div', cls:'ydlg-ft'}, true); | ||
426 | } | ||
427 | if(!this.btnContainer){ | ||
428 | var tb = this.footer.createChild({ | ||
429 | tag:'div', | ||
430 | cls:'ydlg-btns ydlg-btns-'+this.buttonAlign, | ||
431 | html:'<table cellspacing="0"><tbody><tr></tr></tbody></table>' | ||
432 | }); | ||
433 | this.btnContainer = tb.dom.firstChild.firstChild.firstChild; | ||
434 | } | ||
435 | var bconfig = { | ||
436 | handler: handler, | ||
437 | scope: scope, | ||
438 | minWidth: this.minButtonWidth | ||
439 | }; | ||
440 | if(typeof config == 'string'){ | ||
441 | bconfig.text = config; | ||
442 | }else{ | ||
443 | bconfig.dhconfig = config; | ||
444 | } | ||
445 | var btn = new YAHOO.ext.Button( | ||
446 | this.btnContainer.appendChild(document.createElement('td')), | ||
447 | bconfig | ||
448 | ); | ||
449 | this.syncBodyHeight(); | ||
450 | if(!this.buttons){ | ||
451 | this.buttons = []; | ||
452 | } | ||
453 | this.buttons.push(btn); | ||
454 | return btn; | ||
455 | }, | ||
456 | |||
457 | /** | ||
458 | * Sets the default button to be focused when the dialog is displayed | ||
459 | * @param {YAHOO.ext.BasicDialog.Button} btn The button object returned by addButton | ||
460 | * @return {YAHOO.ext.BasicDialog} this | ||
461 | */ | ||
462 | setDefaultButton : function(btn){ | ||
463 | this.defaultButton = btn; | ||
464 | return this; | ||
465 | }, | ||
466 | |||
467 | getHeaderFooterHeight : function(safe){ | ||
468 | var height = 0; | ||
469 | if(this.header){ | ||
470 | height += this.header.getHeight(); | ||
471 | } | ||
472 | if(this.footer){ | ||
473 | var fm = this.footer.getMargins(); | ||
474 | height += (this.footer.getHeight()+fm.top+fm.bottom); | ||
475 | } | ||
476 | height += this.bwrap.getPadding('tb')+this.bwrap.getBorderWidth('tb'); | ||
477 | height += this.centerBg.getPadding('tb'); | ||
478 | return height; | ||
479 | }, | ||
480 | |||
481 | syncBodyHeight : function(){ | ||
482 | var height = this.size.height - this.getHeaderFooterHeight(false); | ||
483 | this.body.setHeight(height-this.body.getMargins('tb')); | ||
484 | if(this.tabs){ | ||
485 | this.tabs.syncHeight(); | ||
486 | } | ||
487 | var hh = this.header.getHeight(); | ||
488 | var h = this.size.height-hh; | ||
489 | this.centerBg.setHeight(h); | ||
490 | this.bwrap.setLeftTop(this.centerBg.getPadding('l'), hh+this.centerBg.getPadding('t')); | ||
491 | this.bwrap.setHeight(h-this.centerBg.getPadding('tb')); | ||
492 | this.bwrap.setWidth(this.el.getWidth(true)-this.centerBg.getPadding('lr')); | ||
493 | this.body.setWidth(this.bwrap.getWidth(true)); | ||
494 | }, | ||
495 | |||
496 | /** | ||
497 | * Restores the previous state of the dialog if YAHOO.ext.state is configured | ||
498 | * @return {YAHOO.ext.BasicDialog} this | ||
499 | */ | ||
500 | restoreState : function(){ | ||
501 | var box = YAHOO.ext.state.Manager.get(this.stateId || (this.el.id + '-state')); | ||
502 | if(box && box.width){ | ||
503 | this.xy = [box.x, box.y]; | ||
504 | this.resizeTo(box.width, box.height); | ||
505 | } | ||
506 | return this; | ||
507 | }, | ||
508 | |||
509 | beforeShow : function(){ | ||
510 | if(this.fixedcenter) { | ||
511 | this.xy = this.el.getCenterXY(true); | ||
512 | } | ||
513 | if(this.modal){ | ||
514 | YAHOO.util.Dom.addClass(document.body, 'masked'); | ||
515 | this.mask.setSize(YAHOO.util.Dom.getDocumentWidth(), YAHOO.util.Dom.getDocumentHeight()); | ||
516 | this.mask.show(); | ||
517 | } | ||
518 | this.constrainXY(); | ||
519 | }, | ||
520 | |||
521 | animShow : function(){ | ||
522 | var b = getEl(this.animateTarget, true).getBox(); | ||
523 | this.proxy.setSize(b.width, b.height); | ||
524 | this.proxy.setLocation(b.x, b.y); | ||
525 | this.proxy.show(); | ||
526 | this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height, | ||
527 | true, .35, this.showEl.createDelegate(this)); | ||
528 | }, | ||
529 | |||
530 | /** | ||
531 | * Shows the dialog. | ||
532 | * @param {String/HTMLElement/YAHOO.ext.Element} animateTarget (optional) Reset the animation target | ||
533 | * @return {YAHOO.ext.BasicDialog} this | ||
534 | */ | ||
535 | show : function(animateTarget){ | ||
536 | if (this.fireEvent('beforeshow', this) === false){ | ||
537 | return; | ||
538 | } | ||
539 | if(this.syncHeightBeforeShow){ | ||
540 | this.syncBodyHeight(); | ||
541 | } | ||
542 | this.animateTarget = animateTarget || this.animateTarget; | ||
543 | if(!this.el.isVisible()){ | ||
544 | this.beforeShow(); | ||
545 | if(this.animateTarget){ | ||
546 | this.animShow(); | ||
547 | }else{ | ||
548 | this.showEl(); | ||
549 | } | ||
550 | } | ||
551 | return this; | ||
552 | }, | ||
553 | |||
554 | showEl : function(){ | ||
555 | this.proxy.hide(); | ||
556 | this.el.setXY(this.xy); | ||
557 | this.el.show(); | ||
558 | this.adjustAssets(true); | ||
559 | this.toFront(); | ||
560 | this.focus(); | ||
561 | this.fireEvent('show', this); | ||
562 | }, | ||
563 | |||
564 | focus : function(){ | ||
565 | if(this.defaultButton){ | ||
566 | this.defaultButton.focus(); | ||
567 | }else{ | ||
568 | this.focusEl.focus(); | ||
569 | } | ||
570 | }, | ||
571 | |||
572 | constrainXY : function(){ | ||
573 | if(this.constraintoviewport !== false){ | ||
574 | if(!this.viewSize){ | ||
575 | if(this.container){ | ||
576 | var s = this.container.getSize(); | ||
577 | this.viewSize = [s.width, s.height]; | ||
578 | }else{ | ||
579 | this.viewSize = [YAHOO.util.Dom.getViewportWidth(), | ||
580 | YAHOO.util.Dom.getViewportHeight()]; | ||
581 | } | ||
582 | } | ||
583 | var x = this.xy[0], y = this.xy[1]; | ||
584 | var w = this.size.width, h = this.size.height; | ||
585 | var vw = this.viewSize[0], vh = this.viewSize[1]; | ||
586 | // only move it if it needs it | ||
587 | var moved = false; | ||
588 | // first validate right/bottom | ||
589 | if(x + w > vw){ | ||
590 | x = vw - w; | ||
591 | moved = true; | ||
592 | } | ||
593 | if(y + h > vh){ | ||
594 | y = vh - h; | ||
595 | moved = true; | ||
596 | } | ||
597 | // then make sure top/left isn't negative | ||
598 | if(x < 0){ | ||
599 | x = 0; | ||
600 | moved = true; | ||
601 | } | ||
602 | if(y < 0){ | ||
603 | y = 0; | ||
604 | moved = true; | ||
605 | } | ||
606 | if(moved){ | ||
607 | // cache xy | ||
608 | this.xy = [x, y]; | ||
609 | if(this.isVisible()){ | ||
610 | this.el.setLocation(x, y); | ||
611 | this.adjustAssets(); | ||
612 | } | ||
613 | } | ||
614 | } | ||
615 | }, | ||
616 | |||
617 | onDrag : function(){ | ||
618 | if(!this.proxyDrag){ | ||
619 | this.xy = this.el.getXY(); | ||
620 | this.adjustAssets(); | ||
621 | } | ||
622 | }, | ||
623 | |||
624 | adjustAssets : function(doShow){ | ||
625 | var x = this.xy[0], y = this.xy[1]; | ||
626 | var w = this.size.width, h = this.size.height; | ||
627 | if(doShow === true){ | ||
628 | if(this.shadow){ | ||
629 | this.shadow.show(); | ||
630 | } | ||
631 | if(this.shim){ | ||
632 | this.shim.show(); | ||
633 | } | ||
634 | } | ||
635 | if(this.shadow && this.shadow.isVisible()){ | ||
636 | this.shadow.setBounds(x + this.shadowOffset, y + this.shadowOffset, w, h); | ||
637 | } | ||
638 | if(this.shim && this.shim.isVisible()){ | ||
639 | this.shim.setBounds(x, y, w, h); | ||
640 | } | ||
641 | }, | ||
642 | |||
643 | |||
644 | adjustViewport : function(w, h){ | ||
645 | if(!w || !h){ | ||
646 | w = YAHOO.util.Dom.getViewportWidth(); | ||
647 | h = YAHOO.util.Dom.getViewportHeight(); | ||
648 | } | ||
649 | // cache the size | ||
650 | this.viewSize = [w, h]; | ||
651 | if(this.modal && this.mask.isVisible()){ | ||
652 | this.mask.setSize(w, h); // first make sure the mask isn't causing overflow | ||
653 | this.mask.setSize(YAHOO.util.Dom.getDocumentWidth(), YAHOO.util.Dom.getDocumentHeight()); | ||
654 | } | ||
655 | if(this.isVisible()){ | ||
656 | this.constrainXY(); | ||
657 | } | ||
658 | }, | ||
659 | |||
660 | /** | ||
661 | * Destroys this dialog | ||
662 | * @param {Boolean} removeEl (optional) true to remove the element from the DOM | ||
663 | */ | ||
664 | destroy : function(removeEl){ | ||
665 | YAHOO.ext.EventManager.removeResizeListener(this.adjustViewport, this); | ||
666 | if(this.tabs){ | ||
667 | this.tabs.destroy(removeEl); | ||
668 | } | ||
669 | if(this.shim){ | ||
670 | this.shim.remove(); | ||
671 | } | ||
672 | if(this.shadow){ | ||
673 | this.shadow.remove(); | ||
674 | } | ||
675 | if(this.proxy){ | ||
676 | this.proxy.remove(); | ||
677 | } | ||
678 | if(this.resizer){ | ||
679 | this.resizer.destroy(); | ||
680 | } | ||
681 | if(this.close){ | ||
682 | this.close.removeAllListeners(); | ||
683 | this.close.remove(); | ||
684 | } | ||
685 | if(this.mask){ | ||
686 | this.mask.remove(); | ||
687 | } | ||
688 | if(this.dd){ | ||
689 | this.dd.unreg(); | ||
690 | } | ||
691 | if(this.buttons){ | ||
692 | for(var i = 0, len = this.buttons.length; i < len; i++){ | ||
693 | this.buttons[i].destroy(); | ||
694 | } | ||
695 | } | ||
696 | this.el.removeAllListeners(); | ||
697 | if(removeEl === true){ | ||
698 | this.el.update(''); | ||
699 | this.el.remove(); | ||
700 | } | ||
701 | YAHOO.ext.DialogManager.unregister(this); | ||
702 | }, | ||
703 | |||
704 | startMove : function(){ | ||
705 | if(this.proxyDrag){ | ||
706 | this.proxy.show(); | ||
707 | } | ||
708 | if(this.constraintoviewport !== false){ | ||
709 | this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset}); | ||
710 | } | ||
711 | }, | ||
712 | |||
713 | endMove : function(){ | ||
714 | if(!this.proxyDrag){ | ||
715 | YAHOO.util.DD.prototype.endDrag.apply(this.dd, arguments); | ||
716 | }else{ | ||
717 | YAHOO.util.DDProxy.prototype.endDrag.apply(this.dd, arguments); | ||
718 | this.proxy.hide(); | ||
719 | } | ||
720 | this.refreshSize(); | ||
721 | this.adjustAssets(); | ||
722 | this.fireEvent('move', this, this.xy[0], this.xy[1]) | ||
723 | }, | ||
724 | |||
725 | /** | ||
726 | * Brings this dialog to the front of any other visible dialogs | ||
727 | * @return {YAHOO.ext.BasicDialog} this | ||
728 | */ | ||
729 | toFront : function(){ | ||
730 | YAHOO.ext.DialogManager.bringToFront(this); | ||
731 | return this; | ||
732 | }, | ||
733 | |||
734 | /** | ||
735 | * Sends this dialog to the back (under) of any other visible dialogs | ||
736 | * @return {YAHOO.ext.BasicDialog} this | ||
737 | */ | ||
738 | toBack : function(){ | ||
739 | YAHOO.ext.DialogManager.sendToBack(this); | ||
740 | return this; | ||
741 | }, | ||
742 | |||
743 | /** | ||
744 | * Centers this dialog | ||
745 | * @return {YAHOO.ext.BasicDialog} this | ||
746 | */ | ||
747 | center : function(){ | ||
748 | var xy = this.el.getCenterXY(true); | ||
749 | this.moveTo(xy[0], xy[1]); | ||
750 | return this; | ||
751 | }, | ||
752 | |||
753 | /** | ||
754 | * Moves the dialog to the specified point | ||
755 | * @param {Number} x | ||
756 | * @param {Number} y | ||
757 | * @return {YAHOO.ext.BasicDialog} this | ||
758 | */ | ||
759 | moveTo : function(x, y){ | ||
760 | this.xy = [x,y]; | ||
761 | if(this.isVisible()){ | ||
762 | this.el.setXY(this.xy); | ||
763 | this.adjustAssets(); | ||
764 | } | ||
765 | return this; | ||
766 | }, | ||
767 | |||
768 | /** | ||
769 | * Returns true if the dialog is visible | ||
770 | * @return {Boolean} | ||
771 | */ | ||
772 | isVisible : function(){ | ||
773 | return this.el.isVisible(); | ||
774 | }, | ||
775 | |||
776 | animHide : function(callback){ | ||
777 | var b = getEl(this.animateTarget, true).getBox(); | ||
778 | this.proxy.show(); | ||
779 | this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height); | ||
780 | this.el.hide(); | ||
781 | this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35, | ||
782 | this.hideEl.createDelegate(this, [callback])); | ||
783 | }, | ||
784 | |||
785 | /** | ||
786 | * Hides the dialog. | ||
787 | * @param {Function} callback (optional) Function to call when the dialog is hidden | ||
788 | * @return {YAHOO.ext.BasicDialog} this | ||
789 | */ | ||
790 | hide : function(callback){ | ||
791 | if (this.fireEvent('beforehide', this) === false) | ||
792 | return; | ||
793 | |||
794 | if(this.shadow){ | ||
795 | this.shadow.hide(); | ||
796 | } | ||
797 | if(this.shim) { | ||
798 | this.shim.hide(); | ||
799 | } | ||
800 | if(this.animateTarget){ | ||
801 | this.animHide(callback); | ||
802 | }else{ | ||
803 | this.el.hide(); | ||
804 | this.hideEl(callback); | ||
805 | } | ||
806 | return this; | ||
807 | }, | ||
808 | |||
809 | hideEl : function(callback){ | ||
810 | this.proxy.hide(); | ||
811 | if(this.modal){ | ||
812 | this.mask.hide(); | ||
813 | YAHOO.util.Dom.removeClass(document.body, 'masked'); | ||
814 | } | ||
815 | this.fireEvent('hide', this); | ||
816 | if(typeof callback == 'function'){ | ||
817 | callback(); | ||
818 | } | ||
819 | }, | ||
820 | |||
821 | hideAction : function(){ | ||
822 | this.setLeft('-10000px'); | ||
823 | this.setTop('-10000px'); | ||
824 | this.setStyle('visibility', 'hidden'); | ||
825 | }, | ||
826 | |||
827 | refreshSize : function(){ | ||
828 | this.size = this.el.getSize(); | ||
829 | this.xy = this.el.getXY(); | ||
830 | YAHOO.ext.state.Manager.set(this.stateId || this.el.id + '-state', this.el.getBox()); | ||
831 | }, | ||
832 | |||
833 | setZIndex : function(index){ | ||
834 | if(this.modal){ | ||
835 | this.mask.setStyle('z-index', index); | ||
836 | } | ||
837 | if(this.shim){ | ||
838 | this.shim.setStyle('z-index', ++index); | ||
839 | } | ||
840 | if(this.shadow){ | ||
841 | this.shadow.setStyle('z-index', ++index); | ||
842 | } | ||
843 | this.el.setStyle('z-index', ++index); | ||
844 | if(this.proxy){ | ||
845 | this.proxy.setStyle('z-index', ++index); | ||
846 | } | ||
847 | if(this.resizer){ | ||
848 | this.resizer.proxy.setStyle('z-index', ++index); | ||
849 | } | ||
850 | |||
851 | this.lastZIndex = index; | ||
852 | }, | ||
853 | |||
854 | /** | ||
855 | * Returns the element for this dialog | ||
856 | * @return {YAHOO.ext.Element} | ||
857 | */ | ||
858 | getEl : function(){ | ||
859 | return this.el; | ||
860 | } | ||
861 | }); | ||
862 | |||
863 | /** | ||
864 | * @class YAHOO.ext.DialogManager | ||
865 | * Provides global access to BasicDialogs that have been created and | ||
866 | * support for z-indexing (layering) multiple open dialogs. | ||
867 | */ | ||
868 | YAHOO.ext.DialogManager = function(){ | ||
869 | var list = {}; | ||
870 | var accessList = []; | ||
871 | var front = null; | ||
872 | |||
873 | var sortDialogs = function(d1, d2){ | ||
874 | return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1; | ||
875 | }; | ||
876 | |||
877 | var orderDialogs = function(){ | ||
878 | accessList.sort(sortDialogs); | ||
879 | var seed = YAHOO.ext.DialogManager.zseed; | ||
880 | for(var i = 0, len = accessList.length; i < len; i++){ | ||
881 | if(accessList[i]){ | ||
882 | accessList[i].setZIndex(seed + (i*10)); | ||
883 | } | ||
884 | } | ||
885 | }; | ||
886 | |||
887 | return { | ||
888 | /** | ||
889 | * The starting z-index for BasicDialogs - defaults to 10000 | ||
890 | * @type Number | ||
891 | */ | ||
892 | zseed : 10000, | ||
893 | |||
894 | |||
895 | register : function(dlg){ | ||
896 | list[dlg.id] = dlg; | ||
897 | accessList.push(dlg); | ||
898 | }, | ||
899 | |||
900 | unregister : function(dlg){ | ||
901 | delete list[dlg.id]; | ||
902 | if(!accessList.indexOf){ | ||
903 | for(var i = 0, len = accessList.length; i < len; i++){ | ||
904 | accessList.splice(i, 1); | ||
905 | return; | ||
906 | } | ||
907 | }else{ | ||
908 | var i = accessList.indexOf(dlg); | ||
909 | if(i != -1){ | ||
910 | accessList.splice(i, 1); | ||
911 | } | ||
912 | } | ||
913 | }, | ||
914 | |||
915 | /** | ||
916 | * Gets a registered dialog by id | ||
917 | * @param {String/Object} id The id of the dialog or a dialog | ||
918 | * @return {YAHOO.ext.BasicDialog} | ||
919 | */ | ||
920 | get : function(id){ | ||
921 | return typeof id == 'object' ? id : list[id]; | ||
922 | }, | ||
923 | |||
924 | /** | ||
925 | * Brings the specified dialog to the front | ||
926 | * @param {String/Object} dlg The id of the dialog or a dialog | ||
927 | * @return {YAHOO.ext.BasicDialog} | ||
928 | */ | ||
929 | bringToFront : function(dlg){ | ||
930 | dlg = this.get(dlg); | ||
931 | if(dlg != front){ | ||
932 | front = dlg; | ||
933 | dlg._lastAccess = new Date().getTime(); | ||
934 | orderDialogs(); | ||
935 | } | ||
936 | return dlg; | ||
937 | }, | ||
938 | |||
939 | /** | ||
940 | * Sends the specified dialog to the back | ||
941 | * @param {String/Object} dlg The id of the dialog or a dialog | ||
942 | * @return {YAHOO.ext.BasicDialog} | ||
943 | */ | ||
944 | sendToBack : function(dlg){ | ||
945 | dlg = this.get(dlg); | ||
946 | dlg._lastAccess = -(new Date().getTime()); | ||
947 | orderDialogs(); | ||
948 | return dlg; | ||
949 | } | ||
950 | }; | ||
951 | }(); | ||
952 | |||
953 | /** | ||
954 | * @class YAHOO.ext.LayoutDialog | ||
955 | * @extends YAHOO.ext.BasicDialog | ||
956 | * Dialog which provides adjustments for working with a layout in a Dialog. | ||
957 | * Add your neccessary layout config options to the dialogs config.<br> | ||
958 | * Example Usage (including a nested layout): | ||
959 | * <pre><code> if(!dialog){ | ||
960 | dialog = new YAHOO.ext.LayoutDialog("download-dlg", { | ||
961 | modal: true, | ||
962 | width:600, | ||
963 | height:450, | ||
964 | shadow:true, | ||
965 | minWidth:500, | ||
966 | minHeight:350, | ||
967 | autoTabs:true, | ||
968 | proxyDrag:true, | ||
969 | // layout config merges with the dialog config | ||
970 | center:{ | ||
971 | tabPosition: 'top', | ||
972 | alwaysShowTabs: true | ||
973 | } | ||
974 | }); | ||
975 | dialog.addKeyListener(27, dialog.hide, dialog); | ||
976 | dialog.setDefaultButton(dialog.addButton('Close', dialog.hide, dialog)); | ||
977 | dialog.addButton('Build It!', this.getDownload, this); | ||
978 | |||
979 | // we can even add nested layouts | ||
980 | var innerLayout = new YAHOO.ext.BorderLayout('dl-inner', { | ||
981 | east: { | ||
982 | initialSize: 200, | ||
983 | autoScroll:true, | ||
984 | split:true | ||
985 | }, | ||
986 | center: { | ||
987 | autoScroll:true | ||
988 | } | ||
989 | }); | ||
990 | innerLayout.beginUpdate(); | ||
991 | innerLayout.add('east', new YAHOO.ext.ContentPanel('dl-details')); | ||
992 | innerLayout.add('center', new YAHOO.ext.ContentPanel('selection-panel')); | ||
993 | innerLayout.endUpdate(true); | ||
994 | |||
995 | // when doing updates to the top level layout in a dialog, you need to | ||
996 | // use dialog.beginUpdate()/endUpdate() instead of layout.beginUpdate()/endUpdate() | ||
997 | var layout = dialog.getLayout(); | ||
998 | dialog.beginUpdate(); | ||
999 | layout.add('center', new YAHOO.ext.ContentPanel('standard-panel', | ||
1000 | {title: 'Download the Source', fitToFrame:true})); | ||
1001 | layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout, | ||
1002 | {title: 'Build your own yui-ext.js'})); | ||
1003 | layout.getRegion('center').showPanel(sp); | ||
1004 | dialog.endUpdate();</code></pre> | ||
1005 | * @constructor | ||
1006 | * @param {String/HTMLElement/YAHOO.ext.Element} el The id of or container element | ||
1007 | * @param {Object} config configuration options | ||
1008 | */ | ||
1009 | YAHOO.ext.LayoutDialog = function(el, config){ | ||
1010 | config.autoTabs = false; | ||
1011 | YAHOO.ext.LayoutDialog.superclass.constructor.call(this, el, config); | ||
1012 | this.body.setStyle({overflow:'hidden', position:'relative'}); | ||
1013 | this.layout = new YAHOO.ext.BorderLayout(this.body.dom, config); | ||
1014 | this.layout.monitorWindowResize = false; | ||
1015 | this.el.addClass('ydlg-auto-layout'); | ||
1016 | // fix case when center region overwrites center function | ||
1017 | this.center = YAHOO.ext.BasicDialog.prototype.center; | ||
1018 | this.on('show', this.layout.layout, this.layout, true); | ||
1019 | }; | ||
1020 | YAHOO.extendX(YAHOO.ext.LayoutDialog, YAHOO.ext.BasicDialog, { | ||
1021 | /** | ||
1022 | * Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout. | ||
1023 | * @deprecated | ||
1024 | */ | ||
1025 | endUpdate : function(){ | ||
1026 | this.layout.endUpdate(); | ||
1027 | }, | ||
1028 | /** | ||
1029 | * Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout. | ||
1030 | * @deprecated | ||
1031 | */ | ||
1032 | beginUpdate : function(){ | ||
1033 | this.layout.beginUpdate(); | ||
1034 | }, | ||
1035 | /** | ||
1036 | * Get the BorderLayout for this dialog | ||
1037 | * @return {YAHOO.ext.BorderLayout} | ||
1038 | */ | ||
1039 | getLayout : function(){ | ||
1040 | return this.layout; | ||
1041 | }, | ||
1042 | syncBodyHeight : function(){ | ||
1043 | YAHOO.ext.LayoutDialog.superclass.syncBodyHeight.call(this); | ||
1044 | if(this.layout)this.layout.layout(); | ||
1045 | } | ||
1046 | }); | ||