Tree Components - Adding the tree components

author: Eric Guzman 2012-02-06 11:43:01 -0800
committer: Eric Guzman 2012-02-06 11:43:01 -0800
commit: 984d65c818969ea3bef57ade9cbf5fc50d9a2316 (patch)
tree: 2f559127a052c98aa3a7c822f0f91d813b429240
parent: 5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 (diff)
download: ninja-984d65c818969ea3bef57ade9cbf5fc50d9a2316.tar.gz
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 @@
+.treeRoot > .branch > ul {
+    margin-top: 0;
+}
+.branch > .branch-label {
+    font-weight: bold;
+    cursor: pointer;
+}
+.branch ul {
+    list-style: none;
+}
+.branch ul {
+    padding-left: 30px;
+}
+.branch .collapse {
+    display: none;
+}
+\ 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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link href="branch.css" rel="stylesheet" type="text/css" />
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/components/treeview/branch.reel",
+            "name" : "Branch",
+            "properties" : {
+                "element" : {"#" : "branch"},
+                "label" : { "@" : "textComponent" },
+                "branchList": {"#" : "branchList"},
+                "arrayController": {"@": "arrayController" },
+                "repetition": {"@": "repetition"},
+                "leafComponent": {"@": "leaf"},
+                "branchComponent": {"@": "branch"}
+            }
+        },
+        "textComponent" : {
+            "module" : "montage/ui/dynamic-text.reel",
+            "name" : "DynamicText",
+            "properties" : {
+                "element" : { "#" : "label" }
+            },
+            "bindings" : {
+                "value" : {
+                    "boundObject" : {"@": "owner"},
+                    "boundObjectPropertyPath": "_labelText",
+                    "oneway": true
+                }
+            }
+        },
+        "arrayController": {
+            "module": "montage/ui/controller/array-controller",
+            "name": "ArrayController",
+            "bindings": {
+                "content": {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "childNodes"
+                }
+            }
+        },
+        "leaf": {
+            "module": "js/components/treeview/leaf.reel",
+            "name": "Leaf",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+        "branch": {
+            "module": "js/components/treeview/branch.reel",
+            "name": "Branch",
+            "bindings": {
+                "sourceObject": {
+                    "boundObject": {"@": "repetition" },
+                    "boundObjectPropertyPath": "objectAtCurrentIteration",
+                    "oneway": true
+                },
+                "labelKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "labelKey",
+                    "oneway": true
+                },
+                "branchKey" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "branchKey",
+                    "oneway": true
+                },
+                "treeView" : {
+                    "boundObject": {"@": "owner" },
+                    "boundObjectPropertyPath": "treeView",
+                    "oneway": true
+                }
+            }
+        },
+        "repetition": {
+            "module": "montage/ui/repetition.reel",
+            "name": "Repetition",
+            "properties": {
+                "element": { "#": "branchList" },
+                "contentController": {"@": "arrayController" }
+            }
+        },
+        "substitution": {
+            "module": "montage/ui/substitution.reel",
+            "name": "Substitution",
+            "properties": {
+                "element": {"#": "treeItem"},
+                "switchComponents": {
+                    "leaf": {"@": "leaf"},
+                    "branch": {"@": "branch"}
+                }
+            },
+            "bindings": {
+                "switchValue": {
+                    "boundObject": {"@": "repetition"},
+                    "boundObjectPropertyPath": "objectAtCurrentIteration.treeNodeType",
+                    "oneway": true
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="branch" class="branch">
+        <span id="label" class="branch-label"></span>
+        <ul id="branchList">
+            <li id="treeItem"></li>
+        </ul>
+    </div>
+</body>
+</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 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage").Montage,
+    Component = require("montage/ui/component").Component,
+    TreeNode = require("js/components/treeview/tree-node").TreeNode;
+var Branch = exports.Branch = Montage.create(TreeNode, {
+    hasTemplate:{
+        value:true
+    },
+    repetition:{
+        value: null
+    },
+    prepareForDraw : {
+        value: function() {
+            this.label._element.addEventListener('click', this, false);
+            this.treeView.contentController.addBranchController(this.arrayController);
+        }
+    },
+    draw:{
+        value: function () {
+            if (this.sourceObject[this.labelKey]) {
+                this._labelText = this.sourceObject[this.labelKey];
+            } else {
+                console.log("Label key unknown");
+            }
+        }
+    },
+    handleClick : {
+        value: function(e) {
+            e.preventDefault();
+            this.toggleExpand();
author	Eric Guzman	2012-02-06 11:43:01 -0800
committer	Eric Guzman	2012-02-06 11:43:01 -0800
commit	984d65c818969ea3bef57ade9cbf5fc50d9a2316 (patch)
tree	2f559127a052c98aa3a7c822f0f91d813b429240
parent	5c5f4eabdc4befe3fb6da44bc8ad5fef20642f21 (diff)
download	ninja-984d65c818969ea3bef57ade9cbf5fc50d9a2316.tar.gz

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
	7	var Montage = require("montage").Montage,
	8	Component = require("montage/ui/component").Component,
	9	TreeNode = require("js/components/treeview/tree-node").TreeNode;
	10
	11	var 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();