almost???

css/styles.css

@@ -420,3 +420,6 @@ label.tree_label:after { border-bottom: 0; }
   padding: 1em;
   border-radius: 0.3em;
 }
+.tree ul {
+  -webkit-padding-start: 0;
+}

js/controllers/website-controller.js

@@ -30,7 +30,7 @@ function handleFiles(ev) {
 }
 window.document.body.addEventListener('change', handleFiles);
 
-app.directive('daplieFileChange', function () {
+app.directive('daplieFileChange', [function () {
   return {
     restrict: 'A',
     require:"ngModel",
@@ -42,7 +42,15 @@ app.directive('daplieFileChange', function () {
       });
     }
   };
-});
+}]);
+
+app.directive('fileTree', [function () {
+  return {
+    restrict: 'EA',
+    templateUrl: '/templates/widgets/filetree.html',
+    controller: 'websiteCtrl as vm'
+  };
+}]);
 
 app.controller('websiteCtrl', [
   '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout'
@@ -336,22 +344,38 @@ app.controller('websiteCtrl', [
       window.alert(JSON.stringify(result));
     });
   };
-  vm.Sites.contents = function (r) {
-    vm.showListFiles = true;
-    var pkg = Auth.oauth3.pkg('www@daplie.com');
 
-    return pkg.contents({
-      hostname: r.domain
-    , domain: r.domain
-    , tld: r.tld
-    , sld: r.sld
-    //, sub: r.sub
-    , path: r.newPath
-    }).then(function (result) {
-      // window.alert(JSON.stringify(result.data));
-      vm.folderStructure = result;
-    });
+  vm.breadcrumbs = ['Root'];
+  vm.Sites.contents = function (r) {
+    vm.siteResults = r;
+    vm.showListFiles = true;
+    vm.siteDirectories = [];
+    var pkg = Auth.oauth3.pkg('www@daplie.com');
+    vm.getSiteContents = function (site) {
+      return pkg.contents({
+        hostname: site.domain,
+        domain: site.domain,
+        tld: site.tld,
+        sld: site.sld,
+        //, sub: r.sub,
+        path: site.newPath
+      }).then(function (result) {
+        vm.folderStructure = result;
+        result.data.forEach(function(file) {
+          if (file.directory) {
+            vm.siteDirectories.push(file.name);
+          }
+        });
+      });
+    };
+    vm.getSiteContents(r);
   };
+
+  vm.doSomething = function (path) {
+    vm.newPath = data;
+    vm.getSiteContents(path);
+  };
+
   vm.Shares = {};
   vm.Shares.invite = function (r) {
     var pkg = Auth.oauth3.pkg('www@daplie.com');
@@ -486,8 +510,9 @@ app.controller('websiteCtrl', [
     return matches;
   };
 
-}])
-.filter('stringify', function() {
+}]);
+
+app.filter('stringify', function() {
   function getSerialize (fn, decycle) {
     var seen = [], keys = [];
     decycle = decycle || function(key, value) {

templates/website.html

@@ -179,13 +179,7 @@
             <button class="btn btn-info trigger-search" ng-click="vm.Sites.contents(r)">List Files</button>
             <div class="white-well" ng-show="vm.showListFiles">
               <button type="button" class="close" ng-click="vm.showListFiles = false" ng-show="vm.showListFiles"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
-              <div class="text-left">
-                <div class="row">
-                  <div class="col-lg-12">
-                    <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
-                  </div>
-                </div>
-              </div>
+              <file-tree r="r"></file-tree>
             </div>
           </form>
           <div class="">

templates/widgets/filetree.html

@@ -0,0 +1,53 @@
+<div class="text-left">
+  <div class="row">
+    <ul class="breadcrumb">
+      <li ng-repeat="breadcrumb in vm.breadcrumbs">
+        <a>{{ breadcrumb }}</a>
+        <!-- <li class="active">Data</li> -->
+      </li>
+    </ul>
+  </div>
+  <div class="row">
+    <ul class="tree ls-none">
+      <li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
+        <input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
+        <label class="tree_label" for="{{ r.challenge }}{{ $index }}" ng-click="vm.doSomething(directory)" data="{{ directory }}">{{ directory }}</label>  
+      </li>
+      <hr>
+      <li>
+        <input type="checkbox" id="{{ r.challenge }}" />
+        <label class="tree_label" for="{{ r.challenge }}">Level 0</label>
+        <ul class="ls-none">
+          <li>
+            <input type="checkbox" id="{{ r.challenge }}1" />
+            <label for="{{ r.challenge }}1" class="tree_label">Level 1</label>
+            <ul class="ls-none">
+              <li><span class="tree_label">Level 2</span></li>
+              <li><span class="tree_label">Level 2</span></li>
+            </ul>
+          </li>
+          <li>
+            <input type="checkbox" id="{{ r.challenge }}2" />
+            <label for="{{ r.challenge }}2" class="tree_label">Looong level 1 <br/>label text <br/>with line-breaks</label>
+            <ul class="ls-none">
+              <li><span class="tree_label">Level 2</span></li>
+              <li>
+                <input type="checkbox" id="{{ r.challenge }}3" />
+                <label for="{{ r.challenge }}3" class="tree_label"><span class="tree_custom">Specified tree item view</span></label>
+                <ul class="ls-none">
+                  <li><span class="tree_label">Level 3</span></li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <hr>
+  <div class="row">
+    <div class="col-lg-12">
+      <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
+    </div>
+  </div>
+</div>