2
0
mirror of https://github.com/frappe/books.git synced 2024-12-24 20:00:29 +00:00
books/client/ui/tree.js
2018-03-29 17:35:02 +05:30

172 lines
4.1 KiB
JavaScript

const frappe = require('frappejs');
const octicons = require('octicons');
const utils = require('frappejs/client/ui/utils');
class Tree {
constructor({parent, label, iconSet, withSkeleton, method}) {
Object.assign(this, arguments[0]);
this.nodes = {};
if(!iconSet) {
this.iconSet = {
open: octicons["triangle-down"].toSVG({ "width": 10, "class": "node-parent"}),
closed: octicons["triangle-right"].toSVG({ "width": 5, "class": "node-parent"}),
leaf: octicons["primitive-dot"].toSVG({ "width": 7, "class": "node-leaf"})
};
}
this.make();
}
make() {
this.tree = frappe.ui.create('div', {
inside: this.parent,
className: 'tree ' + (this.withSkeleton ? 'with-skeleton' : '')
});
this.rootNode = this.makeNode(this.label, this.label, true, null, this.tree);
this.expandNode(this.rootNode);
}
refresh() {
// this.selectedNode.parentNode &&
// this.loadChildren(this.selectedNode.parentNode, true);
}
loadChildren(node, deep=false) {
if(!deep) {
this.renderNodeChildren(node, this.method(node.value));
} else {
this.renderChildrenDeep(node, this.getAllNodes(node.value));
}
}
renderChildrenDeep(dataList) {
dataList.map(d => { this.renderNodeChildren(this.nodes[d.parent], d.data); });
}
renderNodeChildren(node, dataSet=[]) {
frappe.ui.empty(node.childrenList);
dataSet.forEach(data => {
let parentNode = this.nodes[node.value];
let childNode = this.makeNode(data.label || data.value, data.value,
data.expandable, parentNode);
childNode.treeLink.dataset.nodeData = data;
});
node.expanded = false;
// As children loaded
node.loaded = true;
this.onNodeClick(node, false);
}
getAllNodes() { }
makeNode(label, value, expandable, parentNode, parentEl) {
let node = {
parent: parent,
label: label,
value: value,
loaded: 0,
expanded: 0,
expandable: expandable,
};
if(parentNode){
node.parentNode = parentNode;
node.parent = parentNode.childrenList;
node.isRoot = 0;
} else {
node.isRoot = 1;
node.parent = parentEl;
}
this.nodes[value] = node;
this.buildNodeElement(node);
this.onRender && this.onRender(node);
return node;
}
buildNodeElement(node) {
node.parentLi = frappe.ui.create('li', {
inside: node.parent,
className: 'tree-node'
});
let iconHtml = '';
if(this.iconSet) {
iconHtml = node.expandable ? this.iconSet.closed : this.iconSet.leaf;
}
let labelEl = `<a class="tree-label"> ${node.label}</a>`;
node.treeLink = frappe.ui.create('span', {
inside: node.parentLi,
className: 'tree-link',
'data-label': node.label,
innerHTML: iconHtml + labelEl
});
node.treeLink.dataset.node = node;
node.treeLink.addEventListener('click', () => {
this.onNodeClick(node);
});
node.childrenList = frappe.ui.create('ul', {
inside: node.parentLi,
className: 'tree-children hide'
});
// if(this.toolbar) {
// node.toolbar = this.getToolbar(node).insertAfter(node.treeLink);
// }
}
onNodeClick(node, click = true) {
this.setSelectedNode(node);
if(click) {
this.onClick && this.onClick(node);
}
this.expandNode(node);
// select link
utils.activate(this.tree, node.treeLink, 'tree-link', 'active');
if(node.toolbar) this.showToolbar(node);
}
expandNode(node) {
if(node.expandable) {
this.toggleNode(node);
}
node.expanded = !node.expanded;
// node.parent.classList.toggle('opened', node.expanded);
node.parent.classList.add('opened');
node.parentLi.classList.add('opened');
}
toggleNode(node) {
if(!node.loaded) this.loadChildren(node);
// expand children
if(node.childrenList) {
if(node.childrenList.innerHTML.length) {
node.childrenList.classList.toggle('hide', !node.expanded);
}
// open close icon
if(this.iconSet) {
const oldIcon = node.treeLink.querySelector('svg');
const newIconKey = !node.expanded ? 'closed' : 'open';
const newIcon = frappe.ui.create(this.iconSet[newIconKey]);
node.treeLink.replaceChild(newIcon, oldIcon);
}
}
}
getSelectedNode() { return this.selectedNode; }
setSelectedNode(node) { this.selectedNode = node; }
showToolbar() { }
}
module.exports = Tree;