Tree Shaker Component
Live Demo
Usage
npm install tree-shaker
Require main script and basic theme to your page:
<!-- jquery and lodash is requied by tree-shaker -->
<script src="node_modules/jquery.js" />
<script src="node_modules/lodash.js" />
<link href="node_modules/tree-shaker/build/theme/tree-shaker-theme.min.css" rel="stylesheet" />
<script src="node_modules/tree-shaker/build/dist/tree-shaker.min.js" />
<script src="node_modules/tree-shaker/build/theme/tree-shaker-theme.min.js" />
<div id="tree-shaker" style="height: 600px"></div>
<script>
var treeShaker = new TreeShaker({
classNames: TreeShakerTheme.classNames,
templates: TreeShakerTheme.templates,
optionHeight: TreeShakerTheme.optionHeight
});
$('#tree-shaker').append(treeShaker.$element);
// it is need to update shaker height after applying to DOM
treeShaker.updateHeight();
var nodes = [{
id: 'node_1',
title: 'Parent Node'
}, {
id: 'node_2',
parentId: 'node_1',
title: 'Child Node'
}];
treeShaker.onChosenNodesChange(function(chosenNodes) {
saveToStorage(chosenNodes);
});
treeShaker.setNodes(nodes);
</script>
Extending
You can extend any element in tree-shaker
by define your own theme or redefine TreShakerTheme
.
// redefine option template in available nodes list
TreeShakerTheme.templates.available = function(option) {
return $(
'<div class="my-own-class"><img src="my-icon.png" />' +
option.data.name +
'</div>'
);
}
Also you can change any class for element used in tree-shaker
:
TreeShakerTheme.classNames.buttonsSort.container += ' my-button-sort-mix';
You can see all classNames and templates in theme source code.
Development
git clone https://github.com/mctep/tree-shaker.git
cd tree-shaker
npm install
npm start -- --port=8080