aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/components/controllers/tree-controller.js185
-rw-r--r--js/components/treeview/branch.reel/branch.css16
-rw-r--r--js/components/treeview/branch.reel/branch.html142
-rw-r--r--js/components/treeview/branch.reel/branch.js48
-rw-r--r--js/components/treeview/leaf.reel/leaf.css4
-rw-r--r--js/components/treeview/leaf.reel/leaf.html38
-rw-r--r--js/components/treeview/leaf.reel/leaf.js44
-rw-r--r--js/components/treeview/ninja-branch.reel/ninja-branch.css34
-rw-r--r--js/components/treeview/ninja-branch.reel/ninja-branch.html145
-rw-r--r--js/components/treeview/ninja-branch.reel/ninja-branch.js131
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.css22
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.html38
-rw-r--r--js/components/treeview/ninja-leaf.reel/ninja-leaf.js41
-rw-r--r--js/components/treeview/tree-node.js103
-rw-r--r--js/components/treeview/treeview.reel/treeview.css3
-rw-r--r--js/components/treeview/treeview.reel/treeview.html50
-rw-r--r--js/components/treeview/treeview.reel/treeview.js129
-rw-r--r--js/controllers/tree-controller.js185
18 files changed, 1358 insertions, 0 deletions
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 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6/**
7 @module montage/ui/controller/tree-controller
8 @requires montage/core/core
9 @requires montage/ui/controller/object-controller
10 @requires montage/core/event/mutable-event
11 */
12var Montage = require("montage").Montage,
13 ObjectController = require("montage/ui/controller/object-controller").ObjectController,
14 ArrayController = require("montage/ui/controller/array-controller").ArrayController,
15 MutableEvent = require("montage/core/event/mutable-event").MutableEvent;
16/**
17 TODO: Write description like the array controllers: The ArrayController helps with organizing a hierarchical
18 collection of objects, and managing user selection within that collection.
19 You can assign a TreeController instance as the <code>contentProvider</code> property for a TreeView object.
20 @class module:montage/ui/controller/tree-controller.TreeController
21 @classdesc
22 @extends module:montage/ui/controller/object-controller.ObjectController
23*/
24var TreeController = exports.TreeController = Montage.create(ObjectController, /** @lends module:montage/ui/controller/tree-controller.TreeController# */ {
25
26 rootKey : {
27 value: null
28 },
29
30 branchKey : {
31 value: 'children'
32 },
33
34 _root : {
35 value : null
36 },
37 root : {
38 get: function() {
39 return this._root;
40 },
41 set: function(value) {
42 this._root = value;
43
44 this.initArrayControllers();
45 }
46 },
47
48 rootController: {
49 value: null
50 },
51
52 initArrayControllers : {
53 value: function() {
54 var self = this;
55
56 ///// Recursive function that finds all branch nodes and initializes
57 ///// sets the tree node type to "branch" or "leaf"
58
59 function walk(node, init, depth) {
60 var branch = node[self.branchKey];
61
62 if(branch) {
63 branch.forEach(function(node) {
64 walk(node, init, ++depth);
65 });
66
67 node['treeNodeType'] = 'branch';
68 } else {
69 node['treeNodeType'] = 'leaf';
70 }
71 }
72
73 walk(this._root, 0);
74
75 }
76 },
77
78 /**
79 @private
80 */
81 _selectedIndexes: {
82 value: null,
83 enumerable: false
84 },
85
86 /**
87 Description TODO
88 @type {Function}
89 @default null
90 */
91 selectedIndexes: {
92 get: function() {
93 return this._selectedIndexes;
94 },
95 set: function(value) {
96 this._selectedIndexes = value;
97 }
98 },
99
100 branchControllers: {
101 value: []
102 },
103
104 addBranchController : {
105 value: function(controller) {
106 if(this.delegate) {
107 controller.delegate = this.delegate;
108 }
109
110 this.branchControllers.push(controller);
111 }
112 },
113
114 /**
115 @private
116 */
117 _content: {
118 enumerable: false,
119 value: null
120 },
121 /**
122 The content managed by the TreeController.
123 @type {Function}
124 @default {String} null
125 */
126 content: {
127 get: function() {
128 return this._content;
129 },
130 set: function(value) {
131 if (this._content === value) {
132 return;
133 }
134
135 this._content = value;
136
137 this.selectedObjects = null;
138
139 if (this.rootKey) {
140 if (value[this.rootKey]) {
141 this.root = value[this.rootKey];
142 } else {
143 console.log('No root key found in content data');
144 }
145 } else {
146 this.root = value;
147 }
148
149 }
150 },
151
152 addObjects : {
153 value: function() {
154
155 var objects = Array.prototype.slice.call(arguments),
156 i,
157 objectCount = objects.length,
158 selectedContentIndexes, firstIndex;
159
160 for (i = 0; i < objectCount; i++) {
161 this.content.push(objects[i]);
162 }
163
164 if (this.selectObjectsOnAddition) {
165 selectedContentIndexes = [];
166 firstIndex = this.content.length-objectCount;
167 for (i = 0; i < objectCount; i++) {
168 selectedContentIndexes[i] = firstIndex++;
169 }
170 this.selectedContentIndexes = selectedContentIndexes;
171 this.selectedObjects = objects;
172 }
173
174 if (this.clearFilterFunctionOnAddition) {
175 this.filterFunction = null;
176 }
177
178 if (this.automaticallyOrganizeObjects) {
179 this.organizeObjects();
180 }
181
182 }
183 }
184
185});
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 @@
1.treeRoot > .branch > ul {
2 margin-top: 0;
3}
4.branch > .branch-label {
5 font-weight: bold;
6 cursor: pointer;
7}
8.branch ul {
9 list-style: none;
10}
11.branch ul {
12 padding-left: 30px;
13}
14.branch .collapse {
15 display: none;
16} \ 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 @@
1<!DOCTYPE html>
2<html lang="en">
3<head>