Skip to content

Instantly share code, notes, and snippets.

@DalSoft

DalSoft/app.html

Forked from lstarky/app.html
Last active December 5, 2019 10:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DalSoft/f857557715f36c4527718f67d3cdb483 to your computer and use it in GitHub Desktop.
Save DalSoft/f857557715f36c4527718f67d3cdb483 to your computer and use it in GitHub Desktop.
Download ZIP
Test
Raw
app.html
<template>
<require from="styles.css" />
<require from="tree-view" />
<tree-view />
</template>
Raw
app.js
export class App{
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<!--<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>-->
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
node-model.js
export class NodeModel{
constructor(OrderId, OrderType, AssignedName,AssignedTime, OpenDate, Progress, children){
//this.name = name;
this.OrderId =OrderId;
this.OrderType = OrderType;
this.AssignedName = AssignedName;
this.AssignedTime = AssignedTime;
this.OpenDate = OpenDate;
this.Progress= Progress;
this.children = children || [];
this.visible = true;
if(this.hasChildren()){
this.icon = 'fa fa-minus';
this.expanded = true;
}
}
hasChildren(){
return this.children.length > 0;
}
toggleNode(){
// close other node branches
/* if (!this.expanded) {
var event = new CustomEvent('goCollapseAll', { 'detail': this });
window.dispatchEvent(event);
}*/
for(var i = 0; i < this.children.length; i++){
this.children[i].visible = !this.children[i].visible;
}
this.expanded = !this.expanded;
if(this.expanded === true){
this.icon = 'fa fa-minus';
}
else{
this.icon = 'fa fa-plus';
}
}
}
Raw
styles.css
ul{
list-style-type:none;
margin:0;
}
tree-node ul:first-child{
padding-left:0;
}
.fa.fa-plus{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTJDBGvsAAAAmUlEQVQ4T6WTuw2AMBBDXbEDo7AQQ9AgISRYgRUYhIqK3wjsQHWEE5wOiJDCFa+xbEtxEhDRDVRjg7yNHPhC/DrMQr0QqqlD1scOCEEFXDKuKIbEASa4gEvmDeWUOn4WSNF7F/HrMAu+goPHLuLXYRZ84Qu1i/h1mAVfUHPuIn4dZsEX0pgKTEcwjfj7Gk0PyfSUTZ8p6DsTdnMcPQl3gNV4AAAAAElFTkSuQmCC);
display:inline-block;
}
.fa.fa-minus{
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0I4RDFEMDE5MDc4MTFFNjhBRkU4RjUxMTMwMTFBNDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0I4RDFEMDI5MDc4MTFFNjhBRkU4RjUxMTMwMTFBNDciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjhEMUNGRjkwNzgxMUU2OEFGRThGNTExMzAxMUE0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjhEMUQwMDkwNzgxMUU2OEFGRThGNTExMzAxMUE0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtWsFOoAAACvSURBVHjaYvz//z8DJYBx6BvAwthxZSYDI3MaWbr//53FxPDjei7D/3/HSdcM1APUywRk/mL4/CMYaNpzEmx+DtYD1MsEFXrO8Ps/0JD/vwhrBqoBqQXpAQImJKnjDH//5xI0AKIG7mUmNOlZoIDBF2hgNcjRyFC/Cl0ZGwOH1gEGRiZLzEC75gAOMyTAhMUezEBFCjR0xUw4HIsIVLRAw0hIeIILOVCPD968ABBgAN4Tav6F/rCJAAAAAElFTkSuQmCC);
display:inline-block;
}
.StartOfTreeNode > tree-node > .StartOfTreeNode{
padding-left:20px;
}
.mainBack{
background:#F7F7F7;
}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.WorkQueueDropContent{
color:#343434;
}
.EachMiniQueueWithOutCollapse{
padding:15px 0px;
border-bottom:1px solid #F1F1F1;
}
.eachMinQueueCheckSection{
margin-right:10px;
}
.leftGaptoRightElement{
margin-left:10px;
min-width:40px;
}
.lightFontForMInQueue{
color:#A8A8A8;
}
.DateOfMinQueue{
font-weight:bold;
color:#0E7EC6;
}
Raw
tree-node.html
<template>
<!-- <div class=mainBack>-->
<div show.bind="current.visible" class="StartOfTreeNode">
<div class="EachMiniQueueWithOutCollapse">
<span if.bind="current.hasChildren()" click.trigger="current.toggleNode(current)" class="${current.icon} left eachMinQueueCheckSection"></span>
<div class="left eachMinQueueCheckSection" if.bind="!current.hasChildren()">
<!-- <label class="cb_control control--checkbox">
<input type="checkbox">
<span class="control__indicator"></span>
</label> -->
</div>
<div class="left">
<div class="TitleOfMinQueue">
<span class="fontBold"><b>${current.OrderId}</b></span>
</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="right leftGaptoRightElement">
<div class="lightFontForMInQueue rightAligned">${current.Progress}</div>
</div>
<div class="clear"></div>
<!--<span>${current.name}</span>-->
</div>
<tree-node repeat.for="node of current.children" current.bind="node"></tree-node>
</div>
<!-- </div>-->
</template>
Raw
tree-node.js
import {Behavior} from 'aurelia-framework';
import {bindable} from 'aurelia-framework';
export class TreeNode {
@bindable current = null;
}
Raw
tree-view.html
<template>
<require from='./tree-node'></require>
<tree-node repeat.for="node of nodes" current.bind="node"></tree-node>
</template>
Raw
tree-view.js
import {Behavior} from 'aurelia-framework';
import {NodeModel} from 'node-model';
export class TreeView {
constructor(){
var x1 = new NodeModel('','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','2019');
var x2 = new NodeModel('North America','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','12456',
[new NodeModel('USA','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689'),
new NodeModel('Canada','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689')]);
var x3 = new NodeModel('EMEA','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689',
[
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689',
[new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689',
[new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689')]),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689'),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689')]),
new NodeModel('123','Updated BOL','Girish','9/12/2016 8:00 PM','1/12/2016','45689')]);
this.nodes = [x1, x2, x3];
}
attached() {
this.closeOtherBranches(this.nodes[0]);
window.addEventListener('goCollapseAll', (e) => {
this.closeOtherBranches(e.detail);
}, false);
}
closeOtherBranches(exceptNode) {
// traverse node tree to find current one
var found = null;
for(var i = 0; i < this.nodes.length; i++){
if (this.subSearch(this.nodes[i], exceptNode)) {
found = i;
}
}
if (found !== null) {
for(var i = 0; i < this.nodes.length; i++){
if ((i != found) && (this.nodes[i].expanded)) {
this.nodes[i].toggleNode();
}
}
}
}
subSearch(node, findNode) {
// recursive search of tree for findNode
var match = null;
if (node === findNode) {
match = node;
} else {
for(var i = 0; i < node.children.length; i++){
if (node.children[i] === findNode) {
match = node;
} else {
match = this.subSearch(node.children[i], findNode);
}
}
}
return match;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment