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"}});
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()
26 "./registry", // registry.byNode(), registry.getEnclosingWidget()
27 "./_base/manager", // manager.defaultDuration
33 "dojo/text!./templates/TreeNode.html",
34 "dojo/text!./templates/Tree.html",
35 "./tree/TreeStoreModel",
36 "./tree/ForestStoreModel",
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
){
47 Deferred
= declare(Deferred
, {
48 addCallback: function(callback
){ this.then(callback
); },
49 addErrback: function(errback
){ this.then(null, errback
); }
52 var TreeNode
= declare(
54 [_Widget
, _TemplatedMixin
, _Container
, _Contained
, _CssStateMixin
],
57 // Single node within a tree. This class is used internally
58 // by Tree and should not be accessed directly.
63 // the dojo.data entry this tree represents
66 // isTreeNode: [protected] Boolean
67 // Indicates that this is a TreeNode. Used by `dijit.Tree` only,
68 // should not be accessed directly.
72 // Text of this tree node
74 _setLabelAttr
: {node
: "labelNode", type
: "innerText"},
76 // isExpandable: [private] Boolean
77 // This node has children, so show the expando node (+ sign)
80 // isExpanded: [readonly] Boolean
81 // This node is currently expanded (ie, opened)
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"
90 templateString
: treeNodeTemplate
,
92 baseClass
: "dijitTreeNode",
94 // For hover effect for tree node, and focus effect for label
96 rowNode
: "dijitTreeRow"
99 // Tooltip is defined in _WidgetBase but we need to handle the mapping to DOM here
100 _setTooltipAttr
: {node
: "rowNode", type
: "attribute", attribute
: "title"},
102 buildRendering: function(){
103 this.inherited(arguments
);
105 // set expand icon for leaf
108 // set icon and label class based on item
109 this._updateItemClasses(this.item
);
111 if(this.isExpandable
){
112 this.labelNode
.setAttribute("aria-expanded", this.isExpanded
);
115 //aria-selected should be false on all selectable elements.
116 this.setSelected(false);
119 _setIndentAttr: function(indent
){
121 // Tell this node how many levels it should be indented
123 // 0 for top level nodes, 1 for their children, 2 for their
124 // grandchildren, etc.
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";
129 domStyle
.set(this.domNode
, "backgroundPosition", pixels
+ " 0px"); // TODOC: what is this for???
130 domStyle
.set(this.indentNode
, this.isLeftToRight() ? "paddingLeft" : "paddingRight", pixels
);
132 array
.forEach(this.getChildren(), function(child
){
133 child
.set("indent", indent
+1);
136 this._set("indent", indent
);
139 markProcessing: function(){
141 // Visually denote that tree is loading data, etc.
144 this.state
= "LOADING";
145 this._setExpando(true);
148 unmarkProcessing: function(){
150 // Clear markup from markProcessing() call
153 this._setExpando(false);
156 _updateItemClasses: function(item
){
158 // Set appropriate CSS classes for icon and label dom node
159 // (used to allow for item updates to change respective CSS)
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)
167 this._applyClassAndStyle(item
, "icon", "Icon");
168 this._applyClassAndStyle(item
, "label", "Label");
169 this._applyClassAndStyle(item
, "row", "Row");
171 this.tree
._startPaint(true); // signifies paint started and finished (synchronously)
174 _applyClassAndStyle: function(item
, lower
, upper
){
176 // Set the appropriate CSS classes and styles for labels, icons and rows.
182 // The lower case attribute to use, e.g. 'icon', 'label' or 'row'.
185 // The upper case attribute to use, e.g. 'Icon', 'Label' or 'Row'.
190 var clsName
= "_" + lower
+ "Class";
191 var nodeName
= lower
+ "Node";
192 var oldCls
= this[clsName
];
194 this[clsName
] = this.tree
["get" + upper
+ "Class"](item
, this.isExpanded
);
195 domClass
.replace(this[nodeName
], this[clsName
] || "", oldCls
|| "");
197 domStyle
.set(this[nodeName
], this.tree
["get" + upper
+ "Style"](item
, this.isExpanded
) || {});
200 _updateLayout: function(){
202 // Set appropriate CSS classes for this.domNode
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");
210 domClass
.toggle(this.domNode
, "dijitTreeIsLast", !this.getNextSibling());
214 _setExpando: function(/*Boolean*/ processing
){
216 // Set the right image for the expando node
220 var styles
= ["dijitTreeExpandoLoading", "dijitTreeExpandoOpened",
221 "dijitTreeExpandoClosed", "dijitTreeExpandoLeaf"],
222 _a11yStates
= ["*","-","+","*"],
223 idx
= processing
? 0 : (this.isExpandable
? (this.isExpanded
? 1 : 2) : 3);
225 // apply the appropriate class to the expando node
226 domClass
.replace(this.expandoNode
, styles
[idx
], styles
);
228 // provide a non-image based indicator for images-off mode
229 this.expandoNodeText
.innerHTML
= _a11yStates
[idx
];
237 // Deferred that fires when expansion is complete
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
244 // cancel in progress collapse operation
245 if(this._collapseDeferred
){
246 this._collapseDeferred
.cancel();
247 delete this._collapseDeferred
;
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");
257 domClass
.add(this.contentNode
,'dijitTreeContentExpanded');
259 this._updateItemClasses(this.item
);
261 if(this == this.tree
.rootNode
&& this.tree
.showRoot
){
262 this.tree
.domNode
.setAttribute("aria-expanded", "true");
266 wipeIn
= fxUtils
.wipeIn({
267 node
: this.containerNode
,
268 duration
: manager
.defaultDuration
,
274 // Deferred that fires when expand is complete
275 def
= (this._expandDeferred
= new Deferred(function(){
282 return def
; // dojo/_base/Deferred
285 collapse: function(){
287 // Collapse this node (if it's expanded)
289 if(this._collapseDeferred
){
290 // Node is already collapsed, or there's a collapse in progress, just return that Deferred
291 return this._collapseDeferred
;
294 // cancel in progress expand operation
295 if(this._expandDeferred
){
296 this._expandDeferred
.cancel();
297 delete this._expandDeferred
;
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");
305 domClass
.remove(this.contentNode
,'dijitTreeContentExpanded');
307 this._updateItemClasses(this.item
);
310 wipeOut
= fxUtils
.wipeOut({
311 node
: this.containerNode
,
312 duration
: manager
.defaultDuration
,
318 // Deferred that fires when expand is complete
319 def
= (this._collapseDeferred
= new Deferred(function(){
326 return def
; // dojo/_base/Deferred
330 // Levels from this node to the root node
333 setChildItems: function(/* Object[] */ items
){
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
340 // Deferred object that fires after all previously opened children
341 // have been expanded again (or fires instantly if there are no such children).
343 var tree
= this.tree
,
345 defs
= []; // list of deferreds that need to fire before I am complete
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
);
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
);
365 // Deregister mapping from item id --> this node
366 var id
= model
.getIdentity(node
.item
),
367 ary
= tree
._itemNodesMap
[id
];
369 delete tree
._itemNodesMap
[id
];
371 var index
= array
.indexOf(ary
, node
);
373 ary
.splice(index
, 1);
377 // And finally we can destroy the node
378 node
.destroyRecursive();
383 this.state
= "LOADED";
385 if(items
&& items
.length
> 0){
386 this.isExpandable
= true;
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
391 array
.forEach(items
, function(item
){ // MARKER: REUSE NODE
392 var id
= model
.getIdentity(item
),
393 existingNodes
= tree
._itemNodesMap
[id
],
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);
405 node
= this.tree
._createTreeNode({
408 isExpandable
: model
.mayHaveChildren(item
),
409 label
: tree
.getLabel(item
),
410 tooltip
: tree
.getTooltip(item
),
411 ownerDocument
: tree
.ownerDocument
,
414 textDir
: tree
.textDir
,
415 indent
: this.indent
+ 1
418 existingNodes
.push(node
);
420 tree
._itemNodesMap
[id
] = [node
];
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
));
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();
438 this.isExpandable
=false;
441 if(this._setExpando
){
442 // change expando to/from dot or + icon, as appropriate
443 this._setExpando(false);
446 // Set leaf icon or folder icon, as appropriate
447 this._updateItemClasses(this.item
);
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];
454 fc
.setFocusable(true);
455 tree
.lastFocused
= fc
;
457 // fallback: no nodes in tree so focus on Tree <div> itself
458 tree
.domNode
.setAttribute("tabIndex", "0");
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
467 getTreePath: function(){
470 while(node
&& node
!== this.tree
.rootNode
){
471 path
.unshift(node
.item
);
472 node
= node
.getParent();
474 path
.unshift(this.tree
.rootNode
.item
);
479 getIdentity: function(){
480 return this.tree
.model
.getIdentity(this.item
);
483 removeChild: function(/* treeNode */ node
){
484 this.inherited(arguments
);
486 var children
= this.getChildren();
487 if(children
.length
== 0){
488 this.isExpandable
= false;
492 array
.forEach(children
, function(child
){
493 child
._updateLayout();
497 makeExpandable: function(){
499 // if this node wasn't already showing the expando node,
500 // turn it into one and call _setExpando()
502 // TODO: hmm this isn't called from anywhere, maybe should remove it for 2.0
504 this.isExpandable
= true;
505 this._setExpando(false);
508 setSelected: function(/*Boolean*/ selected
){
510 // A Tree has a (single) currently selected node.
511 // Mark that this node is/isn't that currently selected node.
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
);
519 setFocusable: function(/*Boolean*/ selected
){
521 // A Tree has a (single) node that's focusable.
522 // Mark that this node is/isn't that currently focsuable node.
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).
527 this.labelNode
.setAttribute("tabIndex", selected
? "0" : "-1");
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
);
542 var Tree
= declare("dijit.Tree", [_Widget
, _TemplatedMixin
], {
544 // This widget displays hierarchical data from a store.
546 // store: [deprecated] String|dojo/data/Store
547 // Deprecated. Use "model" parameter instead.
548 // The store to get data to display in the tree.
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)
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.
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.
568 // showRoot: [const] Boolean
569 // Should the root node be displayed, or hidden?
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"],
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.
583 // path: String[] or Item[]
584 // Backward compatible singular variant of paths.
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.
594 // selectedItem: [readonly] Item
595 // Backward compatible singular variant of selectedItems.
598 // openOnClick: Boolean
599 // If true, clicking a folder node's label will open it, rather than calling onClick()
602 // openOnDblClick: Boolean
603 // If true, double-clicking a folder node's label will open it, rather than calling onDblClick()
604 openOnDblClick
: false,
606 templateString
: treeTemplate
,
609 // Enables/disables use of cookies for state saving.
612 // autoExpand: Boolean
613 // Fully expand the tree on load. Overrides `persist`.
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
,
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"],
625 //declare the above items so they can be pulled from the tree's markup
627 // onDndDrop: [protected] Function
628 // Parameter to dndController, see `dijit/tree/dndSource.onDndDrop()`.
629 // Generally this doesn't need to be set.
634 itemCreator: function(nodes, target, source){
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.
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.
644 // The DOMNodes dragged from the source container
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
650 // Array of name/value hashes for each new item to be added to the Tree, like:
652 // | { id: 123, label: "apple", foo: "bar" },
653 // | { id: 456, label: "pear", zaz: "bam" }
661 // onDndCancel: [protected] Function
662 // Parameter to dndController, see `dijit/tree/dndSource.onDndCancel()`.
663 // Generally this doesn't need to be set.
667 checkAcceptance: function(source, nodes){
669 // Checks if the Tree itself can accept nodes from this source
670 // source: dijit/tree/dndSource
671 // The source which provides items
673 // Array of DOM nodes corresponding to nodes being dropped, dijitTreeRow nodes if
674 // source is a dijit/Tree.
677 return true; // Boolean
680 checkAcceptance
: null,
683 checkItemAcceptance: function(target, source, position){
685 // Stub function to be overridden if one wants to check for the ability to drop at the node/item level
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.
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
696 // "over", "before", or "after"
699 return true; // Boolean
702 checkItemAcceptance
: null,
704 // dragThreshold: Integer
705 // Number of pixels mouse moves before it's considered the start of a drag operation
708 // betweenThreshold: Integer
709 // Set to a positive value to allow drag and drop "between" nodes.
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.
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.
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,
726 _publish: function(/*String*/ topicName
, /*Object*/ message
){
728 // Publish a message for this widget/topic
729 topic
.publish(this.id
, lang
.mixin({tree
: this, event
: topicName
}, message
|| {})); // publish
732 postMixInProperties: function(){
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;
741 this._itemNodesMap
= {};
743 if(!this.cookieName
&& this.id
){
744 this.cookieName
= this.id
+ "SaveStateCookie";
747 // Deferred that fires when all the children have loaded.
748 this.expandChildrenDeferred
= new Deferred();
750 // Deferred that fires when all pending operations complete.
751 this.pendingCommandsDeferred
= this.expandChildrenDeferred
;
753 this.inherited(arguments
);
756 postCreate: function(){
759 // Catch events on TreeNodes
762 on(this.domNode
, on
.selector(".dijitTreeNode", touch
.enter
), function(evt
){
763 self
._onNodeMouseEnter(registry
.byNode(this), evt
);
765 on(this.domNode
, on
.selector(".dijitTreeNode", touch
.leave
), function(evt
){
766 self
._onNodeMouseLeave(registry
.byNode(this), evt
);
768 on(this.domNode
, on
.selector(".dijitTreeNode", "click"), function(evt
){
769 self
._onClick(registry
.byNode(this), evt
);
771 on(this.domNode
, on
.selector(".dijitTreeNode", "dblclick"), function(evt
){
772 self
._onDblClick(registry
.byNode(this), evt
);
774 on(this.domNode
, on
.selector(".dijitTreeNode", "keypress"), function(evt
){
775 self
._onKeyPress(registry
.byNode(this), evt
);
777 on(this.domNode
, on
.selector(".dijitTreeNode", "keydown"), function(evt
){
778 self
._onKeyDown(registry
.byNode(this), evt
);
780 on(this.domNode
, on
.selector(".dijitTreeRow", "focusin"), function(evt
){
781 self
._onNodeFocus(registry
.getEnclosingWidget(this), evt
);
785 // Create glue between store and Tree, if not specified directly by user
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");
795 this.inherited(arguments
);
797 if(this.dndController
){
798 if(lang
.isString(this.dndController
)){
799 this.dndController
= lang
.getObject(this.dndController
);
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
]];
807 this.dndController
= new this.dndController(this, params
);
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());
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
;
821 this.onLoadDeferred
.then(lang
.hitch(this, "onLoad"));
824 _store2model: function(){
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");
831 id
: this.id
+ "_ForestStoreModel",
834 childrenAttrs
: this.childrenAttr
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");
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
);
847 this.model
= new ForestStoreModel(modelParams
);
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
);
856 // Called when tree finishes loading and expanding.
858 // If persist == true the loading may encompass many levels of fetches
859 // from the data store, each asynchronous. Waits for all to finish.
866 // Initial load of the tree.
867 // Load root node (possibly hidden) and it's children.
869 lang
.hitch(this, function(item
){
870 var rn
= (this.rootNode
= this.tree
._createTreeNode({
874 label
: this.label
|| this.getLabel(item
),
875 textDir
: this.textDir
,
876 indent
: this.showRoot
? 0 : -1
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");
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
);
892 this.domNode
.setAttribute("aria-multiselectable", !this.dndController
.singular
);
895 this.domNode
.appendChild(rn
.domNode
);
896 var identity
= this.model
.getIdentity(item
);
897 if(this._itemNodesMap
[identity
]){
898 this._itemNodesMap
[identity
].push(rn
);
900 this._itemNodesMap
[identity
] = [rn
];
903 rn
._updateLayout(); // sets "dijitTreeIsRoot" CSS classname
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[].
910 this.expandChildrenDeferred
.resolve(true);
913 lang
.hitch(this, function(err
){
914 console
.error(this, ": error loading root: ", err
);
919 getNodesByItem: function(/*Item or id*/ item
){
921 // Returns all tree nodes that refer to an item
923 // Array of tree nodes that refer to passed item
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
]);
931 _setSelectedItemAttr: function(/*Item or id*/ item
){
932 this.set('selectedItems', [item
]);
935 _setSelectedItemsAttr: function(/*Items or ids*/ items
){
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.
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
);
946 array
.forEach(identities
, function(id
){
947 nodes
= nodes
.concat(tree
._itemNodesMap
[id
] || []);
949 this.set('selectedNodes', nodes
);
953 _setPathAttr: function(/*Item[]|String[]*/ path
){
955 // Singular variant of _setPathsAttr
957 return this.set("paths", [path
]);
959 // Empty list is interpreted as "select nothing"
960 return this.set("paths", []);
964 _setPathsAttr: function(/*Item[][]|String[][]*/ paths
){
966 // Select the tree nodes identified by passed paths.
968 // Array of arrays of items or item id's
970 // Deferred to indicate when the set is complete
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();
982 // normalize path to use identity
983 path
= array
.map(path
, function(item
){
984 return lang
.isString(item
) ? item
: tree
.model
.getIdentity(item
);
988 // Wait for the tree to load, if it hasn't already.
989 selectPath(path
, [tree
.rootNode
], d
);
991 d
.reject(new Tree
.PathError("Empty path"));
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
;
1005 tree
._expandNode(nextNode
).then(function(){ selectPath(path
, nextNode
.getChildren(), def
); });
1007 // Successfully reached the end of this path
1008 def
.resolve(nextNode
);
1011 def
.reject(new Tree
.PathError("Could not expand path at " + nextPath
));
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];}));
1024 _setSelectedNodeAttr: function(node
){
1025 this.set('selectedNodes', [node
]);
1027 _setSelectedNodesAttr: function(nodes
){
1029 // Marks the specified TreeNodes as selected.
1030 // nodes: TreeNode[]
1031 // TreeNodes to mark.
1032 this.dndController
.setSelection(nodes
);
1036 expandAll: function(){
1038 // Expand all nodes in the tree
1040 // Deferred that fires when all nodes have expanded
1044 function expand(node
){
1045 var def
= new dojo
.Deferred();
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
;
1053 defs
= array
.map(childBranches
, expand
);
1055 // And when all those recursive calls finish, signal that I'm finished
1056 new dojo
.DeferredList(defs
).then(function(){
1064 return expand(this.rootNode
);
1067 collapseAll: function(){
1069 // Collapse all nodes in the tree
1071 // Deferred that fires when all nodes have collapsed
1075 function collapse(node
){
1076 var def
= new dojo
.Deferred();
1077 def
.label
= "collapseAllDeferred";
1079 // Collapse children first
1080 var childBranches
= array
.filter(node
.getChildren() || [], function(node
){
1081 return node
.isExpandable
;
1083 defs
= array
.map(childBranches
, collapse
);
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
)){
1091 _this
._collapseNode(node
).then(function(){
1092 // When node has collapsed, signal that call is finished
1102 return collapse(this.rootNode
);
1105 ////////////// Data store related functions //////////////////////
1106 // These just get passed to the model; they are here for back-compat
1108 mayHaveChildren: function(/*dojo/data/Item*/ /*===== item =====*/){
1110 // Deprecated. This should be specified on the model itself.
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)
1120 getItemChildren: function(/*===== parentItem, onComplete =====*/){
1122 // Deprecated. This should be specified on the model itself.
1124 // Overridable function that return array of child items of given parent item,
1125 // or if parentItem==null then return top items in tree
1130 ///////////////////////////////////////////////////////
1131 // Functions for converting an item to a TreeNode
1132 getLabel: function(/*dojo/data/Item*/ item
){
1134 // Overridable function to get the label for a tree node (given the item)
1137 return this.model
.getLabel(item
); // String
1140 getIconClass: function(/*dojo/data/Item*/ item
, /*Boolean*/ opened
){
1142 // Overridable function to return CSS class name to display icon
1145 return (!item
|| this.model
.mayHaveChildren(item
)) ? (opened
? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"
1148 getLabelClass: function(/*===== item, opened =====*/){
1150 // Overridable function to return CSS class name to display label
1151 // item: dojo/data/Item
1159 getRowClass: function(/*===== item, opened =====*/){
1161 // Overridable function to return CSS class name to display row
1162 // item: dojo/data/Item
1170 getIconStyle: function(/*===== item, opened =====*/){
1172 // Overridable function to return CSS styles to display icon
1173 // item: dojo/data/Item
1176 // Object suitable for input to dojo.style() like {backgroundImage: "url(...)"}
1181 getLabelStyle: function(/*===== item, opened =====*/){
1183 // Overridable function to return CSS styles to display label
1184 // item: dojo/data/Item
1187 // Object suitable for input to dojo.style() like {color: "red", background: "green"}
1192 getRowStyle: function(/*===== item, opened =====*/){
1194 // Overridable function to return CSS styles to display row
1195 // item: dojo/data/Item
1198 // Object suitable for input to dojo.style() like {background-color: "#bbb"}
1203 getTooltip: function(/*dojo/data/Item*/ /*===== item =====*/){
1205 // Overridable function to get the tooltip for a tree node (given the item)
1208 return ""; // String
1211 /////////// Keyboard and Mouse handlers ////////////////////
1213 _onKeyPress: function(/*TreeNode*/ treeNode
, /*Event*/ e
){
1215 // Handles keystrokes for printable keys, doing search navigation
1217 if(e
.charCode
<= 32){
1218 // Avoid duplicate events on firefox (this is an arrow key that will be handled by keydown handler)
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() } );
1229 _onKeyDown: function(/*TreeNode*/ treeNode
, /*Event*/ e
){
1231 // Handles arrow, space, and enter keys
1233 var key
= e
.keyCode
;
1235 var map
= this._keyHandlerMap
;
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.
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
;
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
;
1260 this[this._keyHandlerMap
[key
]]( { node
: treeNode
, item
: treeNode
.item
, evt
: e
} );
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
);
1271 _onDownArrow: function(/*Object*/ message
){
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
);
1280 _onUpArrow: function(/*Object*/ message
){
1282 // Up arrow pressed; move to previous visible node
1284 var node
= message
.node
;
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];
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
)){
1305 if(node
&& node
.isTreeNode
){
1306 this.focusNode(node
);
1310 _onRightArrow: function(/*Object*/ message
){
1312 // Right arrow pressed; go to child node
1313 var node
= message
.node
;
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
);
1326 _onLeftArrow: function(/*Object*/ message
){
1328 // Left arrow pressed.
1329 // If not collapsed, collapse, else move to parent.
1331 var node
= message
.node
;
1333 if(node
.isExpandable
&& node
.isExpanded
){
1334 this._collapseNode(node
);
1336 var parent
= node
.getParent();
1337 if(parent
&& parent
.isTreeNode
&& !(!this.showRoot
&& parent
=== this.rootNode
)){
1338 this.focusNode(parent
);
1343 _onHomeKey: function(){
1345 // Home key pressed; get first visible node, and set focus there
1346 var node
= this._getRootOrFirstNode();
1348 this.focusNode(node
);
1352 _onEndKey: function(){
1354 // End key pressed; go to last visible node.
1356 var node
= this.rootNode
;
1357 while(node
.isExpanded
){
1358 var c
= node
.getChildren();
1359 node
= c
[c
.length
- 1];
1362 if(node
&& node
.isTreeNode
){
1363 this.focusNode(node
);
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.
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,
1376 _onLetterKeyNav: function(message
){
1378 // Called when user presses a prinatable key; search for node starting with recently typed letters.
1380 // Like { node: TreeNode, key: 'a' } where key is the key the user pressed.
1382 // Branch depending on whether this key starts a new search, or modifies an existing search
1383 var cs
= this._curSearch
;
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
;
1390 // We are starting a new search
1391 cs
= this._curSearch
= {
1392 pattern
: message
.key
,
1393 startNode
: message
.node
1397 // set/reset timer to forget recent keystrokes
1398 cs
.timer
= this.defer(function(){
1399 delete this._curSearch
;
1400 }, this.multiCharSearchDuration
);
1402 // Navigate to TreeNode matching keystrokes [entered so far].
1403 var node
= cs
.startNode
;
1405 node
= this._getNextNode(node
);
1406 //check for last node, jump to first node if necessary
1408 node
= this._getRootOrFirstNode();
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
);
1419 isExpandoNode: function(node
, widget
){
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
);
1425 _onClick: function(/*TreeNode*/ nodeWidget
, /*Event*/ e
){
1427 // Translates click events into commands for the controller to process
1429 var domElement
= e
.target
,
1430 isExpandoClick
= this.isExpandoNode(domElement
, nodeWidget
);
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
});
1438 this._publish("execute", { item
: nodeWidget
.item
, node
: nodeWidget
, evt
: e
} );
1439 this.onClick(nodeWidget
.item
, nodeWidget
, e
);
1440 this.focusNode(nodeWidget
);
1444 _onDblClick: function(/*TreeNode*/ nodeWidget
, /*Event*/ e
){
1446 // Translates double-click events into commands for the controller to process
1448 var domElement
= e
.target
,
1449 isExpandoClick
= (domElement
== nodeWidget
.expandoNode
|| domElement
== nodeWidget
.expandoNodeText
);
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
});
1457 this._publish("execute", { item
: nodeWidget
.item
, node
: nodeWidget
, evt
: e
} );
1458 this.onDblClick(nodeWidget
.item
, nodeWidget
, e
);
1459 this.focusNode(nodeWidget
);
1464 _onExpandoClick: function(/*Object*/ message
){
1466 // User clicked the +/- icon; expand or collapse my children.
1467 var node
= message
.node
;
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
);
1474 if(node
.isExpanded
){
1475 this._collapseNode(node
);
1477 this._expandNode(node
);
1481 onClick: function(/*===== item, node, evt =====*/){
1483 // Callback when a tree node is clicked
1485 // Object from the dojo/store corresponding to this TreeNode
1487 // The TreeNode itself
1493 onDblClick: function(/*===== item, node, evt =====*/){
1495 // Callback when a tree node is double-clicked
1497 // Object from the dojo/store corresponding to this TreeNode
1499 // The TreeNode itself
1505 onOpen: function(/*===== item, node =====*/){
1507 // Callback when a node is opened
1508 // item: dojo/data/Item
1513 onClose: function(/*===== item, node =====*/){
1515 // Callback when a node is closed
1517 // Object from the dojo/store corresponding to this TreeNode
1519 // The TreeNode itself
1524 _getNextNode: function(node
){
1526 // Get next visible node
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
1532 // find a parent node with a sibling
1533 while(node
&& node
.isTreeNode
){
1534 var returnNode
= node
.getNextSibling();
1536 return returnNode
; // TreeNode
1538 node
= node
.getParent();
1544 _getRootOrFirstNode: function(){
1546 // Get first visible node
1547 return this.showRoot
? this.rootNode
: this.rootNode
.getChildren()[0];
1550 _collapseNode: function(/*TreeNode*/ node
){
1552 // Called when the user has requested to collapse the node
1554 // Deferred that fires when the node is closed
1556 if(node
._expandNodeDeferred
){
1557 delete node
._expandNodeDeferred
;
1560 if(node
.state
== "LOADING"){
1561 // ignore clicks while we are in the process of loading data
1565 if(node
.isExpanded
){
1566 var ret
= node
.collapse();
1568 this.onClose(node
.item
, node
);
1569 this._state(node
, false);
1571 this._startPaint(ret
); // after this finishes, need to reset widths of TreeNodes
1577 _expandNode: function(/*TreeNode*/ node
){
1579 // Called when the user has requested to expand the node
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
1584 // Signal that this call is complete
1585 var def
= new Deferred();
1587 if(node
._expandNodeDeferred
){
1588 // there's already an expand in progress, or completed, so just return
1589 return node
._expandNodeDeferred
; // dojo/_base/Deferred
1592 var model
= this.model
,
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();
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();
1609 node
.unmarkProcessing();
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
);
1618 console
.error(_this
, ": error loading " + node
.label
+ " children: ", err
);
1619 node
._loadDeferred
.reject(err
);
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
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);
1636 this._startPaint(def
); // after this finishes, need to reset widths of TreeNodes
1638 return def
; // dojo/_base/Deferred
1641 ////////////////// Miscellaneous functions ////////////////
1643 focusNode: function(/* _tree.Node */ node
){
1645 // Focus on the specified node (which must be visible)
1649 // set focus so that the label will be voiced using screen readers
1650 focus
.focus(node
.labelNode
);
1653 _onNodeFocus: function(/*dijit/_WidgetBase*/ node){
1655 // Called when a TreeNode gets focus, either by user clicking
1656 // it, or programatically by arrow key handling code.
1658 // It marks that the current node is the selected one, and the previously
1659 // selected node no longer is.
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);
1667 // mark that the new node is the currently selected one
1668 node.setFocusable(true);
1669 this.lastFocused = node;
1673 _onNodeMouseEnter: function(/*dijit/_WidgetBase*/ /*===== node =====*/){
1675 // Called when mouse is over a node (onmouseenter event),
1676 // this is monitored by the DND code
1679 _onNodeMouseLeave: function(/*dijit/_WidgetBase*/ /*===== node =====*/){
1681 // Called when mouse leaves a node (onmouseleave event),
1682 // this is monitored by the DND code
1685 //////////////// Events from the model //////////////////////////
1687 _onItemChange: function(/*Item*/ item
){
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
];
1695 var label
= this.getLabel(item
),
1696 tooltip
= this.getTooltip(item
);
1697 array
.forEach(nodes
, function(node
){
1699 item
: item
, // theoretically could be new JS Object representing same item
1703 node
._updateItemClasses(item
);
1708 _onItemChildrenChange: function(/*dojo/data/Item*/ parent
, /*dojo/data/Item[]*/ newChildrenList
){
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
];
1716 array
.forEach(parentNodes
,function(parentNode
){
1717 parentNode
.setChildItems(newChildrenList
);
1722 _onItemDelete: function(/*Item*/ item
){
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.
1727 var model
= this.model
,
1728 identity
= model
.getIdentity(item
),
1729 nodes
= this._itemNodesMap
[identity
];
1732 array
.forEach(nodes
,function(node
){
1733 // Remove node from set of selected nodes (if it's selected)
1734 this.dndController
.removeTreeNode(node
);
1736 var parent
= node
.getParent();
1738 // if node has not already been orphaned from a _onSetItem(parent, "children", ..) call...
1739 parent
.removeChild(node
);
1741 node
.destroyRecursive();
1743 delete this._itemNodesMap
[identity
];
1747 /////////////// Miscellaneous funcs
1749 _initState: function(){
1751 // Load in which nodes should be opened automatically
1752 this._openedNodes
= {};
1753 if(this.persist
&& this.cookieName
){
1754 var oreo
= cookie(this.cookieName
);
1756 array
.forEach(oreo
.split(','), function(item
){
1757 this._openedNodes
[item
] = true;
1762 _state: function(node
, expanded
){
1764 // Query or set expanded state for an node
1768 var path
= array
.map(node
.getTreePath(), function(item
){
1769 return this.model
.getIdentity(item
);
1771 if(arguments
.length
=== 1){
1772 return this._openedNodes
[path
];
1775 this._openedNodes
[path
] = true;
1777 delete this._openedNodes
[path
];
1779 if(this.persist
&& this.cookieName
){
1781 for(var id
in this._openedNodes
){
1784 cookie(this.cookieName
, ary
.join(","), {expires
:365});
1789 destroy: function(){
1790 if(this._curSearch
){
1791 this._curSearch
.timer
.remove();
1792 delete this._curSearch
;
1795 this.rootNode
.destroyRecursive();
1797 if(this.dndController
&& !lang
.isString(this.dndController
)){
1798 this.dndController
.destroy();
1800 this.rootNode
= null;
1801 this.inherited(arguments
);
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.
1810 resize: function(changeSize
){
1812 domGeometry
.setMarginBox(this.domNode
, changeSize
);
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
;
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);
1827 // Also, adjust widths of all rows to match width of Tree
1828 this._adjustWidths();
1832 _outstandingPaintOperations
: 0,
1833 _startPaint: function(/*Promise|Boolean*/ p
){
1835 // Called at the start of an operation that will change what's displayed.
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.
1840 this._outstandingPaintOperations
++;
1841 if(this._adjustWidthsTimer
){
1842 this._adjustWidthsTimer
.remove();
1843 delete this._adjustWidthsTimer
;
1846 var oc
= lang
.hitch(this, function(){
1847 this._outstandingPaintOperations
--;
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");
1858 _adjustWidths: function(){
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)
1864 if(this._adjustWidthsTimer
){
1865 this._adjustWidthsTimer
.remove();
1866 delete this._adjustWidthsTimer
;
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
);
1876 if(parent
.isExpanded
){
1877 array
.forEach(parent
.getChildren(), collect
);
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
1887 _createTreeNode: function(/*Object*/ args
){
1889 // creates a TreeNode
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
);
1898 _setTextDirAttr: function(textDir
){
1899 if(textDir
&& this.textDir
!= textDir
){
1900 this._set("textDir",textDir
);
1901 this.rootNode
.set("textDir", textDir
);
1906 Tree
.PathError
= createError("TreePathError");
1907 Tree
._TreeNode
= TreeNode
; // for monkey patching or creating subclasses of TreeNode