aboutsummaryrefslogtreecommitdiff
path: root/js/components/treeview
diff options
context:
space:
mode:
authorEric Guzman2012-02-06 11:43:01 -0800
committerEric Guzman2012-02-06 11:43:01 -0800
commit984d65c818969ea3bef57ade9cbf5fc50d9a2316 (patch)
tree2f559127a052c98aa3a7c822f0f91d813b429240 /js/components/treeview
parent5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 (diff)
downloadninja-984d65c818969ea3bef57ade9cbf5fc50d9a2316.tar.gz
Tree Components - Adding the tree components
Diffstat (limited to 'js/components/treeview')
-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
16 files changed, 988 insertions, 0 deletions
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>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <link href="branch.css" rel="stylesheet" type="text/css" />
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module" : "js/components/treeview/branch.reel",
10 "name" : "Branch",
11 "properties" : {
12 "element" : {"#" : "branch"},
13 "label" : { "@" : "textComponent" },
14 "branchList": {"#" : "branchList"},
15 "arrayController": {"@": "arrayController" },
16 "repetition": {"@": "repetition"},
17 "leafComponent": {"@": "leaf"},
18 "branchComponent": {"@": "branch"}
19 }
20 },
21
22 "textComponent" : {
23 "module" : "montage/ui/dynamic-text.reel",
24 "name" : "DynamicText",
25 "properties" : {
26 "element" : { "#" : "label" }
27 },
28 "bindings" : {
29 "value" : {
30 "boundObject" : {"@": "owner"},
31 "boundObjectPropertyPath": "_labelText",
32 "oneway": true
33 }
34 }
35 },
36
37 "arrayController": {
38 "module": "montage/ui/controller/array-controller",
39 "name": "ArrayController",
40 "bindings": {
41 "content": {
42 "boundObject": {"@": "owner"},
43 "boundObjectPropertyPath": "childNodes"
44 }
45 }
46 },
47
48 "leaf": {
49 "module": "js/components/treeview/leaf.reel",
50 "name": "Leaf",
51 "bindings": {
52 "sourceObject": {
53 "boundObject": {"@": "repetition" },
54 "boundObjectPropertyPath": "objectAtCurrentIteration",
55 "oneway": true
56 },
57 "labelKey" : {
58 "boundObject": {"@": "owner" },
59 "boundObjectPropertyPath": "labelKey",
60 "oneway": true
61 },
62 "branchKey" : {
63 "boundObject": {"@": "owner" },
64 "boundObjectPropertyPath": "branchKey",
65 "oneway": true
66 },
67 "treeView" : {
68 "boundObject": {"@": "owner" },
69 "boundObjectPropertyPath": "treeView",
70 "oneway": true
71 }
72 }
73 },
74
75 "branch": {
76 "module": "js/components/treeview/branch.reel",
77 "name": "Branch",
78 "bindings": {
79 "sourceObject": {
80 "boundObject": {"@": "repetition" },
81 "boundObjectPropertyPath": "objectAtCurrentIteration",
82 "oneway": true
83 },
84 "labelKey" : {
85 "boundObject": {"@": "owner" },
86 "boundObjectPropertyPath": "labelKey",
87 "oneway": true
88 },
89 "branchKey" : {
90 "boundObject": {"@": "owner" },
91 "boundObjectPropertyPath": "branchKey",
92 "oneway": true
93 },
94 "treeView" : {
95 "boundObject": {"@": "owner" },
96 "boundObjectPropertyPath": "treeView",
97 "oneway": true
98 }
99 }
100 },
101
102 "repetition": {
103 "module": "montage/ui/repetition.reel",
104 "name": "Repetition",
105 "properties": {
106 "element": { "#": "branchList" },
107 "contentController": {"@": "arrayController" }
108 }
109 },
110
111 "substitution": {
112 "module": "montage/ui/substitution.reel",
113 "name": "Substitution",
114 "properties": {
115 "element": {"#": "treeItem"},
116 "switchComponents": {
117 "leaf": {"@": "leaf"},
118 "branch": {"@": "branch"}
119
120 }
121 },
122 "bindings": {
123 "switchValue": {
124 "boundObject": {"@": "repetition"},
125 "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
126 "oneway": true
127 }
128 }
129 }
130 }
131 </script>
132</head>
133<body>
134 <div id="branch" class="branch">
135 <span id="label" class="branch-label"></span>
136
137 <ul id="branchList">
138 <li id="treeItem"></li>
139 </ul>
140 </div>
141</body>
142</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 @@
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
7var Montage = require("montage").Montage,
8 Component = require("montage/ui/component").Component,
9 TreeNode = require("js/components/treeview/tree-node").TreeNode;
10
11var Branch = exports.Branch = Montage.create(TreeNode, {
12 hasTemplate:{
13 value:true
14 },
15 repetition:{
16 value: null
17 },
18 prepareForDraw : {
19 value: function() {
20 this.label._element.addEventListener('click', this, false);
21
22 this.treeView.contentController.addBranchController(this.arrayController);
23 }
24 },
25 draw:{
26 value: function () {
27
28 if (this.sourceObject[this.labelKey]) {
29 this._labelText = this.sourceObject[this.labelKey];
30 } else {
31 console.log("Label key unknown");
32 }
33
34 }