Use new tree control in Materials panel.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
author: Nivesh Rajbhandari 2012-03-19 17:06:20 -0700
committer: Nivesh Rajbhandari 2012-03-19 17:06:20 -0700
commit: e4159f8cea57077c755030a421c091b28c7a8ecc (patch)
tree: 4ec14f489dcb571b124c6d2b8a5ada8d03eb3da6 /js
parent: afe4b3d6567a35586e970682d71cba61c416e496 (diff)
download: ninja-e4159f8cea57077c755030a421c091b28c7a8ecc.tar.gz
4 files changed, 99 insertions, 27 deletions
diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
new file mode 100644
index 00000000..f06ab6c8
--- /dev/null
+++ b/js/panels/Materials/materials-data.json
@@ -0,0 +1,43 @@
+{
+    "label": "materials",
+    "children": [
+        {
+            "label": "Ninja Materials",
+            "children": [
+                {
+                    "label": "Uber",
+                    "id" : "UberMaterial"
+                },
+                {
+                    "label": "Bump Metal",
+                    "id" : "BumpMetalMaterial"
+                },
+                {
+                    "label": "Linear Gradient",
+                    "id" : "LinearGradientMaterial"
+                },
+                {
+                    "label": "Radial Gradient",
+                    "id" : "RadialGradientMaterial"
+                },
+                {
+                    "label": "Flat",
+                    "id" : "FlatMaterial"
+                }
+            ]
+        },
+        {
+            "label": "Custom Materials",
+            "children": [
+                {
+                    "label": "Checker Board",
+                    "id" : "CheckerBoard"
+                },
+                {
+                    "label": "Shiny Metal",
+                    "id" : "ShinyMetal"
+                }
+            ]
+        }
+    ]
+}
+\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index fe17d0f8..4e41512f 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -46,10 +46,39 @@
                    }
                ]
             },
-             "materialInfo": {
+            "materialInfo": {
-                 "module": "js/panels/Materials/materials-popup.reel",
+                "module": "js/panels/Materials/materials-popup.reel",
-                 "name": "MaterialsPopup"
+                "name": "MaterialsPopup"
-             },
+            },
+            "materialsController" : {
+                "module": "js/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "label",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "materialsData"
+                    }
+                }
+            },
+            "materialsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "materials_library_tree"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "materialsController"},
+                    "showRoot": false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
+            },
            "owner": {
                "module": "js/panels/Materials/materials-library-panel.reel",
                "name": "MaterialsLibraryPanels",
@@ -65,9 +94,9 @@
        <body>
        <div id="materials_library_panel" class="materials_library_panel">
-            <div id="ml_tree_holder">
+            <section id="ml_tree_holder" class="animationsLibrary">
-                <ul id="materials_library_tree"></ul>
+                <div id="materials_library_tree"></div>
-            </div>
+            </section>
            <hr />
            <div id="ml_buttons">
                <button id="ml_add_btn" class="nj-skinned">Add</button>
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index bb550598..5fd86d00 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -4,29 +4,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-var Tree = require("js/components/tree.reel").Tree,
+var Montage = require("montage/core/core").Montage,
-    MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
+    Component = require("montage/ui/component").Component,
-    PopupMananger =             require("js/components/popup-manager.reel").PopupMananger,
+    MaterialsData = require("js/panels/Materials/materials-data.json"),
    Popup = require("montage/ui/popup/popup.reel").Popup;
-exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+exports.MaterialsLibraryPanel = Montage.create(Component, {
+    materialsData: {
+        value: null
+    },
    _hasFocus: {
        enumerable: false,
        value: false
    },
-    
-    prepareForDraw: {
-        enumerable: false,
-        value: function() {
-            var treeHolderDiv = document.getElementById("materials_library_tree");
-            var materialsTree = Tree.create();
-            materialsTree.element = treeHolderDiv;
-            materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml");
-            materialsTree.needsDraw = true;
-            materialsTree.addEventListener("change", this, true);
+    didCreate: {
-        }
+        value: function() {
+            this.materialsData = MaterialsData;
+        }
    },
    willDraw: {
@@ -71,10 +68,9 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
        }
    },
-    captureChange: {
+    handleNodeActivation: {
-        value:function(e) {
+        value:function(obj) {
-            var tNode = e._event.treeNode;
+            this._showMaterialPopup(obj.id);
-            this._showMaterialPopup(tNode.id);
        }
    },
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 193e72b7..b44761bc 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -214,7 +214,11 @@ exports.MaterialsPopup = Montage.create(Component, {
                enumerable: true,
                value: function(materialID)
                {
-           this._materialName = materialID;
+            // Note that setting Array.length = 0 will empty arrays,
+            // which is fine if you use getMaterialData to get a new array, but not for the
+            // dummyData arrays.
+            this._materialsData.length = 0;
+            this._materialName = materialID;
            if(
                                        (materialID ===  "UberMaterial")                                ||
                                        (materialID ===  "FlatMaterial")                                ||
author	Nivesh Rajbhandari	2012-03-19 17:06:20 -0700
committer	Nivesh Rajbhandari	2012-03-19 17:06:20 -0700
commit	e4159f8cea57077c755030a421c091b28c7a8ecc (patch)
tree	4ec14f489dcb571b124c6d2b8a5ada8d03eb3da6 /js
parent	afe4b3d6567a35586e970682d71cba61c416e496 (diff)
download	ninja-e4159f8cea57077c755030a421c091b28c7a8ecc.tar.gz

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json new file mode 100644 index 00000000..f06ab6c8 --- /dev/null +++ b/js/panels/Materials/materials-data.json
@@ -0,0 +1,43 @@
		1	{
		2	"label": "materials",
		3	"children": [
		4	{
		5	"label": "Ninja Materials",
		6	"children": [
		7	{
		8	"label": "Uber",
		9	"id" : "UberMaterial"
		10	},
		11	{
		12	"label": "Bump Metal",
		13	"id" : "BumpMetalMaterial"
		14	},
		15	{
		16	"label": "Linear Gradient",
		17	"id" : "LinearGradientMaterial"
		18	},
		19	{
		20	"label": "Radial Gradient",
		21	"id" : "RadialGradientMaterial"
		22	},
		23	{
		24	"label": "Flat",
		25	"id" : "FlatMaterial"
		26	}
		27	]
		28	},
		29	{
		30	"label": "Custom Materials",
		31	"children": [
		32	{
		33	"label": "Checker Board",
		34	"id" : "CheckerBoard"
		35	},
		36	{
		37	"label": "Shiny Metal",
		38	"id" : "ShinyMetal"
		39	}
		40	]
		41	}
		42	]
		43	} \ No newline at end of file


diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html index fe17d0f8..4e41512f 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -46,10 +46,39 @@
46	}	46	}
47	]	47	]
48	},	48	},
49	"materialInfo": {	49	"materialInfo": {
50	"module": "js/panels/Materials/materials-popup.reel",	50	"module": "js/panels/Materials/materials-popup.reel",
51	"name": "MaterialsPopup"	51	"name": "MaterialsPopup"
52	},	52	},
		53	"materialsController" : {
		54	"module": "js/controllers/tree-controller",
		55	"name": "TreeController",
		56	"properties" : {
		57	"branchKey" : "children",
		58	"labelKey" : "label",
		59	"delegate": {"@": "owner" }
		60	},
		61	"bindings": {
		62	"content": {
		63	"boundObject": {"@": "owner"},
		64	"boundObjectPropertyPath": "materialsData"
		65	}
		66	}
		67	},
		68	"materialsContainer" : {
		69	"module" : "js/components/treeview/treeview.reel",
		70	"name" : "Treeview",
		71	"properties" : {
		72	"element" : {"#": "materials_library_tree"},
		73	"branchComponent" : {"@": "branch" },
		74	"contentController": {"@": "materialsController"},
		75	"showRoot": false
		76	}
		77	},
		78	"branch" : {
		79	"module" : "js/components/treeview/ninja-branch.reel",
		80	"name" : "Branch"
		81	},
53	"owner": {	82	"owner": {
54	"module": "js/panels/Materials/materials-library-panel.reel",	83	"module": "js/panels/Materials/materials-library-panel.reel",
55	"name": "MaterialsLibraryPanels",	84	"name": "MaterialsLibraryPanels",
@@ -65,9 +94,9 @@
65	<body>	94	<body>
66		95
67	<div id="materials_library_panel" class="materials_library_panel">	96	<div id="materials_library_panel" class="materials_library_panel">
68	<div id="ml_tree_holder">	97	<section id="ml_tree_holder" class="animationsLibrary">
69	<ul id="materials_library_tree"></ul>	98	<div id="materials_library_tree"></div>
70	</div>	99	</section>
71	<hr />	100	<hr />
72	<div id="ml_buttons">	101	<div id="ml_buttons">
73	<button id="ml_add_btn" class="nj-skinned">Add</button>	102	<button id="ml_add_btn" class="nj-skinned">Add</button>


diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js index bb550598..5fd86d00 100755 --- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -4,29 +4,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5	</copyright> */	5	</copyright> */
6		6
7	var Tree = require("js/components/tree.reel").Tree,	7	var Montage = require("montage/core/core").Montage,
8	MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,	8	Component = require("montage/ui/component").Component,
9	PopupMananger = require("js/components/popup-manager.reel").PopupMananger,	9	MaterialsData = require("js/panels/Materials/materials-data.json"),
10	Popup = require("montage/ui/popup/popup.reel").Popup;	10	Popup = require("montage/ui/popup/popup.reel").Popup;
11		11
12	exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {	12	exports.MaterialsLibraryPanel = Montage.create(Component, {
		13
		14	materialsData: {
		15	value: null
		16	},
13		17
14	_hasFocus: {	18	_hasFocus: {
15	enumerable: false,	19	enumerable: false,
16	value: false	20	value: false
17	},	21	},
18
19	prepareForDraw: {
20	enumerable: false,
21	value: function() {
22	var treeHolderDiv = document.getElementById("materials_library_tree");
23	var materialsTree = Tree.create();
24	materialsTree.element = treeHolderDiv;
25	materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml");
26	materialsTree.needsDraw = true;
27		22
28	materialsTree.addEventListener("change", this, true);	23	didCreate: {
29	}	24	value: function() {
		25	this.materialsData = MaterialsData;
		26	}
30	},	27	},
31		28
32	willDraw: {	29	willDraw: {
@@ -71,10 +68,9 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
71	}	68	}
72	},	69	},
73		70
74	captureChange: {	71	handleNodeActivation: {
75	value:function(e) {	72	value:function(obj) {
76	var tNode = e._event.treeNode;	73	this._showMaterialPopup(obj.id);
77	this._showMaterialPopup(tNode.id);
78	}	74	}
79	},	75	},
80		76


diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 193e72b7..b44761bc 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -214,7 +214,11 @@ exports.MaterialsPopup = Montage.create(Component, {
214	enumerable: true,	214	enumerable: true,
215	value: function(materialID)	215	value: function(materialID)
216	{	216	{
217	this._materialName = materialID;	217	// Note that setting Array.length = 0 will empty arrays,
		218	// which is fine if you use getMaterialData to get a new array, but not for the
		219	// dummyData arrays.
		220	this._materialsData.length = 0;
		221	this._materialName = materialID;
218	if(	222	if(
219	(materialID === "UberMaterial") \|\|	223	(materialID === "UberMaterial") \|\|
220	(materialID === "FlatMaterial") \|\|	224	(materialID === "FlatMaterial") \|\|