diff options
Diffstat (limited to 'js')
20 files changed, 1503 insertions, 29 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 | */ | ||
12 | var 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 | */ | ||
24 | var 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 | displ |