1 | /* |
---|
2 | Copyright (c) 2006, Yahoo! Inc. All rights reserved. |
---|
3 | Code licensed under the BSD License: |
---|
4 | http://developer.yahoo.net/yui/license.txt |
---|
5 | version: 0.11.3 |
---|
6 | */ |
---|
7 | |
---|
8 | /** |
---|
9 | * Contains the tree view state data and the root node. This is an |
---|
10 | * ordered tree; child nodes will be displayed in the order created, and |
---|
11 | * there currently is no way to change this. |
---|
12 | * |
---|
13 | * @constructor |
---|
14 | * @param {string|HTMLElement} id The id of the element, or the element |
---|
15 | * itself that the tree will be inserted into. |
---|
16 | */ |
---|
17 | YAHOO.widget.TreeView = function(id) { |
---|
18 | if (id) { this.init(id); } |
---|
19 | }; |
---|
20 | |
---|
21 | /** |
---|
22 | * Count of all nodes in all trees |
---|
23 | * @type int |
---|
24 | */ |
---|
25 | YAHOO.widget.TreeView.nodeCount = 0; |
---|
26 | |
---|
27 | YAHOO.widget.TreeView.prototype = { |
---|
28 | |
---|
29 | /** |
---|
30 | * The id of tree container element |
---|
31 | * |
---|
32 | * @type String |
---|
33 | */ |
---|
34 | id: null, |
---|
35 | |
---|
36 | /** |
---|
37 | * The host element for this tree |
---|
38 | * @private |
---|
39 | */ |
---|
40 | _el: null, |
---|
41 | |
---|
42 | /** |
---|
43 | * Flat collection of all nodes in this tree |
---|
44 | * |
---|
45 | * @type Node[] |
---|
46 | * @private |
---|
47 | */ |
---|
48 | _nodes: null, |
---|
49 | |
---|
50 | /** |
---|
51 | * We lock the tree control while waiting for the dynamic loader to return |
---|
52 | * |
---|
53 | * @type boolean |
---|
54 | */ |
---|
55 | locked: false, |
---|
56 | |
---|
57 | /** |
---|
58 | * The animation to use for expanding children, if any |
---|
59 | * |
---|
60 | * @type string |
---|
61 | * @private |
---|
62 | */ |
---|
63 | _expandAnim: null, |
---|
64 | |
---|
65 | /** |
---|
66 | * The animation to use for collapsing children, if any |
---|
67 | * |
---|
68 | * @type string |
---|
69 | * @private |
---|
70 | */ |
---|
71 | _collapseAnim: null, |
---|
72 | |
---|
73 | /** |
---|
74 | * The current number of animations that are executing |
---|
75 | * |
---|
76 | * @type int |
---|
77 | * @private |
---|
78 | */ |
---|
79 | _animCount: 0, |
---|
80 | |
---|
81 | /** |
---|
82 | * The maximum number of animations to run at one time. |
---|
83 | * |
---|
84 | * @type int |
---|
85 | */ |
---|
86 | maxAnim: 2, |
---|
87 | |
---|
88 | /** |
---|
89 | * Sets up the animation for expanding children |
---|
90 | * |
---|
91 | * @param {string} the type of animation (acceptable values defined in |
---|
92 | * YAHOO.widget.TVAnim) |
---|
93 | */ |
---|
94 | setExpandAnim: function(type) { |
---|
95 | if (YAHOO.widget.TVAnim.isValid(type)) { |
---|
96 | this._expandAnim = type; |
---|
97 | } |
---|
98 | }, |
---|
99 | |
---|
100 | /** |
---|
101 | * Sets up the animation for collapsing children |
---|
102 | * |
---|
103 | * @param {string} the type of animation (acceptable values defined in |
---|
104 | * YAHOO.widget.TVAnim) |
---|
105 | */ |
---|
106 | setCollapseAnim: function(type) { |
---|
107 | if (YAHOO.widget.TVAnim.isValid(type)) { |
---|
108 | this._collapseAnim = type; |
---|
109 | } |
---|
110 | }, |
---|
111 | |
---|
112 | /** |
---|
113 | * Perform the expand animation if configured, or just show the |
---|
114 | * element if not configured or too many animations are in progress |
---|
115 | * |
---|
116 | * @param el {HTMLElement} the element to animate |
---|
117 | * @return {boolean} true if animation could be invoked, false otherwise |
---|
118 | */ |
---|
119 | animateExpand: function(el) { |
---|
120 | this.logger.log("animating expand"); |
---|
121 | |
---|
122 | if (this._expandAnim && this._animCount < this.maxAnim) { |
---|
123 | // this.locked = true; |
---|
124 | var tree = this; |
---|
125 | var a = YAHOO.widget.TVAnim.getAnim(this._expandAnim, el, |
---|
126 | function() { tree.expandComplete(); }); |
---|
127 | if (a) { |
---|
128 | ++this._animCount; |
---|
129 | a.animate(); |
---|
130 | } |
---|
131 | |
---|
132 | return true; |
---|
133 | } |
---|
134 | |
---|
135 | return false; |
---|
136 | }, |
---|
137 | |
---|
138 | /** |
---|
139 | * Perform the collapse animation if configured, or just show the |
---|
140 | * element if not configured or too many animations are in progress |
---|
141 | * |
---|
142 | * @param el {HTMLElement} the element to animate |
---|
143 | * @return {boolean} true if animation could be invoked, false otherwise |
---|
144 | */ |
---|
145 | animateCollapse: function(el) { |
---|
146 | this.logger.log("animating collapse"); |
---|
147 | |
---|
148 | if (this._collapseAnim && this._animCount < this.maxAnim) { |
---|
149 | // this.locked = true; |
---|
150 | var tree = this; |
---|
151 | var a = YAHOO.widget.TVAnim.getAnim(this._collapseAnim, el, |
---|
152 | function() { tree.collapseComplete(); }); |
---|
153 | if (a) { |
---|
154 | ++this._animCount; |
---|
155 | a.animate(); |
---|
156 | } |
---|
157 | |
---|
158 | return true; |
---|
159 | } |
---|
160 | |
---|
161 | return false; |
---|
162 | }, |
---|
163 | |
---|
164 | /** |
---|
165 | * Function executed when the expand animation completes |
---|
166 | */ |
---|
167 | expandComplete: function() { |
---|
168 | this.logger.log("expand complete: " + this.id); |
---|
169 | --this._animCount; |
---|
170 | // this.locked = false; |
---|
171 | }, |
---|
172 | |
---|
173 | /** |
---|
174 | * Function executed when the collapse animation completes |
---|
175 | */ |
---|
176 | collapseComplete: function() { |
---|
177 | this.logger.log("collapse complete: " + this.id); |
---|
178 | --this._animCount; |
---|
179 | // this.locked = false; |
---|
180 | }, |
---|
181 | |
---|
182 | /** |
---|
183 | * Initializes the tree |
---|
184 | * |
---|
185 | * @parm {string|HTMLElement} id the id of the element that will hold the tree |
---|
186 | * @private |
---|
187 | */ |
---|
188 | init: function(id) { |
---|
189 | |
---|
190 | this.id = id; |
---|
191 | |
---|
192 | if ("string" !== typeof id) { |
---|
193 | this._el = id; |
---|
194 | this.id = this.generateId(id); |
---|
195 | } |
---|
196 | |
---|
197 | this._nodes = []; |
---|
198 | |
---|
199 | // store a global reference |
---|
200 | YAHOO.widget.TreeView.trees[this.id] = this; |
---|
201 | |
---|
202 | // Set up the root node |
---|
203 | this.root = new YAHOO.widget.RootNode(this); |
---|
204 | |
---|
205 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
206 | |
---|
207 | this.logger.log("tree init: " + this.id); |
---|
208 | }, |
---|
209 | |
---|
210 | /** |
---|
211 | * Renders the tree boilerplate and visible nodes |
---|
212 | */ |
---|
213 | draw: function() { |
---|
214 | var html = this.root.getHtml(); |
---|
215 | this.getEl().innerHTML = html; |
---|
216 | this.firstDraw = false; |
---|
217 | }, |
---|
218 | |
---|
219 | /** |
---|
220 | * Returns the tree's host element |
---|
221 | * @return {HTMLElement} the host element |
---|
222 | */ |
---|
223 | getEl: function() { |
---|
224 | if (! this._el) { |
---|
225 | this._el = document.getElementById(this.id); |
---|
226 | } |
---|
227 | return this._el; |
---|
228 | }, |
---|
229 | |
---|
230 | /** |
---|
231 | * Nodes register themselves with the tree instance when they are created. |
---|
232 | * |
---|
233 | * @param node {Node} the node to register |
---|
234 | * @private |
---|
235 | */ |
---|
236 | regNode: function(node) { |
---|
237 | this._nodes[node.index] = node; |
---|
238 | }, |
---|
239 | |
---|
240 | /** |
---|
241 | * Returns the root node of this tree |
---|
242 | * |
---|
243 | * @return {Node} the root node |
---|
244 | */ |
---|
245 | getRoot: function() { |
---|
246 | return this.root; |
---|
247 | }, |
---|
248 | |
---|
249 | /** |
---|
250 | * Configures this tree to dynamically load all child data |
---|
251 | * |
---|
252 | * @param {function} fnDataLoader the function that will be called to get the data |
---|
253 | * @param iconMode {int} configures the icon that is displayed when a dynamic |
---|
254 | * load node is expanded the first time without children. By default, the |
---|
255 | * "collapse" icon will be used. If set to 1, the leaf node icon will be |
---|
256 | * displayed. |
---|
257 | */ |
---|
258 | setDynamicLoad: function(fnDataLoader, iconMode) { |
---|
259 | this.root.setDynamicLoad(fnDataLoader, iconMode); |
---|
260 | }, |
---|
261 | |
---|
262 | /** |
---|
263 | * Expands all child nodes. Note: this conflicts with the "multiExpand" |
---|
264 | * node property. If expand all is called in a tree with nodes that |
---|
265 | * do not allow multiple siblings to be displayed, only the last sibling |
---|
266 | * will be expanded. |
---|
267 | */ |
---|
268 | expandAll: function() { |
---|
269 | if (!this.locked) { |
---|
270 | this.root.expandAll(); |
---|
271 | } |
---|
272 | }, |
---|
273 | |
---|
274 | /** |
---|
275 | * Collapses all expanded child nodes in the entire tree. |
---|
276 | */ |
---|
277 | collapseAll: function() { |
---|
278 | if (!this.locked) { |
---|
279 | this.root.collapseAll(); |
---|
280 | } |
---|
281 | }, |
---|
282 | |
---|
283 | /** |
---|
284 | * Returns a node in the tree that has the specified index (this index |
---|
285 | * is created internally, so this function probably will only be used |
---|
286 | * in html generated for a given node.) |
---|
287 | * |
---|
288 | * @param {int} nodeIndex the index of the node wanted |
---|
289 | * @return {Node} the node with index=nodeIndex, null if no match |
---|
290 | */ |
---|
291 | getNodeByIndex: function(nodeIndex) { |
---|
292 | var n = this._nodes[nodeIndex]; |
---|
293 | return (n) ? n : null; |
---|
294 | }, |
---|
295 | |
---|
296 | /** |
---|
297 | * Returns a node that has a matching property and value in the data |
---|
298 | * object that was passed into its constructor. |
---|
299 | * |
---|
300 | * @param {object} property the property to search (usually a string) |
---|
301 | * @param {object} value the value we want to find (usuall an int or string) |
---|
302 | * @return {Node} the matching node, null if no match |
---|
303 | */ |
---|
304 | getNodeByProperty: function(property, value) { |
---|
305 | for (var i in this._nodes) { |
---|
306 | var n = this._nodes[i]; |
---|
307 | if (n.data && value == n.data[property]) { |
---|
308 | return n; |
---|
309 | } |
---|
310 | } |
---|
311 | |
---|
312 | return null; |
---|
313 | }, |
---|
314 | |
---|
315 | /** |
---|
316 | * Returns a collection of nodes that have a matching property |
---|
317 | * and value in the data object that was passed into its constructor. |
---|
318 | * |
---|
319 | * @param {object} property the property to search (usually a string) |
---|
320 | * @param {object} value the value we want to find (usuall an int or string) |
---|
321 | * @return {Array} the matching collection of nodes, null if no match |
---|
322 | */ |
---|
323 | getNodesByProperty: function(property, value) { |
---|
324 | var values = []; |
---|
325 | for (var i in this._nodes) { |
---|
326 | var n = this._nodes[i]; |
---|
327 | if (n.data && value == n.data[property]) { |
---|
328 | values.push(n); |
---|
329 | } |
---|
330 | } |
---|
331 | |
---|
332 | return (values.length) ? values : null; |
---|
333 | }, |
---|
334 | |
---|
335 | /** |
---|
336 | * Removes the node and its children, and optionally refreshes the |
---|
337 | * branch of the tree that was affected. |
---|
338 | * @param {Node} The node to remove |
---|
339 | * @param {boolean} autoRefresh automatically refreshes branch if true |
---|
340 | * @return {boolean} False is there was a problem, true otherwise. |
---|
341 | */ |
---|
342 | removeNode: function(node, autoRefresh) { |
---|
343 | |
---|
344 | // Don't delete the root node |
---|
345 | if (node.isRoot()) { |
---|
346 | return false; |
---|
347 | } |
---|
348 | |
---|
349 | // Get the branch that we may need to refresh |
---|
350 | var p = node.parent; |
---|
351 | if (p.parent) { |
---|
352 | p = p.parent; |
---|
353 | } |
---|
354 | |
---|
355 | // Delete the node and its children |
---|
356 | this._deleteNode(node); |
---|
357 | |
---|
358 | // Refresh the parent of the parent |
---|
359 | if (autoRefresh && p && p.childrenRendered) { |
---|
360 | p.refresh(); |
---|
361 | } |
---|
362 | |
---|
363 | return true; |
---|
364 | }, |
---|
365 | |
---|
366 | /** |
---|
367 | * Deletes this nodes child collection, recursively. Also collapses |
---|
368 | * the node, and resets the dynamic load flag. The primary use for |
---|
369 | * this method is to purge a node and allow it to fetch its data |
---|
370 | * dynamically again. |
---|
371 | * @param {Node} node the node to purge |
---|
372 | */ |
---|
373 | removeChildren: function(node) { |
---|
374 | this.logger.log("Removing children for " + node); |
---|
375 | while (node.children.length) { |
---|
376 | this._deleteNode(node.children[0]); |
---|
377 | } |
---|
378 | |
---|
379 | node.childrenRendered = false; |
---|
380 | node.dynamicLoadComplete = false; |
---|
381 | // node.collapse(); |
---|
382 | node.expand(); |
---|
383 | node.collapse(); |
---|
384 | }, |
---|
385 | |
---|
386 | /** |
---|
387 | * Deletes the node and recurses children |
---|
388 | * @private |
---|
389 | */ |
---|
390 | _deleteNode: function(node) { |
---|
391 | // Remove all the child nodes first |
---|
392 | this.removeChildren(node); |
---|
393 | |
---|
394 | // Remove the node from the tree |
---|
395 | this.popNode(node); |
---|
396 | }, |
---|
397 | |
---|
398 | /** |
---|
399 | * Removes the node from the tree, preserving the child collection |
---|
400 | * to make it possible to insert the branch into another part of the |
---|
401 | * tree, or another tree. |
---|
402 | * @param {Node} the node to remove |
---|
403 | */ |
---|
404 | popNode: function(node) { |
---|
405 | var p = node.parent; |
---|
406 | |
---|
407 | // Update the parent's collection of children |
---|
408 | var a = []; |
---|
409 | |
---|
410 | for (var i=0, len=p.children.length;i<len;++i) { |
---|
411 | if (p.children[i] != node) { |
---|
412 | a[a.length] = p.children[i]; |
---|
413 | } |
---|
414 | } |
---|
415 | |
---|
416 | p.children = a; |
---|
417 | |
---|
418 | // reset the childrenRendered flag for the parent |
---|
419 | p.childrenRendered = false; |
---|
420 | |
---|
421 | // Update the sibling relationship |
---|
422 | if (node.previousSibling) { |
---|
423 | node.previousSibling.nextSibling = node.nextSibling; |
---|
424 | } |
---|
425 | |
---|
426 | if (node.nextSibling) { |
---|
427 | node.nextSibling.previousSibling = node.previousSibling; |
---|
428 | } |
---|
429 | |
---|
430 | node.parent = null; |
---|
431 | node.previousSibling = null; |
---|
432 | node.nextSibling = null; |
---|
433 | node.tree = null; |
---|
434 | |
---|
435 | // Update the tree's node collection |
---|
436 | delete this._nodes[node.index]; |
---|
437 | }, |
---|
438 | |
---|
439 | |
---|
440 | /** |
---|
441 | * toString |
---|
442 | * @return {string} string representation of the tree |
---|
443 | */ |
---|
444 | toString: function() { |
---|
445 | return "TreeView " + this.id; |
---|
446 | }, |
---|
447 | |
---|
448 | /** |
---|
449 | * private |
---|
450 | */ |
---|
451 | generateId: function(el) { |
---|
452 | var id = el.id; |
---|
453 | |
---|
454 | if (!id) { |
---|
455 | id = "yui-tv-auto-id-" + YAHOO.widget.TreeView.counter; |
---|
456 | YAHOO.widget.TreeView.counter++; |
---|
457 | } |
---|
458 | |
---|
459 | return id; |
---|
460 | }, |
---|
461 | |
---|
462 | /** |
---|
463 | * Abstract method that is executed when a node is expanded |
---|
464 | * @param node {Node} the node that was expanded |
---|
465 | */ |
---|
466 | onExpand: function(node) { }, |
---|
467 | |
---|
468 | /** |
---|
469 | * Abstract method that is executed when a node is collapsed |
---|
470 | * @param node {Node} the node that was collapsed. |
---|
471 | */ |
---|
472 | onCollapse: function(node) { } |
---|
473 | |
---|
474 | }; |
---|
475 | |
---|
476 | /** |
---|
477 | * Global cache of tree instances |
---|
478 | * |
---|
479 | * @type Array |
---|
480 | * @private |
---|
481 | */ |
---|
482 | YAHOO.widget.TreeView.trees = []; |
---|
483 | |
---|
484 | /** |
---|
485 | * @private |
---|
486 | */ |
---|
487 | YAHOO.widget.TreeView.counter = 0; |
---|
488 | |
---|
489 | /** |
---|
490 | * Global method for getting a tree by its id. Used in the generated |
---|
491 | * tree html. |
---|
492 | * |
---|
493 | * @param treeId {String} the id of the tree instance |
---|
494 | * @return {TreeView} the tree instance requested, null if not found. |
---|
495 | */ |
---|
496 | YAHOO.widget.TreeView.getTree = function(treeId) { |
---|
497 | var t = YAHOO.widget.TreeView.trees[treeId]; |
---|
498 | return (t) ? t : null; |
---|
499 | }; |
---|
500 | |
---|
501 | |
---|
502 | /** |
---|
503 | * Global method for getting a node by its id. Used in the generated |
---|
504 | * tree html. |
---|
505 | * |
---|
506 | * @param treeId {String} the id of the tree instance |
---|
507 | * @param nodeIndex {String} the index of the node to return |
---|
508 | * @return {Node} the node instance requested, null if not found |
---|
509 | */ |
---|
510 | YAHOO.widget.TreeView.getNode = function(treeId, nodeIndex) { |
---|
511 | var t = YAHOO.widget.TreeView.getTree(treeId); |
---|
512 | return (t) ? t.getNodeByIndex(nodeIndex) : null; |
---|
513 | }; |
---|
514 | |
---|
515 | /** |
---|
516 | * Adds an event. Replace with event manager when available |
---|
517 | * |
---|
518 | * @param el the elment to bind the handler to |
---|
519 | * @param {string} sType the type of event handler |
---|
520 | * @param {function} fn the callback to invoke |
---|
521 | * @param {boolean} capture if true event is capture phase, bubble otherwise |
---|
522 | */ |
---|
523 | YAHOO.widget.TreeView.addHandler = function (el, sType, fn, capture) { |
---|
524 | capture = (capture) ? true : false; |
---|
525 | if (el.addEventListener) { |
---|
526 | el.addEventListener(sType, fn, capture); |
---|
527 | } else if (el.attachEvent) { |
---|
528 | el.attachEvent("on" + sType, fn); |
---|
529 | } else { |
---|
530 | el["on" + sType] = fn; |
---|
531 | } |
---|
532 | }; |
---|
533 | |
---|
534 | /** |
---|
535 | * Attempts to preload the images defined in the styles used to draw the tree by |
---|
536 | * rendering off-screen elements that use the styles. |
---|
537 | */ |
---|
538 | YAHOO.widget.TreeView.preload = function(prefix) { |
---|
539 | prefix = prefix || "ygtv"; |
---|
540 | var styles = ["tn","tm","tmh","tp","tph","ln","lm","lmh","lp","lph","loading"]; |
---|
541 | |
---|
542 | var sb = []; |
---|
543 | |
---|
544 | for (var i = 0; i < styles.length; ++i) { |
---|
545 | sb[sb.length] = '<span class="' + prefix + styles[i] + '"> </span>'; |
---|
546 | } |
---|
547 | |
---|
548 | var f = document.createElement("DIV"); |
---|
549 | var s = f.style; |
---|
550 | s.position = "absolute"; |
---|
551 | s.top = "-1000px"; |
---|
552 | s.left = "-1000px"; |
---|
553 | f.innerHTML = sb.join(""); |
---|
554 | |
---|
555 | document.body.appendChild(f); |
---|
556 | }; |
---|
557 | |
---|
558 | YAHOO.widget.TreeView.addHandler(window, |
---|
559 | "load", YAHOO.widget.TreeView.preload); |
---|
560 | |
---|
561 | /** |
---|
562 | * The base class for all tree nodes. The node's presentation and behavior in |
---|
563 | * response to mouse events is handled in Node subclasses. |
---|
564 | * |
---|
565 | * @param oData {object} a string or object containing the data that will |
---|
566 | * be used to render this node |
---|
567 | * @param oParent {Node} this node's parent node |
---|
568 | * @param expanded {boolean} the initial expanded/collapsed state |
---|
569 | * @constructor |
---|
570 | */ |
---|
571 | YAHOO.widget.Node = function(oData, oParent, expanded) { |
---|
572 | if (oData) { this.init(oData, oParent, expanded); } |
---|
573 | }; |
---|
574 | |
---|
575 | YAHOO.widget.Node.prototype = { |
---|
576 | |
---|
577 | /** |
---|
578 | * The index for this instance obtained from global counter in YAHOO.widget.TreeView. |
---|
579 | * |
---|
580 | * @type int |
---|
581 | */ |
---|
582 | index: 0, |
---|
583 | |
---|
584 | /** |
---|
585 | * This node's child node collection. |
---|
586 | * |
---|
587 | * @type Node[] |
---|
588 | */ |
---|
589 | children: null, |
---|
590 | |
---|
591 | /** |
---|
592 | * Tree instance this node is part of |
---|
593 | * |
---|
594 | * @type TreeView |
---|
595 | */ |
---|
596 | tree: null, |
---|
597 | |
---|
598 | /** |
---|
599 | * The data linked to this node. This can be any object or primitive |
---|
600 | * value, and the data can be used in getNodeHtml(). |
---|
601 | * |
---|
602 | * @type object |
---|
603 | */ |
---|
604 | data: null, |
---|
605 | |
---|
606 | /** |
---|
607 | * Parent node |
---|
608 | * |
---|
609 | * @type Node |
---|
610 | */ |
---|
611 | parent: null, |
---|
612 | |
---|
613 | /** |
---|
614 | * The depth of this node. We start at -1 for the root node. |
---|
615 | * |
---|
616 | * @type int |
---|
617 | */ |
---|
618 | depth: -1, |
---|
619 | |
---|
620 | /** |
---|
621 | * The href for the node's label. If one is not specified, the href will |
---|
622 | * be set so that it toggles the node. |
---|
623 | * |
---|
624 | * @type string |
---|
625 | */ |
---|
626 | href: null, |
---|
627 | |
---|
628 | /** |
---|
629 | * The label href target, defaults to current window |
---|
630 | * |
---|
631 | * @type string |
---|
632 | */ |
---|
633 | target: "_self", |
---|
634 | |
---|
635 | /** |
---|
636 | * The node's expanded/collapsed state |
---|
637 | * |
---|
638 | * @type boolean |
---|
639 | */ |
---|
640 | expanded: false, |
---|
641 | |
---|
642 | /** |
---|
643 | * Can multiple children be expanded at once? |
---|
644 | * |
---|
645 | * @type boolean |
---|
646 | */ |
---|
647 | multiExpand: true, |
---|
648 | |
---|
649 | /** |
---|
650 | * Should we render children for a collapsed node? It is possible that the |
---|
651 | * implementer will want to render the hidden data... @todo verify that we |
---|
652 | * need this, and implement it if we do. |
---|
653 | * |
---|
654 | * @type boolean |
---|
655 | */ |
---|
656 | renderHidden: false, |
---|
657 | |
---|
658 | /** |
---|
659 | * This flag is set to true when the html is generated for this node's |
---|
660 | * children, and set to false when new children are added. |
---|
661 | * @type boolean |
---|
662 | */ |
---|
663 | childrenRendered: false, |
---|
664 | |
---|
665 | /** |
---|
666 | * Dynamically loaded nodes only fetch the data the first time they are |
---|
667 | * expanded. This flag is set to true once the data has been fetched. |
---|
668 | * @type boolean |
---|
669 | */ |
---|
670 | dynamicLoadComplete: false, |
---|
671 | |
---|
672 | /** |
---|
673 | * This node's previous sibling |
---|
674 | * |
---|
675 | * @type Node |
---|
676 | */ |
---|
677 | previousSibling: null, |
---|
678 | |
---|
679 | /** |
---|
680 | * This node's next sibling |
---|
681 | * |
---|
682 | * @type Node |
---|
683 | */ |
---|
684 | nextSibling: null, |
---|
685 | |
---|
686 | /** |
---|
687 | * We can set the node up to call an external method to get the child |
---|
688 | * data dynamically. |
---|
689 | * |
---|
690 | * @type boolean |
---|
691 | * @private |
---|
692 | */ |
---|
693 | _dynLoad: false, |
---|
694 | |
---|
695 | /** |
---|
696 | * Function to execute when we need to get this node's child data. |
---|
697 | * |
---|
698 | * @type function |
---|
699 | */ |
---|
700 | dataLoader: null, |
---|
701 | |
---|
702 | /** |
---|
703 | * This is true for dynamically loading nodes while waiting for the |
---|
704 | * callback to return. |
---|
705 | * |
---|
706 | * @type boolean |
---|
707 | */ |
---|
708 | isLoading: false, |
---|
709 | |
---|
710 | /** |
---|
711 | * The toggle/branch icon will not show if this is set to false. This |
---|
712 | * could be useful if the implementer wants to have the child contain |
---|
713 | * extra info about the parent, rather than an actual node. |
---|
714 | * |
---|
715 | * @type boolean |
---|
716 | */ |
---|
717 | hasIcon: true, |
---|
718 | |
---|
719 | /** |
---|
720 | * Used to configure what happens when a dynamic load node is expanded |
---|
721 | * and we discover that it does not have children. By default, it is |
---|
722 | * treated as if it still could have children (plus/minus icon). Set |
---|
723 | * iconMode to have it display like a leaf node instead. |
---|
724 | * @type int |
---|
725 | */ |
---|
726 | iconMode: 0, |
---|
727 | |
---|
728 | /** |
---|
729 | * The node type |
---|
730 | * @private |
---|
731 | */ |
---|
732 | _type: "Node", |
---|
733 | |
---|
734 | /* |
---|
735 | spacerPath: "http://us.i1.yimg.com/us.yimg.com/i/space.gif", |
---|
736 | expandedText: "Expanded", |
---|
737 | collapsedText: "Collapsed", |
---|
738 | loadingText: "Loading", |
---|
739 | */ |
---|
740 | |
---|
741 | /** |
---|
742 | * Initializes this node, gets some of the properties from the parent |
---|
743 | * |
---|
744 | * @param oData {object} a string or object containing the data that will |
---|
745 | * be used to render this node |
---|
746 | * @param oParent {Node} this node's parent node |
---|
747 | * @param expanded {boolean} the initial expanded/collapsed state |
---|
748 | */ |
---|
749 | init: function(oData, oParent, expanded) { |
---|
750 | this.data = oData; |
---|
751 | this.children = []; |
---|
752 | this.index = YAHOO.widget.TreeView.nodeCount; |
---|
753 | ++YAHOO.widget.TreeView.nodeCount; |
---|
754 | this.expanded = expanded; |
---|
755 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
756 | |
---|
757 | // oParent should never be null except when we create the root node. |
---|
758 | if (oParent) { |
---|
759 | oParent.appendChild(this); |
---|
760 | } |
---|
761 | }, |
---|
762 | |
---|
763 | /** |
---|
764 | * Certain properties for the node cannot be set until the parent |
---|
765 | * is known. This is called after the node is inserted into a tree. |
---|
766 | * the parent is also applied to this node's children in order to |
---|
767 | * make it possible to move a branch from one tree to another. |
---|
768 | * @param {Node} parentNode this node's parent node |
---|
769 | * @return {boolean} true if the application was successful |
---|
770 | */ |
---|
771 | applyParent: function(parentNode) { |
---|
772 | if (!parentNode) { |
---|
773 | return false; |
---|
774 | } |
---|
775 | |
---|
776 | this.tree = parentNode.tree; |
---|
777 | this.parent = parentNode; |
---|
778 | this.depth = parentNode.depth + 1; |
---|
779 | |
---|
780 | if (! this.href) { |
---|
781 | this.href = "javascript:" + this.getToggleLink(); |
---|
782 | } |
---|
783 | |
---|
784 | if (! this.multiExpand) { |
---|
785 | this.multiExpand = parentNode.multiExpand; |
---|
786 | } |
---|
787 | |
---|
788 | this.tree.regNode(this); |
---|
789 | parentNode.childrenRendered = false; |
---|
790 | |
---|
791 | // cascade update existing children |
---|
792 | for (var i=0, len=this.children.length;i<len;++i) { |
---|
793 | this.children[i].applyParent(this); |
---|
794 | } |
---|
795 | |
---|
796 | return true; |
---|
797 | }, |
---|
798 | |
---|
799 | /** |
---|
800 | * Appends a node to the child collection. |
---|
801 | * |
---|
802 | * @param childNode {Node} the new node |
---|
803 | * @return {Node} the child node |
---|
804 | * @private |
---|
805 | */ |
---|
806 | appendChild: function(childNode) { |
---|
807 | if (this.hasChildren()) { |
---|
808 | var sib = this.children[this.children.length - 1]; |
---|
809 | sib.nextSibling = childNode; |
---|
810 | childNode.previousSibling = sib; |
---|
811 | } |
---|
812 | this.children[this.children.length] = childNode; |
---|
813 | childNode.applyParent(this); |
---|
814 | |
---|
815 | return childNode; |
---|
816 | }, |
---|
817 | |
---|
818 | /** |
---|
819 | * Appends this node to the supplied node's child collection |
---|
820 | * @param parentNode {Node} the node to append to. |
---|
821 | * @return {Node} The appended node |
---|
822 | */ |
---|
823 | appendTo: function(parentNode) { |
---|
824 | return parentNode.appendChild(this); |
---|
825 | }, |
---|
826 | |
---|
827 | /** |
---|
828 | * Inserts this node before this supplied node |
---|
829 | * |
---|
830 | * @param node {Node} the node to insert this node before |
---|
831 | * @return {Node} the inserted node |
---|
832 | */ |
---|
833 | insertBefore: function(node) { |
---|
834 | this.logger.log("insertBefore: " + node); |
---|
835 | var p = node.parent; |
---|
836 | if (p) { |
---|
837 | |
---|
838 | if (this.tree) { |
---|
839 | this.tree.popNode(this); |
---|
840 | } |
---|
841 | |
---|
842 | var refIndex = node.isChildOf(p); |
---|
843 | this.logger.log(refIndex); |
---|
844 | p.children.splice(refIndex, 0, this); |
---|
845 | if (node.previousSibling) { |
---|
846 | node.previousSibling.nextSibling = this; |
---|
847 | } |
---|
848 | this.previousSibling = node.previousSibling; |
---|
849 | this.nextSibling = node; |
---|
850 | node.previousSibling = this; |
---|
851 | |
---|
852 | this.applyParent(p); |
---|
853 | } |
---|
854 | |
---|
855 | return this; |
---|
856 | }, |
---|
857 | |
---|
858 | /** |
---|
859 | * Inserts this node after the supplied node |
---|
860 | * |
---|
861 | * @param node {Node} the node to insert after |
---|
862 | * @return {Node} the inserted node |
---|
863 | */ |
---|
864 | insertAfter: function(node) { |
---|
865 | this.logger.log("insertAfter: " + node); |
---|
866 | var p = node.parent; |
---|
867 | if (p) { |
---|
868 | |
---|
869 | if (this.tree) { |
---|
870 | this.tree.popNode(this); |
---|
871 | } |
---|
872 | |
---|
873 | var refIndex = node.isChildOf(p); |
---|
874 | this.logger.log(refIndex); |
---|
875 | |
---|
876 | if (!node.nextSibling) { |
---|
877 | return this.appendTo(p); |
---|
878 | } |
---|
879 | |
---|
880 | p.children.splice(refIndex + 1, 0, this); |
---|
881 | |
---|
882 | node.nextSibling.previousSibling = this; |
---|
883 | this.previousSibling = node; |
---|
884 | this.nextSibling = node.nextSibling; |
---|
885 | node.nextSibling = this; |
---|
886 | |
---|
887 | this.applyParent(p); |
---|
888 | } |
---|
889 | |
---|
890 | return this; |
---|
891 | }, |
---|
892 | |
---|
893 | /** |
---|
894 | * Returns true if the Node is a child of supplied Node |
---|
895 | * |
---|
896 | * @param parentNode {Node} the Node to check |
---|
897 | * @return {boolean} The node index if this Node is a child of |
---|
898 | * supplied Node, else -1. |
---|
899 | * @private |
---|
900 | */ |
---|
901 | isChildOf: function(parentNode) { |
---|
902 | if (parentNode && parentNode.children) { |
---|
903 | for (var i=0, len=parentNode.children.length; i<len ; ++i) { |
---|
904 | if (parentNode.children[i] === this) { |
---|
905 | return i; |
---|
906 | } |
---|
907 | } |
---|
908 | } |
---|
909 | |
---|
910 | return -1; |
---|
911 | }, |
---|
912 | |
---|
913 | /** |
---|
914 | * Returns a node array of this node's siblings, null if none. |
---|
915 | * |
---|
916 | * @return Node[] |
---|
917 | */ |
---|
918 | getSiblings: function() { |
---|
919 | return this.parent.children; |
---|
920 | }, |
---|
921 | |
---|
922 | /** |
---|
923 | * Shows this node's children |
---|
924 | */ |
---|
925 | showChildren: function() { |
---|
926 | if (!this.tree.animateExpand(this.getChildrenEl())) { |
---|
927 | if (this.hasChildren()) { |
---|
928 | this.getChildrenEl().style.display = ""; |
---|
929 | } |
---|
930 | } |
---|
931 | }, |
---|
932 | |
---|
933 | /** |
---|
934 | * Hides this node's children |
---|
935 | */ |
---|
936 | hideChildren: function() { |
---|
937 | this.logger.log("hiding " + this.index); |
---|
938 | |
---|
939 | if (!this.tree.animateCollapse(this.getChildrenEl())) { |
---|
940 | this.getChildrenEl().style.display = "none"; |
---|
941 | } |
---|
942 | }, |
---|
943 | |
---|
944 | /** |
---|
945 | * Returns the id for this node's container div |
---|
946 | * |
---|
947 | * @return {string} the element id |
---|
948 | */ |
---|
949 | getElId: function() { |
---|
950 | return "ygtv" + this.index; |
---|
951 | }, |
---|
952 | |
---|
953 | /** |
---|
954 | * Returns the id for this node's children div |
---|
955 | * |
---|
956 | * @return {string} the element id for this node's children div |
---|
957 | */ |
---|
958 | getChildrenElId: function() { |
---|
959 | return "ygtvc" + this.index; |
---|
960 | }, |
---|
961 | |
---|
962 | /** |
---|
963 | * Returns the id for this node's toggle element |
---|
964 | * |
---|
965 | * @return {string} the toggel element id |
---|
966 | */ |
---|
967 | getToggleElId: function() { |
---|
968 | return "ygtvt" + this.index; |
---|
969 | }, |
---|
970 | |
---|
971 | |
---|
972 | /** |
---|
973 | * Returns the id for this node's spacer image. The spacer is positioned |
---|
974 | * over the toggle and provides feedback for screen readers. |
---|
975 | * @return {string} the id for the spacer image |
---|
976 | */ |
---|
977 | /* |
---|
978 | getSpacerId: function() { |
---|
979 | return "ygtvspacer" + this.index; |
---|
980 | }, |
---|
981 | */ |
---|
982 | |
---|
983 | /** |
---|
984 | * Returns this node's container html element |
---|
985 | * @return {HTMLElement} the container html element |
---|
986 | */ |
---|
987 | getEl: function() { |
---|
988 | return document.getElementById(this.getElId()); |
---|
989 | }, |
---|
990 | |
---|
991 | /** |
---|
992 | * Returns the div that was generated for this node's children |
---|
993 | * @return {HTMLElement} this node's children div |
---|
994 | */ |
---|
995 | getChildrenEl: function() { |
---|
996 | return document.getElementById(this.getChildrenElId()); |
---|
997 | }, |
---|
998 | |
---|
999 | /** |
---|
1000 | * Returns the element that is being used for this node's toggle. |
---|
1001 | * @return {HTMLElement} this node's toggle html element |
---|
1002 | */ |
---|
1003 | getToggleEl: function() { |
---|
1004 | return document.getElementById(this.getToggleElId()); |
---|
1005 | }, |
---|
1006 | |
---|
1007 | /** |
---|
1008 | * Returns the element that is being used for this node's spacer. |
---|
1009 | * @return {HTMLElement} this node's spacer html element |
---|
1010 | */ |
---|
1011 | /* |
---|
1012 | getSpacer: function() { |
---|
1013 | return document.getElementById( this.getSpacerId() ) || {}; |
---|
1014 | }, |
---|
1015 | */ |
---|
1016 | |
---|
1017 | /* |
---|
1018 | getStateText: function() { |
---|
1019 | if (this.isLoading) { |
---|
1020 | return this.loadingText; |
---|
1021 | } else if (this.hasChildren(true)) { |
---|
1022 | if (this.expanded) { |
---|
1023 | return this.expandedText; |
---|
1024 | } else { |
---|
1025 | return this.collapsedText; |
---|
1026 | } |
---|
1027 | } else { |
---|
1028 | return ""; |
---|
1029 | } |
---|
1030 | }, |
---|
1031 | */ |
---|
1032 | |
---|
1033 | /** |
---|
1034 | * Generates the link that will invoke this node's toggle method |
---|
1035 | * @return {string} the javascript url for toggling this node |
---|
1036 | */ |
---|
1037 | getToggleLink: function() { |
---|
1038 | return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," + |
---|
1039 | this.index + ").toggle()"; |
---|
1040 | }, |
---|
1041 | |
---|
1042 | /** |
---|
1043 | * Hides this nodes children (creating them if necessary), changes the |
---|
1044 | * toggle style. |
---|
1045 | */ |
---|
1046 | collapse: function() { |
---|
1047 | // Only collapse if currently expanded |
---|
1048 | if (!this.expanded) { return; } |
---|
1049 | |
---|
1050 | // fire the collapse event handler |
---|
1051 | var ret = this.tree.onCollapse(this); |
---|
1052 | |
---|
1053 | if ("undefined" != typeof ret && !ret) { |
---|
1054 | this.logger.log("Collapse was stopped by the event handler"); |
---|
1055 | return; |
---|
1056 | } |
---|
1057 | |
---|
1058 | if (!this.getEl()) { |
---|
1059 | this.expanded = false; |
---|
1060 | return; |
---|
1061 | } |
---|
1062 | |
---|
1063 | // hide the child div |
---|
1064 | this.hideChildren(); |
---|
1065 | this.expanded = false; |
---|
1066 | |
---|
1067 | if (this.hasIcon) { |
---|
1068 | this.getToggleEl().className = this.getStyle(); |
---|
1069 | } |
---|
1070 | |
---|
1071 | // this.getSpacer().title = this.getStateText(); |
---|
1072 | |
---|
1073 | }, |
---|
1074 | |
---|
1075 | /** |
---|
1076 | * Shows this nodes children (creating them if necessary), changes the |
---|
1077 | * toggle style, and collapses its siblings if multiExpand is not set. |
---|
1078 | */ |
---|
1079 | expand: function() { |
---|
1080 | // Only expand if currently collapsed. |
---|
1081 | if (this.expanded) { return; } |
---|
1082 | |
---|
1083 | // fire the expand event handler |
---|
1084 | var ret = this.tree.onExpand(this); |
---|
1085 | |
---|
1086 | if ("undefined" != typeof ret && !ret) { |
---|
1087 | this.logger.log("Expand was stopped by the event handler"); |
---|
1088 | return; |
---|
1089 | } |
---|
1090 | |
---|
1091 | if (!this.getEl()) { |
---|
1092 | this.expanded = true; |
---|
1093 | return; |
---|
1094 | } |
---|
1095 | |
---|
1096 | if (! this.childrenRendered) { |
---|
1097 | this.logger.log("children not rendered yet"); |
---|
1098 | this.getChildrenEl().innerHTML = this.renderChildren(); |
---|
1099 | } else { |
---|
1100 | this.logger.log("CHILDREN RENDERED"); |
---|
1101 | } |
---|
1102 | |
---|
1103 | this.expanded = true; |
---|
1104 | if (this.hasIcon) { |
---|
1105 | this.getToggleEl().className = this.getStyle(); |
---|
1106 | } |
---|
1107 | |
---|
1108 | // this.getSpacer().title = this.getStateText(); |
---|
1109 | |
---|
1110 | // We do an extra check for children here because the lazy |
---|
1111 | // load feature can expose nodes that have no children. |
---|
1112 | |
---|
1113 | // if (!this.hasChildren()) { |
---|
1114 | if (this.isLoading) { |
---|
1115 | this.expanded = false; |
---|
1116 | return; |
---|
1117 | } |
---|
1118 | |
---|
1119 | if (! this.multiExpand) { |
---|
1120 | var sibs = this.getSiblings(); |
---|
1121 | for (var i=0; i<sibs.length; ++i) { |
---|
1122 | if (sibs[i] != this && sibs[i].expanded) { |
---|
1123 | sibs[i].collapse(); |
---|
1124 | } |
---|
1125 | } |
---|
1126 | } |
---|
1127 | |
---|
1128 | this.showChildren(); |
---|
1129 | }, |
---|
1130 | |
---|
1131 | /** |
---|
1132 | * Returns the css style name for the toggle |
---|
1133 | * |
---|
1134 | * @return {string} the css class for this node's toggle |
---|
1135 | */ |
---|
1136 | getStyle: function() { |
---|
1137 | // this.logger.log("No children, " + " isDyanmic: " + this.isDynamic() + " expanded: " + this.expanded); |
---|
1138 | if (this.isLoading) { |
---|
1139 | this.logger.log("returning the loading icon"); |
---|
1140 | return "ygtvloading"; |
---|
1141 | } else { |
---|
1142 | // location top or bottom, middle nodes also get the top style |
---|
1143 | var loc = (this.nextSibling) ? "t" : "l"; |
---|
1144 | |
---|
1145 | // type p=plus(expand), m=minus(collapase), n=none(no children) |
---|
1146 | var type = "n"; |
---|
1147 | if (this.hasChildren(true) || (this.isDynamic() && !this.getIconMode())) { |
---|
1148 | // if (this.hasChildren(true)) { |
---|
1149 | type = (this.expanded) ? "m" : "p"; |
---|
1150 | } |
---|
1151 | |
---|
1152 | // this.logger.log("ygtv" + loc + type); |
---|
1153 | return "ygtv" + loc + type; |
---|
1154 | } |
---|
1155 | }, |
---|
1156 | |
---|
1157 | /** |
---|
1158 | * Returns the hover style for the icon |
---|
1159 | * @return {string} the css class hover state |
---|
1160 | */ |
---|
1161 | getHoverStyle: function() { |
---|
1162 | var s = this.getStyle(); |
---|
1163 | if (this.hasChildren(true) && !this.isLoading) { |
---|
1164 | s += "h"; |
---|
1165 | } |
---|
1166 | return s; |
---|
1167 | }, |
---|
1168 | |
---|
1169 | /** |
---|
1170 | * Recursively expands all of this node's children. |
---|
1171 | */ |
---|
1172 | expandAll: function() { |
---|
1173 | for (var i=0;i<this.children.length;++i) { |
---|
1174 | var c = this.children[i]; |
---|
1175 | if (c.isDynamic()) { |
---|
1176 | alert("Not supported (lazy load + expand all)"); |
---|
1177 | break; |
---|
1178 | } else if (! c.multiExpand) { |
---|
1179 | alert("Not supported (no multi-expand + expand all)"); |
---|
1180 | break; |
---|
1181 | } else { |
---|
1182 | c.expand(); |
---|
1183 | c.expandAll(); |
---|
1184 | } |
---|
1185 | } |
---|
1186 | }, |
---|
1187 | |
---|
1188 | /** |
---|
1189 | * Recursively collapses all of this node's children. |
---|
1190 | */ |
---|
1191 | collapseAll: function() { |
---|
1192 | for (var i=0;i<this.children.length;++i) { |
---|
1193 | this.children[i].collapse(); |
---|
1194 | this.children[i].collapseAll(); |
---|
1195 | } |
---|
1196 | }, |
---|
1197 | |
---|
1198 | /** |
---|
1199 | * Configures this node for dynamically obtaining the child data |
---|
1200 | * when the node is first expanded. Calling it without the callback |
---|
1201 | * will turn off dynamic load for the node. |
---|
1202 | * |
---|
1203 | * @param fmDataLoader {function} the function that will be used to get the data. |
---|
1204 | * @param iconMode {int} configures the icon that is displayed when a dynamic |
---|
1205 | * load node is expanded the first time without children. By default, the |
---|
1206 | * "collapse" icon will be used. If set to 1, the leaf node icon will be |
---|
1207 | * displayed. |
---|
1208 | */ |
---|
1209 | setDynamicLoad: function(fnDataLoader, iconMode) { |
---|
1210 | if (fnDataLoader) { |
---|
1211 | this.dataLoader = fnDataLoader; |
---|
1212 | this._dynLoad = true; |
---|
1213 | } else { |
---|
1214 | this.dataLoader = null; |
---|
1215 | this._dynLoad = false; |
---|
1216 | } |
---|
1217 | |
---|
1218 | if (iconMode) { |
---|
1219 | this.iconMode = iconMode; |
---|
1220 | } |
---|
1221 | }, |
---|
1222 | |
---|
1223 | /** |
---|
1224 | * Evaluates if this node is the root node of the tree |
---|
1225 | * |
---|
1226 | * @return {boolean} true if this is the root node |
---|
1227 | */ |
---|
1228 | isRoot: function() { |
---|
1229 | return (this == this.tree.root); |
---|
1230 | }, |
---|
1231 | |
---|
1232 | /** |
---|
1233 | * Evaluates if this node's children should be loaded dynamically. Looks for |
---|
1234 | * the property both in this instance and the root node. If the tree is |
---|
1235 | * defined to load all children dynamically, the data callback function is |
---|
1236 | * defined in the root node |
---|
1237 | * |
---|
1238 | * @return {boolean} true if this node's children are to be loaded dynamically |
---|
1239 | */ |
---|
1240 | isDynamic: function() { |
---|
1241 | var lazy = (!this.isRoot() && (this._dynLoad || this.tree.root._dynLoad)); |
---|
1242 | // this.logger.log("isDynamic: " + lazy); |
---|
1243 | return lazy; |
---|
1244 | }, |
---|
1245 | |
---|
1246 | getIconMode: function() { |
---|
1247 | return (this.iconMode || this.tree.root.iconMode); |
---|
1248 | }, |
---|
1249 | |
---|
1250 | /** |
---|
1251 | * Checks if this node has children. If this node is lazy-loading and the |
---|
1252 | * children have not been rendered, we do not know whether or not there |
---|
1253 | * are actual children. In most cases, we need to assume that there are |
---|
1254 | * children (for instance, the toggle needs to show the expandable |
---|
1255 | * presentation state). In other times we want to know if there are rendered |
---|
1256 | * children. For the latter, "checkForLazyLoad" should be false. |
---|
1257 | * |
---|
1258 | * @param checkForLazyLoad {boolean} should we check for unloaded children? |
---|
1259 | * @return {boolean} true if this has children or if it might and we are |
---|
1260 | * checking for this condition. |
---|
1261 | */ |
---|
1262 | hasChildren: function(checkForLazyLoad) { |
---|
1263 | return ( this.children.length > 0 || |
---|
1264 | (checkForLazyLoad && this.isDynamic() && !this.dynamicLoadComplete) ); |
---|
1265 | }, |
---|
1266 | |
---|
1267 | /** |
---|
1268 | * Expands if node is collapsed, collapses otherwise. |
---|
1269 | */ |
---|
1270 | toggle: function() { |
---|
1271 | if (!this.tree.locked && ( this.hasChildren(true) || this.isDynamic()) ) { |
---|
1272 | if (this.expanded) { this.collapse(); } else { this.expand(); } |
---|
1273 | } |
---|
1274 | }, |
---|
1275 | |
---|
1276 | /** |
---|
1277 | * Returns the markup for this node and its children. |
---|
1278 | * |
---|
1279 | * @return {string} the markup for this node and its expanded children. |
---|
1280 | */ |
---|
1281 | getHtml: function() { |
---|
1282 | var sb = []; |
---|
1283 | sb[sb.length] = '<div class="ygtvitem" id="' + this.getElId() + '">'; |
---|
1284 | sb[sb.length] = this.getNodeHtml(); |
---|
1285 | sb[sb.length] = this.getChildrenHtml(); |
---|
1286 | sb[sb.length] = '</div>'; |
---|
1287 | return sb.join(""); |
---|
1288 | }, |
---|
1289 | |
---|
1290 | /** |
---|
1291 | * Called when first rendering the tree. We always build the div that will |
---|
1292 | * contain this nodes children, but we don't render the children themselves |
---|
1293 | * unless this node is expanded. |
---|
1294 | * |
---|
1295 | * @return {string} the children container div html and any expanded children |
---|
1296 | * @private |
---|
1297 | */ |
---|
1298 | getChildrenHtml: function() { |
---|
1299 | |
---|
1300 | var sb = []; |
---|
1301 | sb[sb.length] = '<div class="ygtvchildren"'; |
---|
1302 | sb[sb.length] = ' id="' + this.getChildrenElId() + '"'; |
---|
1303 | if (!this.expanded) { |
---|
1304 | sb[sb.length] = ' style="display:none;"'; |
---|
1305 | } |
---|
1306 | sb[sb.length] = '>'; |
---|
1307 | |
---|
1308 | // Don't render the actual child node HTML unless this node is expanded. |
---|
1309 | if ( (this.hasChildren(true) && this.expanded) || |
---|
1310 | (this.renderHidden && !this.isDynamic()) ) { |
---|
1311 | sb[sb.length] = this.renderChildren(); |
---|
1312 | } |
---|
1313 | |
---|
1314 | sb[sb.length] = '</div>'; |
---|
1315 | |
---|
1316 | return sb.join(""); |
---|
1317 | }, |
---|
1318 | |
---|
1319 | /** |
---|
1320 | * Generates the markup for the child nodes. This is not done until the node |
---|
1321 | * is expanded. |
---|
1322 | * |
---|
1323 | * @return {string} the html for this node's children |
---|
1324 | * @private |
---|
1325 | */ |
---|
1326 | renderChildren: function() { |
---|
1327 | |
---|
1328 | this.logger.log("rendering children for " + this.index); |
---|
1329 | |
---|
1330 | var node = this; |
---|
1331 | |
---|
1332 | if (this.isDynamic() && !this.dynamicLoadComplete) { |
---|
1333 | this.isLoading = true; |
---|
1334 | this.tree.locked = true; |
---|
1335 | |
---|
1336 | if (this.dataLoader) { |
---|
1337 | this.logger.log("Using dynamic loader defined for this node"); |
---|
1338 | |
---|
1339 | setTimeout( |
---|
1340 | function() { |
---|
1341 | node.dataLoader(node, |
---|
1342 | function() { |
---|
1343 | node.loadComplete(); |
---|
1344 | }); |
---|
1345 | }, 10); |
---|
1346 | |
---|
1347 | } else if (this.tree.root.dataLoader) { |
---|
1348 | this.logger.log("Using the tree-level dynamic loader"); |
---|
1349 | |
---|
1350 | setTimeout( |
---|
1351 | function() { |
---|
1352 | node.tree.root.dataLoader(node, |
---|
1353 | function() { |
---|
1354 | node.loadComplete(); |
---|
1355 | }); |
---|
1356 | }, 10); |
---|
1357 | |
---|
1358 | } else { |
---|
1359 | this.logger.log("no loader found"); |
---|
1360 | return "Error: data loader not found or not specified."; |
---|
1361 | } |
---|
1362 | |
---|
1363 | return ""; |
---|
1364 | |
---|
1365 | } else { |
---|
1366 | return this.completeRender(); |
---|
1367 | } |
---|
1368 | }, |
---|
1369 | |
---|
1370 | /** |
---|
1371 | * Called when we know we have all the child data. |
---|
1372 | * @return {string} children html |
---|
1373 | */ |
---|
1374 | completeRender: function() { |
---|
1375 | this.logger.log("completeRender: " + this.index + ", # of children: " + this.children.length); |
---|
1376 | var sb = []; |
---|
1377 | |
---|
1378 | for (var i=0; i < this.children.length; ++i) { |
---|
1379 | this.children[i].childrenRendered = false; |
---|
1380 | sb[sb.length] = this.children[i].getHtml(); |
---|
1381 | } |
---|
1382 | |
---|
1383 | this.childrenRendered = true; |
---|
1384 | |
---|
1385 | return sb.join(""); |
---|
1386 | }, |
---|
1387 | |
---|
1388 | /** |
---|
1389 | * Load complete is the callback function we pass to the data provider |
---|
1390 | * in dynamic load situations. |
---|
1391 | */ |
---|
1392 | loadComplete: function() { |
---|
1393 | this.logger.log("loadComplete: " + this.index); |
---|
1394 | this.getChildrenEl().innerHTML = this.completeRender(); |
---|
1395 | this.dynamicLoadComplete = true; |
---|
1396 | this.isLoading = false; |
---|
1397 | this.expand(); |
---|
1398 | this.tree.locked = false; |
---|
1399 | }, |
---|
1400 | |
---|
1401 | /** |
---|
1402 | * Returns this node's ancestor at the specified depth. |
---|
1403 | * |
---|
1404 | * @param {int} depth the depth of the ancestor. |
---|
1405 | * @return {Node} the ancestor |
---|
1406 | */ |
---|
1407 | getAncestor: function(depth) { |
---|
1408 | if (depth >= this.depth || depth < 0) { |
---|
1409 | this.logger.log("illegal getAncestor depth: " + depth); |
---|
1410 | return null; |
---|
1411 | } |
---|
1412 | |
---|
1413 | var p = this.parent; |
---|
1414 | |
---|
1415 | while (p.depth > depth) { |
---|
1416 | p = p.parent; |
---|
1417 | } |
---|
1418 | |
---|
1419 | return p; |
---|
1420 | }, |
---|
1421 | |
---|
1422 | /** |
---|
1423 | * Returns the css class for the spacer at the specified depth for |
---|
1424 | * this node. If this node's ancestor at the specified depth |
---|
1425 | * has a next sibling the presentation is different than if it |
---|
1426 | * does not have a next sibling |
---|
1427 | * |
---|
1428 | * @param {int} depth the depth of the ancestor. |
---|
1429 | * @return {string} the css class for the spacer |
---|
1430 | */ |
---|
1431 | getDepthStyle: function(depth) { |
---|
1432 | return (this.getAncestor(depth).nextSibling) ? |
---|
1433 | "ygtvdepthcell" : "ygtvblankdepthcell"; |
---|
1434 | }, |
---|
1435 | |
---|
1436 | /** |
---|
1437 | * Get the markup for the node. This is designed to be overrided so that we can |
---|
1438 | * support different types of nodes. |
---|
1439 | * |
---|
1440 | * @return {string} The HTML that will render this node. |
---|
1441 | */ |
---|
1442 | getNodeHtml: function() { |
---|
1443 | this.logger.log("Generating html"); |
---|
1444 | return ""; |
---|
1445 | }, |
---|
1446 | |
---|
1447 | /** |
---|
1448 | * Regenerates the html for this node and its children. To be used when the |
---|
1449 | * node is expanded and new children have been added. |
---|
1450 | */ |
---|
1451 | refresh: function() { |
---|
1452 | // this.loadComplete(); |
---|
1453 | this.getChildrenEl().innerHTML = this.completeRender(); |
---|
1454 | |
---|
1455 | if (this.hasIcon) { |
---|
1456 | var el = this.getToggleEl(); |
---|
1457 | if (el) { |
---|
1458 | el.className = this.getStyle(); |
---|
1459 | } |
---|
1460 | } |
---|
1461 | }, |
---|
1462 | |
---|
1463 | /** |
---|
1464 | * toString |
---|
1465 | * @return {string} string representation of the node |
---|
1466 | */ |
---|
1467 | toString: function() { |
---|
1468 | return "Node (" + this.index + ")"; |
---|
1469 | } |
---|
1470 | |
---|
1471 | }; |
---|
1472 | |
---|
1473 | /** |
---|
1474 | * A custom YAHOO.widget.Node that handles the unique nature of |
---|
1475 | * the virtual, presentationless root node. |
---|
1476 | * |
---|
1477 | * @extends YAHOO.widget.Node |
---|
1478 | * @constructor |
---|
1479 | */ |
---|
1480 | YAHOO.widget.RootNode = function(oTree) { |
---|
1481 | // Initialize the node with null params. The root node is a |
---|
1482 | // special case where the node has no presentation. So we have |
---|
1483 | // to alter the standard properties a bit. |
---|
1484 | this.init(null, null, true); |
---|
1485 | |
---|
1486 | /** |
---|
1487 | * For the root node, we get the tree reference from as a param |
---|
1488 | * to the constructor instead of from the parent element. |
---|
1489 | * |
---|
1490 | * @type TreeView |
---|
1491 | */ |
---|
1492 | this.tree = oTree; |
---|
1493 | }; |
---|
1494 | |
---|
1495 | YAHOO.widget.RootNode.prototype = new YAHOO.widget.Node(); |
---|
1496 | |
---|
1497 | // overrides YAHOO.widget.Node |
---|
1498 | YAHOO.widget.RootNode.prototype.getNodeHtml = function() { |
---|
1499 | return ""; |
---|
1500 | }; |
---|
1501 | |
---|
1502 | YAHOO.widget.RootNode.prototype.toString = function() { |
---|
1503 | return "RootNode"; |
---|
1504 | }; |
---|
1505 | |
---|
1506 | YAHOO.widget.RootNode.prototype.loadComplete = function() { |
---|
1507 | this.tree.draw(); |
---|
1508 | }; |
---|
1509 | /** |
---|
1510 | * The default node presentation. The first parameter should be |
---|
1511 | * either a string that will be used as the node's label, or an object |
---|
1512 | * that has a string propery called label. By default, the clicking the |
---|
1513 | * label will toggle the expanded/collapsed state of the node. By |
---|
1514 | * changing the href property of the instance, this behavior can be |
---|
1515 | * changed so that the label will go to the specified href. |
---|
1516 | * |
---|
1517 | * @extends YAHOO.widget.Node |
---|
1518 | * @constructor |
---|
1519 | * @param oData {object} a string or object containing the data that will |
---|
1520 | * be used to render this node |
---|
1521 | * @param oParent {YAHOO.widget.Node} this node's parent node |
---|
1522 | * @param expanded {boolean} the initial expanded/collapsed state |
---|
1523 | */ |
---|
1524 | YAHOO.widget.TextNode = function(oData, oParent, expanded) { |
---|
1525 | // this.type = "TextNode"; |
---|
1526 | |
---|
1527 | if (oData) { |
---|
1528 | this.init(oData, oParent, expanded); |
---|
1529 | this.setUpLabel(oData); |
---|
1530 | } |
---|
1531 | |
---|
1532 | /** |
---|
1533 | * @private |
---|
1534 | */ |
---|
1535 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
1536 | }; |
---|
1537 | |
---|
1538 | YAHOO.widget.TextNode.prototype = new YAHOO.widget.Node(); |
---|
1539 | |
---|
1540 | /** |
---|
1541 | * The CSS class for the label href. Defaults to ygtvlabel, but can be |
---|
1542 | * overridden to provide a custom presentation for a specific node. |
---|
1543 | * |
---|
1544 | * @type string |
---|
1545 | */ |
---|
1546 | YAHOO.widget.TextNode.prototype.labelStyle = "ygtvlabel"; |
---|
1547 | |
---|
1548 | /** |
---|
1549 | * The derived element id of the label for this node |
---|
1550 | * |
---|
1551 | * @type string |
---|
1552 | */ |
---|
1553 | YAHOO.widget.TextNode.prototype.labelElId = null; |
---|
1554 | |
---|
1555 | /** |
---|
1556 | * The text for the label. It is assumed that the oData parameter will |
---|
1557 | * either be a string that will be used as the label, or an object that |
---|
1558 | * has a property called "label" that we will use. |
---|
1559 | * |
---|
1560 | * @type string |
---|
1561 | */ |
---|
1562 | YAHOO.widget.TextNode.prototype.label = null; |
---|
1563 | |
---|
1564 | /** |
---|
1565 | * Sets up the node label |
---|
1566 | * |
---|
1567 | * @param oData string containing the label, or an object with a label property |
---|
1568 | */ |
---|
1569 | YAHOO.widget.TextNode.prototype.setUpLabel = function(oData) { |
---|
1570 | if (typeof oData == "string") { |
---|
1571 | oData = { label: oData }; |
---|
1572 | } |
---|
1573 | this.label = oData.label; |
---|
1574 | |
---|
1575 | // update the link |
---|
1576 | if (oData.href) { |
---|
1577 | this.href = oData.href; |
---|
1578 | } |
---|
1579 | |
---|
1580 | // set the target |
---|
1581 | if (oData.target) { |
---|
1582 | this.target = oData.target; |
---|
1583 | } |
---|
1584 | |
---|
1585 | if (oData.style) { |
---|
1586 | this.labelStyle = oData.style; |
---|
1587 | } |
---|
1588 | |
---|
1589 | this.labelElId = "ygtvlabelel" + this.index; |
---|
1590 | }; |
---|
1591 | |
---|
1592 | /** |
---|
1593 | * Returns the label element |
---|
1594 | * |
---|
1595 | * @return {object} the element |
---|
1596 | */ |
---|
1597 | YAHOO.widget.TextNode.prototype.getLabelEl = function() { |
---|
1598 | return document.getElementById(this.labelElId); |
---|
1599 | }; |
---|
1600 | |
---|
1601 | // overrides YAHOO.widget.Node |
---|
1602 | YAHOO.widget.TextNode.prototype.getNodeHtml = function() { |
---|
1603 | this.logger.log("Generating html"); |
---|
1604 | var sb = []; |
---|
1605 | |
---|
1606 | sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">'; |
---|
1607 | sb[sb.length] = '<tr>'; |
---|
1608 | |
---|
1609 | for (i=0;i<this.depth;++i) { |
---|
1610 | // sb[sb.length] = '<td class="ygtvdepthcell"> </td>'; |
---|
1611 | sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"> </td>'; |
---|
1612 | } |
---|
1613 | |
---|
1614 | var getNode = 'YAHOO.widget.TreeView.getNode(\'' + |
---|
1615 | this.tree.id + '\',' + this.index + ')'; |
---|
1616 | |
---|
1617 | sb[sb.length] = '<td'; |
---|
1618 | // sb[sb.length] = ' onselectstart="return false"'; |
---|
1619 | sb[sb.length] = ' id="' + this.getToggleElId() + '"'; |
---|
1620 | sb[sb.length] = ' class="' + this.getStyle() + '"'; |
---|
1621 | if (this.hasChildren(true)) { |
---|
1622 | sb[sb.length] = ' onmouseover="this.className='; |
---|
1623 | sb[sb.length] = getNode + '.getHoverStyle()"'; |
---|
1624 | sb[sb.length] = ' onmouseout="this.className='; |
---|
1625 | sb[sb.length] = getNode + '.getStyle()"'; |
---|
1626 | } |
---|
1627 | sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">'; |
---|
1628 | |
---|
1629 | /* |
---|
1630 | sb[sb.length] = '<img id="' + this.getSpacerId() + '"'; |
---|
1631 | sb[sb.length] = ' alt=""'; |
---|
1632 | sb[sb.length] = ' tabindex=0'; |
---|
1633 | sb[sb.length] = ' src="' + this.spacerPath + '"'; |
---|
1634 | sb[sb.length] = ' title="' + this.getStateText() + '"'; |
---|
1635 | sb[sb.length] = ' class="ygtvspacer"'; |
---|
1636 | // sb[sb.length] = ' onkeypress="return ' + getNode + '".onKeyPress()"'; |
---|
1637 | sb[sb.length] = ' />'; |
---|
1638 | */ |
---|
1639 | |
---|
1640 | sb[sb.length] = ' '; |
---|
1641 | |
---|
1642 | sb[sb.length] = '</td>'; |
---|
1643 | sb[sb.length] = '<td>'; |
---|
1644 | sb[sb.length] = '<a'; |
---|
1645 | sb[sb.length] = ' id="' + this.labelElId + '"'; |
---|
1646 | sb[sb.length] = ' class="' + this.labelStyle + '"'; |
---|
1647 | sb[sb.length] = ' href="' + this.href + '"'; |
---|
1648 | sb[sb.length] = ' target="' + this.target + '"'; |
---|
1649 | sb[sb.length] = ' onclick="return ' + getNode + '.onLabelClick(' + getNode +')"'; |
---|
1650 | if (this.hasChildren(true)) { |
---|
1651 | sb[sb.length] = ' onmouseover="document.getElementById(\''; |
---|
1652 | sb[sb.length] = this.getToggleElId() + '\').className='; |
---|
1653 | sb[sb.length] = getNode + '.getHoverStyle()"'; |
---|
1654 | sb[sb.length] = ' onmouseout="document.getElementById(\''; |
---|
1655 | sb[sb.length] = this.getToggleElId() + '\').className='; |
---|
1656 | sb[sb.length] = getNode + '.getStyle()"'; |
---|
1657 | } |
---|
1658 | sb[sb.length] = ' >'; |
---|
1659 | sb[sb.length] = this.label; |
---|
1660 | sb[sb.length] = '</a>'; |
---|
1661 | sb[sb.length] = '</td>'; |
---|
1662 | sb[sb.length] = '</tr>'; |
---|
1663 | sb[sb.length] = '</table>'; |
---|
1664 | |
---|
1665 | return sb.join(""); |
---|
1666 | }; |
---|
1667 | |
---|
1668 | |
---|
1669 | /** |
---|
1670 | * Executed when the label is clicked |
---|
1671 | * @param me {Node} this node |
---|
1672 | * @scope the anchor tag clicked |
---|
1673 | * @return false to cancel the anchor click |
---|
1674 | */ |
---|
1675 | YAHOO.widget.TextNode.prototype.onLabelClick = function(me) { |
---|
1676 | me.logger.log("onLabelClick " + this.label); |
---|
1677 | //return true; |
---|
1678 | }; |
---|
1679 | |
---|
1680 | YAHOO.widget.TextNode.prototype.toString = function() { |
---|
1681 | return "TextNode (" + this.index + ") " + this.label; |
---|
1682 | }; |
---|
1683 | |
---|
1684 | /** |
---|
1685 | * A menu-specific implementation that differs from TextNode in that only |
---|
1686 | * one sibling can be expanded at a time. |
---|
1687 | * @extends YAHOO.widget.TextNode |
---|
1688 | * @constructor |
---|
1689 | */ |
---|
1690 | YAHOO.widget.MenuNode = function(oData, oParent, expanded) { |
---|
1691 | if (oData) { |
---|
1692 | this.init(oData, oParent, expanded); |
---|
1693 | this.setUpLabel(oData); |
---|
1694 | } |
---|
1695 | |
---|
1696 | /** |
---|
1697 | * Menus usually allow only one branch to be open at a time. |
---|
1698 | * @type boolean |
---|
1699 | */ |
---|
1700 | this.multiExpand = false; |
---|
1701 | |
---|
1702 | /** |
---|
1703 | * @private |
---|
1704 | */ |
---|
1705 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
1706 | |
---|
1707 | }; |
---|
1708 | |
---|
1709 | YAHOO.widget.MenuNode.prototype = new YAHOO.widget.TextNode(); |
---|
1710 | |
---|
1711 | YAHOO.widget.MenuNode.prototype.toString = function() { |
---|
1712 | return "MenuNode (" + this.index + ") " + this.label; |
---|
1713 | }; |
---|
1714 | |
---|
1715 | /** |
---|
1716 | * This implementation takes either a string or object for the |
---|
1717 | * oData argument. If is it a string, we will use it for the display |
---|
1718 | * of this node (and it can contain any html code). If the parameter |
---|
1719 | * is an object, we look for a parameter called "html" that will be |
---|
1720 | * used for this node's display. |
---|
1721 | * |
---|
1722 | * @extends YAHOO.widget.Node |
---|
1723 | * @constructor |
---|
1724 | * @param oData {object} a string or object containing the data that will |
---|
1725 | * be used to render this node |
---|
1726 | * @param oParent {YAHOO.widget.Node} this node's parent node |
---|
1727 | * @param expanded {boolean} the initial expanded/collapsed state |
---|
1728 | * @param hasIcon {boolean} specifies whether or not leaf nodes should |
---|
1729 | * have an icon |
---|
1730 | */ |
---|
1731 | YAHOO.widget.HTMLNode = function(oData, oParent, expanded, hasIcon) { |
---|
1732 | if (oData) { |
---|
1733 | this.init(oData, oParent, expanded); |
---|
1734 | this.initContent(oData, hasIcon); |
---|
1735 | } |
---|
1736 | }; |
---|
1737 | |
---|
1738 | YAHOO.widget.HTMLNode.prototype = new YAHOO.widget.Node(); |
---|
1739 | |
---|
1740 | /** |
---|
1741 | * The CSS class for the html content container. Defaults to ygtvhtml, but |
---|
1742 | * can be overridden to provide a custom presentation for a specific node. |
---|
1743 | * |
---|
1744 | * @type string |
---|
1745 | */ |
---|
1746 | YAHOO.widget.HTMLNode.prototype.contentStyle = "ygtvhtml"; |
---|
1747 | |
---|
1748 | /** |
---|
1749 | * The generated id that will contain the data passed in by the implementer. |
---|
1750 | * |
---|
1751 | * @type string |
---|
1752 | */ |
---|
1753 | YAHOO.widget.HTMLNode.prototype.contentElId = null; |
---|
1754 | |
---|
1755 | /** |
---|
1756 | * The HTML content to use for this node's display |
---|
1757 | * |
---|
1758 | * @type string |
---|
1759 | */ |
---|
1760 | YAHOO.widget.HTMLNode.prototype.content = null; |
---|
1761 | |
---|
1762 | /** |
---|
1763 | * Sets up the node label |
---|
1764 | * |
---|
1765 | * @param {object} An html string or object containing an html property |
---|
1766 | * @param {boolean} hasIcon determines if the node will be rendered with an |
---|
1767 | * icon or not |
---|
1768 | */ |
---|
1769 | YAHOO.widget.HTMLNode.prototype.initContent = function(oData, hasIcon) { |
---|
1770 | if (typeof oData == "string") { |
---|
1771 | oData = { html: oData }; |
---|
1772 | } |
---|
1773 | |
---|
1774 | this.html = oData.html; |
---|
1775 | this.contentElId = "ygtvcontentel" + this.index; |
---|
1776 | this.hasIcon = hasIcon; |
---|
1777 | |
---|
1778 | /** |
---|
1779 | * @private |
---|
1780 | */ |
---|
1781 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
1782 | }; |
---|
1783 | |
---|
1784 | /** |
---|
1785 | * Returns the outer html element for this node's content |
---|
1786 | * |
---|
1787 | * @return {HTMLElement} the element |
---|
1788 | */ |
---|
1789 | YAHOO.widget.HTMLNode.prototype.getContentEl = function() { |
---|
1790 | return document.getElementById(this.contentElId); |
---|
1791 | }; |
---|
1792 | |
---|
1793 | // overrides YAHOO.widget.Node |
---|
1794 | YAHOO.widget.HTMLNode.prototype.getNodeHtml = function() { |
---|
1795 | this.logger.log("Generating html"); |
---|
1796 | var sb = []; |
---|
1797 | |
---|
1798 | sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">'; |
---|
1799 | sb[sb.length] = '<tr>'; |
---|
1800 | |
---|
1801 | for (i=0;i<this.depth;++i) { |
---|
1802 | sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"> </td>'; |
---|
1803 | } |
---|
1804 | |
---|
1805 | if (this.hasIcon) { |
---|
1806 | sb[sb.length] = '<td'; |
---|
1807 | sb[sb.length] = ' id="' + this.getToggleElId() + '"'; |
---|
1808 | sb[sb.length] = ' class="' + this.getStyle() + '"'; |
---|
1809 | sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"'; |
---|
1810 | if (this.hasChildren(true)) { |
---|
1811 | sb[sb.length] = ' onmouseover="this.className='; |
---|
1812 | sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\''; |
---|
1813 | sb[sb.length] = this.tree.id + '\',' + this.index + ').getHoverStyle()"'; |
---|
1814 | sb[sb.length] = ' onmouseout="this.className='; |
---|
1815 | sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\''; |
---|
1816 | sb[sb.length] = this.tree.id + '\',' + this.index + ').getStyle()"'; |
---|
1817 | } |
---|
1818 | sb[sb.length] = '> </td>'; |
---|
1819 | } |
---|
1820 | |
---|
1821 | sb[sb.length] = '<td'; |
---|
1822 | sb[sb.length] = ' id="' + this.contentElId + '"'; |
---|
1823 | sb[sb.length] = ' class="' + this.contentStyle + '"'; |
---|
1824 | sb[sb.length] = ' >'; |
---|
1825 | sb[sb.length] = this.html; |
---|
1826 | sb[sb.length] = '</td>'; |
---|
1827 | sb[sb.length] = '</tr>'; |
---|
1828 | sb[sb.length] = '</table>'; |
---|
1829 | |
---|
1830 | return sb.join(""); |
---|
1831 | }; |
---|
1832 | |
---|
1833 | YAHOO.widget.HTMLNode.prototype.toString = function() { |
---|
1834 | return "HTMLNode (" + this.index + ")"; |
---|
1835 | }; |
---|
1836 | |
---|
1837 | /** |
---|
1838 | * A static factory class for tree view expand/collapse animations |
---|
1839 | * |
---|
1840 | * @constructor |
---|
1841 | */ |
---|
1842 | YAHOO.widget.TVAnim = function() { |
---|
1843 | return { |
---|
1844 | /** |
---|
1845 | * Constant for the fade in animation |
---|
1846 | * |
---|
1847 | * @type string |
---|
1848 | */ |
---|
1849 | FADE_IN: "TVFadeIn", |
---|
1850 | |
---|
1851 | /** |
---|
1852 | * Constant for the fade out animation |
---|
1853 | * |
---|
1854 | * @type string |
---|
1855 | */ |
---|
1856 | FADE_OUT: "TVFadeOut", |
---|
1857 | |
---|
1858 | /** |
---|
1859 | * Returns a ygAnim instance of the given type |
---|
1860 | * |
---|
1861 | * @param type {string} the type of animation |
---|
1862 | * @param el {HTMLElement} the element to element (probably the children div) |
---|
1863 | * @param callback {function} function to invoke when the animation is done. |
---|
1864 | * @return {YAHOO.util.Animation} the animation instance |
---|
1865 | */ |
---|
1866 | getAnim: function(type, el, callback) { |
---|
1867 | if (YAHOO.widget[type]) { |
---|
1868 | return new YAHOO.widget[type](el, callback); |
---|
1869 | } else { |
---|
1870 | return null; |
---|
1871 | } |
---|
1872 | }, |
---|
1873 | |
---|
1874 | /** |
---|
1875 | * Returns true if the specified animation class is available |
---|
1876 | * |
---|
1877 | * @param type {string} the type of animation |
---|
1878 | * @return {boolean} true if valid, false if not |
---|
1879 | */ |
---|
1880 | isValid: function(type) { |
---|
1881 | return (YAHOO.widget[type]); |
---|
1882 | } |
---|
1883 | }; |
---|
1884 | } (); |
---|
1885 | |
---|
1886 | /** |
---|
1887 | * A 1/2 second fade-in animation. |
---|
1888 | * |
---|
1889 | * @constructor |
---|
1890 | * @param el {HTMLElement} the element to animate |
---|
1891 | * @param callback {function} function to invoke when the animation is finished |
---|
1892 | */ |
---|
1893 | YAHOO.widget.TVFadeIn = function(el, callback) { |
---|
1894 | /** |
---|
1895 | * The element to animate |
---|
1896 | * @type HTMLElement |
---|
1897 | */ |
---|
1898 | this.el = el; |
---|
1899 | |
---|
1900 | /** |
---|
1901 | * the callback to invoke when the animation is complete |
---|
1902 | * |
---|
1903 | * @type function |
---|
1904 | */ |
---|
1905 | this.callback = callback; |
---|
1906 | |
---|
1907 | /** |
---|
1908 | * @private |
---|
1909 | */ |
---|
1910 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
1911 | }; |
---|
1912 | |
---|
1913 | /** |
---|
1914 | * Performs the animation |
---|
1915 | */ |
---|
1916 | YAHOO.widget.TVFadeIn.prototype = { |
---|
1917 | animate: function() { |
---|
1918 | var tvanim = this; |
---|
1919 | |
---|
1920 | var s = this.el.style; |
---|
1921 | s.opacity = 0.1; |
---|
1922 | s.filter = "alpha(opacity=10)"; |
---|
1923 | s.display = ""; |
---|
1924 | |
---|
1925 | // var dur = ( navigator.userAgent.match(/msie/gi) ) ? 0.05 : 0.4; |
---|
1926 | var dur = 0.4; |
---|
1927 | // this.logger.log("duration: " + dur); |
---|
1928 | // var a = new ygAnim_Fade(this.el, dur, 1); |
---|
1929 | // a.setStart(0.1); |
---|
1930 | // a.onComplete = function() { tvanim.onComplete(); }; |
---|
1931 | |
---|
1932 | // var a = new YAHOO.util.Anim(this.el, 'opacity', 0.1, 1); |
---|
1933 | var a = new YAHOO.util.Anim(this.el, {opacity: {from: 0.1, to: 1, unit:""}}, dur); |
---|
1934 | a.onComplete.subscribe( function() { tvanim.onComplete(); } ); |
---|
1935 | a.animate(); |
---|
1936 | }, |
---|
1937 | |
---|
1938 | /** |
---|
1939 | * Clean up and invoke callback |
---|
1940 | */ |
---|
1941 | onComplete: function() { |
---|
1942 | this.callback(); |
---|
1943 | }, |
---|
1944 | |
---|
1945 | toString: function() { |
---|
1946 | return "TVFadeIn"; |
---|
1947 | } |
---|
1948 | }; |
---|
1949 | |
---|
1950 | /** |
---|
1951 | * A 1/2 second fade out animation. |
---|
1952 | * |
---|
1953 | * @constructor |
---|
1954 | * @param el {HTMLElement} the element to animate |
---|
1955 | * @param callback {Function} function to invoke when the animation is finished |
---|
1956 | */ |
---|
1957 | YAHOO.widget.TVFadeOut = function(el, callback) { |
---|
1958 | /** |
---|
1959 | * The element to animate |
---|
1960 | * @type HTMLElement |
---|
1961 | */ |
---|
1962 | this.el = el; |
---|
1963 | |
---|
1964 | /** |
---|
1965 | * the callback to invoke when the animation is complete |
---|
1966 | * |
---|
1967 | * @type function |
---|
1968 | */ |
---|
1969 | this.callback = callback; |
---|
1970 | |
---|
1971 | /** |
---|
1972 | * @private |
---|
1973 | */ |
---|
1974 | this.logger = new YAHOO.widget.LogWriter(this.toString()); |
---|
1975 | }; |
---|
1976 | |
---|
1977 | /** |
---|
1978 | * Performs the animation |
---|
1979 | */ |
---|
1980 | YAHOO.widget.TVFadeOut.prototype = { |
---|
1981 | animate: function() { |
---|
1982 | var tvanim = this; |
---|
1983 | // var dur = ( navigator.userAgent.match(/msie/gi) ) ? 0.05 : 0.4; |
---|
1984 | var dur = 0.4; |
---|
1985 | // this.logger.log("duration: " + dur); |
---|
1986 | // var a = new ygAnim_Fade(this.el, dur, 0.1); |
---|
1987 | // a.onComplete = function() { tvanim.onComplete(); }; |
---|
1988 | |
---|
1989 | // var a = new YAHOO.util.Anim(this.el, 'opacity', 1, 0.1); |
---|
1990 | var a = new YAHOO.util.Anim(this.el, {opacity: {from: 1, to: 0.1, unit:""}}, dur); |
---|
1991 | a.onComplete.subscribe( function() { tvanim.onComplete(); } ); |
---|
1992 | a.animate(); |
---|
1993 | }, |
---|
1994 | |
---|
1995 | /** |
---|
1996 | * Clean up and invoke callback |
---|
1997 | */ |
---|
1998 | onComplete: function() { |
---|
1999 | var s = this.el.style; |
---|
2000 | s.display = "none"; |
---|
2001 | // s.opacity = 1; |
---|
2002 | s.filter = "alpha(opacity=100)"; |
---|
2003 | this.callback(); |
---|
2004 | }, |
---|
2005 | |
---|
2006 | toString: function() { |
---|
2007 | return "TVFadeOut"; |
---|
2008 | } |
---|
2009 | }; |
---|
2010 | |
---|