treeview-model
dom treeview ui model
Install
npm install treeview-model
Usage & Api
var treeview_model = require("treeview-model");
document.getElementById('divResult3').innerHTML =
`<div class="tree-container" id="tree1">
<div class="tree-node" id=nd1>
<span class='tree-name'>nd1</span>
<div class="tree-children">
<div class="tree-node" id=nd2>
<span class='tree-name'>nd2</span>
</div>
<div class="tree-node" id=nd3>
<span class='tree-name' id=name3>nd3</span>
<span class='my-1' id=nd3my1>-my1</span>
</div>
</div>
</div>
</div>`;
var el = document.getElementById('tree1'); //container
var nd3 = document.getElementById('nd3');
var my1 = document.getElementById('nd3my1');
//.containerAttribute(el, name, value, json) //get or set container attribute, refer to element-attribute @ npm.
treeview_model.containerAttribute(my1, "aa", 11);
treeview_model.containerAttribute(my1, "bb", { b: 22 });
done(!(
//.getNode(el) //get 'tree-node' from self or ancestor of an element
treeview_model.getNode(my1) === nd3 &&
/*
.nodePart(el, className, template, before)
template: { (outerHtml | innerHtml | createByDefault) }
| innerHtml | createByDefault===true
shortcuts:
.nodeChildren(el, template)
.nodeName(el, template)
.nodeToExpand(el, template, before)
*/
treeview_model.nodeName(my1) === document.getElementById('name3') &&
treeview_model.nodePart(nd3, "my-1") === my1 &&
//.getContainer(el) //get 'tree-container' from self or ancestor of an element
treeview_model.getContainer(my1) === el &&
el.getAttribute("aa") === "11" &&
el.getAttribute("bb") === '{"b":22}' &&
treeview_model.containerAttribute(my1, "aa") === "11" &&
treeview_model.containerAttribute(my1, "aa", void 0, true) === 11 &&
JSON.stringify(treeview_model.containerAttribute(my1, "bb")) === '{"b":22}' &&
treeview_model.containerAttr(my1, "bb", void 0, false) === '{"b":22}' &&
treeview_model.isContainer(el) &&
treeview_model.isPart(nd3, "tree-node") &&
treeview_model.isPart(nd3.parentNode, "tree-children") &&
true
));Convention
a treeview is defined as
lv1: <div class='tree-container'> //tree container at topmost, required;
...
lv1: <div class='tree-node'> //tree node main element, required;
//all sub items should be direct children of 'tree-node'
lv2: <span class='tree-to-expand'>...</span> //expand/collapse command element, optional;
lv2: //<span class='tree-to-expand tree-to-collapse/tree-disable'>...</span> //state
lv2: <span class='tree-name'>...</span> //name element, optional;
lv4: ... //other user defined content;
//the last sub item is 'tree-children'
lv1: <div class='tree-children'>...</div> //required if a node contains children;
</div>
lv2: <div class='tree-node tree-selected tree-selected-last'>...</div>
//tree-node selected state, optional;
</div>
* lv1 - basic required;
* lv2 - optional, with tool set in this lib;
* lv3 - optional, editing tools in this lib;
* lv4 - user defined;
* the 'class' names are the required properties;
* the element tags are in user's favour;