Diffstat (limited to 'frontend/beta/js/YUI-extensions/widgets/TabPanel.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/widgets/TabPanel.js | 756 |
1 files changed, 756 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/widgets/TabPanel.js b/frontend/beta/js/YUI-extensions/widgets/TabPanel.js new file mode 100644 index 0000000..25fd142 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/widgets/TabPanel.js | |||
@@ -0,0 +1,756 @@ | |||
1 | /** | ||
2 | * @class YAHOO.ext.TabPanel | ||
3 | * @extends YAHOO.ext.util.Observable | ||
4 | * Creates a lightweight TabPanel component using Yahoo! UI. | ||
5 | * <br><br> | ||
6 | * Usage: | ||
7 | * <pre><code> | ||
8 | <font color="#008000">// basic tabs 1, built from existing content</font> | ||
9 | var tabs = new YAHOO.ext.TabPanel('tabs1'); | ||
10 | tabs.addTab('script', "View Script"); | ||
11 | tabs.addTab('markup', "View Markup"); | ||
12 | tabs.activate('script'); | ||
13 | |||
14 | <font color="#008000">// more advanced tabs, built from javascript</font> | ||
15 | var jtabs = new YAHOO.ext.TabPanel('jtabs'); | ||
16 | jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction."); | ||
17 | |||
18 | <font color="#008000">// set up the UpdateManager</font> | ||
19 | var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1"); | ||
20 | var updater = tab2.getUpdateManager(); | ||
21 | updater.setDefaultUrl('ajax1.htm'); | ||
22 | tab2.onActivate.subscribe(updater.refresh, updater, true); | ||
23 | |||
24 | <font color="#008000">// Use setUrl for Ajax loading</font> | ||
25 | var tab3 = jtabs.addTab('jtabs-3', "Ajax Tab 2"); | ||
26 | tab3.setUrl('ajax2.htm', null, true); | ||
27 | |||
28 | <font color="#008000">// Disabled tab</font> | ||
29 | var tab4 = jtabs.addTab('tabs1-5', "Disabled Tab", "Can't see me cause I'm disabled"); | ||
30 | tab4.disable(); | ||
31 | |||
32 | jtabs.activate('jtabs-1'); | ||
33 | } | ||
34 | * </code></pre> | ||
35 | * @requires YAHOO.ext.Element | ||
36 | * @requires YAHOO.ext.UpdateManager | ||
37 | * @requires YAHOO.util.Dom | ||
38 | * @requires YAHOO.util.Event | ||
39 | * @requires YAHOO.util.CustomEvent | ||
40 | * @requires YAHOO.util.Connect (optional) | ||
41 | * @constructor | ||
42 | * Create new TabPanel. | ||
43 | * @param {String/HTMLElement/Element} container The id, DOM element or YAHOO.ext.Element container where this TabPanel is to be rendered. | ||
44 | * @param {Boolean} config Config object to set any properties for this TabPanel or true to render the tabs on the bottom. | ||
45 | */ | ||
46 | YAHOO.ext.TabPanel = function(container, config){ | ||
47 | /** | ||
48 | * The container element for this TabPanel. | ||
49 | * @type YAHOO.ext.Element | ||
50 | */ | ||
51 | this.el = getEl(container, true); | ||
52 | /** The position of the tabs. Can be 'top' or 'bottom' @type String */ | ||
53 | this.tabPosition = 'top'; | ||
54 | this.currentTabWidth = 0; | ||
55 | /** The minimum width of a tab (ignored if resizeTabs is not true). @type Number */ | ||
56 | this.minTabWidth = 40; | ||
57 | /** The maximum width of a tab (ignored if resizeTabs is not true). @type Number */ | ||
58 | this.maxTabWidth = 250; | ||
59 | /** The preferred (default) width of a tab (ignored if resizeTabs is not true). @type Number */ | ||
60 | this.preferredTabWidth = 175; | ||
61 | /** Set this to true to enable dynamic tab resizing. @type Boolean */ | ||
62 | this.resizeTabs = false; | ||
63 | /** Set this to true to turn on window resizing monitoring (ignored if resizeTabs is not true). @type Boolean */ | ||
64 | this.monitorResize = true; | ||
65 | |||
66 | if(config){ | ||
67 | if(typeof config == 'boolean'){ | ||
68 | this.tabPosition = config ? 'bottom' : 'top'; | ||
69 | }else{ | ||
70 | YAHOO.ext.util.Config.apply(this, config); | ||
71 | } | ||
72 | } | ||
73 | if(this.tabPosition == 'bottom'){ | ||
74 | this.bodyEl = getEl(this.createBody(this.el.dom)); | ||
75 | this.el.addClass('ytabs-bottom'); | ||
76 | } | ||
77 | this.stripWrap = getEl(this.createStrip(this.el.dom), true); | ||
78 | this.stripEl = getEl(this.createStripList(this.stripWrap.dom), true); | ||
79 | this.stripBody = getEl(this.stripWrap.dom.firstChild.firstChild, true); | ||
80 | if(YAHOO.ext.util.Browser.isIE){ | ||
81 | YAHOO.util.Dom.setStyle(this.stripWrap.dom.firstChild, 'overflow-x', 'hidden'); | ||
82 | } | ||
83 | if(this.tabPosition != 'bottom'){ | ||
84 | /** The body element that contains TabPaneItem bodies. | ||
85 | * @type YAHOO.ext.Element | ||
86 | */ | ||
87 | this.bodyEl = getEl(this.createBody(this.el.dom)); | ||
88 | this.el.addClass('ytabs-top'); | ||
89 | } | ||
90 | this.items = []; | ||
91 | |||
92 | this.bodyEl.setStyle('position', 'relative'); | ||
93 | |||
94 | // add indexOf to array if it isn't present | ||
95 | if(!this.items.indexOf){ | ||
96 | this.items.indexOf = function(o){ | ||
97 | for(var i = 0, len = this.length; i < len; i++){ | ||
98 | if(this[i] == o) return i; | ||
99 | } | ||
100 | return -1; | ||
101 | } | ||
102 | } | ||
103 | this.active = null; | ||
104 | this.onTabChange = new YAHOO.util.CustomEvent('TabItem.onTabChange'); | ||
105 | this.activateDelegate = this.activate.createDelegate(this); | ||
106 | |||
107 | this.events = { | ||
108 | /** | ||
109 | * @event tabchange | ||
110 | * Fires when the active tab changes | ||
111 | * @param {YAHOO.ext.TabPanel} this | ||
112 | * @param {YAHOO.ext.TabPanelItem} activePanel The new active tab | ||
113 | */ | ||
114 | 'tabchange': this.onTabChange, | ||
115 | /** | ||
116 | * @event beforetabchange | ||
117 | * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change | ||
118 | * @param {YAHOO.ext.TabPanel} this | ||
119 | * @param {Object} e Set cancel to true on this object to cancel the tab change | ||
120 | * @param {YAHOO.ext.TabPanelItem} tab The tab being changed to | ||
121 | */ | ||
122 | 'beforetabchange' : new YAHOO.util.CustomEvent('beforechange') | ||
123 | }; | ||
124 | |||
125 | YAHOO.ext.EventManager.onWindowResize(this.onResize, this, true); | ||
126 | this.cpad = this.el.getPadding('lr'); | ||
127 | this.hiddenCount = 0; | ||
128 | } | ||
129 | |||
130 | YAHOO.ext.TabPanel.prototype = { | ||
131 | fireEvent : YAHOO.ext.util.Observable.prototype.fireEvent, | ||
132 | on : YAHOO.ext.util.Observable.prototype.on, | ||
133 | addListener : YAHOO.ext.util.Observable.prototype.addListener, | ||
134 | delayedListener : YAHOO.ext.util.Observable.prototype.delayedListener, | ||
135 | removeListener : YAHOO.ext.util.Observable.prototype.removeListener, | ||
136 | purgeListeners : YAHOO.ext.util.Observable.prototype.purgeListeners, | ||
137 | /** | ||
138 | * Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one. | ||
139 | * @param {String} id The id of the div to use <b>or create</b> | ||
140 | * @param {String} text The text for the tab | ||
141 | * @param {<i>String</i>} content (optional) Content to put in the TabPanelItem body | ||
142 | * @param {<i>Boolean</i>} closable (optional) True to create a close icon on the tab | ||
143 | * @return {YAHOO.ext.TabPanelItem} The created TabPanelItem | ||
144 | */ | ||
145 | addTab : function(id, text, content, closable){ | ||
146 | var item = new YAHOO.ext.TabPanelItem(this, id, text, closable); | ||
147 | this.addTabItem(item); | ||
148 | if(content){ | ||
149 | item.setContent(content); | ||
150 | } | ||
151 | return item; | ||
152 | }, | ||
153 | |||
154 | /** | ||
155 | * Returns the TabPanelItem with the specified id/index | ||
156 | * @param {String/Number} id The id or index of the TabPanelItem to fetch. | ||
157 | * @return {YAHOO.ext.TabPanelItem} | ||
158 | */ | ||
159 | getTab : function(id){ | ||
160 | return this.items[id]; | ||
161 | }, | ||
162 | |||
163 | /** | ||
164 | * Hides the TabPanelItem with the specified id/index | ||
165 | * @param {String/Number} id The id or index of the TabPanelItem to hide. | ||
166 | */ | ||
167 | hideTab : function(id){ | ||
168 | var t = this.items[id]; | ||
169 | if(!t.isHidden()){ | ||
170 | t.setHidden(true); | ||
171 | this.hiddenCount++; | ||
172 | this.autoSizeTabs(); | ||
173 | } | ||
174 | }, | ||
175 | |||
176 | /** | ||
177 | * "Unhides" the TabPanelItem with the specified id/index | ||
178 | * @param {String/Number} id The id or index of the TabPanelItem to unhide. | ||
179 | */ | ||
180 | unhideTab : function(id){ | ||
181 | var t = this.items[id]; | ||
182 | if(t.isHidden()){ | ||
183 | t.setHidden(false); | ||
184 | this.hiddenCount--; | ||
185 | this.autoSizeTabs(); | ||
186 | } | ||
187 | }, | ||
188 | |||
189 | /** | ||
190 | * Add an existing TabPanelItem. | ||
191 | * @param {YAHOO.ext.TabPanelItem} item The TabPanelItem to add | ||
192 | */ | ||
193 | addTabItem : function(item){ | ||
194 | this.items[item.id] = item; | ||
195 | this.items.push(item); | ||
196 | if(this.resizeTabs){ | ||
197 | item.setWidth(this.currentTabWidth || this.preferredTabWidth) | ||
198 | this.autoSizeTabs(); | ||
199 | }else{ | ||
200 | item.autoSize(); | ||
201 | } | ||
202 | }, | ||
203 | |||
204 | /** | ||
205 | * Remove a TabPanelItem. | ||
206 | * @param {String/Number} id The id or index of the TabPanelItem to remove. | ||
207 | */ | ||
208 | removeTab : function(id){ | ||
209 | var items = this.items; | ||
210 | var tab = items[id]; | ||
211 | if(!tab) return; | ||
212 | var index = items.indexOf(tab); | ||
213 | if(this.active == tab && items.length > 1){ | ||
214 | var newTab = this.getNextAvailable(index); | ||
215 | if(newTab)newTab.activate(); | ||
216 | } | ||
217 | this.stripEl.dom.removeChild(tab.pnode.dom); | ||
218 | if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error | ||
219 | this.bodyEl.dom.removeChild(tab.bodyEl.dom); | ||
220 | } | ||
221 | items.splice(index, 1); | ||
222 | delete this.items[tab.id]; | ||
223 | tab.fireEvent('close', tab); | ||
224 | tab.purgeListeners(); | ||
225 | this.autoSizeTabs(); | ||
226 | }, | ||
227 | |||
228 | getNextAvailable : function(start){ | ||
229 | var items = this.items; | ||
230 | var index = start; | ||
231 | // look for a next tab that will slide over to | ||
232 | // replace the one being removed | ||
233 | while(index < items.length){ | ||
234 | var item = items[++index]; | ||
235 | if(item && !item.isHidden()){ | ||
236 | return item; | ||
237 | } | ||
238 | } | ||
239 | // if one isn't found select the previous tab (on the left) | ||
240 | var index = start; | ||
241 | while(index >= 0){ | ||
242 | var item = items[--index]; | ||
243 | if(item && !item.isHidden()){ | ||
244 | return item; | ||
245 | } | ||
246 | } | ||
247 | return null; | ||
248 | }, | ||
249 | |||
250 | /** | ||
251 | * Disable a TabPanelItem. <b>It cannot be the active tab, if it is this call is ignored.</b>. | ||
252 | * @param {String/Number} id The id or index of the TabPanelItem to disable. | ||
253 | */ | ||
254 | disableTab : function(id){ | ||
255 | var tab = this.items[id]; | ||
256 | if(tab && this.active != tab){ | ||
257 | tab.disable(); | ||
258 | } | ||
259 | }, | ||
260 | |||
261 | /** | ||
262 | * Enable a TabPanelItem that is disabled. | ||
263 | * @param {String/Number} id The id or index of the TabPanelItem to enable. | ||
264 | */ | ||
265 | enableTab : function(id){ | ||
266 | var tab = this.items[id]; | ||
267 | tab.enable(); | ||
268 | }, | ||
269 | |||
270 | /** | ||
271 | * Activate a TabPanelItem. The currently active will be deactivated. | ||
272 | * @param {String/Number} id The id or index of the TabPanelItem to activate. | ||
273 | */ | ||
274 | activate : function(id){ | ||
275 | var tab = this.items[id]; | ||
276 | if(tab == this.active){ | ||
277 | return tab; | ||
278 | } | ||
279 | var e = {}; | ||
280 | this.fireEvent('beforetabchange', this, e, tab); | ||
281 | if(e.cancel !== true && !tab.disabled){ | ||
282 | if(this.active){ | ||
283 | this.active.hide(); | ||
284 | } | ||
285 | this.active = this.items[id]; | ||
286 | this.active.show(); | ||
287 | this.onTabChange.fireDirect(this, this.active); | ||
288 | } | ||
289 | return tab; | ||
290 | }, | ||
291 | |||
292 | /** | ||
293 | * Get the active TabPanelItem | ||
294 | * @return {YAHOO.ext.TabPanelItem} The active TabPanelItem or null if none are active. | ||
295 | */ | ||
296 | getActiveTab : function(){ | ||
297 | return this.active; | ||
298 | }, | ||
299 | |||
300 | /** | ||
301 | * Updates the tab body element to fit the height of the container element | ||
302 | * for overflow scrolling | ||
303 | * @param {Number} targetHeight (optional) Override the starting height from the elements height | ||
304 | */ | ||
305 | syncHeight : function(targetHeight){ | ||
306 | var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth('tb')-this.el.getPadding('tb'); | ||
307 | var bm = this.bodyEl.getMargins(); | ||
308 | var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom); | ||
309 | this.bodyEl.setHeight(newHeight); | ||
310 | return newHeight; | ||
311 | }, | ||
312 | |||
313 | onResize : function(){ | ||
314 | if(this.monitorResize){ | ||
315 | this.autoSizeTabs(); | ||
316 | } | ||
317 | }, | ||
318 | |||
319 | /** | ||
320 | * Disables tab resizing while tabs are being added (if resizeTabs is false this does nothing) | ||
321 | */ | ||
322 | beginUpdate : function(){ | ||
323 | this.updating = true; | ||
324 | }, | ||
325 | |||
326 | /** | ||
327 | * Stops an update and resizes the tabs (if resizeTabs is false this does nothing) | ||
328 | */ | ||
329 | endUpdate : function(){ | ||
330 | this.updating = false; | ||
331 | this.autoSizeTabs(); | ||
332 | }, | ||
333 | |||
334 | /** | ||
335 | * Manual call to resize the tabs (if resizeTabs is false this does nothing) | ||
336 | */ | ||
337 | autoSizeTabs : function(){ | ||
338 | var count = this.items.length; | ||
339 | var vcount = count - this.hiddenCount; | ||
340 | if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return; | ||
341 | var w = Math.max(this.el.getWidth() - this.cpad, 10); | ||
342 | var availWidth = Math.floor(w / vcount); | ||
343 | var b = this.stripBody; | ||
344 | if(b.getWidth() > w){ | ||
345 | var tabs = this.items; | ||
346 | this.setTabWidth(Math.max(availWidth, this.minTabWidth)); | ||
347 | if(availWidth < this.minTabWidth){ | ||
348 | /*if(!this.sleft){ // incomplete scrolling code | ||
349 | this.createScrollButtons(); | ||
350 | } | ||
351 | this.showScroll(); | ||
352 | this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/ | ||
353 | } | ||
354 | }else{ | ||
355 | if(this.currentTabWidth < this.preferredTabWidth){ | ||
356 | this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)); | ||
357 | } | ||
358 | } | ||
359 | }, | ||
360 | |||
361 | /** | ||
362 | * Returns the number of tabs | ||
363 | * @return {Number} | ||
364 | */ | ||
365 | getCount : function(){ | ||
366 | return this.items.length; | ||
367 | }, | ||
368 | |||
369 | /** | ||
370 | * Resizes all the tabs to the passed width | ||
371 | * @param {Number} The new width | ||
372 | */ | ||
373 | setTabWidth : function(width){ | ||
374 | this.currentTabWidth = width; | ||
375 | for(var i = 0, len = this.items.length; i < len; i++) { | ||
376 | if(!this.items[i].isHidden())this.items[i].setWidth(width); | ||
377 | } | ||
378 | }, | ||
379 | |||
380 | /** | ||
381 | * Destroys this TabPanel | ||
382 | * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well | ||
383 | */ | ||
384 | destroy : function(removeEl){ | ||
385 | YAHOO.ext.EventManager.removeResizeListener(this.onResize, this); | ||
386 | for(var i = 0, len = this.items.length; i < len; i++){ | ||
387 | this.items[i].purgeListeners(); | ||
388 | } | ||
389 | if(removeEl === true){ | ||
390 | this.el.update(''); | ||
391 | this.el.remove(); | ||
392 | } | ||
393 | } | ||
394 | }; | ||
395 | |||
396 | /** | ||
397 | * @class YAHOO.ext.TabPanelItem | ||
398 | * @extends YAHOO.ext.util.Observable | ||
399 | */ | ||
400 | YAHOO.ext.TabPanelItem = function(tabPanel, id, text, closable){ | ||
401 | /** | ||
402 | * The TabPanel this TabPanelItem belongs to | ||
403 | * @type YAHOO.ext.TabPanel | ||
404 | */ | ||
405 | this.tabPanel = tabPanel; | ||
406 | /** | ||
407 | * The id for this TabPanelItem | ||
408 | * @type String | ||
409 | */ | ||
410 | this.id = id; | ||
411 | /** @private */ | ||
412 | this.disabled = false; | ||
413 | /** @private */ | ||
414 | this.text = text; | ||
415 | /** @private */ | ||
416 | this.loaded = false; | ||
417 | this.closable = closable; | ||
418 | |||
419 | /** | ||
420 | * The body element for this TabPanelItem | ||
421 | * @type YAHOO.ext.Element | ||
422 | */ | ||
423 | this.bodyEl = getEl(tabPanel.createItemBody(tabPanel.bodyEl.dom, id)); | ||
424 | this.bodyEl.setVisibilityMode(YAHOO.ext.Element.VISIBILITY); | ||
425 | this.bodyEl.setStyle('display', 'block'); | ||
426 | this.bodyEl.setStyle('zoom', '1'); | ||
427 | this.hideAction(); | ||
428 | |||
429 | var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable); | ||
430 | /** @private */ | ||
431 | this.el = getEl(els.el, true); | ||
432 | this.inner = getEl(els.inner, true); | ||
433 | this.textEl = getEl(this.el.dom.firstChild.firstChild.firstChild, true); | ||
434 | this.pnode = getEl(els.el.parentNode, true); | ||
435 | this.el.mon('click', this.onTabClick, this, true); | ||
436 | /** @private */ | ||
437 | if(closable){ | ||
438 | var c = getEl(els.close, true); | ||
439 | c.dom.title = this.closeText; | ||
440 | c.addClassOnOver('close-over'); | ||
441 | c.mon('click', this.closeClick, this, true); | ||
442 | } | ||
443 | |||
444 | // these two are now private and deprecated | ||
445 | this.onActivate = new YAHOO.util.CustomEvent('TabItem.onActivate'); | ||
446 | this.onDeactivate = new YAHOO.util.CustomEvent('TabItem.onDeactivate'); | ||
447 | |||
448 | this.events = { | ||
449 | /** | ||
450 | * @event activate | ||
451 | * Fires when this tab becomes the active tab | ||
452 | * @param {YAHOO.ext.TabPanel} tabPanel | ||
453 | * @param {YAHOO.ext.TabPanelItem} this | ||
454 | */ | ||
455 | 'activate': this.onActivate, | ||
456 | /** | ||
457 | * @event beforeclose | ||
458 | * Fires before this tab is closed. To cancal the close, set cancel to true on e. (e.cancel = true) | ||
459 | * @param {YAHOO.ext.TabPanelItem} this | ||
460 | * @param {Object} e Set cancel to true on this object to cancel the close. | ||
461 | */ | ||
462 | 'beforeclose': new YAHOO.util.CustomEvent('beforeclose'), | ||
463 | /** | ||
464 | * @event close | ||
465 | * Fires when this tab is closed | ||
466 | * @param {YAHOO.ext.TabPanelItem} this | ||
467 | */ | ||
468 | 'close': new YAHOO.util.CustomEvent('close'), | ||
469 | /** | ||
470 | * @event deactivate | ||
471 | * Fires when this tab is no longer the active tab | ||
472 | * @param {YAHOO.ext.TabPanel} tabPanel | ||
473 | * @param {YAHOO.ext.TabPanelItem} this | ||
474 | */ | ||
475 | 'deactivate' : this.onDeactivate | ||
476 | }; | ||
477 | this.hidden = false; | ||
478 | }; | ||
479 | |||
480 | YAHOO.ext.TabPanelItem.prototype = { | ||
481 | fireEvent : YAHOO.ext.util.Observable.prototype.fireEvent, | ||
482 | on : YAHOO.ext.util.Observable.prototype.on, | ||
483 | addListener : YAHOO.ext.util.Observable.prototype.addListener, | ||
484 | delayedListener : YAHOO.ext.util.Observable.prototype.delayedListener, | ||
485 | removeListener : YAHOO.ext.util.Observable.prototype.removeListener, | ||
486 | purgeListeners : function(){ | ||
487 | YAHOO.ext.util.Observable.prototype.purgeListeners.call(this); | ||
488 | this.el.removeAllListeners(); | ||
489 | }, | ||
490 | /** | ||
491 | * Show this TabPanelItem - this <b>does not</b> deactivate the currently active TabPanelItem. | ||
492 | */ | ||
493 | show : function(){ | ||
494 | this.pnode.addClass('on'); | ||
495 | this.showAction(); | ||
496 | if(YAHOO.ext.util.Browser.isOpera){ | ||
497 | this.tabPanel.stripWrap.repaint(); | ||
498 | } | ||
499 | this.onActivate.fireDirect(this.tabPanel, this); | ||
500 | }, | ||
501 | |||
502 | /** | ||
503 | * Returns true if this tab is the active tab | ||
504 | * @return {Boolean} | ||
505 | */ | ||
506 | isActive : function(){ | ||
507 | return this.tabPanel.getActiveTab() == this; | ||
508 | }, | ||
509 | |||
510 | /** | ||
511 | * Hide this TabPanelItem - if you don't activate another TabPanelItem this could look odd. | ||
512 | */ | ||
513 | hide : function(){ | ||
514 | this.pnode.removeClass('on'); | ||
515 | this.hideAction(); | ||
516 | this.onDeactivate.fireDirect(this.tabPanel, this); | ||
517 | }, | ||
518 | |||
519 | hideAction : function(){ | ||
520 | this.bodyEl.setStyle('position', 'absolute'); | ||
521 | this.bodyEl.setLeft('-20000px'); | ||
522 | this.bodyEl.setTop('-20000px'); | ||
523 | this.bodyEl.hide(); | ||
524 | }, | ||
525 | |||
526 | showAction : function(){ | ||
527 | this.bodyEl.setStyle('position', 'relative'); | ||
528 | this.bodyEl.setTop(''); | ||
529 | this.bodyEl.setLeft(''); | ||
530 | this.bodyEl.show(); | ||
531 | this.tabPanel.el.repaint.defer(1); | ||
532 | }, | ||
533 | |||
534 | /** | ||
535 | * Set the tooltip (title attribute) for the tab | ||
536 | * @param {String} tooltip | ||
537 | */ | ||
538 | setTooltip : function(text){ | ||
539 | this.textEl.dom.title = text; | ||
540 | }, | ||
541 | |||
542 | onTabClick : function(e){ | ||
543 | e.preventDefault(); | ||
544 | this.tabPanel.activate(this.id); | ||
545 | }, | ||
546 | |||
547 | getWidth : function(){ | ||
548 | return this.inner.getWidth(); | ||
549 | }, | ||
550 | |||
551 | setWidth : function(width){ | ||
552 | var iwidth = width - this.pnode.getPadding("lr"); | ||
553 | this.inner.setWidth(iwidth); | ||
554 | this.textEl.setWidth(iwidth-this.inner.getPadding('lr')); | ||
555 | this.pnode.setWidth(width); | ||
556 | }, | ||
557 | |||
558 | setHidden : function(hidden){ | ||
559 | this.hidden = hidden; | ||
560 | this.pnode.setStyle('display', hidden ? 'none' : ''); | ||
561 | }, | ||
562 | |||
563 | /** | ||
564 | * Returns true if this tab is "hidden" | ||
565 | * @return {Boolean} | ||
566 | */ | ||
567 | isHidden : function(){ | ||
568 | return this.hidden; | ||
569 | }, | ||
570 | |||
571 | /** | ||
572 | * Returns the text for this tab | ||
573 | * @return {String} | ||
574 | */ | ||
575 | getText : function(){ | ||
576 | return this.text; | ||
577 | }, | ||
578 | |||
579 | autoSize : function(){ | ||
580 | this.el.beginMeasure(); | ||
581 | this.textEl.setWidth(1); | ||
582 | this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding('lr')); | ||
583 | this.el.endMeasure(); | ||
584 | }, | ||
585 | |||
586 | /** | ||
587 | * Sets the text for the tab (Note: this also sets the tooltip) | ||
588 | * @param {String} text | ||
589 | */ | ||
590 | setText : function(text){ | ||
591 | this.text = text; | ||
592 | this.textEl.update(text); | ||
593 | this.textEl.dom.title = text; | ||
594 | if(!this.tabPanel.resizeTabs){ | ||
595 | this.autoSize(); | ||
596 | } | ||
597 | }, | ||
598 | /** | ||
599 | * Activate this TabPanelItem - this <b>does</b> deactivate the currently active TabPanelItem. | ||
600 | */ | ||
601 | activate : function(){ | ||
602 | this.tabPanel.activate(this.id); | ||
603 | }, | ||
604 | |||
605 | /** | ||
606 | * Disable this TabPanelItem - this call is ignore if this is the active TabPanelItem. | ||
607 | */ | ||
608 | disable : function(){ | ||
609 | if(this.tabPanel.active != this){ | ||
610 | this.disabled = true; | ||
611 | this.pnode.addClass('disabled'); | ||
612 | } | ||
613 | }, | ||
614 | |||
615 | /** | ||
616 | * Enable this TabPanelItem if it was previously disabled. | ||
617 | */ | ||
618 | enable : function(){ | ||
619 | this.disabled = false; | ||
620 | this.pnode.removeClass('disabled'); | ||
621 | }, | ||
622 | |||
623 | /** | ||
624 | * Set the content for this TabPanelItem. | ||
625 | * @param {String} content The content | ||
626 | * @param {Boolean} loadScripts true to look for and load scripts | ||
627 | */ | ||
628 | setContent : function(content, loadScripts){ | ||
629 | this.bodyEl.update(content, loadScripts); | ||
630 | }, | ||
631 | |||
632 | /** | ||
633 | * Get the {@link YAHOO.ext.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates. | ||
634 | * @return {YAHOO.ext.UpdateManager} The UpdateManager | ||
635 | */ | ||
636 | getUpdateManager : function(){ | ||
637 | return this.bodyEl.getUpdateManager(); | ||
638 | }, | ||
639 | |||
640 | /** | ||
641 | * Set a URL to be used to load the content for this TabPanelItem. | ||
642 | * @param {String/Function} url The url to load the content from or a function to call to get the url | ||
643 | * @param {<i>String/Object</i>} params (optional) The string params for the update call or an object of the params. See {@link YAHOO.ext.UpdateManager#update} for more details. (Defaults to null) | ||
644 | * @param {<i>Boolean</i>} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false) | ||
645 | * @return {YAHOO.ext.UpdateManager} The UpdateManager | ||
646 | */ | ||
647 | setUrl : function(url, params, loadOnce){ | ||
648 | if(this.refreshDelegate){ | ||
649 | this.onActivate.unsubscribe(this.refreshDelegate); | ||
650 | } | ||
651 | this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]); | ||
652 | this.onActivate.subscribe(this.refreshDelegate); | ||
653 | return this.bodyEl.getUpdateManager(); | ||
654 | }, | ||
655 | |||
656 | /** @private */ | ||
657 | _handleRefresh : function(url, params, loadOnce){ | ||
658 | if(!loadOnce || !this.loaded){ | ||
659 | var updater = this.bodyEl.getUpdateManager(); | ||
660 | updater.update(url, params, this._setLoaded.createDelegate(this)); | ||
661 | } | ||
662 | }, | ||
663 | |||
664 | /** | ||
665 | * Force a content refresh from the URL specified in the setUrl() method. | ||
666 | * Will fail silently if the setUrl method has not been called. | ||
667 | * This does not activate the panel, just updates its content. | ||
668 | */ | ||
669 | refresh : function(){ | ||
670 | if(this.refreshDelegate){ | ||
671 | this.loaded = false; | ||
672 | this.refreshDelegate(); | ||
673 | } | ||
674 | }, | ||
675 | |||
676 | /** @private */ | ||
677 | _setLoaded : function(){ | ||
678 | this.loaded = true; | ||
679 | }, | ||
680 | |||
681 | /** @private */ | ||
682 | closeClick : function(e){ | ||
683 | var e = {}; | ||
684 | this.fireEvent('beforeclose', this, e); | ||
685 | if(e.cancel !== true){ | ||
686 | this.tabPanel.removeTab(this.id); | ||
687 | } | ||
688 | }, | ||
689 | /** | ||
690 | * The text displayed in the tooltip for the close icon. | ||
691 | * @type String | ||
692 | */ | ||
693 | closeText : 'Close this tab' | ||
694 | }; | ||
695 | |||
696 | /** @private */ | ||
697 | YAHOO.ext.TabPanel.prototype.createStrip = function(container){ | ||
698 | var strip = document.createElement('div'); | ||
699 | strip.className = 'ytab-wrap'; | ||
700 | container.appendChild(strip); | ||
701 | return strip; | ||
702 | }; | ||
703 | /** @private */ | ||
704 | YAHOO.ext.TabPanel.prototype.createStripList = function(strip){ | ||
705 | // div wrapper for retard IE | ||
706 | strip.innerHTML = '<div class="ytab-strip-wrap"><table class="ytab-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr></tr></tbody></table></div>'; | ||
707 | return strip.firstChild.firstChild.firstChild.firstChild; | ||
708 | }; | ||
709 | /** @private */ | ||
710 | YAHOO.ext.TabPanel.prototype.createBody = function(container){ | ||
711 | var body = document.createElement('div'); | ||
712 | YAHOO.util.Dom.generateId(body, 'tab-body'); | ||
713 | YAHOO.util.Dom.addClass(body, 'yui-ext-tabbody'); | ||
714 | container.appendChild(body); | ||
715 | return body; | ||
716 | }; | ||
717 | /** @private */ | ||
718 | YAHOO.ext.TabPanel.prototype.createItemBody = function(bodyEl, id){ | ||
719 | var body = YAHOO.util.Dom.get(id); | ||
720 | if(!body){ | ||
721 | body = document.createElement('div'); | ||
722 | body.id = id; | ||
723 | } | ||
724 | YAHOO.util.Dom.addClass(body, 'yui-ext-tabitembody'); | ||
725 | bodyEl.insertBefore(body, bodyEl.firstChild); | ||
726 | return body; | ||
727 | }; | ||
728 | /** @private */ | ||
729 | YAHOO.ext.TabPanel.prototype.createStripElements = function(stripEl, text, closable){ | ||
730 | var td = document.createElement('td'); | ||
731 | stripEl.appendChild(td); | ||
732 | if(closable){ | ||
733 | td.className = "ytab-closable"; | ||
734 | if(!this.closeTpl){ | ||
735 | this.closeTpl = new YAHOO.ext.Template( | ||
736 | '<a href="#" class="ytab-right"><span class="ytab-left"><em class="ytab-inner">' + | ||
737 | '<span unselectable="on" title="{text}" class="ytab-text">{text}</span>' + | ||
738 | '<div unselectable="on" class="close-icon"> </div></em></span></a>' | ||
739 | ); | ||
740 | } | ||
741 | var el = this.closeTpl.overwrite(td, {'text': text}); | ||
742 | var close = el.getElementsByTagName('div')[0]; | ||
743 | var inner = el.getElementsByTagName('em')[0]; | ||
744 | return {'el': el, 'close': close, 'inner': inner}; | ||
745 | } else { | ||
746 | if(!this.tabTpl){ | ||
747 | this.tabTpl = new YAHOO.ext.Template( | ||
748 | '<a href="#" class="ytab-right"><span class="ytab-left"><em class="ytab-inner">' + | ||
749 | '<span unselectable="on" title="{text}" class="ytab-text">{text}</span></em></span></a>' | ||
750 | ); | ||
751 | } | ||
752 | var el = this.tabTpl.overwrite(td, {'text': text}); | ||
753 | var inner = el.getElementsByTagName('em')[0]; | ||
754 | return {'el': el, 'inner': inner}; | ||
755 | } | ||
756 | }; | ||