aboutsummaryrefslogtreecommitdiff
path: root/js/components/treeview/ninja-branch.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/treeview/ninja-branch.reel')
-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
3 files changed, 310 insertions, 0 deletions
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 @@
1.treeRoot > .branch > ul {
2 margin-top: 0;
3}
4.branch ul {
5 list-style: none;
6 padding-left: 0;
7}
8.branch .nj-collapser {
9 -webkit-transition: height 0.14s cubic-bezier(.44,.19,0,.99);
10}
11.branch .branchCollapser ul {
12 width: 100%;
13}
14.treeRoot .branch .branch-label {
15 border-bottom: 1px solid #505050;
16 cursor: pointer;
17 padding: 3px 0 4px;
18 background-repeat: no-repeat;
19 background-position: 3px 2px;
20 box-shadow: 0 0 0 0 rgba(0,0,0,0);
21 font-weight: bold;
22 box-shadow: 0 3px 4px -4px rgba(0,0,0,0.2);
23}
24
25/* First Level */
26.branch .branch .branch-label {
27 padding-left: 25px;
28}
29
30/* Second Level */
31.branch .branch .branch .branch-label {
32 padding-left: 45px;
33 background-position: 25px;
34} \ 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 @@
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <link href="ninja-branch.css" rel="stylesheet" type="text/css" />
6 <script type="text/montage-serialization">
7 {
8 "owner": {
9 "module" : "js/components/treeview/ninja-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 "collapser": {"#": "branchCollapser" }
20 }
21 },
22
23 "textComponent" : {
24 "module" : "montage/ui/dynamic-text.reel",
25 "name" : "DynamicText",
26 "properties" : {
27 "element" : { "#" : "label" }
28 },
29 "bindings" : {
30 "value" : {
31 "boundObject" : {"@": "owner"},
32 "boundObjectPropertyPath": "_labelText",
33 "oneway": true
34 }
35 }
36 },
37
38 "arrayController": {
39 "module": "montage/ui/controller/array-controller",
40 "name": "ArrayController",
41 "bindings": {
42 "content": {
43 "boundObject": {"@": "owner"},
44 "boundObjectPropertyPath": "childNodes"
45 }
46 }
47 },
48
49 "leaf": {
50 "module": "js/components/treeview/ninja-leaf.reel",
51 "name": "Leaf",
52 "bindings": {
53 "sourceObject": {
54 "boundObject": {"@": "repetition" },
55 "boundObjectPropertyPath": "objectAtCurrentIteration",
56 "oneway": true
57 },
58 "labelKey" : {
59 "boundObject": {"@": "owner" },
60 "boundObjectPropertyPath": "labelKey",
61 "oneway": true
62 },
63 "branchKey" : {
64 "boundObject": {"@": "owner" },
65 "boundObjectPropertyPath": "branchKey",
66 "oneway": true
67 },
68 "treeView" : {
69 "boundObject": {"@": "owner" },
70 "boundObjectPropertyPath": "treeView",
71 "oneway": true
72 }
73 }
74 },
75
76 "branch": {
77 "module": "js/components/treeview/ninja-branch.reel",
78 "name": "Branch",
79 "bindings": {
80 "sourceObject": {
81 "boundObject": {"@": "repetition" },
82 "boundObjectPropertyPath": "objectAtCurrentIteration",
83 "oneway": true
84 },
85 "labelKey" : {
86 "boundObject": {"@": "owner" },
87 "boundObjectPropertyPath": "labelKey",
88 "oneway": true
89 },
90 "branchKey" : {
91 "boundObject": {"@": "owner" },
92 "boundObjectPropertyPath": "branchKey",
93 "oneway": true
94 },
95 "treeView" : {
96 "boundObject": {"@": "owner" },
97 "boundObjectPropertyPath": "treeView",
98 "oneway": true
99 }
100 }
101 },
102
103 "repetition": {
104 "module": "montage/ui/repetition.reel",
105 "name": "Repetition",
106 "properties": {
107 "element": { "#": "branchList" },
108 "contentController": {"@": "arrayController" }
109 }
110 },
111
112 "substitution": {
113 "module": "montage/ui/substitution.reel",
114 "name": "Substitution",
115 "properties": {
116 "element": {"#": "treeItem"},
117 "switchComponents": {
118 "leaf": {"@": "leaf"},
119 "branch": {"@": "branch"}
120
121 }
122 },
123 "bindings": {
124 "switchValue": {
125 "boundObject": {"@": "repetition"},
126 "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
127 "oneway": true
128 }
129 }
130 }
131 }
132 </script>
133</head>
134<body>
135 <div id="branch" class="branch">
136 <div id="label" class="branch-label"></div>
137 <div id="branchCollapser" class="branchCollapser">
138 <ul id="branchList">
139 <li id="treeItem"></li>
140 </ul>
141 </div>
142
143 </div>
144</body>
145</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 @@
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.collapser.removeAttribute('id');
21 this.label._element.addEventListener('click', this, false);
22
23 if(this.hideLabel) {
24 this.label.element.style.display = "none";
25 }
26
27 this.treeView.contentController.addBranchController(this.arrayController);
28 }