From cbcc9dcadaf62b3b0aef380f022bf6c365785627 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 2 Feb 2012 10:36:05 -0800
Subject: Tree Controller - Initial add

---
 js/controllers/tree-controller.js | 219 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 219 insertions(+)
 create mode 100644 js/controllers/tree-controller.js

(limited to 'js')

diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js
new file mode 100644
index 00000000..45e4c4ba
--- /dev/null
+++ b/js/controllers/tree-controller.js
@@ -0,0 +1,219 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/**
+ @module montage/ui/controller/tree-controller
+ @requires montage/core/core
+ @requires montage/ui/controller/object-controller
+ @requires montage/core/event/mutable-event
+ */
+var Montage = require("montage").Montage,
+    ObjectController = require("montage/ui/controller/object-controller").ObjectController,
+    ArrayController = require("montage/ui/controller/array-controller").ArrayController,
+    MutableEvent = require("montage/core/event/mutable-event").MutableEvent;
+/**
+    TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical
+    collection of objects, and managing user selection within that collection.
+    You can assign a TreeController instance as the <code>contentProvider</code> property for a TreeView object.
+    @class module:montage/ui/controller/tree-controller.TreeController
+    @classdesc
+    @extends module:montage/ui/controller/object-controller.ObjectController
+*/
+var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
+
+    rootKey : {
+        value: null
+    },
+
+    branchKey : {
+        value: 'children'
+    },
+
+    _root : {
+        value : null
+    },
+    root : {
+        get: function() {
+            return this._root;
+        },
+        set: function(value) {
+            this._root = value;
+
+            this.initArrayControllers();
+        }
+    },
+
+    rootController: {
+        value: null
+    },
+
+    initArrayControllers : {
+        value: function() {
+            var self = this;
+
+            ///// Declare function to initialize controller for each node
+            ///// that is a branch
+
+            function initController(array, depth) {
+                var controller = Montage.create(ArrayController, {
+                    content            : { value: array },
+                    delegate           : { value: self },
+                    isSelectionEnabled : { value: true }});
+
+                if(depth === 0) {
+                    self.rootController = controller;
+                }
+
+                self.branchControllers.push({
+                    depth      : depth,
+                    controller : controller
+
+                });
+            }
+
+            ///// Recursive function that finds all branch nodes and initializes
+            ///// an array controller
+
+            function walk(node, init, depth) {
+                var children = node[self.branchKey];
+
+                if(children) {
+                    //init(children, depth);
+
+                    children.forEach(function(child) {
+                        walk(child, init, ++depth);
+                    });
+
+                    node['treeNodeType'] = 'branch';
+                } else {
+                    node['treeNodeType'] = 'leaf';
+                }
+            }
+
+            walk(this._root, initController, 0);
+
+        }
+    },
+
+    /**
+        @private
+     */
+    _selectedIndexes: {
+        value: null,
+        enumerable: false
+    },
+
+   /**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+    selectedIndexes: {
+        get: function() {
+
+        },
+        set: function(value) {
+
+        }
+    },
+
+    lazyLoad : {
+        value: false
+    },
+
+    branchControllers: {
+        value: []
+    },
+
+    addBranchController : {
+        value: function(controller) {
+            if(this.delegate) {
+                controller.delegate = this.delegate;
+            }
+
+            this.branchControllers.push(controller);
+        }
+    },
+
+    /**
+     @private
+     */
+    _content: {
+        enumerable: false,
+        value: null
+    },
+    /**
+        The content managed by the TreeController.
+        @type {Function}
+        @default {String} null
+    */
+    content: {
+        get: function() {
+            return this._content;
+        },
+        set: function(value) {
+            if (this._content === value) {
+                return;
+            }
+
+            this._content = value;
+
+            //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course
+            this.selectedObjects = null;
+
+            if (this.rootKey) {
+                if (value[this.rootKey]) {
+                    this.root = value[this.rootKey];
+                } else {
+                    console.log('No root key found in content data');
+                }
+            } else {
+                this.root = value;
+            }
+
+
+        }
+    },
+
+    addObjects : {
+        value: function() {
+
+            var objects = Array.prototype.slice.call(arguments),
+                i,
+                objectCount = objects.length,
+                selectedContentIndexes, firstIndex;
+
+            for (i = 0; i < objectCount; i++) {
+                this.content.push(objects[i]);
+            }
+
+            if (this.selectObjectsOnAddition) {
+                selectedContentIndexes = [];
+                firstIndex = this.content.length-objectCount;
+                for (i = 0; i < objectCount; i++) {
+                    selectedContentIndexes[i] = firstIndex++;
+                }
+                this.selectedContentIndexes = selectedContentIndexes;
+                this.selectedObjects = objects;
+            }
+
+            if (this.clearFilterFunctionOnAddition) {
+                this.filterFunction = null;
+            }
+
+            if (this.automaticallyOrganizeObjects) {
+                this.organizeObjects();
+            }
+
+        }
+    },
+
+    insertChildBefore : { value : function() {} },
+
+    insertChildAfter : { value : function() {} }
+
+
+
+});
-- 
cgit v1.2.3


From 5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Thu, 2 Feb 2012 14:58:21 -0800
Subject: Tree Controller - Clean out unused code

---
 js/controllers/tree-controller.js | 48 ++++++---------------------------------
 1 file changed, 7 insertions(+), 41 deletions(-)

(limited to 'js')

diff --git a/js/controllers/tree-controller.js b/js/controllers/tree-controller.js
index 45e4c4ba..2b2e910c 100644
--- a/js/controllers/tree-controller.js
+++ b/js/controllers/tree-controller.js
@@ -53,37 +53,15 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
         value: function() {
             var self = this;
 
-            ///// Declare function to initialize controller for each node
-            ///// that is a branch
-
-            function initController(array, depth) {
-                var controller = Montage.create(ArrayController, {
-                    content            : { value: array },
-                    delegate           : { value: self },
-                    isSelectionEnabled : { value: true }});
-
-                if(depth === 0) {
-                    self.rootController = controller;
-                }
-
-                self.branchControllers.push({
-                    depth      : depth,
-                    controller : controller
-
-                });
-            }
-
             ///// Recursive function that finds all branch nodes and initializes
-            ///// an array controller
+            ///// sets the tree node type to "branch" or "leaf"
 
             function walk(node, init, depth) {
-                var children = node[self.branchKey];
-
-                if(children) {
-                    //init(children, depth);
+                var branch = node[self.branchKey];
 
-                    children.forEach(function(child) {
-                        walk(child, init, ++depth);
+                if(branch) {
+                    branch.forEach(function(node) {
+                        walk(node, init, ++depth);
                     });
 
                     node['treeNodeType'] = 'branch';
@@ -92,7 +70,7 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
                 }
             }
 
-            walk(this._root, initController, 0);
+            walk(this._root, 0);
 
         }
     },
@@ -119,10 +97,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
         }
     },
 
-    lazyLoad : {
-        value: false
-    },
-
     branchControllers: {
         value: []
     },
@@ -160,7 +134,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
 
             this._content = value;
 
-            //TODO for right now assume that any content change invalidates the selection completely; we'll need to address this of course
             this.selectedObjects = null;
 
             if (this.rootKey) {
@@ -173,7 +146,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
                 this.root = value;
             }
 
-
         }
     },
 
@@ -208,12 +180,6 @@ var TreeController = exports.TreeController = Montage.create(ObjectController, /
             }
 
         }
-    },
-
-    insertChildBefore : { value : function() {} },
-
-    insertChildAfter : { value : function() {} }
-
-
+    }
 
 });
-- 
cgit v1.2.3


From 984d65c818969ea3bef57ade9cbf5fc50d9a2316 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 11:43:01 -0800
Subject: Tree Components - Adding the tree components

---
 js/components/treeview/branch.reel/branch.css      |  16 +++
 js/components/treeview/branch.reel/branch.html     | 142 ++++++++++++++++++++
 js/components/treeview/branch.reel/branch.js       |  48 +++++++
 js/components/treeview/leaf.reel/leaf.css          |   4 +
 js/components/treeview/leaf.reel/leaf.html         |  38 ++++++
 js/components/treeview/leaf.reel/leaf.js           |  44 +++++++
 .../treeview/ninja-branch.reel/ninja-branch.css    |  34 +++++
 .../treeview/ninja-branch.reel/ninja-branch.html   | 145 +++++++++++++++++++++
 .../treeview/ninja-branch.reel/ninja-branch.js     | 131 +++++++++++++++++++
 .../treeview/ninja-leaf.reel/ninja-leaf.css        |  22 ++++
 .../treeview/ninja-leaf.reel/ninja-leaf.html       |  38 ++++++
 .../treeview/ninja-leaf.reel/ninja-leaf.js         |  41 ++++++
 js/components/treeview/tree-node.js                | 103 +++++++++++++++
 js/components/treeview/treeview.reel/treeview.css  |   3 +
 js/components/treeview/treeview.reel/treeview.html |  50 +++++++
 js/components/treeview/treeview.reel/treeview.js   | 129 ++++++++++++++++++
 16 files changed, 988 insertions(+)
 create mode 100644 js/components/treeview/branch.reel/branch.css
 create mode 100644 js/components/treeview/branch.reel/branch.html
 create mode 100644 js/components/treeview/branch.reel/branch.js
 create mode 100644 js/components/treeview/leaf.reel/leaf.css
 create mode 100644 js/components/treeview/leaf.reel/leaf.html
 create mode 100644 js/components/treeview/leaf.reel/leaf.js
 create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.css
 create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.html
 create mode 100644 js/components/treeview/ninja-branch.reel/ninja-branch.js
 create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.css
 create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.html
 create mode 100644 js/components/treeview/ninja-leaf.reel/ninja-leaf.js
 create mode 100644 js/components/treeview/tree-node.js
 create mode 100644 js/components/treeview/treeview.reel/treeview.css
 create mode 100644 js/components/treeview/treeview.reel/treeview.html
 create mode 100644 js/components/treeview/treeview.reel/treeview.js

(limited to 'js')

diff --git a/js/components/treeview/branch.reel/branch.css b/js/components/treeview/branch.reel/branch.css
new file mode 100644
index 00000000..5998e0f0
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.css
@@ -0,0 +1,16 @@
+.treeRoot > .branch > ul {
+    margin-top: 0;
+}
+.branch > .branch-label {
+    font-weight: bold;
+    cursor: pointer;
+}
+.branch ul {
+    list-style: none;
+}
+.branch ul {
+    padding-left: 30px;
+}
+.branch .collapse {
+    display: none;
+}
\ No newline at end of file
diff --git a/js/components/treeview/branch.reel/branch.html b/js/components/treeview/branch.reel/branch.html
new file mode 100644
index 00000000..31a4cf18
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="branch.css" rel="stylesheet" type="text/css" />
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/components/treeview/branch.reel",
+            "name" : "Branch",
+            "properties" : {
+                "element" : {"#" : "branch"},
+                "label" : { "@" : "textComponent" },
+                "branchList": {"#" : "branchList"},
+                "arrayController": {"@": "arrayController" },
+                "repetition": {"@": "repetition"},
+                "leafComponent": {"@": "leaf"},
+                "branchComponent": {"@": "branch"}
+            }
+        },
+
+        "textComponent" : {
+            "module" : "montage/ui/dynamic-text.reel",
+            "name" : "DynamicText",
+            "properties" : {
+                "element" : { "#" : "label" }
+            },
+            "bindings" : {
+                "value" : {
+                    "boundObject" : {"@": "owner"},
+                    "boundObjectPropertyPath": "_labelText",
+                    "oneway": true
+                }
+            }
+        },
+
+        "arrayController": {
+            "module": "montage/ui/controller/array-controller",
+            "name": "ArrayController",
+            "bindings": {
+                "content": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "childNodes"
+                }
+            }
+        },
+
+        "leaf": {
+            "module": "js/components/treeview/leaf.reel",
+            "name": "Leaf",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "branch": {
+            "module": "js/components/treeview/branch.reel",
+            "name": "Branch",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "repetition": {
+            "module": "montage/ui/repetition.reel",
+            "name": "Repetition",
+            "properties": {
+                "element": { "#": "branchList" },
+                "contentController": {"@": "arrayController" }
+            }
+        },
+
+        "substitution": {
+            "module": "montage/ui/substitution.reel",
+            "name": "Substitution",
+            "properties": {
+                "element": {"#": "treeItem"},
+                "switchComponents": {
+                    "leaf": {"@": "leaf"},
+                    "branch": {"@": "branch"}
+
+                }
+            },
+            "bindings": {
+                "switchValue": {
+                    "boundObject": {"@": "repetition"},
+                    "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
+                    "oneway": true
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="branch" class="branch">
+        <span id="label" class="branch-label"></span>
+
+        <ul id="branchList">
+            <li id="treeItem"></li>
+        </ul>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/branch.reel/branch.js b/js/components/treeview/branch.reel/branch.js
new file mode 100644
index 00000000..892da71a
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.js
@@ -0,0 +1,48 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var Branch = exports.Branch = Montage.create(TreeNode, {
+    hasTemplate:{
+        value:true
+    },
+    repetition:{
+        value: null
+    },
+    prepareForDraw : {
+        value: function() {
+            this.label._element.addEventListener('click', this, false);
+
+            this.treeView.contentController.addBranchController(this.arrayController);
+        }
+    },
+    draw:{
+        value: function () {
+
+            if (this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            } else {
+                console.log("Label key unknown");
+            }
+
+        }
+    },
+    handleClick : {
+        value: function(e) {
+            e.preventDefault();
+            this.toggleExpand();
+
+        }
+    },
+    collapseClass : {
+        value: 'collapse'
+    }
+
+
+});
diff --git a/js/components/treeview/leaf.reel/leaf.css b/js/components/treeview/leaf.reel/leaf.css
new file mode 100644
index 00000000..fea5a2c4
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.css
@@ -0,0 +1,4 @@
+.leaf > .leaf-label {
+    opacity: 0.8;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/js/components/treeview/leaf.reel/leaf.html b/js/components/treeview/leaf.reel/leaf.html
new file mode 100644
index 00000000..991a4323
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link href="leaf.css" rel="stylesheet" type="text/css" />
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/components/treeview/leaf.reel",
+                "name" : "Leaf",
+                "properties" : {
+                    "element" : {"#" : "leaf"},
+                    "label" : { "@" : "textComponent" }
+                }
+            },
+            "textComponent" : {
+                "module" : "montage/ui/dynamic-text.reel",
+                "name" : "DynamicText",
+                "properties" : {
+                    "element" : { "#" : "label" }
+                },
+                "bindings" : {
+                    "value" : {
+                        "boundObject" : {"@": "owner"},
+                        "boundObjectPropertyPath": "_labelText",
+                        "oneway": true
+                    }
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <div id="leaf" class="leaf">
+        <span id="label" class="leaf-label"></span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/leaf.reel/leaf.js b/js/components/treeview/leaf.reel/leaf.js
new file mode 100644
index 00000000..3a63f5ed
--- /dev/null
+++ b/js/components/treeview/leaf.reel/leaf.js
@@ -0,0 +1,44 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Leaf = Montage.create(TreeNode, {
+    hasTemplate: {
+        value: true
+    },
+    deserializedFromTemplate : {
+        value: function() {
+            //console.log('Leaf deserialized.');
+        }
+    },
+    templateDidLoad : {
+        value: function() {
+            //debugger;
+            console.log('Leaf\'s template did load.');
+            this.needsDraw = true;
+        }
+    },
+    prepareForDraw: {
+        value : function() {
+            console.log('Leafs prepare for draw.', this.labelKey);
+        }
+    },
+    draw : {
+        value : function() {
+            if(this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            } else {
+                console.log("Label key unknown");
+            }
+
+        }
+    }
+
+
+});
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.css b/js/components/treeview/ninja-branch.reel/ninja-branch.css
new file mode 100644
index 00000000..698fcd21
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.css
@@ -0,0 +1,34 @@
+.treeRoot > .branch > ul {
+    margin-top: 0;
+}
+.branch ul {
+    list-style: none;
+    padding-left: 0;
+}
+.branch .nj-collapser {
+    -webkit-transition: height 0.14s cubic-bezier(.44,.19,0,.99);
+}
+.branch .branchCollapser ul {
+    width: 100%;
+}
+.treeRoot .branch .branch-label {
+    border-bottom: 1px solid #505050;
+    cursor: pointer;
+    padding: 3px 0 4px;
+    background-repeat: no-repeat;
+    background-position: 3px 2px;
+    box-shadow: 0 0 0 0 rgba(0,0,0,0);
+    font-weight: bold;
+    box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
+}
+
+/* First Level */
+.branch .branch .branch-label {
+    padding-left: 25px;
+}
+
+/* Second Level */
+.branch .branch .branch .branch-label {
+    padding-left: 45px;
+    background-position: 25px;
+}
\ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html
new file mode 100644
index 00000000..6e239855
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="ninja-branch.css" rel="stylesheet" type="text/css" />
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/components/treeview/ninja-branch.reel",
+            "name" : "Branch",
+            "properties" : {
+                "element" : {"#" : "branch"},
+                "label" : { "@" : "textComponent" },
+                "branchList": {"#" : "branchList"},
+                "arrayController": {"@": "arrayController" },
+                "repetition": {"@": "repetition"},
+                "leafComponent": {"@": "leaf"},
+                "branchComponent": {"@": "branch"},
+                "collapser": {"#": "branchCollapser" }
+            }
+        },
+
+        "textComponent" : {
+            "module" : "montage/ui/dynamic-text.reel",
+            "name" : "DynamicText",
+            "properties" : {
+                "element" : { "#" : "label" }
+            },
+            "bindings" : {
+                "value" : {
+                    "boundObject" : {"@": "owner"},
+                    "boundObjectPropertyPath": "_labelText",
+                    "oneway": true
+                }
+            }
+        },
+
+        "arrayController": {
+            "module": "montage/ui/controller/array-controller",
+            "name": "ArrayController",
+            "bindings": {
+                "content": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "childNodes"
+                }
+            }
+        },
+
+        "leaf": {
+            "module": "js/components/treeview/ninja-leaf.reel",
+            "name": "Leaf",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "branch": {
+            "module": "js/components/treeview/ninja-branch.reel",
+            "name": "Branch",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+
+        "repetition": {
+            "module": "montage/ui/repetition.reel",
+            "name": "Repetition",
+            "properties": {
+                "element": { "#": "branchList" },
+                "contentController": {"@": "arrayController" }
+            }
+        },
+
+        "substitution": {
+            "module": "montage/ui/substitution.reel",
+            "name": "Substitution",
+            "properties": {
+                "element": {"#": "treeItem"},
+                "switchComponents": {
+                    "leaf": {"@": "leaf"},
+                    "branch": {"@": "branch"}
+
+                }
+            },
+            "bindings": {
+                "switchValue": {
+                    "boundObject": {"@": "repetition"},
+                    "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
+                    "oneway": true
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="branch" class="branch">
+        <div id="label" class="branch-label"></div>
+        <div id="branchCollapser" class="branchCollapser">
+            <ul id="branchList">
+                <li id="treeItem"></li>
+            </ul>    
+        </div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.js b/js/components/treeview/ninja-branch.reel/ninja-branch.js
new file mode 100644
index 00000000..6b9ebb10
--- /dev/null
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.js
@@ -0,0 +1,131 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+var Branch = exports.Branch = Montage.create(TreeNode, {
+    hasTemplate:{
+        value:true
+    },
+    repetition:{
+        value: null
+    },
+    prepareForDraw : {
+        value: function() {
+            this.collapser.removeAttribute('id');
+            this.label._element.addEventListener('click', this, false);
+            
+            if(this.hideLabel) {
+                this.label.element.style.display = "none";
+            }
+
+            this.treeView.contentController.addBranchController(this.arrayController);
+        }
+    },
+    handleWebkitTransitionEnd : {
+        value: function(e) {
+            e.stopPropagation(); 
+            
+            ///// Remove Transition
+            this._removeTransition = true;
+            this.collapser.removeEventListener('webkitTransitionEnd', this, false);
+            
+            //// If it's an expand transition, restore height to auto
+            if(this.isExpanded) {
+                this._switchToAuto = true;
+            }
+            
+            this.needsDraw = true;
+
+        }
+    },
+    templateDidLoad: {
+        value: function() {
+            this.arrayController.delegate = this.treeView.contentController;
+        }
+    },
+    willDraw : {
+        value: function() {
+            if(this._doCollapse && this._step === 0) {
+                this.branchHeight = window.getComputedStyle(this.collapser).height;
+            }
+        }
+    },
+    draw:{
+        value: function () {
+
+            if (this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            }
+            
+            if(this._doCollapse) {
+                if (this._step === 0) {                    
+                    this.collapser.style.height = this.branchHeight;
+                    this.collapser.style.position = "relative";
+                    this.collapser.style.overflow = 'hidden';
+                    this.collapser.childNodes[1].style.bottom = '0px';
+                    this.collapser.childNodes[1].style.position = 'absolute';
+                    this._step = 1;
+                    this.needsDraw = true;
+                } else if (this._step === 1) {
+                    this.collapser.classList.add(this.collapseClass);
+                    this._step = 2;
+                    this.needsDraw = true;
+                } else {
+                    this.collapser.style.height = '0px';
+                    this._doCollapse = false;
+                    this._step = 0;
+                }
+            } else if(this._doExpand) {
+                this.collapser.style.height = this.branchHeight;
+                
+                this._doExpand = false;
+            }
+            if(this._switchToAuto) {
+                this.collapser.childNodes[1].style.position = 'static';
+                this.collapser.style.height = 'auto';                    
+                this._switchToAuto = false;
+            }
+            
+            if(this._removeTransition) {
+                this.collapser.classList.remove(this.collapseClass);
+                this._removeTransition = false;
+            }
+
+        }
+    },
+    _step : {
+        value : 0
+    },
+    handleClick : {
+        value: function(e) {
+            this.toggleExpand();
+        }
+    },
+    expand : {
+        value: function() {
+            this.collapser.addEventListener('webkitTransitionEnd', this, false);
+            this.needsDraw = this._doExpand = true;
+        }
+    },
+    collapse : {
+        value: function() {
+            this.needsDraw = this._doCollapse = true;            
+        }
+    },
+    branchHeight: {
+        value: null,
+        enumberable: false
+    },
+    collapseClass : {
+        value: 'nj-collapser',
+        enumberable: false
+    }
+
+
+});
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
new file mode 100644
index 00000000..0ad10c4c
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -0,0 +1,22 @@
+.treeRoot .leaf-label {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQzcwMEU1RjQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQzcwMEU2MDQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRDNzAwRTVENDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRDNzAwRTVFNDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BUcaK3QAAANFJREFUeNqMULEOREAQdYjvuE%2FYWlSUQqKQ7A%2FsD6n0SoVCFHpRa0SllvgFlpvzZO9OcfGSnbx9M%2FNmMpp2Dw96VVX9L%2FJ93wRrmkZJIKrZcRyK%2Bs25p5%2BU8pK4KCakMAzxL4oCJIqivu8Nw0DDu25ZFtW3ritIkiS0tGVZtm1%2F6rZtu4yr67osSyJBEJx3ybKsbVukOecU4zh2XRfKMAzTNJmYpWxgPM%2BzEIIxRrzrOs%2FzdMyVvyAxTdPxAJFzv%2BeBbz8cfN93kDzPb55ZewkwAF0Ddf6ATSsHAAAAAElFTkSuQmCC);
+    background-position: 3px center;
+    background-repeat: no-repeat;
+    border-bottom: 1px solid #505050;
+    cursor: pointer;
+    padding: 3px 0 4px;
+}
+/* First level */
+.branch .leaf-label {
+    padding-left: 25px;
+}
+/* Second level */
+.branch .branch .leaf-label {
+    background-position: 25px center;
+    padding-left: 45px;
+}
+/* Third level */
+.branch .branch .branch .leaf-label {
+    background-position: 45px center;
+    padding-left: 65px;
+}
\ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
new file mode 100644
index 00000000..0a8fdac0
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link href="ninja-leaf.css" rel="stylesheet" type="text/css" />
+        <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/components/treeview/ninja-leaf.reel",
+                "name" : "Leaf",
+                "properties" : {
+                    "element" : {"#" : "leaf"},
+                    "label" : { "@" : "textComponent" }
+                }
+            },
+            "textComponent" : {
+                "module" : "montage/ui/dynamic-text.reel",
+                "name" : "DynamicText",
+                "properties" : {
+                    "element" : { "#" : "label" }
+                },
+                "bindings" : {
+                    "value" : {
+                        "boundObject" : {"@": "owner"},
+                        "boundObjectPropertyPath": "_labelText",
+                        "oneway": true
+                    }
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <div id="leaf" class="leaf">
+        <div id="label" class="leaf-label"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
new file mode 100644
index 00000000..bd566b26
--- /dev/null
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -0,0 +1,41 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+
+exports.Leaf = Montage.create(TreeNode, {
+    hasTemplate: {
+        value: true
+    },
+    templateDidLoad : {
+        value: function() {
+            this.needsDraw = true;
+        }
+    },
+    prepareForDraw: {
+        value : function() {
+            this.activationEvent = this.activationEvent || 'click';
+            this.label._element.addEventListener(this.activationEvent, this.handleNodeActivation.bind(this), false);
+        }
+    },
+    handleNodeActivation: {
+        value: function(e) {
+            console.log(this.sourceObject);
+            this.treeView.contentController.delegate.applyPresetSelection(this.sourceObject);
+        }
+    },
+    draw : {
+        value : function() {
+            if(this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            }
+        }
+    }
+
+
+});
diff --git a/js/components/treeview/tree-node.js b/js/components/treeview/tree-node.js
new file mode 100644
index 00000000..689fc233
--- /dev/null
+++ b/js/components/treeview/tree-node.js
@@ -0,0 +1,103 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.TreeNode = Montage.create(Component, {
+    _labelText: {
+        value: "Default"
+    },
+    labelText : {
+        get: function() { return this._labelText; },
+        set: function(text) {
+            this._labelText = text;
+        }
+    },
+    treeView : {
+        value: null,
+        serializable: true
+    },
+    leafComponent: {
+        value: null,
+        serializable: true
+    },
+    branchKey : {
+        serializable: true,
+        value: null
+    },
+    labelKey : {
+        serializable: true,
+        value: null
+    },
+    _sourceObject : {
+        value : null
+    },
+    sourceObject : {
+        get : function() {
+            return this._sourceObject;
+        },
+        set : function(object) {
+            if(!object) {
+                return;
+            }
+            if(object[this.branchKey]) {
+                object[this.branchKey].forEach(function(node) {
+                    this.childNodes.push(node);
+                }, this);
+            }
+            this._sourceObject = object;
+        }
+    },
+    childNodes : {
+        distinct: true,
+        value: []
+    },
+    isExpanded : {
+        distinct: true,
+        value: true
+    },
+    _needsToggle : {
+        value: null
+    },
+    activationEvent : {
+        value: null
+    },
+    toggleExpand : {
+        value: function() {
+            if(this.isExpanded) {
+                this.collapse();
+                this.isExpanded = false;
+            } else {
+                this.expand();
+                this.isExpanded = true;
+            }
+        }
+    },
+    expand : {
+        value: function() {
+            if(this.collapseClass) {
+                this.branchList.classList.remove(this.collapseClass);
+            } else {
+                this.branchList.style.display = "block";
+            }
+
+        }
+    },
+    collapse : {
+        value: function() {
+            if(this.collapseClass) {
+                this.branchList.classList.add(this.collapseClass);
+            } else {
+                this.branchList.style.display = "none";
+            }
+
+        }
+    }
+
+
+
+});
diff --git a/js/components/treeview/treeview.reel/treeview.css b/js/components/treeview/treeview.reel/treeview.css
new file mode 100644
index 00000000..1e3965ef
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.css
@@ -0,0 +1,3 @@
+
+
+{}
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
new file mode 100644
index 00000000..3d5d75c4
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" href="treeview.css" type="text/css">
+        <script type="text/montage-serialization">
+        {
+            "owner" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : { "#" : "treeView"},
+                    "defaultBranchComponent" : { "@" : "defaultBranch"},
+                    "defaultLeafComponent" : { "@" : "defaultLeaf"},
+                    "scrollview" : { "@" : "scrollview"},
+                    "slot": {"@": "slot"}
+                }
+            },
+            "defaultBranch" : {
+                "module" : "js/components/treeview/branch.reel",
+                "name" : "Branch"
+            },
+            "defaultLeaf" : {
+                "module" : "js/components/treeview/presets-leaf.reel",
+                "name" : "Leaf"
+            },
+            "scrollview": {
+                "module": "montage/ui/scrollview.reel",
+                "name": "Scrollview",
+                "properties": {
+                    "element": {"#": "treeView"},
+                    "axis": "vertical"
+                 }
+            },
+            "slot": {
+                "module": "montage/ui/slot.reel",
+                "name": "Slot",
+                "properties": {
+                    "element": {"#": "rootBranch"}
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <div id="treeView" class="treeView">
+        <div id="rootBranch" class="treeRoot"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/components/treeview/treeview.reel/treeview.js b/js/components/treeview/treeview.reel/treeview.js
new file mode 100644
index 00000000..ebbfe685
--- /dev/null
+++ b/js/components/treeview/treeview.reel/treeview.js
@@ -0,0 +1,129 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage   = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.Treeview = Montage.create(Component, {
+
+    substitution      : { value : null },
+    data              : { value : null },
+
+    _hasBeenDeserialized: {
+        value: false,
+        enumerable: false
+    },
+
+    branchComponent : {
+        value: null,
+        serializable: true
+    },
+    leafComponent : {
+        value: null,
+        serializable: true
+    },
+
+    hasTemplate: {
+        value: true
+    },
+    templateDidLoad : {
+        value : function() {
+            this._initializeRootBranch();
+        }
+    },
+    _initializeRootBranch : {
+        value: function() {
+            var rootBranch;
+
+            ///// Get user-defined branch/leaf components or use defaults
+            this.branchComponent = this.branchComponent || this.defaultBranchComponent;
+
+            ///// Tell branch component what the label key is (defined in tree controller)
+            this.branchComponent.labelKey = this.contentController.labelKey;
+
+            ///// Tell branch component what the branch key is (so it can recursively generate branches)
+            this.branchComponent.branchKey = this.contentController.branchKey;
+
+            rootBranch = Montage.create(this.branchComponent);
+            rootBranch.hideLabel = !this.showRoot;
+            rootBranch.treeView = this;
+
+            this.slot.content = rootBranch;
+            rootBranch.sourceObject = this.contentController.root;
+            rootBranch.needsDraw = true;
+            this.needsDraw = true;
+
+        }
+    },
+    showRoot : {
+        value: null
+    },
+
+    _contentController: {
+        enumerable: false,
+        value: null
+    },
+
+    contentController: {
+        enumerable: false,
+        get: function() {
+            return this._contentController;
+        },
+        set: function(value) {
+            if (this._contentController === value) {
+                return;
+            }
+
+            if (this._contentController) {
+                Object.deleteBinding(this, "selectedIndexes");
+            }
+
+            this._contentController = value;
+
+            if (this._contentController) {
+
+                // And bind what we need from the new contentController
+                var selectedIndexesBindingDescriptor;
+
+                selectedIndexesBindingDescriptor = {
+                    boundObject: this._contentController,
+                    boundObjectPropertyPath: "selectedIndexes"
+                };
+
+                if (this._hasBeenDeserialized) {
+                    Object.defineBinding(this, "selectedIndexes", selectedIndexesBindingDescriptor);
+                } else {
+                    // otherwise we need to defer it until later; we haven't been deserialized yet
+                    if (!this._controllerBindingsToInstall) {
+                        this._controllerBindingsToInstall = {};
+                    }
+                    this._controllerBindingsToInstall.selectedIndexes = selectedIndexesBindingDescriptor;
+                }
+            }
+
+        }
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            var controllerBindingDescriptorsToInstall = this._controllerBindingsToInstall;
+
+            if (controllerBindingDescriptorsToInstall) {
+                for (var key in controllerBindingDescriptorsToInstall) {
+                    Object.defineBinding(this, key, controllerBindingDescriptorsToInstall[key]);
+                }
+                delete this._controllerBindingsToInstall;
+            }
+
+            this._hasBeenDeserialized = true;
+        }
+    },
+
+    selectedIndexes: {
+        enumerable: false,
+        value: null
+    }
+});
\ No newline at end of file
-- 
cgit v1.2.3


From c83b0d9bf3f37ae8569e8afc51dbcba9ed003929 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Mon, 6 Feb 2012 13:08:38 -0800
Subject: TreeController - moving the tree controller to the components
 directory

---
 js/components/controllers/tree-controller.js | 185 +++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 js/components/controllers/tree-controller.js

(limited to 'js')

diff --git a/js/components/controllers/tree-controller.js b/js/components/controllers/tree-controller.js
new file mode 100644
index 00000000..03ef7b9e
--- /dev/null
+++ b/js/components/controllers/tree-controller.js
@@ -0,0 +1,185 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+/**
+ @module montage/ui/controller/tree-controller
+ @requires montage/core/core
+ @requires montage/ui/controller/object-controller
+ @requires montage/core/event/mutable-event
+ */
+var Montage = require("montage").Montage,
+    ObjectController = require("montage/ui/controller/object-controller").ObjectController,
+    ArrayController = require("montage/ui/controller/array-controller").ArrayController,
+    MutableEvent = require("montage/core/event/mutable-event").MutableEvent;
+/**
+    TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical
+    collection of objects, and managing user selection within that collection.
+    You can assign a TreeController instance as the <code>contentProvider</code> property for a TreeView object.
+    @class module:montage/ui/controller/tree-controller.TreeController
+    @classdesc
+    @extends module:montage/ui/controller/object-controller.ObjectController
+*/
+var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
+
+    rootKey : {
+        value: null
+    },
+
+    branchKey : {
+        value: 'children'
+    },
+
+    _root : {
+        value : null
+    },
+    root : {
+        get: function() {
+            return this._root;
+        },
+        set: function(value) {
+            this._root = value;
+
+            this.initArrayControllers();
+        }
+    },
+
+    rootController: {
+        value: null
+    },
+
+    initArrayControllers : {
+        value: function() {
+            var self = this;
+
+            ///// Recursive function that finds all branch nodes and initializes
+            ///// sets the tree node type to "branch" or "leaf"
+
+            function walk(node, init, depth) {
+                var branch = node[self.branchKey];
+
+                if(branch) {
+                    branch.forEach(function(node) {
+                        walk(node, init, ++depth);
+                    });
+
+                    node['treeNodeType'] = 'branch';
+                } else {
+                    node['treeNodeType'] = 'leaf';
+                }
+            }
+
+            walk(this._root, 0);
+
+        }
+    },
+
+    /**
+        @private
+     */
+    _selectedIndexes: {
+        value: null,
+        enumerable: false
+    },
+
+   /**
+        Description TODO
+        @type {Function}
+        @default null
+    */
+   selectedIndexes: {
+       get: function() {
+           return this._selectedIndexes;
+       },
+       set: function(value) {
+           this._selectedIndexes = value;
+       }
+   },
+
+    branchControllers: {
+        value: []
+    },
+
+    addBranchController : {
+        value: function(controller) {
+            if(this.delegate) {
+                controller.delegate = this.delegate;
+            }
+
+            this.branchControllers.push(controller);
+        }
+    },
+
+    /**
+     @private
+     */
+    _content: {
+        enumerable: false,
+        value: null
+    },
+    /**
+        The content managed by the TreeController.
+        @type {Function}
+        @default {String} null
+    */
+    content: {
+        get: function() {
+            return this._content;
+        },
+        set: function(value) {
+            if (this._content === value) {
+                return;
+            }
+
+            this._content = value;
+
+            this.selectedObjects = null;
+
+            if (this.rootKey) {
+                if (value[this.rootKey]) {
+                    this.root = value[this.rootKey];
+                } else {
+                    console.log('No root key found in content data');
+                }
+            } else {
+                this.root = value;
+            }
+
+        }
+    },
+
+    addObjects : {
+        value: function() {
+
+            var objects = Array.prototype.slice.call(arguments),
+                i,
+                objectCount = objects.length,
+                selectedContentIndexes, firstIndex;
+
+            for (i = 0; i < objectCount; i++) {
+                this.content.push(objects[i]);
+            }
+
+            if (this.selectObjectsOnAddition) {
+                selectedContentIndexes = [];
+                firstIndex = this.content.length-objectCount;
+                for (i = 0; i < objectCount; i++) {
+                    selectedContentIndexes[i] = firstIndex++;
+                }
+                this.selectedContentIndexes = selectedContentIndexes;
+                this.selectedObjects = objects;
+            }
+
+            if (this.clearFilterFunctionOnAddition) {
+                this.filterFunction = null;
+            }
+
+            if (this.automaticallyOrganizeObjects) {
+                this.organizeObjects();
+            }
+
+        }
+    }
+
+});
-- 
cgit v1.2.3