Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add poperties: css classes, mergeOptionsFromData, rootNode, console. … #3

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add poperties: css classes, mergeOptionsFromData, rootNode, console. … #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ import Tree from '@widgetjs/tree';
"text": "node-0",
"attributes": {},
"children": [],
"check": true
"checked": true,
"disabled": false
}
```

Expand All @@ -65,7 +66,8 @@ import Tree from '@widgetjs/tree';
| text | string | tree node label | Required |
| attributes | object | custom attributes of the node | Optional |
| children | array | children of current node | Optional |
| check | boolean | whether the node is selected or not | Optional |
| checked | boolean | whether the node is selected or not | Optional |
| disabled | boolean | whether the node is disabled or not | Optional |

### Example

Expand All @@ -83,10 +85,20 @@ const myTree = new Tree('#container', {
| method | string | http method(GET/POST), default 'GET' |
| data | array | the json tree data |
| values | array | ids which you want to check |
| disables | array | ids which you want to disable |
| closeDepth | integer | expand level |
| beforeLoad | function | invoke before the tree load data. Format raw data in this function. |
| loaded | function | invoke after the tree load data |
| onChange | function | invoke when the node status change |
| rootNode | boolean | shows the root node - Default: true |
| mergeOptionsFromData | boolean | merge checked / disabled from data node with parameter values / disables - Default: true |
| ulClass | string | add a CSS class to the ul-Element |
| liClass | string | add a CSS class to the li-Element |
| checkboxClass | string | add a CSS class to the checkbox |
| labelClass | string | add a CSS class to the label |
| switcherClass | string | add a CSS class to the switcher (expand / collapse Icon) |
| console | boolean | shows the console output - Default false |


### Example

Expand All @@ -99,6 +111,7 @@ const treeData = [
{
id: '0-0',
text: 'node-0-0',
checked: true,
children: [
{id: '0-0-0', text: 'node-0-0-0'},
{id: '0-0-1', text: 'node-0-0-1'},
Expand All @@ -111,7 +124,7 @@ const treeData = [
{
id: '1',
text: 'node-1',
children: [{id: '1-0', text: 'node-1-0'}, {id: '1-1', text: 'node-1-1'}],
children: [{id: '1-0', text: 'node-1-0', disabled: true}, {id: '1-1', text: 'node-1-1'}],
},
];

Expand Down Expand Up @@ -141,7 +154,10 @@ const myTree = new Tree('#container', {
// do something or set values after Tree loaded callback
// do not use arrow function `()=>` , if you use `this`, use function instead.
// this context bind current tree instance
console.log(this.values);
//Replace the selected nodes
this.values = ['0-1'];
console.log(this.values);
},

onChange: function() {
Expand Down
111 changes: 79 additions & 32 deletions dist/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,15 @@ function Tree(container, options) {
loaded: null,
url: null,
method: 'GET',
closeDepth: null
closeDepth: null,
rootNode: true,
mergeOptionsFromData: true,
console: false,
labelClass: "",
checkboxClass: "",
liClass: "",
ulClass: "",
switcherClass: ""
};
this.treeNodes = [];
this.nodesById = {};
Expand Down Expand Up @@ -241,7 +249,9 @@ function Tree(container, options) {
}

Tree.prototype.init = function (data) {
console.time('init');
if (this.options.console) {
console.time('init');
}

var _Tree$parseTreeData = Tree.parseTreeData(data),
treeNodes = _Tree$parseTreeData.treeNodes,
Expand All @@ -258,16 +268,34 @@ Tree.prototype.init = function (data) {
values = _this$options.values,
disables = _this$options.disables,
loaded = _this$options.loaded;
if (values && values.length) defaultValues = values;

if (!this.options.mergeOptionsFromData) {
defaultValues = [];
}

if (values && values.length) defaultValues = defaultValues.concat(values);
defaultValues.length && this.setValues(defaultValues);
if (disables && disables.length) defaultDisables = disables;

if (!this.options.mergeOptionsFromData) {
defaultDisables = [];
}

if (disables && disables.length) defaultDisables = defaultDisables.concat(disables);
defaultDisables.length && this.setDisables(defaultDisables);
loaded && loaded.call(this);
console.timeEnd('init');

if (this.options.console) {
console.timeEnd('init');
}
};

Tree.prototype.load = function (callback) {
console.time('load');
var _this2 = this;

if (this.options.console) {
console.time('load');
}

var _this$options2 = this.options,
url = _this$options2.url,
method = _this$options2.method,
Expand All @@ -277,7 +305,10 @@ Tree.prototype.load = function (callback) {
method: method,
success: function success(result) {
var data = result;
console.timeEnd('load');

if (_this2.options.console) {
console.timeEnd('load');
}

if (beforeLoad) {
data = beforeLoad(result);
Expand All @@ -290,26 +321,32 @@ Tree.prototype.load = function (callback) {

Tree.prototype.render = function (treeNodes) {
var treeEle = Tree.createRootEle();
treeEle.appendChild(this.buildTree(treeNodes, 0));
var tree = this.buildTree(treeNodes, 0);

if (!this.options.rootNode) {
tree = tree.getElementsByTagName('ul').item(0);
}

treeEle.appendChild(tree);
this.bindEvent(treeEle);
var ele = document.querySelector(this.container);
empty(ele);
ele.appendChild(treeEle);
};

Tree.prototype.buildTree = function (nodes, depth) {
var _this2 = this;
var _this3 = this;

var rootUlEle = Tree.createUlEle();
var rootUlEle = Tree.createUlEle(this.options);

if (nodes && nodes.length) {
nodes.forEach(function (node) {
var liEle = Tree.createLiEle(node, depth === _this2.options.closeDepth - 1);
_this2.liElementsById[node.id] = liEle;
var liEle = Tree.createLiEle(node, depth === _this3.options.closeDepth - 1, _this3.options);
_this3.liElementsById[node.id] = liEle;
var ulEle = null;

if (node.children && node.children.length) {
ulEle = _this2.buildTree(node.children, depth + 1);
ulEle = _this3.buildTree(node.children, depth + 1);
}

ulEle && liEle.appendChild(ulEle);
Expand All @@ -321,23 +358,26 @@ Tree.prototype.buildTree = function (nodes, depth) {
};

Tree.prototype.bindEvent = function (ele) {
var _this3 = this;
var _this4 = this;

ele.addEventListener('click', function (e) {
var target = e.target;

if (target.nodeName === 'SPAN' && (target.classList.contains('treejs-checkbox') || target.classList.contains('treejs-label'))) {
_this3.onItemClick(target.parentNode.nodeId);
_this4.onItemClick(target.parentNode.nodeId);
} else if (target.nodeName === 'LI' && target.classList.contains('treejs-node')) {
_this3.onItemClick(target.nodeId);
_this4.onItemClick(target.nodeId);
} else if (target.nodeName === 'SPAN' && target.classList.contains('treejs-switcher')) {
_this3.onSwitcherClick(target);
_this4.onSwitcherClick(target);
}
}, false);
};

Tree.prototype.onItemClick = function (id) {
console.time('onItemClick');
if (this.options.console) {
console.time('onItemClick');
}

var node = this.nodesById[id];
var onChange = this.options.onChange;

Expand All @@ -347,7 +387,10 @@ Tree.prototype.onItemClick = function (id) {
}

onChange && onChange.call(this);
console.timeEnd('onItemClick');

if (this.options.console) {
console.timeEnd('onItemClick');
}
};

Tree.prototype.setValue = function (value) {
Expand Down Expand Up @@ -376,11 +419,11 @@ Tree.prototype.getValues = function () {
};

Tree.prototype.setValues = function (values) {
var _this4 = this;
var _this5 = this;

this.emptyNodesCheckStatus();
values.forEach(function (value) {
_this4.setValue(value);
_this5.setValue(value);
});
this.updateLiElements();
var onChange = this.options.onChange;
Expand Down Expand Up @@ -415,11 +458,11 @@ Tree.prototype.getDisables = function () {
};

Tree.prototype.setDisables = function (values) {
var _this5 = this;
var _this6 = this;

this.emptyNodesDisable();
values.forEach(function (value) {
_this5.setDisable(value);
_this6.setDisable(value);
});
this.updateLiElements();
};
Expand Down Expand Up @@ -467,10 +510,10 @@ Tree.prototype.getDisabledNodesById = function () {
};

Tree.prototype.updateLiElements = function () {
var _this6 = this;
var _this7 = this;

Object.values(this.willUpdateNodesById).forEach(function (node) {
_this6.updateLiElement(node);
_this7.updateLiElement(node);
});
this.willUpdateNodesById = {};
};
Expand Down Expand Up @@ -552,16 +595,16 @@ Tree.prototype.walkUp = function (node, changeState) {
};

Tree.prototype.walkDown = function (node, changeState) {
var _this7 = this;
var _this8 = this;

if (node.children && node.children.length) {
node.children.forEach(function (child) {
if (changeState === 'status' && child.disabled) return;
child[changeState] = node[changeState];

_this7.markWillUpdateNode(child);
_this8.markWillUpdateNode(child);

_this7.walkDown(child, changeState);
_this8.walkDown(child, changeState);
});
}
};
Expand Down Expand Up @@ -634,30 +677,35 @@ Tree.createRootEle = function () {
return div;
};

Tree.createUlEle = function () {
Tree.createUlEle = function (options) {
var ul = document.createElement('ul');
ul.classList.add('treejs-nodes');
if (options && options.ulClass) ul.classList.add(options.ulClass);
return ul;
};

Tree.createLiEle = function (node, closed) {
Tree.createLiEle = function (node, closed, options) {
var li = document.createElement('li');
li.classList.add('treejs-node');
if (options && options.liClass) li.classList.add(options.liClass);
if (closed) li.classList.add('treejs-node__close');

if (node.children && node.children.length) {
var switcher = document.createElement('span');
switcher.classList.add('treejs-switcher');
if (options && options.switcherClass) switcher.classList.add(options.switcherClass);
li.appendChild(switcher);
} else {
li.classList.add('treejs-placeholder');
}

var checkbox = document.createElement('span');
checkbox.classList.add('treejs-checkbox');
if (options && options.checkboxClass) checkbox.classList.add(options.checkboxClass);
li.appendChild(checkbox);
var label = document.createElement('span');
label.classList.add('treejs-label');
if (options && options.labelClass) label.classList.add(options.labelClass);
var text = document.createTextNode(node.text);
label.appendChild(text);
li.appendChild(label);
Expand Down Expand Up @@ -1344,5 +1392,4 @@ module.exports = function (css) {

/***/ })
/******/ ])["default"];
});
//# sourceMappingURL=tree.js.map
});
2 changes: 1 addition & 1 deletion dist/tree.js.map
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions dist/tree.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/tree.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading