///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define(['dojo/_base/declare',
|
'dijit/_WidgetBase',
|
'dijit/_TemplatedMixin',
|
'dojo/text!./templates/_TreeNode.html',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/_base/array',
|
'dojo/_base/event',
|
'dojo/query',
|
'dojo/aspect',
|
'dojo/on',
|
'dojo/Evented',
|
'dijit/registry',
|
'dijit/Tree',
|
'jimu/utils'
|
],
|
function(declare, _WidgetBase, _TemplatedMixin, tnTemplate, lang, html, array,
|
dojoEvent, query, aspect, on, Evented, registry, DojoTree, jimuUtils) {
|
/*jshint unused: false*/
|
var JimuTreeNode = declare([DojoTree._TreeNode, Evented], {
|
templateString: tnTemplate,
|
declaredClass: 'jimu._TreeNode',
|
|
//options:
|
isLeaf: false,
|
groupId: "", //radio group
|
|
postCreate: function(){
|
this.inherited(arguments);
|
html.addClass(this.domNode, 'jimu-tree-node');
|
this.isLeaf = !!this.isLeaf;
|
|
if(this.groupId){
|
this.checkNode = html.toDom('<input type="radio" />');
|
this.checkNode.name = this.groupId;
|
}
|
else{
|
this.checkNode = html.toDom('<input type="checkbox" />');
|
}
|
|
html.addClass(this.checkNode, "jimu-tree-check-node");
|
|
html.place(this.checkNode, this.contentNode, 'first');
|
|
this.own(on(this.checkNode, 'click', lang.hitch(this, this._onClick)));
|
|
if(this.isLeaf){
|
if(this.groupId){
|
html.setStyle(this.checkNode, 'display', 'none');
|
}else{
|
html.setStyle(this.checkNode, 'display', 'inline');
|
}
|
}
|
else{
|
html.setStyle(this.checkNode, 'display', 'none');
|
}
|
if(this.isLeaf){
|
html.addClass(this.domNode, 'jimu-tree-leaf-node');
|
}else{
|
html.addClass(this.domNode, 'jimu-tree-not-leaf-node');
|
}
|
},
|
|
// hasSelectedClass: function(){
|
// if(this.rowNode){
|
// if(html.hasClass(this.rowNode, 'dijitTreeRowSelected')){
|
// return true;
|
// }
|
// }
|
// return false;
|
// },
|
|
select: function(){
|
if(this.isLeaf){
|
this.checkNode.checked = true;
|
html.addClass(this.domNode, 'jimu-tree-selected-leaf-node');
|
}
|
},
|
|
unselect: function(){
|
if(this.isLeaf){
|
this.checkNode.checked = false;
|
html.removeClass(this.domNode, 'jimu-tree-selected-leaf-node');
|
}
|
},
|
|
toggleSelect: function(){
|
if(this.isLeaf){
|
if(this.checkNode.checked){
|
this.unselect();
|
}else{
|
this.select();
|
}
|
}
|
},
|
|
_onClick: function(evt){
|
var target = evt.target || evt.srcElement;
|
if(target === this.checkNode){
|
this.tree._onCheckNodeClick(this, this.checkNode.checked, evt);
|
}
|
else{
|
this.tree._onClick(this, evt);
|
}
|
},
|
|
_onChange: function(){
|
if(this.isLeaf){
|
setTimeout(lang.hitch(this, function(){
|
if(this.checkNode.checked){
|
this.emit('tn-select', this);
|
}
|
else{
|
this.emit('tn-unselect', this);
|
}
|
}), 100);
|
}
|
},
|
|
destroy: function(){
|
delete this.tree;
|
this.inherited(arguments);
|
}
|
});
|
|
var JimuTree = declare([DojoTree, Evented], {
|
declaredClass:'jimu._Tree',
|
openOnClick: true,
|
|
//options:
|
multiple: true,
|
uniqueId: '',
|
showRoot: false,
|
|
//public methods:
|
//getSelectedItems
|
//getTreeNodeByItemId
|
//selectItem
|
//unselectItem
|
//removeItem
|
//getAllLeafTreeNodeWidgets
|
//getAllTreeNodeWidgets
|
|
//method need to be override
|
//isLeafItem
|
|
postMixInProperties: function(){
|
this.inherited(arguments);
|
this.uniqueId = "tree_" + jimuUtils.getRandomString();
|
},
|
|
postCreate: function(){
|
this.inherited(arguments);
|
html.addClass(this.domNode, 'jimu-tree');
|
this.own(aspect.before(this, 'onClick', lang.hitch(this, this._jimuBeforeClick)));
|
//this.own(aspect.before(this, 'onOpen', lang.hitch(this, this._jimuBeforeOpen)));
|
if(this.rootLoadingIndicator){
|
html.setStyle(this.rootLoadingIndicator, 'display', 'none');
|
}
|
//disable selection by shift key or ctrl key + mouse click
|
//http://stackoverflow.com/questions/12261723/
|
//how-to-disable-multiple-selection-of-nodes-in-dijit-tree
|
this.dndController.singular = true;
|
},
|
|
removeItem: function(id){
|
this.model.store.remove(id);
|
},
|
|
getAllItems: function(){
|
var allTNs = this.getAllTreeNodeWidgets();
|
var items = array.map(allTNs, lang.hitch(this, function(tn){
|
var a = tn.item;//lang.clone(tn.item);
|
a.selected = tn.checkNode.checked;
|
return a;
|
}));
|
return items;
|
},
|
|
getSelectedItems: function(){
|
var allTNs = this.getAllTreeNodeWidgets();
|
var selectedTNs = array.filter(allTNs, lang.hitch(this, function(tn){
|
return tn.checkNode.checked;
|
}));
|
// selectedTNs = array.filter(selectedTNs, lang.hitch(this, function(tn){
|
// return tn.hasSelectedClass();
|
// }));
|
var items = array.map(selectedTNs, lang.hitch(this, function(tn){
|
return tn.item;
|
}));
|
return items;//lang.clone(items) may throw an error
|
},
|
|
getFilteredItems: function(func){
|
var allTNs = this.getAllTreeNodeWidgets();
|
var allItems = array.map(allTNs, lang.hitch(this, function(tn){
|
var a = tn.item;//lang.clone(tn.item);
|
a.selected = tn.checkNode.checked;
|
return a;
|
}));
|
var filteredItems = array.filter(allItems, lang.hitch(this, function(item){
|
return func(item);
|
}));
|
return filteredItems;
|
},
|
|
getTreeNodeByItemId: function(itemId){
|
var doms = this._getAllTreeNodeDoms();
|
for(var i = 0; i < doms.length; i++){
|
var d = doms[i];
|
var tn = registry.byNode(d);
|
if(tn.item.id.toString() === itemId.toString()){
|
return tn;
|
}
|
}
|
return null;
|
},
|
|
selectItem: function(itemId){
|
var tn = this.getTreeNodeByItemId(itemId);
|
if(tn && tn.isLeaf){
|
//tn.select();
|
this.selectNodeWidget(tn);
|
}
|
},
|
|
unselectItem: function(itemId){
|
var tn = this.getTreeNodeByItemId(itemId);
|
if(tn && tn.isLeaf){
|
tn.unselect();
|
}
|
},
|
|
getAllLeafTreeNodeWidgets: function(){
|
var tns = this.getAllTreeNodeWidgets();
|
return array.filter(tns, lang.hitch(this, function(tn){
|
return tn.isLeaf;
|
}));
|
},
|
|
getAllTreeNodeWidgets: function(){
|
var doms = this._getAllTreeNodeDoms();
|
return array.map(doms, lang.hitch(this, function(node){
|
return registry.byNode(node);
|
}));
|
},
|
|
//to be override
|
isLeafItem: function(item){
|
return item && item.isLeaf;
|
},
|
|
_getAllTreeNodeDoms: function(){
|
return query('.dijitTreeNode', this.domNode);
|
},
|
|
_createTreeNode: function(args){
|
args.isLeaf = this.isLeafItem(args.item);
|
if(!this.multiple){
|
args.groupId = this.uniqueId;
|
}
|
var tn = new JimuTreeNode(args);
|
// this.own(on(tn, 'tn-select', lang.hitch(this, this._onTreeNodeSelect)));
|
// this.own(on(tn, 'tn-unselect', lang.hitch(this, this._onTreeNodeUnselect)));
|
return tn;
|
},
|
|
_onTreeNodeSelect: function(/*TreeNode*/ nodeWidget){
|
var item = nodeWidget.item;
|
var args = {
|
item: item,
|
treeNode: nodeWidget
|
};
|
this.emit('item-select', args);
|
},
|
|
_onTreeNodeUnselect: function(/*TreeNode*/ nodeWidget){
|
var item = nodeWidget.item;
|
var args = {
|
item: item,
|
treeNode: nodeWidget
|
};
|
this.emit('item-unselect', args);
|
},
|
|
selectNodeWidget: function(nodeWidget){
|
if(!this.multiple){
|
this.unselectAllLeafNodeWidgets();
|
}
|
nodeWidget.select();
|
},
|
|
_jimuBeforeClick: function(item, node, evt){
|
/*jshint unused: false*/
|
//only handle leaf node
|
if(node.isLeaf){
|
var target = evt.target || evt.srcElement;
|
//if click <input> in node, we don't handle it
|
//only handle it when click the row
|
if(!html.hasClass(target, 'jimu-tree-check-node')){
|
if(this.multiple){
|
node.toggleSelect();
|
}else{
|
//node.select();
|
this.selectNodeWidget(node);
|
}
|
}
|
}
|
return arguments;
|
},
|
|
_onCheckNodeClick: function(/*TreeNode*/ nodeWidget,/*Boolean*/ newState, /*Event*/ evt){
|
if(!this.multiple && newState){
|
this.unselectAllLeafNodeWidgets();
|
}
|
dojoEvent.stop(evt);
|
this.focusNode(nodeWidget);
|
setTimeout(lang.hitch(this, function(){
|
if(newState){
|
//nodeWidget.select();
|
this.selectNodeWidget(nodeWidget);
|
}else{
|
nodeWidget.unselect();
|
}
|
//nodeWidget.checkNode.checked = newState;
|
this.onClick(nodeWidget.item, nodeWidget, evt);
|
}), 0);
|
},
|
|
unselectAllLeafNodeWidgets: function(){
|
// var allCbxes = query('.jimu-tree-check-node', this.domNode);
|
// array.forEach(allCbxes, lang.hitch(this, function(checkNode){
|
// checkNode.checked = false;
|
// }));
|
var nodes = this.getAllLeafTreeNodeWidgets();
|
array.forEach(nodes, lang.hitch(this, function(nodeWidget){
|
nodeWidget.unselect();
|
}));
|
}
|
|
});
|
|
return JimuTree;
|
});
|
