aboutsummaryrefslogtreecommitdiff
path: root/js/components/treeview/branch.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/treeview/branch.reel')
-rw-r--r--js/components/treeview/branch.reel/branch.css22
-rw-r--r--js/components/treeview/branch.reel/branch.html147
-rw-r--r--js/components/treeview/branch.reel/branch.js48
3 files changed, 217 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..0f4e4a87
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.css
@@ -0,0 +1,22 @@
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.treeRoot > .branch > ul {
8 margin-top: 0;
9}
10.branch > .branch-label {
11 font-weight: bold;
12 cursor: pointer;
13}
14.branch ul {
15 list-style: none;
16}
17.branch ul {
18 padding-left: 30px;
19}
20.branch .collapse {
21 display: none;
22} \ 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..b44a54c5
--- /dev/null
+++ b/js/components/treeview/branch.reel/branch.html
@@ -0,0 +1,147 @@
1<!DOCTYPE html>
2<!-- <copyright>
3This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6</copyright> -->
7<html lang="en">
8<head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link href="branch.css" rel="stylesheet" type="text/css" />
11 <script type="text/montage-serialization">
12 {
13 "owner": {
14 "module" : "js/components/treeview/branch.reel",
15 "name" : "Branch",
16 "properties" : {
17 "element" : {"#" : "branch"},
18 "label" : { "@" : "textComponent" },
19 "branchList": {"#" : "branchList"},
20 "arrayController": {"@": "arrayController" },
21 "repetition": {"@": "repetition"},
22 "leafComponent": {"@": "leaf"},
23 "branchComponent": {"@": "branch"}
24 }
25 },
26
27 "textComponent" : {
28 "module" : "montage/ui/dynamic-text.reel",
29 "name" : "DynamicText",
30 "properties" : {
31 "element" : { "#" : "label" }
32 },
33 "bindings" : {
34 "value" : {
35 "boundObject" : {"@": "owner"},
36 "boundObjectPropertyPath": "_labelText",
37 "oneway": true
38 }
39 }
40 },
41
42 "arrayController": {
43 "module": "montage/ui/controller/array-controller",
44 "name": "ArrayController",
45 "bindings": {
46 "content": {
47 "boundObject": {"@": "owner"},
48 "boundObjectPropertyPath": "childNodes"
49 }
50 }
51 },
52
53 "leaf": {
54 "module": "js/components/treeview/leaf.reel",
55 "name": "Leaf",
56 "bindings": {
57 "sourceObject": {
58 "boundObject": {"@": "repetition" },
59 "boundObjectPropertyPath": "objectAtCurrentIteration",
60 "oneway": true
61 },
62 "labelKey" : {
63 "boundObject": {"@": "owner" },
64 "boundObjectPropertyPath": "labelKey",
65 "oneway": true
66 },
67 "branchKey" : {
68 "boundObject": {"@": "owner" },
69 "boundObjectPropertyPath": "branchKey",
70 "oneway": true
71 },
72 "treeView" : {
73 "boundObject": {"@": "owner" },
74 "boundObjectPropertyPath": "treeView",
75 "oneway": true
76 }
77 }
78 },
79
80 "branch": {
81 "module": "js/components/treeview/branch.reel",
82 "name": "Branch",
83 "bindings": {
84 "sourceObject": {
85 "boundObject": {"@": "repetition" },
86 "boundObjectPropertyPath": "objectAtCurrentIteration",
87 "oneway": true
88 },
89 "labelKey" : {
90 "boundObject": {"@": "owner" },
91 "boundObjectPropertyPath": "labelKey",
92 "oneway": true
93 },
94 "branchKey" : {
95 "boundObject": {"@": "owner" },
96 "boundObjectPropertyPath": "branchKey",
97 "oneway": true
98 },
99 "treeView" : {
100 "boundObject": {"@": "owner" },
101 "boundObjectPropertyPath": "treeView",
102 "oneway": true
103 }
104 }
105 },
106
107 "repetition": {
108 "module": "montage/ui/repetition.reel",
109 "name": "Repetition",
110 "properties": {
111 "element": { "#": "branchList" },
112 "contentController": {"@": "arrayController" }
113 }
114 },
115
116 "substitution": {
117 "module": "montage/ui/substitution.reel",
118 "name": "Substitution",
119 "properties": {
120 "element": {"#": "treeItem"},
121 "switchComponents": {
122 "leaf": {"@": "leaf"},
123 "branch": {"@": "branch"}
124
125 }
126 },
127 "bindings": {
128 "switchValue": {
129 "boundObject": {"@": "repetition"},
130 "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
131 "oneway": true
132 }
133 }
134 }
135 }
136 </script>
137</head>
138<body>
139 <div id="branch" class="branch">
140 <span id="label" class="branch-label"></span>
141
142 <ul id="branchList">
143 <li id="treeItem"></li>
144 </ul>
145 </div>
146</body>
147</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 }
35 },
36 handleClick : {
37 value: function(e) {
38 e.preventDefault();
39 this.toggleExpand();
40
41 }
42 },
43 collapseClass : {
44 value: 'collapse'
45 }
46
47
48});
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-05 13:54:02 +0000