bootstrap - Ya tree

by Amitesh Kumar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="app" ng-cloak class="container-fluid">
  <div ng-controller="TreeController" class="row">

      <div class="col-xs-4">
        <div class="tree">
          <ul class="root">
            <li ya-tree="node in data.children at ul" ng-init="node.minimized=node.minimized || false" ng-class="{minimized:node.minimized}"> <span> 
                    <i class="fa expander" ng-class="$depth === TREE_HEIGHT? icon.leaf : (node.minimized ? icon.collapsed : icon.expanded)"  ng-click="toggleMinimized(node)"></i> 

 <span class="fa use-pointer" ng-class=" $depth === TREE_HEIGHT ? icon.leafLabel : (node.minimized ? icon.collapsedLabel: icon.expandedLabel)" ng-click="onNodeClick(node)">&nbsp;{{node.item.label}}</span>

              </span>

              <ul ng-class="{'inner-tree':node.children.length}"></ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-xs-8" ng-show="activeTab">
        <ul class="nav nav-pills">
          <li ng-class="{'active':activeTab === 1}"><a href="#" ng-click="activeTab=1;">Store Details</a></li>
          <li ng-class="{'active':activeTab === 2}"><a href="#" ng-click="activeTab=2;">Franchisee Details</a></li>
          <li ng-class="{'active':activeTab === 3}"><a href="#" ng-click="activeTab=3;">Audit Logs</a></li>
        </ul>
        <fieldset class="well scheduler-border">
          <legend class="scheduler-border">Store Info</legend>
                  <div class="alert alert-info">
          You have successfully activated the tab <span style="color:green;background:yellow;"> {{activeTab}}</span> for the node...

CSS

.tree {
  overflow: auto;
  height: 250px;
  padding: 5px;
  margin-bottom: 20px;
  background-color: #fbfbfb;
  border: 2px solid gray;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
}

ul.root {
  padding-left: 5px!important;
}

.tree ul {
  padding-left: 27px;
}

.expander,
.use-pointer {
  cursor: pointer;
}

.tree li {
  list-style-type: none;
  margin: 0;
  padding: 5px 5px 0 5px;
  position: relative
}

.tree li::before,
.tree li::after {
  content: '';
  left: -20px;
  position: absolute;
  right: auto
}

.tree li::before {
  border-left: 1px dotted #999;
  bottom: 50px;
  height: 100%;
  top: 0;
  width: 1px
}

.tree li::after {
  border-top: 1px dotted #999;
  height: 20px;
  top: 16px;
  width: 25px
}

.tree li span {
  /*-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;*/
  display: inline-block;
  padding: 1px 0 0 1px;
  text-decoration: none;
  white-space: nowrap;
}

.tree li.parent_li>span {
  cursor: pointer
}

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0
}

.tree li:last-child::before {
  height: 30px
}

.tree li.parent_li>span:hover,
.tree li.parent_li>span:hover+ul li span {
  background: #eee;
  border: 1px solid #94a0b4;
  color: #000
}

li.minimized li {
  display: none;
}





fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    border-radius:2px;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}

    legend.scheduler-border {
        font-size: 1.2em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }

JavaScript

var app = angular.module('app', []);

app.controller('TreeController', ['$scope', function($scope) {
  $scope.icon = {
    expanded: 'fa-chevron-circle-down',
    collapsed: 'fa-chevron-circle-right',
    expandedLabel: 'fa-folder-open',
    collapsedLabel: 'fa-folder',
    leaf: '',
    leafLabel: 'fa-circle'
  };
  $scope.icon.expanded = 'fa-minus-square';
  $scope.icon.collapsed = 'fa-plus-square';
  var getEmptyNode = function() {
    return {
      item: {
        label: 'a',
        value: 'a'
      },
      children: []
    };
  }

  function buildTree(obj, depth, height) {
    obj.children = []
    if (depth === height) {
      return undefined;
    } else {
      return buildTree(obj.children, depth + 1, height)
    }
  }
  $scope.TREE_HEIGHT = 3; //0 based index
  var rootObj = getEmptyNode();
  //$scope.data = buildTree(rootObj, 1, 3);
  $scope.data = {
    children: [{
      item: {
        value: '',
        label: 'Hong Kong PH'
      },
      children: [{
        item: {
          value: 11,
          label: 'Area Coaches'
        },
        children: [{
          item: {
            value: 'R',
            label: 'Chin raymond'
          },
          children: [{
            item: {
              value: 111,
              label: 'Unit 02 CPZ'
            },
            children: []
          }, {
            item: {
              value: 111,
              label: 'Unit 06 TPO'
            }
          }]
        }]
      }, {
        item: {
          value: 111,
          label: 'CHAMPS Coach'
        },
        minimized: true,
        children: [{
          item: {
            value: 111,
            label: 'Unit 06 TPO'
          }
        }]
      }]
    }]
  };

  $scope.onNodeClick = function(node) {
    $scope.selectedNode = node;
    $scope.activeTab = 1;
  };

  $scope.toggleMinimized = function(child) {
    child.minimized = !child.minimized;
  };

  $scope.addChild = function(child, $event) {
    child.minimized = false;
   ...