]>
Commit | Line | Data |
---|---|---|
f0cfe83e AD |
1 | require({cache:{ |
2 | 'url:dijit/templates/TreeNode.html':"<div class=\"dijitTreeNode\" role=\"presentation\"\n\t><div data-dojo-attach-point=\"rowNode\" class=\"dijitTreeRow dijitInline\" role=\"presentation\"\n\t\t><div data-dojo-attach-point=\"indentNode\" class=\"dijitInline\"></div\n\t\t><img src=\"${_blankGif}\" alt=\"\" data-dojo-attach-point=\"expandoNode\" class=\"dijitTreeExpando\" role=\"presentation\"\n\t\t/><span data-dojo-attach-point=\"expandoNodeText\" class=\"dijitExpandoText\" role=\"presentation\"\n\t\t></span\n\t\t><span data-dojo-attach-point=\"contentNode\"\n\t\t\tclass=\"dijitTreeContent\" role=\"presentation\">\n\t\t\t<img src=\"${_blankGif}\" alt=\"\" data-dojo-attach-point=\"iconNode\" class=\"dijitIcon dijitTreeIcon\" role=\"presentation\"\n\t\t\t/><span data-dojo-attach-point=\"labelNode\" class=\"dijitTreeLabel\" role=\"treeitem\" tabindex=\"-1\" aria-selected=\"false\"></span>\n\t\t</span\n\t></div>\n\t<div data-dojo-attach-point=\"containerNode\" class=\"dijitTreeContainer\" role=\"presentation\" style=\"display: none;\"></div>\n</div>\n", | |
3 | 'url:dijit/templates/Tree.html':"<div class=\"dijitTree dijitTreeContainer\" role=\"tree\">\n\t<div class=\"dijitInline dijitTreeIndent\" style=\"position: absolute; top: -9999px\" data-dojo-attach-point=\"indentDetector\"></div>\n</div>\n"}}); | |
4 | define("dijit/Tree", [ | |
5 | "dojo/_base/array", // array.filter array.forEach array.map | |
6 | "dojo/_base/connect", // connect.isCopyKey() | |
7 | "dojo/cookie", // cookie | |
8 | "dojo/_base/declare", // declare | |
9 | "dojo/Deferred", // Deferred | |
10 | "dojo/DeferredList", // DeferredList | |
11 | "dojo/dom", // dom.isDescendant | |
12 | "dojo/dom-class", // domClass.add domClass.remove domClass.replace domClass.toggle | |
13 | "dojo/dom-geometry", // domGeometry.setMarginBox domGeometry.position | |
14 | "dojo/dom-style",// domStyle.set | |
15 | "dojo/_base/event", // event.stop | |
16 | "dojo/errors/create", // createError | |
17 | "dojo/fx", // fxUtils.wipeIn fxUtils.wipeOut | |
18 | "dojo/_base/kernel", // kernel.deprecated | |
19 | "dojo/keys", // arrows etc. | |
20 | "dojo/_base/lang", // lang.getObject lang.mixin lang.hitch | |
21 | "dojo/on", // on(), on.selector() | |
22 | "dojo/topic", | |
23 | "dojo/touch", | |
24 | "dojo/when", | |
25 | "./focus", | |
26 | "./registry", // registry.byNode(), registry.getEnclosingWidget() | |
27 | "./_base/manager", // manager.defaultDuration | |
28 | "./_Widget", | |
29 | "./_TemplatedMixin", | |
30 | "./_Container", | |
31 | "./_Contained", | |
32 | "./_CssStateMixin", | |
33 | "dojo/text!./templates/TreeNode.html", | |
34 | "dojo/text!./templates/Tree.html", | |
35 | "./tree/TreeStoreModel", | |
36 | "./tree/ForestStoreModel", | |
37 | "./tree/_dndSelector" | |
38 | ], function(array, connect, cookie, declare, Deferred, DeferredList, | |
39 | dom, domClass, domGeometry, domStyle, event, createError, fxUtils, kernel, keys, lang, on, topic, touch, when, | |
40 | focus, registry, manager, _Widget, _TemplatedMixin, _Container, _Contained, _CssStateMixin, | |
41 | treeNodeTemplate, treeTemplate, TreeStoreModel, ForestStoreModel, _dndSelector){ | |
42 | ||
43 | // module: | |
44 | // dijit/Tree | |
45 | ||
46 | // Back-compat shim | |
47 | Deferred = declare(Deferred, { | |
48 | addCallback: function(callback){ this.then(callback); }, | |
49 | addErrback: function(errback){ this.then(null, errback); } | |
50 | }); | |
51 | ||
52 | var TreeNode = declare( | |
53 | "dijit._TreeNode", | |
54 | [_Widget, _TemplatedMixin, _Container, _Contained, _CssStateMixin], | |
55 | { | |
56 | // summary: | |
57 | // Single node within a tree. This class is used internally | |
58 | // by Tree and should not be accessed directly. | |
59 | // tags: | |
60 | // private | |
61 | ||
62 | // item: [const] Item | |
63 | // the dojo.data entry this tree represents | |
64 | item: null, | |
65 | ||
66 | // isTreeNode: [protected] Boolean | |
67 | // Indicates that this is a TreeNode. Used by `dijit.Tree` only, | |
68 | // should not be accessed directly. | |
69 | isTreeNode: true, | |
70 | ||
71 | // label: String | |
72 | // Text of this tree node | |
73 | label: "", | |
74 | _setLabelAttr: {node: "labelNode", type: "innerText"}, | |
75 | ||
76 | // isExpandable: [private] Boolean | |
77 | // This node has children, so show the expando node (+ sign) | |
78 | isExpandable: null, | |
79 | ||
80 | // isExpanded: [readonly] Boolean | |
81 | // This node is currently expanded (ie, opened) | |
82 | isExpanded: false, | |
83 | ||
84 | // state: [private] String | |
85 | // Dynamic loading-related stuff. | |
86 | // When an empty folder node appears, it is "UNCHECKED" first, | |
87 | // then after dojo.data query it becomes "LOADING" and, finally "LOADED" | |
88 | state: "UNCHECKED", | |
89 | ||
90 | templateString: treeNodeTemplate, | |
91 | ||
92 | baseClass: "dijitTreeNode", | |
93 | ||
94 | // For hover effect for tree node, and focus effect for label | |
95 | cssStateNodes: { | |
96 | rowNode: "dijitTreeRow" | |
97 | }, | |
98 | ||
99 | // Tooltip is defined in _WidgetBase but we need to handle the mapping to DOM here | |
100 | _setTooltipAttr: {node: "rowNode", type: "attribute", attribute: "title"}, | |
101 | ||
102 | buildRendering: function(){ | |
103 | this.inherited(arguments); | |
104 | ||
105 | // set expand icon for leaf | |
106 | this._setExpando(); | |
107 | ||
108 | // set icon and label class based on item | |
109 | this._updateItemClasses(this.item); | |
110 | ||
111 | if(this.isExpandable){ | |
112 | this.labelNode.setAttribute("aria-expanded", this.isExpanded); | |
113 | } | |
114 | ||
115 | //aria-selected should be false on all selectable elements. | |
116 | this.setSelected(false); | |
117 | }, | |
118 | ||
119 | _setIndentAttr: function(indent){ | |
120 | // summary: | |
121 | // Tell this node how many levels it should be indented | |
122 | // description: | |
123 | // 0 for top level nodes, 1 for their children, 2 for their | |
124 | // grandchildren, etc. | |
125 | ||
126 | // Math.max() is to prevent negative padding on hidden root node (when indent == -1) | |
127 | var pixels = (Math.max(indent, 0) * this.tree._nodePixelIndent) + "px"; | |
128 | ||
129 | domStyle.set(this.domNode, "backgroundPosition", pixels + " 0px"); // TODOC: what is this for??? | |
130 | domStyle.set(this.indentNode, this.isLeftToRight() ? "paddingLeft" : "paddingRight", pixels); | |
131 | ||
132 | array.forEach(this.getChildren(), function(child){ | |
133 | child.set("indent", indent+1); | |
134 | }); | |
135 | ||
136 | this._set("indent", indent); | |
137 | }, | |
138 | ||
139 | markProcessing: function(){ | |
140 | // summary: | |
141 | // Visually denote that tree is loading data, etc. | |
142 | // tags: | |
143 | // private | |
144 | this.state = "LOADING"; | |
145 | this._setExpando(true); | |
146 | }, | |
147 | ||
148 | unmarkProcessing: function(){ | |
149 | // summary: | |
150 | // Clear markup from markProcessing() call | |
151 | // tags: | |
152 | // private | |
153 | this._setExpando(false); | |
154 | }, | |
155 | ||
156 | _updateItemClasses: function(item){ | |
157 | // summary: | |
158 | // Set appropriate CSS classes for icon and label dom node | |
159 | // (used to allow for item updates to change respective CSS) | |
160 | // tags: | |
161 | // private | |
162 | var tree = this.tree, model = tree.model; | |
163 | if(tree._v10Compat && item === model.root){ | |
164 | // For back-compat with 1.0, need to use null to specify root item (TODO: remove in 2.0) | |
165 | item = null; | |
166 | } | |
167 | this._applyClassAndStyle(item, "icon", "Icon"); | |
168 | this._applyClassAndStyle(item, "label", "Label"); | |
169 | this._applyClassAndStyle(item, "row", "Row"); | |
170 | ||
171 | this.tree._startPaint(true); // signifies paint started and finished (synchronously) | |
172 | }, | |
173 | ||
174 | _applyClassAndStyle: function(item, lower, upper){ | |
175 | // summary: | |
176 | // Set the appropriate CSS classes and styles for labels, icons and rows. | |
177 | // | |
178 | // item: | |
179 | // The data item. | |
180 | // | |
181 | // lower: | |
182 | // The lower case attribute to use, e.g. 'icon', 'label' or 'row'. | |
183 | // | |
184 | // upper: | |
185 | // The upper case attribute to use, e.g. 'Icon', 'Label' or 'Row'. | |
186 | // | |
187 | // tags: | |
188 | // private | |
189 | ||
190 | var clsName = "_" + lower + "Class"; | |
191 | var nodeName = lower + "Node"; | |
192 | var oldCls = this[clsName]; | |
193 | ||
194 | this[clsName] = this.tree["get" + upper + "Class"](item, this.isExpanded); | |
195 | domClass.replace(this[nodeName], this[clsName] || "", oldCls || ""); | |
196 | ||
197 | domStyle.set(this[nodeName], this.tree["get" + upper + "Style"](item, this.isExpanded) || {}); | |
198 | }, | |
199 | ||
200 | _updateLayout: function(){ | |
201 | // summary: | |
202 | // Set appropriate CSS classes for this.domNode | |
203 | // tags: | |
204 | // private | |
205 | var parent = this.getParent(); | |
206 | if(!parent || !parent.rowNode || parent.rowNode.style.display == "none"){ | |
207 | /* if we are hiding the root node then make every first level child look like a root node */ | |
208 | domClass.add(this.domNode, "dijitTreeIsRoot"); | |
209 | }else{ | |
210 | domClass.toggle(this.domNode, "dijitTreeIsLast", !this.getNextSibling()); | |
211 | } | |
212 | }, | |
213 | ||
214 | _setExpando: function(/*Boolean*/ processing){ | |
215 | // summary: | |
216 | // Set the right image for the expando node | |
217 | // tags: | |
218 | // private | |
219 | ||
220 | var styles = ["dijitTreeExpandoLoading", "dijitTreeExpandoOpened", | |
221 | "dijitTreeExpandoClosed", "dijitTreeExpandoLeaf"], | |
222 | _a11yStates = ["*","-","+","*"], | |
223 | idx = processing ? 0 : (this.isExpandable ? (this.isExpanded ? 1 : 2) : 3); | |
224 | ||
225 | // apply the appropriate class to the expando node | |
226 | domClass.replace(this.expandoNode, styles[idx], styles); | |
227 | ||
228 | // provide a non-image based indicator for images-off mode | |
229 | this.expandoNodeText.innerHTML = _a11yStates[idx]; | |
230 | ||
231 | }, | |
232 | ||
233 | expand: function(){ | |
234 | // summary: | |
235 | // Show my children | |
236 | // returns: | |
237 | // Deferred that fires when expansion is complete | |
238 | ||
239 | // If there's already an expand in progress or we are already expanded, just return | |
240 | if(this._expandDeferred){ | |
241 | return this._expandDeferred; // dojo/_base/Deferred | |
242 | } | |
243 | ||
244 | // cancel in progress collapse operation | |
245 | if(this._collapseDeferred){ | |
246 | this._collapseDeferred.cancel(); | |
247 | delete this._collapseDeferred; | |
248 | } | |
249 | ||
250 | // All the state information for when a node is expanded, maybe this should be | |
251 | // set when the animation completes instead | |
252 | this.isExpanded = true; | |
253 | this.labelNode.setAttribute("aria-expanded", "true"); | |
254 | if(this.tree.showRoot || this !== this.tree.rootNode){ | |
255 | this.containerNode.setAttribute("role", "group"); | |
256 | } | |
257 | domClass.add(this.contentNode,'dijitTreeContentExpanded'); | |
258 | this._setExpando(); | |
259 | this._updateItemClasses(this.item); | |
260 | ||
261 | if(this == this.tree.rootNode && this.tree.showRoot){ | |
262 | this.tree.domNode.setAttribute("aria-expanded", "true"); | |
263 | } | |
264 | ||
265 | var def, | |
266 | wipeIn = fxUtils.wipeIn({ | |
267 | node: this.containerNode, | |
268 | duration: manager.defaultDuration, | |
269 | onEnd: function(){ | |
270 | def.resolve(true); | |
271 | } | |
272 | }); | |
273 | ||
274 | // Deferred that fires when expand is complete | |
275 | def = (this._expandDeferred = new Deferred(function(){ | |
276 | // Canceller | |
277 | wipeIn.stop(); | |
278 | })); | |
279 | ||
280 | wipeIn.play(); | |
281 | ||
282 | return def; // dojo/_base/Deferred | |
283 | }, | |
284 | ||
285 | collapse: function(){ | |
286 | // summary: | |
287 | // Collapse this node (if it's expanded) | |
288 | ||
289 | if(this._collapseDeferred){ | |
290 | // Node is already collapsed, or there's a collapse in progress, just return that Deferred | |
291 | return this._collapseDeferred; | |
292 | } | |
293 | ||
294 | // cancel in progress expand operation | |
295 | if(this._expandDeferred){ | |
296 | this._expandDeferred.cancel(); | |
297 | delete this._expandDeferred; | |
298 | } | |
299 | ||
300 | this.isExpanded = false; | |
301 | this.labelNode.setAttribute("aria-expanded", "false"); | |
302 | if(this == this.tree.rootNode && this.tree.showRoot){ | |
303 | this.tree.domNode.setAttribute("aria-expanded", "false"); | |
304 | } | |
305 | domClass.remove(this.contentNode,'dijitTreeContentExpanded'); | |
306 | this._setExpando(); | |
307 | this._updateItemClasses(this.item); | |
308 | ||
309 | var def, | |
310 | wipeOut = fxUtils.wipeOut({ | |
311 | node: this.containerNode, | |
312 | duration: manager.defaultDuration, | |
313 | onEnd: function(){ | |
314 | def.resolve(true); | |
315 | } | |
316 | }); | |
317 | ||
318 | // Deferred that fires when expand is complete | |
319 | def = (this._collapseDeferred = new Deferred(function(){ | |
320 | // Canceller | |
321 | wipeOut.stop(); | |
322 | })); | |
323 | ||
324 | wipeOut.play(); | |
325 | ||
326 | return def; // dojo/_base/Deferred | |
327 | }, | |
328 | ||
329 | // indent: Integer | |
330 | // Levels from this node to the root node | |
331 | indent: 0, | |
332 | ||
333 | setChildItems: function(/* Object[] */ items){ | |
334 | // summary: | |
335 | // Sets the child items of this node, removing/adding nodes | |
336 | // from current children to match specified items[] array. | |
337 | // Also, if this.persist == true, expands any children that were previously | |
338 | // opened. | |
339 | // returns: | |
340 | // Deferred object that fires after all previously opened children | |
341 | // have been expanded again (or fires instantly if there are no such children). | |
342 | ||
343 | var tree = this.tree, | |
344 | model = tree.model, | |
345 | defs = []; // list of deferreds that need to fire before I am complete | |
346 | ||
347 | ||
348 | // Orphan all my existing children. | |
349 | // If items contains some of the same items as before then we will reattach them. | |
350 | // Don't call this.removeChild() because that will collapse the tree etc. | |
351 | var oldChildren = this.getChildren(); | |
352 | array.forEach(oldChildren, function(child){ | |
353 | _Container.prototype.removeChild.call(this, child); | |
354 | }, this); | |
355 | ||
356 | // All the old children of this TreeNode are subject for destruction if | |
357 | // 1) they aren't listed in the new children array (items) | |
358 | // 2) they aren't immediately adopted by another node (DnD) | |
359 | this.defer(function(){ | |
360 | array.forEach(oldChildren, function(node){ | |
361 | if(!node._destroyed && !node.getParent()){ | |
362 | // If node is in selection then remove it. | |
363 | tree.dndController.removeTreeNode(node); | |
364 | ||
365 | // Deregister mapping from item id --> this node | |
366 | var id = model.getIdentity(node.item), | |
367 | ary = tree._itemNodesMap[id]; | |
368 | if(ary.length == 1){ | |
369 | delete tree._itemNodesMap[id]; | |
370 | }else{ | |
371 | var index = array.indexOf(ary, node); | |
372 | if(index != -1){ | |
373 | ary.splice(index, 1); | |
374 | } | |
375 | } | |
376 | ||
377 | // And finally we can destroy the node | |
378 | node.destroyRecursive(); | |
379 | } | |
380 | }); | |
381 | }); | |
382 | ||
383 | this.state = "LOADED"; | |
384 | ||
385 | if(items && items.length > 0){ | |
386 | this.isExpandable = true; | |
387 | ||
388 | // Create _TreeNode widget for each specified tree node, unless one already | |
389 | // exists and isn't being used (presumably it's from a DnD move and was recently | |
390 | // released | |
391 | array.forEach(items, function(item){ // MARKER: REUSE NODE | |
392 | var id = model.getIdentity(item), | |
393 | existingNodes = tree._itemNodesMap[id], | |
394 | node; | |
395 | if(existingNodes){ | |
396 | for(var i=0;i<existingNodes.length;i++){ | |
397 | if(existingNodes[i] && !existingNodes[i].getParent()){ | |
398 | node = existingNodes[i]; | |
399 | node.set('indent', this.indent+1); | |
400 | break; | |
401 | } | |
402 | } | |
403 | } | |
404 | if(!node){ | |
405 | node = this.tree._createTreeNode({ | |
406 | item: item, | |
407 | tree: tree, | |
408 | isExpandable: model.mayHaveChildren(item), | |
409 | label: tree.getLabel(item), | |
410 | tooltip: tree.getTooltip(item), | |
411 | ownerDocument: tree.ownerDocument, | |
412 | dir: tree.dir, | |
413 | lang: tree.lang, | |
414 | textDir: tree.textDir, | |
415 | indent: this.indent + 1 | |
416 | }); | |
417 | if(existingNodes){ | |
418 | existingNodes.push(node); | |
419 | }else{ | |
420 | tree._itemNodesMap[id] = [node]; | |
421 | } | |
422 | } | |
423 | this.addChild(node); | |
424 | ||
425 | // If node was previously opened then open it again now (this may trigger | |
426 | // more data store accesses, recursively) | |
427 | if(this.tree.autoExpand || this.tree._state(node)){ | |
428 | defs.push(tree._expandNode(node)); | |
429 | } | |
430 | }, this); | |
431 | ||
432 | // note that updateLayout() needs to be called on each child after | |
433 | // _all_ the children exist | |
434 | array.forEach(this.getChildren(), function(child){ | |
435 | child._updateLayout(); | |
436 | }); | |
437 | }else{ | |
438 | this.isExpandable=false; | |
439 | } | |
440 | ||
441 | if(this._setExpando){ | |
442 | // change expando to/from dot or + icon, as appropriate | |
443 | this._setExpando(false); | |
444 | } | |
445 | ||
446 | // Set leaf icon or folder icon, as appropriate | |
447 | this._updateItemClasses(this.item); | |
448 | ||
449 | // On initial tree show, make the selected TreeNode as either the root node of the tree, | |
450 | // or the first child, if the root node is hidden | |
451 | if(this == tree.rootNode){ | |
452 | var fc = this.tree.showRoot ? this : this.getChildren()[0]; | |
453 | if(fc){ | |
454 | fc.setFocusable(true); | |
455 | tree.lastFocused = fc; | |
456 | }else{ | |
457 | // fallback: no nodes in tree so focus on Tree <div> itself | |
458 | tree.domNode.setAttribute("tabIndex", "0"); | |
459 | } | |
460 | } | |
461 | ||
462 | var def = new DeferredList(defs); | |
463 | this.tree._startPaint(def); // to reset TreeNode widths after an item is added/removed from the Tree | |
464 | return def; // dojo/_base/Deferred | |
465 | }, | |
466 | ||
467 | getTreePath: function(){ | |
468 | var node = this; | |
469 | var path = []; | |
470 | while(node && node !== this.tree.rootNode){ | |
471 | path.unshift(node.item); | |
472 | node = node.getParent(); | |
473 | } | |
474 | path.unshift(this.tree.rootNode.item); | |
475 | ||
476 | return path; | |
477 | }, | |
478 | ||
479 | getIdentity: function(){ | |
480 | return this.tree.model.getIdentity(this.item); | |
481 | }, | |
482 | ||
483 | removeChild: function(/* treeNode */ node){ | |
484 | this.inherited(arguments); | |
485 | ||
486 | var children = this.getChildren(); | |
487 | if(children.length == 0){ | |
488 | this.isExpandable = false; | |
489 | this.collapse(); | |
490 | } | |
491 | ||
492 | array.forEach(children, function(child){ | |
493 | child._updateLayout(); | |
494 | }); | |
495 | }, | |
496 | ||
497 | makeExpandable: function(){ | |
498 | // summary: | |
499 | // if this node wasn't already showing the expando node, | |
500 | // turn it into one and call _setExpando() | |
501 | ||
502 | // TODO: hmm this isn't called from anywhere, maybe should remove it for 2.0 | |
503 | ||
504 | this.isExpandable = true; | |
505 | this._setExpando(false); | |
506 | }, | |
507 | ||
508 | setSelected: function(/*Boolean*/ selected){ | |
509 | // summary: | |
510 | // A Tree has a (single) currently selected node. | |
511 | // Mark that this node is/isn't that currently selected node. | |
512 | // description: | |
513 | // In particular, setting a node as selected involves setting tabIndex | |
514 | // so that when user tabs to the tree, focus will go to that node (only). | |
515 | this.labelNode.setAttribute("aria-selected", selected ? "true" : "false"); | |
516 | domClass.toggle(this.rowNode, "dijitTreeRowSelected", selected); | |
517 | }, | |
518 | ||
519 | setFocusable: function(/*Boolean*/ selected){ | |
520 | // summary: | |
521 | // A Tree has a (single) node that's focusable. | |
522 | // Mark that this node is/isn't that currently focsuable node. | |
523 | // description: | |
524 | // In particular, setting a node as selected involves setting tabIndex | |
525 | // so that when user tabs to the tree, focus will go to that node (only). | |
526 | ||
527 | this.labelNode.setAttribute("tabIndex", selected ? "0" : "-1"); | |
528 | }, | |
529 | ||
530 | ||
531 | _setTextDirAttr: function(textDir){ | |
532 | if(textDir &&((this.textDir != textDir) || !this._created)){ | |
533 | this._set("textDir", textDir); | |
534 | this.applyTextDir(this.labelNode, this.labelNode.innerText || this.labelNode.textContent || ""); | |
535 | array.forEach(this.getChildren(), function(childNode){ | |
536 | childNode.set("textDir", textDir); | |
537 | }, this); | |
538 | } | |
539 | } | |
540 | }); | |
541 | ||
542 | var Tree = declare("dijit.Tree", [_Widget, _TemplatedMixin], { | |
543 | // summary: | |
544 | // This widget displays hierarchical data from a store. | |
545 | ||
546 | // store: [deprecated] String|dojo/data/Store | |
547 | // Deprecated. Use "model" parameter instead. | |
548 | // The store to get data to display in the tree. | |
549 | store: null, | |
550 | ||
551 | // model: dijit/tree/model | |
552 | // Interface to read tree data, get notifications of changes to tree data, | |
553 | // and for handling drop operations (i.e drag and drop onto the tree) | |
554 | model: null, | |
555 | ||
556 | // query: [deprecated] anything | |
557 | // Deprecated. User should specify query to the model directly instead. | |
558 | // Specifies datastore query to return the root item or top items for the tree. | |
559 | query: null, | |
560 | ||
561 | // label: [deprecated] String | |
562 | // Deprecated. Use dijit/tree/ForestStoreModel directly instead. | |
563 | // Used in conjunction with query parameter. | |
564 | // If a query is specified (rather than a root node id), and a label is also specified, | |
565 | // then a fake root node is created and displayed, with this label. | |
566 | label: "", | |
567 | ||
568 | // showRoot: [const] Boolean | |
569 | // Should the root node be displayed, or hidden? | |
570 | showRoot: true, | |
571 | ||
572 | // childrenAttr: [deprecated] String[] | |
573 | // Deprecated. This information should be specified in the model. | |
574 | // One ore more attributes that holds children of a tree node | |
575 | childrenAttr: ["children"], | |
576 | ||
577 | // paths: String[][] or Item[][] | |
578 | // Full paths from rootNode to selected nodes expressed as array of items or array of ids. | |
579 | // Since setting the paths may be asynchronous (because of waiting on dojo.data), set("paths", ...) | |
580 | // returns a Deferred to indicate when the set is complete. | |
581 | paths: [], | |
582 | ||
583 | // path: String[] or Item[] | |
584 | // Backward compatible singular variant of paths. | |
585 | path: [], | |
586 | ||
587 | // selectedItems: [readonly] Item[] | |
588 | // The currently selected items in this tree. | |
589 | // This property can only be set (via set('selectedItems', ...)) when that item is already | |
590 | // visible in the tree. (I.e. the tree has already been expanded to show that node.) | |
591 | // Should generally use `paths` attribute to set the selected items instead. | |
592 | selectedItems: null, | |
593 | ||
594 | // selectedItem: [readonly] Item | |
595 | // Backward compatible singular variant of selectedItems. | |
596 | selectedItem: null, | |
597 | ||
598 | // openOnClick: Boolean | |
599 | // If true, clicking a folder node's label will open it, rather than calling onClick() | |
600 | openOnClick: false, | |
601 | ||
602 | // openOnDblClick: Boolean | |
603 | // If true, double-clicking a folder node's label will open it, rather than calling onDblClick() | |
604 | openOnDblClick: false, | |
605 | ||
606 | templateString: treeTemplate, | |
607 | ||
608 | // persist: Boolean | |
609 | // Enables/disables use of cookies for state saving. | |
610 | persist: true, | |
611 | ||
612 | // autoExpand: Boolean | |
613 | // Fully expand the tree on load. Overrides `persist`. | |
614 | autoExpand: false, | |
615 | ||
616 | // dndController: [protected] Function|String | |
617 | // Class to use as as the dnd controller. Specifying this class enables DnD. | |
618 | // Generally you should specify this as dijit/tree/dndSource. | |
619 | // Setting of dijit/tree/_dndSelector handles selection only (no actual DnD). | |
620 | dndController: _dndSelector, | |
621 | ||
622 | // parameters to pull off of the tree and pass on to the dndController as its params | |
623 | dndParams: ["onDndDrop","itemCreator","onDndCancel","checkAcceptance", "checkItemAcceptance", "dragThreshold", "betweenThreshold"], | |
624 | ||
625 | //declare the above items so they can be pulled from the tree's markup | |
626 | ||
627 | // onDndDrop: [protected] Function | |
628 | // Parameter to dndController, see `dijit/tree/dndSource.onDndDrop()`. | |
629 | // Generally this doesn't need to be set. | |
630 | onDndDrop: null, | |
631 | ||
632 | itemCreator: null, | |
633 | /*===== | |
634 | itemCreator: function(nodes, target, source){ | |
635 | // summary: | |
636 | // Returns objects passed to `Tree.model.newItem()` based on DnD nodes | |
637 | // dropped onto the tree. Developer must override this method to enable | |
638 | // dropping from external sources onto this Tree, unless the Tree.model's items | |
639 | // happen to look like {id: 123, name: "Apple" } with no other attributes. | |
640 | // | |
641 | // For each node in nodes[], which came from source, create a hash of name/value | |
642 | // pairs to be passed to Tree.model.newItem(). Returns array of those hashes. | |
643 | // nodes: DomNode[] | |
644 | // The DOMNodes dragged from the source container | |
645 | // target: DomNode | |
646 | // The target TreeNode.rowNode | |
647 | // source: dojo/dnd/Source | |
648 | // The source container the nodes were dragged from, perhaps another Tree or a plain dojo/dnd/Source | |
649 | // returns: Object[] | |
650 | // Array of name/value hashes for each new item to be added to the Tree, like: | |
651 | // | [ | |
652 | // | { id: 123, label: "apple", foo: "bar" }, | |
653 | // | { id: 456, label: "pear", zaz: "bam" } | |
654 | // | ] | |
655 | // tags: | |
656 | // extension | |
657 | return [{}]; | |
658 | }, | |
659 | =====*/ | |
660 | ||
661 | // onDndCancel: [protected] Function | |
662 | // Parameter to dndController, see `dijit/tree/dndSource.onDndCancel()`. | |
663 | // Generally this doesn't need to be set. | |
664 | onDndCancel: null, | |
665 | ||
666 | /*===== | |
667 | checkAcceptance: function(source, nodes){ | |
668 | // summary: | |
669 | // Checks if the Tree itself can accept nodes from this source | |
670 | // source: dijit/tree/dndSource | |
671 | // The source which provides items | |
672 | // nodes: DOMNode[] | |
673 | // Array of DOM nodes corresponding to nodes being dropped, dijitTreeRow nodes if | |
674 | // source is a dijit/Tree. | |
675 | // tags: | |
676 | // extension | |
677 | return true; // Boolean | |
678 | }, | |
679 | =====*/ | |
680 | checkAcceptance: null, | |
681 | ||
682 | /*===== | |
683 | checkItemAcceptance: function(target, source, position){ | |
684 | // summary: | |
685 | // Stub function to be overridden if one wants to check for the ability to drop at the node/item level | |
686 | // description: | |
687 | // In the base case, this is called to check if target can become a child of source. | |
688 | // When betweenThreshold is set, position="before" or "after" means that we | |
689 | // are asking if the source node can be dropped before/after the target node. | |
690 | // target: DOMNode | |
691 | // The dijitTreeRoot DOM node inside of the TreeNode that we are dropping on to | |
692 | // Use registry.getEnclosingWidget(target) to get the TreeNode. | |
693 | // source: dijit/tree/dndSource | |
694 | // The (set of) nodes we are dropping | |
695 | // position: String | |
696 | // "over", "before", or "after" | |
697 | // tags: | |
698 | // extension | |
699 | return true; // Boolean | |
700 | }, | |
701 | =====*/ | |
702 | checkItemAcceptance: null, | |
703 | ||
704 | // dragThreshold: Integer | |
705 | // Number of pixels mouse moves before it's considered the start of a drag operation | |
706 | dragThreshold: 5, | |
707 | ||
708 | // betweenThreshold: Integer | |
709 | // Set to a positive value to allow drag and drop "between" nodes. | |
710 | // | |
711 | // If during DnD mouse is over a (target) node but less than betweenThreshold | |
712 | // pixels from the bottom edge, dropping the the dragged node will make it | |
713 | // the next sibling of the target node, rather than the child. | |
714 | // | |
715 | // Similarly, if mouse is over a target node but less that betweenThreshold | |
716 | // pixels from the top edge, dropping the dragged node will make it | |
717 | // the target node's previous sibling rather than the target node's child. | |
718 | betweenThreshold: 0, | |
719 | ||
720 | // _nodePixelIndent: Integer | |
721 | // Number of pixels to indent tree nodes (relative to parent node). | |
722 | // Default is 19 but can be overridden by setting CSS class dijitTreeIndent | |
723 | // and calling resize() or startup() on tree after it's in the DOM. | |
724 | _nodePixelIndent: 19, | |
725 | ||
726 | _publish: function(/*String*/ topicName, /*Object*/ message){ | |
727 | // summary: | |
728 | // Publish a message for this widget/topic | |
729 | topic.publish(this.id, lang.mixin({tree: this, event: topicName}, message || {})); // publish | |
730 | }, | |
731 | ||
732 | postMixInProperties: function(){ | |
733 | this.tree = this; | |
734 | ||
735 | if(this.autoExpand){ | |
736 | // There's little point in saving opened/closed state of nodes for a Tree | |
737 | // that initially opens all it's nodes. | |
738 | this.persist = false; | |
739 | } | |
740 | ||
741 | this._itemNodesMap = {}; | |
742 | ||
743 | if(!this.cookieName && this.id){ | |
744 | this.cookieName = this.id + "SaveStateCookie"; | |
745 | } | |
746 | ||
747 | // Deferred that fires when all the children have loaded. | |
748 | this.expandChildrenDeferred = new Deferred(); | |
749 | ||
750 | // Deferred that fires when all pending operations complete. | |
751 | this.pendingCommandsDeferred = this.expandChildrenDeferred; | |
752 | ||
753 | this.inherited(arguments); | |
754 | }, | |
755 | ||
756 | postCreate: function(){ | |
757 | this._initState(); | |
758 | ||
759 | // Catch events on TreeNodes | |
760 | var self = this; | |
761 | this.own( | |
762 | on(this.domNode, on.selector(".dijitTreeNode", touch.enter), function(evt){ | |
763 | self._onNodeMouseEnter(registry.byNode(this), evt); | |
764 | }), | |
765 | on(this.domNode, on.selector(".dijitTreeNode", touch.leave), function(evt){ | |
766 | self._onNodeMouseLeave(registry.byNode(this), evt); | |
767 | }), | |
768 | on(this.domNode, on.selector(".dijitTreeNode", "click"), function(evt){ | |
769 | self._onClick(registry.byNode(this), evt); | |
770 | }), | |
771 | on(this.domNode, on.selector(".dijitTreeNode", "dblclick"), function(evt){ | |
772 | self._onDblClick(registry.byNode(this), evt); | |
773 | }), | |
774 | on(this.domNode, on.selector(".dijitTreeNode", "keypress"), function(evt){ | |
775 | self._onKeyPress(registry.byNode(this), evt); | |
776 | }), | |
777 | on(this.domNode, on.selector(".dijitTreeNode", "keydown"), function(evt){ | |
778 | self._onKeyDown(registry.byNode(this), evt); | |
779 | }), | |
780 | on(this.domNode, on.selector(".dijitTreeRow", "focusin"), function(evt){ | |
781 | self._onNodeFocus(registry.getEnclosingWidget(this), evt); | |
782 | }) | |
783 | ); | |
784 | ||
785 | // Create glue between store and Tree, if not specified directly by user | |
786 | if(!this.model){ | |
787 | this._store2model(); | |
788 | } | |
789 | ||
790 | // monitor changes to items | |
791 | this.connect(this.model, "onChange", "_onItemChange"); | |
792 | this.connect(this.model, "onChildrenChange", "_onItemChildrenChange"); | |
793 | this.connect(this.model, "onDelete", "_onItemDelete"); | |
794 | ||
795 | this.inherited(arguments); | |
796 | ||
797 | if(this.dndController){ | |
798 | if(lang.isString(this.dndController)){ | |
799 | this.dndController = lang.getObject(this.dndController); | |
800 | } | |
801 | var params={}; | |
802 | for(var i=0; i<this.dndParams.length;i++){ | |
803 | if(this[this.dndParams[i]]){ | |
804 | params[this.dndParams[i]] = this[this.dndParams[i]]; | |
805 | } | |
806 | } | |
807 | this.dndController = new this.dndController(this, params); | |
808 | } | |
809 | ||
810 | this._load(); | |
811 | ||
812 | // If no path was specified to the constructor, use path saved in cookie | |
813 | if(!this.params.path && !this.params.paths && this.persist){ | |
814 | this.set("paths", this.dndController._getSavedPaths()); | |
815 | } | |
816 | ||
817 | // onLoadDeferred should fire when all commands that are part of initialization have completed. | |
818 | // It will include all the set("paths", ...) commands that happen during initialization. | |
819 | this.onLoadDeferred = this.pendingCommandsDeferred; | |
820 | ||
821 | this.onLoadDeferred.then(lang.hitch(this, "onLoad")); | |
822 | }, | |
823 | ||
824 | _store2model: function(){ | |
825 | // summary: | |
826 | // User specified a store&query rather than model, so create model from store/query | |
827 | this._v10Compat = true; | |
828 | kernel.deprecated("Tree: from version 2.0, should specify a model object rather than a store/query"); | |
829 | ||
830 | var modelParams = { | |
831 | id: this.id + "_ForestStoreModel", | |
832 | store: this.store, | |
833 | query: this.query, | |
834 | childrenAttrs: this.childrenAttr | |
835 | }; | |
836 | ||
837 | // Only override the model's mayHaveChildren() method if the user has specified an override | |
838 | if(this.params.mayHaveChildren){ | |
839 | modelParams.mayHaveChildren = lang.hitch(this, "mayHaveChildren"); | |
840 | } | |
841 | ||
842 | if(this.params.getItemChildren){ | |
843 | modelParams.getChildren = lang.hitch(this, function(item, onComplete, onError){ | |
844 | this.getItemChildren((this._v10Compat && item === this.model.root) ? null : item, onComplete, onError); | |
845 | }); | |
846 | } | |
847 | this.model = new ForestStoreModel(modelParams); | |
848 | ||
849 | // For backwards compatibility, the visibility of the root node is controlled by | |
850 | // whether or not the user has specified a label | |
851 | this.showRoot = Boolean(this.label); | |
852 | }, | |
853 | ||
854 | onLoad: function(){ | |
855 | // summary: | |
856 | // Called when tree finishes loading and expanding. | |
857 | // description: | |
858 | // If persist == true the loading may encompass many levels of fetches | |
859 | // from the data store, each asynchronous. Waits for all to finish. | |
860 | // tags: | |
861 | // callback | |
862 | }, | |
863 | ||
864 | _load: function(){ | |
865 | // summary: | |
866 | // Initial load of the tree. | |
867 | // Load root node (possibly hidden) and it's children. | |
868 | this.model.getRoot( | |
869 | lang.hitch(this, function(item){ | |
870 | var rn = (this.rootNode = this.tree._createTreeNode({ | |
871 | item: item, | |
872 | tree: this, | |
873 | isExpandable: true, | |
874 | label: this.label || this.getLabel(item), | |
875 | textDir: this.textDir, | |
876 | indent: this.showRoot ? 0 : -1 | |
877 | })); | |
878 | ||
879 | if(!this.showRoot){ | |
880 | rn.rowNode.style.display="none"; | |
881 | // if root is not visible, move tree role to the invisible | |
882 | // root node's containerNode, see #12135 | |
883 | this.domNode.setAttribute("role", "presentation"); | |
884 | this.domNode.removeAttribute("aria-expanded"); | |
885 | this.domNode.removeAttribute("aria-multiselectable"); | |
886 | ||
887 | rn.labelNode.setAttribute("role", "presentation"); | |
888 | rn.containerNode.setAttribute("role", "tree"); | |
889 | rn.containerNode.setAttribute("aria-expanded","true"); | |
890 | rn.containerNode.setAttribute("aria-multiselectable", !this.dndController.singular); | |
891 | }else{ | |
892 | this.domNode.setAttribute("aria-multiselectable", !this.dndController.singular); | |
893 | } | |
894 | ||
895 | this.domNode.appendChild(rn.domNode); | |
896 | var identity = this.model.getIdentity(item); | |
897 | if(this._itemNodesMap[identity]){ | |
898 | this._itemNodesMap[identity].push(rn); | |
899 | }else{ | |
900 | this._itemNodesMap[identity] = [rn]; | |
901 | } | |
902 | ||
903 | rn._updateLayout(); // sets "dijitTreeIsRoot" CSS classname | |
904 | ||
905 | // Load top level children, and if persist==true, all nodes that were previously opened | |
906 | this._expandNode(rn).then(lang.hitch(this, function(){ | |
907 | // Then, select the nodes that were selected last time, or | |
908 | // the ones specified by params.paths[]. | |
909 | ||
910 | this.expandChildrenDeferred.resolve(true); | |
911 | })); | |
912 | }), | |
913 | lang.hitch(this, function(err){ | |
914 | console.error(this, ": error loading root: ", err); | |
915 | }) | |
916 | ); | |
917 | }, | |
918 | ||
919 | getNodesByItem: function(/*Item or id*/ item){ | |
920 | // summary: | |
921 | // Returns all tree nodes that refer to an item | |
922 | // returns: | |
923 | // Array of tree nodes that refer to passed item | |
924 | ||
925 | if(!item){ return []; } | |
926 | var identity = lang.isString(item) ? item : this.model.getIdentity(item); | |
927 | // return a copy so widget don't get messed up by changes to returned array | |
928 | return [].concat(this._itemNodesMap[identity]); | |
929 | }, | |
930 | ||
931 | _setSelectedItemAttr: function(/*Item or id*/ item){ | |
932 | this.set('selectedItems', [item]); | |
933 | }, | |
934 | ||
935 | _setSelectedItemsAttr: function(/*Items or ids*/ items){ | |
936 | // summary: | |
937 | // Select tree nodes related to passed items. | |
938 | // WARNING: if model use multi-parented items or desired tree node isn't already loaded | |
939 | // behavior is undefined. Use set('paths', ...) instead. | |
940 | var tree = this; | |
941 | return this.pendingCommandsDeferred = this.pendingCommandsDeferred.then( lang.hitch(this, function(){ | |
942 | var identities = array.map(items, function(item){ | |
943 | return (!item || lang.isString(item)) ? item : tree.model.getIdentity(item); | |
944 | }); | |
945 | var nodes = []; | |
946 | array.forEach(identities, function(id){ | |
947 | nodes = nodes.concat(tree._itemNodesMap[id] || []); | |
948 | }); | |
949 | this.set('selectedNodes', nodes); | |
950 | })); | |
951 | }, | |
952 | ||
953 | _setPathAttr: function(/*Item[]|String[]*/ path){ | |
954 | // summary: | |
955 | // Singular variant of _setPathsAttr | |
956 | if(path.length){ | |
957 | return this.set("paths", [path]); | |
958 | }else{ | |
959 | // Empty list is interpreted as "select nothing" | |
960 | return this.set("paths", []); | |
961 | } | |
962 | }, | |
963 | ||
964 | _setPathsAttr: function(/*Item[][]|String[][]*/ paths){ | |
965 | // summary: | |
966 | // Select the tree nodes identified by passed paths. | |
967 | // paths: | |
968 | // Array of arrays of items or item id's | |
969 | // returns: | |
970 | // Deferred to indicate when the set is complete | |
971 | ||
972 | var tree = this; | |
973 | ||
974 | // Let any previous set("path", ...) commands complete before this one starts. | |
975 | return this.pendingCommandsDeferred = this.pendingCommandsDeferred.then(function(){ | |
976 | // We may need to wait for some nodes to expand, so setting | |
977 | // each path will involve a Deferred. We bring those deferreds | |
978 | // together with a DeferredList. | |
979 | return new DeferredList(array.map(paths, function(path){ | |
980 | var d = new Deferred(); | |
981 | ||
982 | // normalize path to use identity | |
983 | path = array.map(path, function(item){ | |
984 | return lang.isString(item) ? item : tree.model.getIdentity(item); | |
985 | }); | |
986 | ||
987 | if(path.length){ | |
988 | // Wait for the tree to load, if it hasn't already. | |
989 | selectPath(path, [tree.rootNode], d); | |
990 | }else{ | |
991 | d.reject(new Tree.PathError("Empty path")); | |
992 | } | |
993 | return d; | |
994 | })); | |
995 | }).then(setNodes); | |
996 | ||
997 | function selectPath(path, nodes, def){ | |
998 | // Traverse path; the next path component should be among "nodes". | |
999 | var nextPath = path.shift(); | |
1000 | var nextNode = array.filter(nodes, function(node){ | |
1001 | return node.getIdentity() == nextPath; | |
1002 | })[0]; | |
1003 | if(!!nextNode){ | |
1004 | if(path.length){ | |
1005 | tree._expandNode(nextNode).then(function(){ selectPath(path, nextNode.getChildren(), def); }); | |
1006 | }else{ | |
1007 | // Successfully reached the end of this path | |
1008 | def.resolve(nextNode); | |
1009 | } | |
1010 | }else{ | |
1011 | def.reject(new Tree.PathError("Could not expand path at " + nextPath)); | |
1012 | } | |
1013 | } | |
1014 | ||
1015 | function setNodes(newNodes){ | |
1016 | // After all expansion is finished, set the selection to | |
1017 | // the set of nodes successfully found. | |
1018 | tree.set("selectedNodes", array.map( | |
1019 | array.filter(newNodes,function(x){return x[0];}), | |
1020 | function(x){return x[1];})); | |
1021 | } | |
1022 | }, | |
1023 | ||
1024 | _setSelectedNodeAttr: function(node){ | |
1025 | this.set('selectedNodes', [node]); | |
1026 | }, | |
1027 | _setSelectedNodesAttr: function(nodes){ | |
1028 | // summary: | |
1029 | // Marks the specified TreeNodes as selected. | |
1030 | // nodes: TreeNode[] | |
1031 | // TreeNodes to mark. | |
1032 | this.dndController.setSelection(nodes); | |
1033 | }, | |
1034 | ||
1035 | ||
1036 | expandAll: function(){ | |
1037 | // summary: | |
1038 | // Expand all nodes in the tree | |
1039 | // returns: | |
1040 | // Deferred that fires when all nodes have expanded | |
1041 | ||
1042 | var _this = this; | |
1043 | ||
1044 | function expand(node){ | |
1045 | var def = new dojo.Deferred(); | |
1046 | ||
1047 | // Expand the node | |
1048 | _this._expandNode(node).then(function(){ | |
1049 | // When node has expanded, call expand() recursively on each non-leaf child | |
1050 | var childBranches = array.filter(node.getChildren() || [], function(node){ | |
1051 | return node.isExpandable; | |
1052 | }), | |
1053 | defs = array.map(childBranches, expand); | |
1054 | ||
1055 | // And when all those recursive calls finish, signal that I'm finished | |
1056 | new dojo.DeferredList(defs).then(function(){ | |
1057 | def.resolve(true); | |
1058 | }); | |
1059 | }); | |
1060 | ||
1061 | return def; | |
1062 | } | |
1063 | ||
1064 | return expand(this.rootNode); | |
1065 | }, | |
1066 | ||
1067 | collapseAll: function(){ | |
1068 | // summary: | |
1069 | // Collapse all nodes in the tree | |
1070 | // returns: | |
1071 | // Deferred that fires when all nodes have collapsed | |
1072 | ||
1073 | var _this = this; | |
1074 | ||
1075 | function collapse(node){ | |
1076 | var def = new dojo.Deferred(); | |
1077 | def.label = "collapseAllDeferred"; | |
1078 | ||
1079 | // Collapse children first | |
1080 | var childBranches = array.filter(node.getChildren() || [], function(node){ | |
1081 | return node.isExpandable; | |
1082 | }), | |
1083 | defs = array.map(childBranches, collapse); | |
1084 | ||
1085 | // And when all those recursive calls finish, collapse myself, unless I'm the invisible root node, | |
1086 | // in which case collapseAll() is finished | |
1087 | new dojo.DeferredList(defs).then(function(){ | |
1088 | if(!node.isExpanded || (node == _this.rootNode && !_this.showRoot)){ | |
1089 | def.resolve(true); | |
1090 | }else{ | |
1091 | _this._collapseNode(node).then(function(){ | |
1092 | // When node has collapsed, signal that call is finished | |
1093 | def.resolve(true); | |
1094 | }); | |
1095 | } | |
1096 | }); | |
1097 | ||
1098 | ||
1099 | return def; | |
1100 | } | |
1101 | ||
1102 | return collapse(this.rootNode); | |
1103 | }, | |
1104 | ||
1105 | ////////////// Data store related functions ////////////////////// | |
1106 | // These just get passed to the model; they are here for back-compat | |
1107 | ||
1108 | mayHaveChildren: function(/*dojo/data/Item*/ /*===== item =====*/){ | |
1109 | // summary: | |
1110 | // Deprecated. This should be specified on the model itself. | |
1111 | // | |
1112 | // Overridable function to tell if an item has or may have children. | |
1113 | // Controls whether or not +/- expando icon is shown. | |
1114 | // (For efficiency reasons we may not want to check if an element actually | |
1115 | // has children until user clicks the expando node) | |
1116 | // tags: | |
1117 | // deprecated | |
1118 | }, | |
1119 | ||
1120 | getItemChildren: function(/*===== parentItem, onComplete =====*/){ | |
1121 | // summary: | |
1122 | // Deprecated. This should be specified on the model itself. | |
1123 | // | |
1124 | // Overridable function that return array of child items of given parent item, | |
1125 | // or if parentItem==null then return top items in tree | |
1126 | // tags: | |
1127 | // deprecated | |
1128 | }, | |
1129 | ||
1130 | /////////////////////////////////////////////////////// | |
1131 | // Functions for converting an item to a TreeNode | |
1132 | getLabel: function(/*dojo/data/Item*/ item){ | |
1133 | // summary: | |
1134 | // Overridable function to get the label for a tree node (given the item) | |
1135 | // tags: | |
1136 | // extension | |
1137 | return this.model.getLabel(item); // String | |
1138 | }, | |
1139 | ||
1140 | getIconClass: function(/*dojo/data/Item*/ item, /*Boolean*/ opened){ | |
1141 | // summary: | |
1142 | // Overridable function to return CSS class name to display icon | |
1143 | // tags: | |
1144 | // extension | |
1145 | return (!item || this.model.mayHaveChildren(item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf" | |
1146 | }, | |
1147 | ||
1148 | getLabelClass: function(/*===== item, opened =====*/){ | |
1149 | // summary: | |
1150 | // Overridable function to return CSS class name to display label | |
1151 | // item: dojo/data/Item | |
1152 | // opened: Boolean | |
1153 | // returns: String | |
1154 | // CSS class name | |
1155 | // tags: | |
1156 | // extension | |
1157 | }, | |
1158 | ||
1159 | getRowClass: function(/*===== item, opened =====*/){ | |
1160 | // summary: | |
1161 | // Overridable function to return CSS class name to display row | |
1162 | // item: dojo/data/Item | |
1163 | // opened: Boolean | |
1164 | // returns: String | |
1165 | // CSS class name | |
1166 | // tags: | |
1167 | // extension | |
1168 | }, | |
1169 | ||
1170 | getIconStyle: function(/*===== item, opened =====*/){ | |
1171 | // summary: | |
1172 | // Overridable function to return CSS styles to display icon | |
1173 | // item: dojo/data/Item | |
1174 | // opened: Boolean | |
1175 | // returns: Object | |
1176 | // Object suitable for input to dojo.style() like {backgroundImage: "url(...)"} | |
1177 | // tags: | |
1178 | // extension | |
1179 | }, | |
1180 | ||
1181 | getLabelStyle: function(/*===== item, opened =====*/){ | |
1182 | // summary: | |
1183 | // Overridable function to return CSS styles to display label | |
1184 | // item: dojo/data/Item | |
1185 | // opened: Boolean | |
1186 | // returns: | |
1187 | // Object suitable for input to dojo.style() like {color: "red", background: "green"} | |
1188 | // tags: | |
1189 | // extension | |
1190 | }, | |
1191 | ||
1192 | getRowStyle: function(/*===== item, opened =====*/){ | |
1193 | // summary: | |
1194 | // Overridable function to return CSS styles to display row | |
1195 | // item: dojo/data/Item | |
1196 | // opened: Boolean | |
1197 | // returns: | |
1198 | // Object suitable for input to dojo.style() like {background-color: "#bbb"} | |
1199 | // tags: | |
1200 | // extension | |
1201 | }, | |
1202 | ||
1203 | getTooltip: function(/*dojo/data/Item*/ /*===== item =====*/){ | |
1204 | // summary: | |
1205 | // Overridable function to get the tooltip for a tree node (given the item) | |
1206 | // tags: | |
1207 | // extension | |
1208 | return ""; // String | |
1209 | }, | |
1210 | ||
1211 | /////////// Keyboard and Mouse handlers //////////////////// | |
1212 | ||
1213 | _onKeyPress: function(/*TreeNode*/ treeNode, /*Event*/ e){ | |
1214 | // summary: | |
1215 | // Handles keystrokes for printable keys, doing search navigation | |
1216 | ||
1217 | if(e.charCode <= 32){ | |
1218 | // Avoid duplicate events on firefox (this is an arrow key that will be handled by keydown handler) | |
1219 | return; | |
1220 | } | |
1221 | ||
1222 | if(!e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey){ | |
1223 | var c = String.fromCharCode(e.charCode); | |
1224 | this._onLetterKeyNav( { node: treeNode, key: c.toLowerCase() } ); | |
1225 | event.stop(e); | |
1226 | } | |
1227 | }, | |
1228 | ||
1229 | _onKeyDown: function(/*TreeNode*/ treeNode, /*Event*/ e){ | |
1230 | // summary: | |
1231 | // Handles arrow, space, and enter keys | |
1232 | ||
1233 | var key = e.keyCode; | |
1234 | ||
1235 | var map = this._keyHandlerMap; | |
1236 | if(!map){ | |
1237 | // Setup table mapping keys to events. | |
1238 | // On WebKit based browsers, the combination ctrl-enter does not get passed through. To allow accessible | |
1239 | // multi-select on those browsers, the space key is also used for selection. | |
1240 | // Therefore, also allow space key for keyboard "click" operation. | |
1241 | map = {}; | |
1242 | map[keys.ENTER] = map[keys.SPACE] = map[" "] = "_onEnterKey"; | |
1243 | map[this.isLeftToRight() ? keys.LEFT_ARROW : keys.RIGHT_ARROW] = "_onLeftArrow"; | |
1244 | map[this.isLeftToRight() ? keys.RIGHT_ARROW : keys.LEFT_ARROW] = "_onRightArrow"; | |
1245 | map[keys.UP_ARROW] = "_onUpArrow"; | |
1246 | map[keys.DOWN_ARROW] = "_onDownArrow"; | |
1247 | map[keys.HOME] = "_onHomeKey"; | |
1248 | map[keys.END] = "_onEndKey"; | |
1249 | this._keyHandlerMap = map; | |
1250 | } | |
1251 | ||
1252 | if(this._keyHandlerMap[key]){ | |
1253 | // clear record of recent printables (being saved for multi-char letter navigation), | |
1254 | // because "a", down-arrow, "b" shouldn't search for "ab" | |
1255 | if(this._curSearch){ | |
1256 | this._curSearch.timer.remove(); | |
1257 | delete this._curSearch; | |
1258 | } | |
1259 | ||
1260 | this[this._keyHandlerMap[key]]( { node: treeNode, item: treeNode.item, evt: e } ); | |
1261 | event.stop(e); | |
1262 | } | |
1263 | }, | |
1264 | ||
1265 | _onEnterKey: function(/*Object*/ message){ | |
1266 | this._publish("execute", { item: message.item, node: message.node } ); | |
1267 | this.dndController.userSelect(message.node, connect.isCopyKey( message.evt ), message.evt.shiftKey); | |
1268 | this.onClick(message.item, message.node, message.evt); | |
1269 | }, | |
1270 | ||
1271 | _onDownArrow: function(/*Object*/ message){ | |
1272 | // summary: | |
1273 | // down arrow pressed; get next visible node, set focus there | |
1274 | var node = this._getNextNode(message.node); | |
1275 | if(node && node.isTreeNode){ | |
1276 | this.focusNode(node); | |
1277 | } | |
1278 | }, | |
1279 | ||
1280 | _onUpArrow: function(/*Object*/ message){ | |
1281 | // summary: | |
1282 | // Up arrow pressed; move to previous visible node | |
1283 | ||
1284 | var node = message.node; | |
1285 | ||
1286 | // if younger siblings | |
1287 | var previousSibling = node.getPreviousSibling(); | |
1288 | if(previousSibling){ | |
1289 | node = previousSibling; | |
1290 | // if the previous node is expanded, dive in deep | |
1291 | while(node.isExpandable && node.isExpanded && node.hasChildren()){ | |
1292 | // move to the last child | |
1293 | var children = node.getChildren(); | |
1294 | node = children[children.length-1]; | |
1295 | } | |
1296 | }else{ | |
1297 | // if this is the first child, return the parent | |
1298 | // unless the parent is the root of a tree with a hidden root | |
1299 | var parent = node.getParent(); | |
1300 | if(!(!this.showRoot && parent === this.rootNode)){ | |
1301 | node = parent; | |
1302 | } | |
1303 | } | |
1304 | ||
1305 | if(node && node.isTreeNode){ | |
1306 | this.focusNode(node); | |
1307 | } | |
1308 | }, | |
1309 | ||
1310 | _onRightArrow: function(/*Object*/ message){ | |
1311 | // summary: | |
1312 | // Right arrow pressed; go to child node | |
1313 | var node = message.node; | |
1314 | ||
1315 | // if not expanded, expand, else move to 1st child | |
1316 | if(node.isExpandable && !node.isExpanded){ | |
1317 | this._expandNode(node); | |
1318 | }else if(node.hasChildren()){ | |
1319 | node = node.getChildren()[0]; | |
1320 | if(node && node.isTreeNode){ | |
1321 | this.focusNode(node); | |
1322 | } | |
1323 | } | |
1324 | }, | |
1325 | ||
1326 | _onLeftArrow: function(/*Object*/ message){ | |
1327 | // summary: | |
1328 | // Left arrow pressed. | |
1329 | // If not collapsed, collapse, else move to parent. | |
1330 | ||
1331 | var node = message.node; | |
1332 | ||
1333 | if(node.isExpandable && node.isExpanded){ | |
1334 | this._collapseNode(node); | |
1335 | }else{ | |
1336 | var parent = node.getParent(); | |
1337 | if(parent && parent.isTreeNode && !(!this.showRoot && parent === this.rootNode)){ | |
1338 | this.focusNode(parent); | |
1339 | } | |
1340 | } | |
1341 | }, | |
1342 | ||
1343 | _onHomeKey: function(){ | |
1344 | // summary: | |
1345 | // Home key pressed; get first visible node, and set focus there | |
1346 | var node = this._getRootOrFirstNode(); | |
1347 | if(node){ | |
1348 | this.focusNode(node); | |
1349 | } | |
1350 | }, | |
1351 | ||
1352 | _onEndKey: function(){ | |
1353 | // summary: | |
1354 | // End key pressed; go to last visible node. | |
1355 | ||
1356 | var node = this.rootNode; | |
1357 | while(node.isExpanded){ | |
1358 | var c = node.getChildren(); | |
1359 | node = c[c.length - 1]; | |
1360 | } | |
1361 | ||
1362 | if(node && node.isTreeNode){ | |
1363 | this.focusNode(node); | |
1364 | } | |
1365 | }, | |
1366 | ||
1367 | // multiCharSearchDuration: Number | |
1368 | // If multiple characters are typed where each keystroke happens within | |
1369 | // multiCharSearchDuration of the previous keystroke, | |
1370 | // search for nodes matching all the keystrokes. | |
1371 | // | |
1372 | // For example, typing "ab" will search for entries starting with | |
1373 | // "ab" unless the delay between "a" and "b" is greater than multiCharSearchDuration. | |
1374 | multiCharSearchDuration: 250, | |
1375 | ||
1376 | _onLetterKeyNav: function(message){ | |
1377 | // summary: | |
1378 | // Called when user presses a prinatable key; search for node starting with recently typed letters. | |
1379 | // message: Object | |
1380 | // Like { node: TreeNode, key: 'a' } where key is the key the user pressed. | |
1381 | ||
1382 | // Branch depending on whether this key starts a new search, or modifies an existing search | |
1383 | var cs = this._curSearch; | |
1384 | if(cs){ | |
1385 | // We are continuing a search. Ex: user has pressed 'a', and now has pressed | |
1386 | // 'b', so we want to search for nodes starting w/"ab". | |
1387 | cs.pattern = cs.pattern + message.key; | |
1388 | cs.timer.remove(); | |
1389 | }else{ | |
1390 | // We are starting a new search | |
1391 | cs = this._curSearch = { | |
1392 | pattern: message.key, | |
1393 | startNode: message.node | |
1394 | }; | |
1395 | } | |
1396 | ||
1397 | // set/reset timer to forget recent keystrokes | |
1398 | cs.timer = this.defer(function(){ | |
1399 | delete this._curSearch; | |
1400 | }, this.multiCharSearchDuration); | |
1401 | ||
1402 | // Navigate to TreeNode matching keystrokes [entered so far]. | |
1403 | var node = cs.startNode; | |
1404 | do{ | |
1405 | node = this._getNextNode(node); | |
1406 | //check for last node, jump to first node if necessary | |
1407 | if(!node){ | |
1408 | node = this._getRootOrFirstNode(); | |
1409 | } | |
1410 | }while(node !== cs.startNode && (node.label.toLowerCase().substr(0, cs.pattern.length) != cs.pattern)); | |
1411 | if(node && node.isTreeNode){ | |
1412 | // no need to set focus if back where we started | |
1413 | if(node !== cs.startNode){ | |
1414 | this.focusNode(node); | |
1415 | } | |
1416 | } | |
1417 | }, | |
1418 | ||
1419 | isExpandoNode: function(node, widget){ | |
1420 | // summary: | |
1421 | // check whether a dom node is the expandoNode for a particular TreeNode widget | |
1422 | return dom.isDescendant(node, widget.expandoNode) || dom.isDescendant(node, widget.expandoNodeText); | |
1423 | }, | |
1424 | ||
1425 | _onClick: function(/*TreeNode*/ nodeWidget, /*Event*/ e){ | |
1426 | // summary: | |
1427 | // Translates click events into commands for the controller to process | |
1428 | ||
1429 | var domElement = e.target, | |
1430 | isExpandoClick = this.isExpandoNode(domElement, nodeWidget); | |
1431 | ||
1432 | if( (this.openOnClick && nodeWidget.isExpandable) || isExpandoClick ){ | |
1433 | // expando node was clicked, or label of a folder node was clicked; open it | |
1434 | if(nodeWidget.isExpandable){ | |
1435 | this._onExpandoClick({node:nodeWidget}); | |
1436 | } | |
1437 | }else{ | |
1438 | this._publish("execute", { item: nodeWidget.item, node: nodeWidget, evt: e } ); | |
1439 | this.onClick(nodeWidget.item, nodeWidget, e); | |
1440 | this.focusNode(nodeWidget); | |
1441 | } | |
1442 | event.stop(e); | |
1443 | }, | |
1444 | _onDblClick: function(/*TreeNode*/ nodeWidget, /*Event*/ e){ | |
1445 | // summary: | |
1446 | // Translates double-click events into commands for the controller to process | |
1447 | ||
1448 | var domElement = e.target, | |
1449 | isExpandoClick = (domElement == nodeWidget.expandoNode || domElement == nodeWidget.expandoNodeText); | |
1450 | ||
1451 | if( (this.openOnDblClick && nodeWidget.isExpandable) ||isExpandoClick ){ | |
1452 | // expando node was clicked, or label of a folder node was clicked; open it | |
1453 | if(nodeWidget.isExpandable){ | |
1454 | this._onExpandoClick({node:nodeWidget}); | |
1455 | } | |
1456 | }else{ | |
1457 | this._publish("execute", { item: nodeWidget.item, node: nodeWidget, evt: e } ); | |
1458 | this.onDblClick(nodeWidget.item, nodeWidget, e); | |
1459 | this.focusNode(nodeWidget); | |
1460 | } | |
1461 | event.stop(e); | |
1462 | }, | |
1463 | ||
1464 | _onExpandoClick: function(/*Object*/ message){ | |
1465 | // summary: | |
1466 | // User clicked the +/- icon; expand or collapse my children. | |
1467 | var node = message.node; | |
1468 | ||
1469 | // If we are collapsing, we might be hiding the currently focused node. | |
1470 | // Also, clicking the expando node might have erased focus from the current node. | |
1471 | // For simplicity's sake just focus on the node with the expando. | |
1472 | this.focusNode(node); | |
1473 | ||
1474 | if(node.isExpanded){ | |
1475 | this._collapseNode(node); | |
1476 | }else{ | |
1477 | this._expandNode(node); | |
1478 | } | |
1479 | }, | |
1480 | ||
1481 | onClick: function(/*===== item, node, evt =====*/){ | |
1482 | // summary: | |
1483 | // Callback when a tree node is clicked | |
1484 | // item: Object | |
1485 | // Object from the dojo/store corresponding to this TreeNode | |
1486 | // node: TreeNode | |
1487 | // The TreeNode itself | |
1488 | // evt: Event | |
1489 | // The event | |
1490 | // tags: | |
1491 | // callback | |
1492 | }, | |
1493 | onDblClick: function(/*===== item, node, evt =====*/){ | |
1494 | // summary: | |
1495 | // Callback when a tree node is double-clicked | |
1496 | // item: Object | |
1497 | // Object from the dojo/store corresponding to this TreeNode | |
1498 | // node: TreeNode | |
1499 | // The TreeNode itself | |
1500 | // evt: Event | |
1501 | // The event | |
1502 | // tags: | |
1503 | // callback | |
1504 | }, | |
1505 | onOpen: function(/*===== item, node =====*/){ | |
1506 | // summary: | |
1507 | // Callback when a node is opened | |
1508 | // item: dojo/data/Item | |
1509 | // node: TreeNode | |
1510 | // tags: | |
1511 | // callback | |
1512 | }, | |
1513 | onClose: function(/*===== item, node =====*/){ | |
1514 | // summary: | |
1515 | // Callback when a node is closed | |
1516 | // item: Object | |
1517 | // Object from the dojo/store corresponding to this TreeNode | |
1518 | // node: TreeNode | |
1519 | // The TreeNode itself | |
1520 | // tags: | |
1521 | // callback | |
1522 | }, | |
1523 | ||
1524 | _getNextNode: function(node){ | |
1525 | // summary: | |
1526 | // Get next visible node | |
1527 | ||
1528 | if(node.isExpandable && node.isExpanded && node.hasChildren()){ | |
1529 | // if this is an expanded node, get the first child | |
1530 | return node.getChildren()[0]; // TreeNode | |
1531 | }else{ | |
1532 | // find a parent node with a sibling | |
1533 | while(node && node.isTreeNode){ | |
1534 | var returnNode = node.getNextSibling(); | |
1535 | if(returnNode){ | |
1536 | return returnNode; // TreeNode | |
1537 | } | |
1538 | node = node.getParent(); | |
1539 | } | |
1540 | return null; | |
1541 | } | |
1542 | }, | |
1543 | ||
1544 | _getRootOrFirstNode: function(){ | |
1545 | // summary: | |
1546 | // Get first visible node | |
1547 | return this.showRoot ? this.rootNode : this.rootNode.getChildren()[0]; | |
1548 | }, | |
1549 | ||
1550 | _collapseNode: function(/*TreeNode*/ node){ | |
1551 | // summary: | |
1552 | // Called when the user has requested to collapse the node | |
1553 | // returns: | |
1554 | // Deferred that fires when the node is closed | |
1555 | ||
1556 | if(node._expandNodeDeferred){ | |
1557 | delete node._expandNodeDeferred; | |
1558 | } | |
1559 | ||
1560 | if(node.state == "LOADING"){ | |
1561 | // ignore clicks while we are in the process of loading data | |
1562 | return; | |
1563 | } | |
1564 | ||
1565 | if(node.isExpanded){ | |
1566 | var ret = node.collapse(); | |
1567 | ||
1568 | this.onClose(node.item, node); | |
1569 | this._state(node, false); | |
1570 | ||
1571 | this._startPaint(ret); // after this finishes, need to reset widths of TreeNodes | |
1572 | ||
1573 | return ret; | |
1574 | } | |
1575 | }, | |
1576 | ||
1577 | _expandNode: function(/*TreeNode*/ node){ | |
1578 | // summary: | |
1579 | // Called when the user has requested to expand the node | |
1580 | // returns: | |
1581 | // Deferred that fires when the node is loaded and opened and (if persist=true) all it's descendants | |
1582 | // that were previously opened too | |
1583 | ||
1584 | // Signal that this call is complete | |
1585 | var def = new Deferred(); | |
1586 | ||
1587 | if(node._expandNodeDeferred){ | |
1588 | // there's already an expand in progress, or completed, so just return | |
1589 | return node._expandNodeDeferred; // dojo/_base/Deferred | |
1590 | } | |
1591 | ||
1592 | var model = this.model, | |
1593 | item = node.item, | |
1594 | _this = this; | |
1595 | ||
1596 | // Load data if it's not already loaded | |
1597 | if(!node._loadDeferred){ | |
1598 | // need to load all the children before expanding | |
1599 | node.markProcessing(); | |
1600 | ||
1601 | // Setup deferred to signal when the load and expand are finished. | |
1602 | // Save that deferred in this._expandDeferred as a flag that operation is in progress. | |
1603 | node._loadDeferred = new Deferred(); | |
1604 | ||
1605 | // Get the children | |
1606 | model.getChildren( | |
1607 | item, | |
1608 | function(items){ | |
1609 | node.unmarkProcessing(); | |
1610 | ||
1611 | // Display the children and also start expanding any children that were previously expanded | |
1612 | // (if this.persist == true). The returned Deferred will fire when those expansions finish. | |
1613 | node.setChildItems(items).then(function(){ | |
1614 | node._loadDeferred.resolve(items); | |
1615 | }); | |
1616 | }, | |
1617 | function(err){ | |
1618 | console.error(_this, ": error loading " + node.label + " children: ", err); | |
1619 | node._loadDeferred.reject(err); | |
1620 | } | |
1621 | ); | |
1622 | } | |
1623 | ||
1624 | // Expand the node after data has loaded | |
1625 | node._loadDeferred.then(lang.hitch(this, function(){ | |
1626 | node.expand().then(function(){ | |
1627 | def.resolve(true); // signal that this _expandNode() call is complete | |
1628 | }); | |
1629 | ||
1630 | // seems like these should be inside of then(), but left here for back-compat about | |
1631 | // when this.isOpen flag gets set (ie, at the beginning of the animation) | |
1632 | this.onOpen(node.item, node); | |
1633 | this._state(node, true); | |
1634 | })); | |
1635 | ||
1636 | this._startPaint(def); // after this finishes, need to reset widths of TreeNodes | |
1637 | ||
1638 | return def; // dojo/_base/Deferred | |
1639 | }, | |
1640 | ||
1641 | ////////////////// Miscellaneous functions //////////////// | |
1642 | ||
1643 | focusNode: function(/* _tree.Node */ node){ | |
1644 | // summary: | |
1645 | // Focus on the specified node (which must be visible) | |
1646 | // tags: | |
1647 | // protected | |
1648 | ||
1649 | // set focus so that the label will be voiced using screen readers | |
1650 | focus.focus(node.labelNode); | |
1651 | }, | |
1652 | ||
1653 | _onNodeFocus: function(/*dijit/_WidgetBase*/ node){ | |
1654 | // summary: | |
1655 | // Called when a TreeNode gets focus, either by user clicking | |
1656 | // it, or programatically by arrow key handling code. | |
1657 | // description: | |
1658 | // It marks that the current node is the selected one, and the previously | |
1659 | // selected node no longer is. | |
1660 | ||
1661 | if(node && node != this.lastFocused){ | |
1662 | if(this.lastFocused && !this.lastFocused._destroyed){ | |
1663 | // mark that the previously focsable node is no longer focusable | |
1664 | this.lastFocused.setFocusable(false); | |
1665 | } | |
1666 | ||
1667 | // mark that the new node is the currently selected one | |
1668 | node.setFocusable(true); | |
1669 | this.lastFocused = node; | |
1670 | } | |
1671 | }, | |
1672 | ||
1673 | _onNodeMouseEnter: function(/*dijit/_WidgetBase*/ /*===== node =====*/){ | |
1674 | // summary: | |
1675 | // Called when mouse is over a node (onmouseenter event), | |
1676 | // this is monitored by the DND code | |
1677 | }, | |
1678 | ||
1679 | _onNodeMouseLeave: function(/*dijit/_WidgetBase*/ /*===== node =====*/){ | |
1680 | // summary: | |
1681 | // Called when mouse leaves a node (onmouseleave event), | |
1682 | // this is monitored by the DND code | |
1683 | }, | |
1684 | ||
1685 | //////////////// Events from the model ////////////////////////// | |
1686 | ||
1687 | _onItemChange: function(/*Item*/ item){ | |
1688 | // summary: | |
1689 | // Processes notification of a change to an item's scalar values like label | |
1690 | var model = this.model, | |
1691 | identity = model.getIdentity(item), | |
1692 | nodes = this._itemNodesMap[identity]; | |
1693 | ||
1694 | if(nodes){ | |
1695 | var label = this.getLabel(item), | |
1696 | tooltip = this.getTooltip(item); | |
1697 | array.forEach(nodes, function(node){ | |
1698 | node.set({ | |
1699 | item: item, // theoretically could be new JS Object representing same item | |
1700 | label: label, | |
1701 | tooltip: tooltip | |
1702 | }); | |
1703 | node._updateItemClasses(item); | |
1704 | }); | |
1705 | } | |
1706 | }, | |
1707 | ||
1708 | _onItemChildrenChange: function(/*dojo/data/Item*/ parent, /*dojo/data/Item[]*/ newChildrenList){ | |
1709 | // summary: | |
1710 | // Processes notification of a change to an item's children | |
1711 | var model = this.model, | |
1712 | identity = model.getIdentity(parent), | |
1713 | parentNodes = this._itemNodesMap[identity]; | |
1714 | ||
1715 | if(parentNodes){ | |
1716 | array.forEach(parentNodes,function(parentNode){ | |
1717 | parentNode.setChildItems(newChildrenList); | |
1718 | }); | |
1719 | } | |
1720 | }, | |
1721 | ||
1722 | _onItemDelete: function(/*Item*/ item){ | |
1723 | // summary: | |
1724 | // Processes notification of a deletion of an item. | |
1725 | // Not called from new dojo.store interface but there's cleanup code in setChildItems() instead. | |
1726 | ||
1727 | var model = this.model, | |
1728 | identity = model.getIdentity(item), | |
1729 | nodes = this._itemNodesMap[identity]; | |
1730 | ||
1731 | if(nodes){ | |
1732 | array.forEach(nodes,function(node){ | |
1733 | // Remove node from set of selected nodes (if it's selected) | |
1734 | this.dndController.removeTreeNode(node); | |
1735 | ||
1736 | var parent = node.getParent(); | |
1737 | if(parent){ | |
1738 | // if node has not already been orphaned from a _onSetItem(parent, "children", ..) call... | |
1739 | parent.removeChild(node); | |
1740 | } | |
1741 | node.destroyRecursive(); | |
1742 | }, this); | |
1743 | delete this._itemNodesMap[identity]; | |
1744 | } | |
1745 | }, | |
1746 | ||
1747 | /////////////// Miscellaneous funcs | |
1748 | ||
1749 | _initState: function(){ | |
1750 | // summary: | |
1751 | // Load in which nodes should be opened automatically | |
1752 | this._openedNodes = {}; | |
1753 | if(this.persist && this.cookieName){ | |
1754 | var oreo = cookie(this.cookieName); | |
1755 | if(oreo){ | |
1756 | array.forEach(oreo.split(','), function(item){ | |
1757 | this._openedNodes[item] = true; | |
1758 | }, this); | |
1759 | } | |
1760 | } | |
1761 | }, | |
1762 | _state: function(node, expanded){ | |
1763 | // summary: | |
1764 | // Query or set expanded state for an node | |
1765 | if(!this.persist){ | |
1766 | return false; | |
1767 | } | |
1768 | var path = array.map(node.getTreePath(), function(item){ | |
1769 | return this.model.getIdentity(item); | |
1770 | }, this).join("/"); | |
1771 | if(arguments.length === 1){ | |
1772 | return this._openedNodes[path]; | |
1773 | }else{ | |
1774 | if(expanded){ | |
1775 | this._openedNodes[path] = true; | |
1776 | }else{ | |
1777 | delete this._openedNodes[path]; | |
1778 | } | |
1779 | if(this.persist && this.cookieName){ | |
1780 | var ary = []; | |
1781 | for(var id in this._openedNodes){ | |
1782 | ary.push(id); | |
1783 | } | |
1784 | cookie(this.cookieName, ary.join(","), {expires:365}); | |
1785 | } | |
1786 | } | |
1787 | }, | |
1788 | ||
1789 | destroy: function(){ | |
1790 | if(this._curSearch){ | |
1791 | this._curSearch.timer.remove(); | |
1792 | delete this._curSearch; | |
1793 | } | |
1794 | if(this.rootNode){ | |
1795 | this.rootNode.destroyRecursive(); | |
1796 | } | |
1797 | if(this.dndController && !lang.isString(this.dndController)){ | |
1798 | this.dndController.destroy(); | |
1799 | } | |
1800 | this.rootNode = null; | |
1801 | this.inherited(arguments); | |
1802 | }, | |
1803 | ||
1804 | destroyRecursive: function(){ | |
1805 | // A tree is treated as a leaf, not as a node with children (like a grid), | |
1806 | // but defining destroyRecursive for back-compat. | |
1807 | this.destroy(); | |
1808 | }, | |
1809 | ||
1810 | resize: function(changeSize){ | |
1811 | if(changeSize){ | |
1812 | domGeometry.setMarginBox(this.domNode, changeSize); | |
1813 | } | |
1814 | ||
1815 | // The main JS sizing involved w/tree is the indentation, which is specified | |
1816 | // in CSS and read in through this dummy indentDetector node (tree must be | |
1817 | // visible and attached to the DOM to read this). | |
1818 | // If the Tree is hidden domGeometry.position(this.tree.indentDetector).w will return 0, in which case just | |
1819 | // keep the default value. | |
1820 | this._nodePixelIndent = domGeometry.position(this.tree.indentDetector).w || this._nodePixelIndent; | |
1821 | ||
1822 | // resize() may be called before this.rootNode is created, so wait until it's available | |
1823 | this.expandChildrenDeferred.then(lang.hitch(this, function(){ | |
1824 | // If tree has already loaded, then reset indent for all the nodes | |
1825 | this.rootNode.set('indent', this.showRoot ? 0 : -1); | |
1826 | ||
1827 | // Also, adjust widths of all rows to match width of Tree | |
1828 | this._adjustWidths(); | |
1829 | })); | |
1830 | }, | |
1831 | ||
1832 | _outstandingPaintOperations: 0, | |
1833 | _startPaint: function(/*Promise|Boolean*/ p){ | |
1834 | // summary: | |
1835 | // Called at the start of an operation that will change what's displayed. | |
1836 | // p: | |
1837 | // Promise that tells when the operation will complete. Alternately, if it's just a Boolean, it signifies | |
1838 | // that the operation was synchronous, and already completed. | |
1839 | ||
1840 | this._outstandingPaintOperations++; | |
1841 | if(this._adjustWidthsTimer){ | |
1842 | this._adjustWidthsTimer.remove(); | |
1843 | delete this._adjustWidthsTimer; | |
1844 | } | |
1845 | ||
1846 | var oc = lang.hitch(this, function(){ | |
1847 | this._outstandingPaintOperations--; | |
1848 | ||
1849 | if(this._outstandingPaintOperations <= 0 && !this._adjustWidthsTimer && this._started){ | |
1850 | // Use defer() to avoid a width adjustment when another operation will immediately follow, | |
1851 | // such as a sequence of opening a node, then it's children, then it's grandchildren, etc. | |
1852 | this._adjustWidthsTimer = this.defer("_adjustWidths"); | |
1853 | } | |
1854 | }); | |
1855 | when(p, oc, oc); | |
1856 | }, | |
1857 | ||
1858 | _adjustWidths: function(){ | |
1859 | // summary: | |
1860 | // Get width of widest TreeNode, or the width of the Tree itself, whichever is greater, | |
1861 | // and then set all TreeNodes to that width, so that selection/hover highlighting | |
1862 | // extends to the edge of the Tree (#13141) | |
1863 | ||
1864 | if(this._adjustWidthsTimer){ | |
1865 | this._adjustWidthsTimer.remove(); | |
1866 | delete this._adjustWidthsTimer; | |
1867 | } | |
1868 | ||
1869 | var maxWidth = 0, | |
1870 | nodes = []; | |
1871 | function collect(/*TreeNode*/ parent){ | |
1872 | var node = parent.rowNode; | |
1873 | node.style.width = "auto"; // erase setting from previous run | |
1874 | maxWidth = Math.max(maxWidth, node.clientWidth); | |
1875 | nodes.push(node); | |
1876 | if(parent.isExpanded){ | |
1877 | array.forEach(parent.getChildren(), collect); | |
1878 | } | |
1879 | } | |
1880 | collect(this.rootNode); | |
1881 | maxWidth = Math.max(maxWidth, domGeometry.getContentBox(this.domNode).w); // do after node.style.width="auto" | |
1882 | array.forEach(nodes, function(node){ | |
1883 | node.style.width = maxWidth + "px"; // assumes no horizontal padding, border, or margin on rowNode | |
1884 | }); | |
1885 | }, | |
1886 | ||
1887 | _createTreeNode: function(/*Object*/ args){ | |
1888 | // summary: | |
1889 | // creates a TreeNode | |
1890 | // description: | |
1891 | // Developers can override this method to define their own TreeNode class; | |
1892 | // However it will probably be removed in a future release in favor of a way | |
1893 | // of just specifying a widget for the label, rather than one that contains | |
1894 | // the children too. | |
1895 | return new TreeNode(args); | |
1896 | }, | |
1897 | ||
1898 | _setTextDirAttr: function(textDir){ | |
1899 | if(textDir && this.textDir!= textDir){ | |
1900 | this._set("textDir",textDir); | |
1901 | this.rootNode.set("textDir", textDir); | |
1902 | } | |
1903 | } | |
1904 | }); | |
1905 | ||
1906 | Tree.PathError = createError("TreePathError"); | |
1907 | Tree._TreeNode = TreeNode; // for monkey patching or creating subclasses of TreeNode | |
1908 | ||
1909 | return Tree; | |
1910 | }); |