Added support for both Bootstrap 2 and Bootstrap 3

Author: nickperkinslondon

Gruntfile.coffee

@@ -11,14 +11,29 @@ module.exports = (grunt)->
           pretty:true
         files:
           'dist/abn_tree_template.html':'src/abn_tree_template.jade'
-          'test/test_abn_tree.html':'src/test_abn_tree.jade'
+          
+      #
+      # Generate 2 test pages:
+      # one for Bootstrap 2
+      # one for Bootstrap 3
+      # 
 
-    less:
-      dev:
+      bs2:
+        files:
+          'test/bs2_test_page.html':'src/test_page.jade'
         options:
-          compress:false
+          pretty:true
+          data:
+            bs:"2"
+
+      bs3:
         files:
-          'dist/abn_tree_style.css':'src/abn_tree_style.less'
+          'test/bs3_test_page.html':'src/test_page.jade'
+        options:
+          pretty:true
+          data:
+            bs:"3"
+
 
 
     coffee:
@@ -27,7 +42,7 @@ module.exports = (grunt)->
           bare:true
         files:
           'dist/abn_tree_directive.js':'src/abn_tree_directive.coffee'
-          'test/test_abn_tree.js':'src/test_abn_tree.coffee'
+          'test/test_page.js':'src/test_page.coffee'
 
 
     watch:
@@ -36,22 +51,23 @@ module.exports = (grunt)->
         tasks:['jade']
         options:
           livereload:true
-      less:
-        files:['**/*.less']
-        tasks:['less']
+
+      css:
+        files:['**/*.css'] 
+        tasks:[]     
         options:
           livereload:true
 
+
       coffee:
         files:['**/*.coffee']
         tasks:['coffee']
         options:
           livereload:true
 
   grunt.loadNpmTasks 'grunt-contrib-jade'
-  grunt.loadNpmTasks 'grunt-contrib-less'
   grunt.loadNpmTasks 'grunt-contrib-coffee'
   grunt.loadNpmTasks 'grunt-contrib-watch'
 
-  grunt.registerTask 'default', ['jade','less','coffee']
+  grunt.registerTask 'default', ['jade','coffee','watch']
 

Gruntfile.js

@@ -4,23 +4,25 @@ angular-bootstrap-nav-tree
 
 This is a Tree directive for Angular JS apps that use Bootstrap CSS.
 
-example: http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/test_abn_tree.html
+example: http://nickperkinslondon.github.io/angular-bootstrap-nav-tree/test/bs2_test_page.html
 
 The style is completely Bootstrap because the tree is actually just a Bootstrap "nav" list, with a few changes:  Indentation is added, expand/collapse icons are added, and Angular CSS animations are used during expand/collapse.
 
+<abn-tree> now works with either Bootsrap 2, or Bootstrap 3!
+
 The normal Glyphicons work well, but they appear black instead of blue.  Alternatively, you can use the Font Awesome icons, which look even better, and match the blue color of the text.
 
 You can change the icons used by specifying them in html attributes.
 
-This tree is developed in CoffeeScript, Jade, and Less, but you don't need to be using any of those to use this tree -- you just have to be using Angular and Bootsrap.
+This tree is developed using CoffeeScript and Jade, but you don't need to be using either of those to use this tree -- you just have to be using Angular and Bootsrap.
 
 
 How to use it:
 Just include the 3 files from "dist":
 
     abn_tree_directive.js
-    abn_tree_style.css
     abn_tree_template.html
+    abn_tree.css
 
 NOTE: you will have to adjust the "templateUrl" in the directive js, to adjust for your directory structure.
 
@@ -35,12 +37,11 @@ At a miniumum, you must supply `tree-data` :
 But there are other attributes to customize the tree:
 
     <abn-tree 
-        header="This is the example tree"
         tree-data="example_treedata"
         icon-leaf="icon-file"
         icon-expand="icon-plus-sign"
         icon-contract="icon-minus-sign"
-        on-select="my_default_handler(branch)"
+        on-select="my_tree_handler(branch)"
         expand-level="2"
         initial-selection="Vegetable">      
     ></abn-tree>
@@ -53,13 +54,16 @@ The data to create the tree is defined in your controller, and could be as simpl
       children: ['Jade','Less','Coffeescript']
     }]
 
-If you you this short-form for listing elements, then your "on-select" function will have to act based only upon the "branch.label".  If you use the long-form, where is branch is an object, then you can also attach "data" to a branch.
+There is a long-form for elements, in which each node is an object with a "label", and optionally other stuff like "data", and "children".
+There is a short-form for listing nodes children (as used for "children" above), where the "children" is just a list of strings.
+If you use the short-form for listing elements, then your "on-select" function will have to act based only upon the "branch.label".  If you use the 
+long-form, where is branch is an object, then you can also attach "data" to a branch.
 
 
 
 You can supply a single default "on-select" function for the whole tree -- it will be called whenever a branch is selected:
 
-    $scope.my_default_hander = function(branch){...}
+    $scope.my_tree_hander = function(branch){...}
 
 
 Or, you can put a custom "on-select" function on an individual branch:
@@ -70,8 +74,7 @@ Or, you can put a custom "on-select" function on an individual branch:
       children: ['Jade','Less','Coffeescript']
     }]
 
-Each branch can have a "data" element which you can use to hold whatever data you want.  It is not touched by the tree, and it is available to your "on-select" functions as "branch.data".  In the example, in the "test" folder, this technique is used in "my_default_handler" to add extra info to "Dog","Cat", and "Hippo".  
+Each branch can have a "data" element which you can use to hold whatever data you want.  It is not touched by the tree, and it is available to your "on-select" function as "branch.data".  In the example, in the "test" folder, this technique is used in "my_tree_handler" to add extra info to "Dog","Cat", and "Hippo".  
 
 Warning: If you attach extra attributes directly to a branch (instead of to "branch.data"), they could conflict with the internal workings of the tree, which adds branch attributes at runtime, like "expanded" and "selected".
 
-

README.md

@@ -1,54 +1,75 @@
-ul.nav.nav-list.abn-tree i.indented {
-  padding:2px;
-}
-//ul.nav.nav-list.abn-tree i.indented:hover {
-//  border-radius: 3px;
-//  color: black;
-//  background: blue;
-//}
+/* 
+   abn-tree.css
+
+   style for the angular-bootstrap-nav-tree
+   for both Bootstrap 2 and Bootstrap 3
+
+*/
+
+ul.abn-tree li.abn-tree-row {  
+  padding: 0px;
+  margin:0px;
+}
+
+ul.abn-tree li.abn-tree-row a {
+  padding: 3px 10px;
+}
+
+ul.abn-tree i.indented {
+  padding: 2px;
+}
+
 .abn-tree-animate-enter {
   transition: 150ms linear all;
   position: relative;
   display: block;
   opacity: 0;
-  max-height: 0px;
+  max-height:0px;
 }
 .abn-tree-animate-enter.abn-tree-animate-enter-active {
   opacity: 1;
-  max-height: 30px;
+  max-height:30px;
 }
+
 .abn-tree-animate-leave {
   transition: 150ms linear all;
   position: relative;
   display: block;
+  height:30px;
   max-height: 30px;
   opacity: 1;
 }
-.abn-tree-animate-leave.abn-tree-animate-leave-active {
-  max-height: 0px;
+.abn-tree-animate-leave.abn-tree-animate-leave-active {  
+  height: 0px;
+  max-height:0px;
   opacity: 0;
 }
-ul.nav.nav-list.abn-tree .level-1 .indented {
+
+
+.abn-tree {
+  cursor: pointer;
+}
+ul.nav.abn-tree .level-1 .indented {
   position: relative;
   left: 0px;
 }
-ul.nav.nav-list.abn-tree .level-2 .indented {
+ul.nav.abn-tree .level-2 .indented {
   position: relative;
   left: 20px;
 }
-ul.nav.nav-list.abn-tree .level-3 .indented {
+ul.nav.abn-tree .level-3 .indented {
   position: relative;
   left: 40px;
 }
-ul.nav.nav-list.abn-tree .level-4 .indented {
+ul.nav.abn-tree .level-4 .indented {
   position: relative;
   left: 60px;
 }
-ul.nav.nav-list.abn-tree .level-5 .indented {
+ul.nav.abn-tree .level-5 .indented {
   position: relative;
   left: 80px;
 }
-ul.nav.nav-list.abn-tree .level-6 .indented {
+ul.nav.abn-tree .level-6 .indented {
   position: relative;
   left: 80px;
 }

src/abn_tree_style.less renamed to dist/abn_tree.css

@@ -29,12 +29,16 @@ module.directive('abnTree', function($timeout) {
       scope.header = attrs.header;
       if (!scope.treeData) {
         alert('no treeData defined for the tree!');
+        debugger;
+        return;
       }
       if (scope.treeData.length == null) {
         if (treeData.label != null) {
           scope.treeData = [treeData];
         } else {
           alert('treeData should be an array of root branches');
+          debugger;
+          return;
         }
       }
       for_each_branch = function(f) {

dist/abn_tree_directive.js

@@ -1,5 +1,4 @@
 
-<ul class="nav nav-list abn-tree">
-  <li ng-show="header" class="nav-header">{{ header }}</li>
+<ul class="nav nav-list nav-pills nav-stacked abn-tree">
   <li ng-repeat="row in tree_rows | filter:{visible:true} track by row.branch.uid" ng-animate="'abn-tree-animate'" ng-class="'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')" class="abn-tree-row"><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"> </i><span class="indented tree-label">{{ row.label }}</span></a></li>
 </ul>

dist/abn_tree_template.html

@@ -3,7 +3,8 @@ module = angular.module 'angularBootstrapNavTree',[]
 
 module.directive 'abnTree',($timeout)-> 
   restrict:'E'
-  templateUrl:'../dist/abn_tree_template.html'  # FIXME?
+  templateUrl: '../dist/abn_tree_template.html'
+
   scope:
     treeData:'='
     onSelect:'&'
@@ -24,11 +25,16 @@ module.directive 'abnTree',($timeout)->
     # check args
     if !scope.treeData
       alert 'no treeData defined for the tree!'
+      debugger
+      return
+
     if !scope.treeData.length?
       if treeData.label?
         scope.treeData = [ treeData ]
       else
         alert 'treeData should be an array of root branches'
+        debugger
+        return
 
 
     #

src/abn_tree_directive.coffee

@@ -1,7 +1,5 @@
 
-ul.nav.nav-list.abn-tree
-
-  li.nav-header(ng-show="header") {{ header }}
+ul.nav.nav-list.nav-pills.nav-stacked.abn-tree
 
   li.abn-tree-row(
     ng-repeat='row in tree_rows | filter:{visible:true} track by row.branch.uid'