wip styling items

.gitignore

@@ -0,0 +1,5 @@
+# Files
+.DS_Store
+
+# Directories
+.idea

README.md

@@ -2,4 +2,49 @@
 
 Ionic directive for displaying and manipulating nested list ionic items.
 
-<!-- Here is the DEMO page -->
+<!-- Here is the DEMO page -->
+
+## Installation
+
+<!-- bower installation -->
+
+
+```
+<script src="lib/ion-tree-list/ion-tree-list.js"></script>
+```
+
+app.js: 
+
+```
+angular.module('starter', [
+    'ionic', 
+    'controllers', 
+    'services', 
+    'ion-tree-list'
+])
+```
+
+controller:
+
+```
+  $scope.tasks = [
+    {
+      name: 'first task 1',
+      tree: [
+        {
+          name: 'first task 1.1'
+        },
+      ]
+    },
+    {
+      name: 'first task 2'
+    }
+  ];    
+```
+
+
+Template:
+
+```
+<ion-tree-list items="tasks"></ion-tree-list>
+```

bower.json

@@ -0,0 +1,24 @@
+{
+  "name": "ion-tree-list",
+  "main": "ion-tree-list.js",
+  "version": "0.0.1",
+  "homepage": "https://github.com/fer/ion-tree-list",
+  "authors": [
+    "fer <[email protected]>"
+  ],
+  "description": "Ionic directive for displaying and manipulating nested list items.",
+  "keywords": [
+    "ionic",
+    "ion",
+    "tree",
+    "list"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

ion-tree-list.js

@@ -1,28 +1,37 @@
+/**
+ * returns a tree object with extra attribute 'depth'
+ *
+ * @param obj tree object
+ * @param depth initial depth
+ * @returns {*} obj with depths
+ */
 function addDepthToTree(obj, depth) {
     for (key in obj) {
         if (typeof(obj[key]) == 'object') {
-            if (key == 'tree') {
-                addDepthToTree(obj[key], depth)
-            }
-
             obj[key].depth = depth;
-            addDepthToTree(obj[key], depth + 1)
+            obj[key].visible = true;
+
+            addDepthToTree(obj[key], (key == 'tree') ? depth + 1 : depth)
         }
     }
     return obj
 }
 
 angular.module('ion-tree-list', [])
-    .directive('ionTreeList', function () {
-        return {
-            restrict: 'EA',
-            scope: {
-                items: '='
-            },
-            templateUrl: 'lib/ion-tree-list/ion-tree-list.tmpl.html',
-            controller: function($scope){
-                $scope.items = addDepthToTree($scope.items, 0);
-                console.log($scope.items)
+.directive('ionTreeList', function () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        scope: {
+            items: '='
+        },
+        templateUrl: 'lib/ion-tree-list/ion-tree-list.tmpl.html',
+        controller: function($scope){
+            $scope.items = addDepthToTree($scope.items, 0);
+            $scope.collapse = function(item) {
+                item.visible = false;
+                console.log(item);
             }
         }
-    });
+    }
+});

ion-tree-list.tmpl.html

@@ -1,32 +1,28 @@
 <style>
-    .level-0 {
-        padding: 10px 10px;
-    }
     .level-1 {
-        padding: 10px 20px;
+        padding-left: 45px;
     }
     .level-2 {
-        padding: 10px 30px;
+        padding-left: 65px;
     }
     .level-3 {
-        padding: 10px 40px;
+        padding-left: 85px;
     }
     .level-4 {
-        padding: 10px 50px;
+        padding-left: 105px;
     }
 </style>
-
 <script type="text/ng-template" id="items_renderer">
-    <ion-item>
-        <span class="level-{{item.depth}}">
-            <i class="ion-arrow-down-b" ng-if="item.tree"></i>
+    <a class="item level-{{item.depth}}" ng-click="collapse(item)" ng-show="item.visible">
+        <span style="padding-right: 10px;">
+            <i class="icon ion-arrow-down-b" ng-if="item.tree"></i>
             <input type="checkbox" ng-if="!item.tree"/>
-            {{item.name}}
         </span>
-    </ion-item>
+        ({{item.depth}}) {{item.name}}
+    </a>
     <ion-list ng-model="item.tree" ng-repeat="item in item.tree" ng-include="'items_renderer'"></ion-list>
 </script>
 
-<ion-list ng-model="items" show-reorder="true">
+<div class="list" ng-model="items" show-reorder="true">
     <span ng-repeat="item in items" ng-include="'items_renderer'"></span>
-</ion-list>
+</div>