aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Components/ComponentsPanelBase.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel')
-rwxr-xr-xjs/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html39
-rwxr-xr-xjs/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js328
2 files changed, 255 insertions, 112 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..6d7c8a2c 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -15,8 +15,41 @@
15 "module": "js/panels/Components/ComponentsPanelBase.reel", 15 "module": "js/panels/Components/ComponentsPanelBase.reel",
16 "name": "ComponentsPanelBase", 16 "name": "ComponentsPanelBase",
17 "properties": { 17 "properties": {
18 "element": {"#": "components_panel"} 18 "element": {"#": "components_panel"},
19 "controller": {"@": "componentsTree"}
19 } 20 }
21 },
22
23 "componentsController" : {
24 "module": "js/components/controllers/tree-controller",
25 "name": "TreeController",
26 "properties" : {
27 "branchKey" : "children",
28 "labelKey" : "text",
29 "delegate": {"@": "owner" }
30 },
31 "bindings": {
32 "content": {
33 "boundObject": {"@": "owner"},
34 "boundObjectPropertyPath": "components"
35 }
36 }
37 },
38
39 "componentsTree" : {
40 "module" : "js/components/treeview/treeview.reel",
41 "name" : "Treeview",
42 "properties" : {
43 "element" : {"#": "componentsContainer"},
44 "branchComponent" : {"@": "branch" },
45 "contentController": {"@": "componentsController"},
46 "showRoot" : false
47 }
48 },
49
50 "branch" : {
51 "module" : "js/components/treeview/ninja-branch.reel",
52 "name" : "Branch"
20 } 53 }
21 } 54 }
22 </script> 55 </script>
@@ -25,9 +58,7 @@
25 <body> 58 <body>
26 59
27 <div id="components_panel" class="components_panel"> 60 <div id="components_panel" class="components_panel">
28 <div class="treeHolder"> 61 <div id="componentsContainer"></div>
29 <ul id="comp_tree"></ul>
30 </div>
31 </div> 62 </div>
32 63
33 </body> 64 </body>
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..7e5a76ee 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,142 +4,254 @@ 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
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component, 8 Component = require("montage/ui/component").Component,
9 NJUtils = require("js/lib/NJUtils").NJUtils; 9 NJUtils = require("js/lib/NJUtils").NJUtils;
10
11var treeControlModule = require("js/components/tree.reel");
12var PIData = require("js/data/pi/pi-data").PiData;
13
14String.prototype.capitalizeFirstChar = function() {
15 return this.charAt(0).toUpperCase() + this.slice(1);
16};
10 17
11var treeControlModule = require("js/components/tree.reel");
12 18
13var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { 19var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
14 _hasFocus: { 20
15 enumerable: false, 21 components: {
16 value: false 22 value: {
23 "text": "styles",
24 "children": [
25 {
26 "text": "Montage Components",
27 "children": [
28 {
29 "text": "Button",
30 "dataFile" : "node_modules/components-data/button.json",
31 "component": "button"
32 },
33 {
34 "text": "Textfield",
35 "dataFile" : "node_modules/components-data/textfield.json",
36 "component": "textfield"
37 }
38 ]
39 }
40 ]
41 }
42 },
43
44 componentsData: {
45 value: {}
46 },
47
48 componentsToLoad: {
49 value: null
50 },
51
52 componentsLoaded: {
53 value: 0
17 }, 54 },
18 prepareForDraw: {
19 enumerable: false,
20 value: function() {
21 var treeHolderDiv = document.getElementById("comp_tree");
22 var componentsTree = treeControlModule.Tree.create();
23 componentsTree.element = treeHolderDiv;
24 componentsTree.dataProvider = this._loadXMLDoc("js/panels/Components/Components.xml");
25 componentsTree.needsDraw = true;
26 55
27 this.eventManager.addEventListener( "executeAddComponent", this, false); 56 dragComponent: {
28 } 57 value: null
29 }, 58 },
30 willDraw: {
31 enumerable: false,
32 value: function() {
33 59
34 } 60 dragPosition: {
61 value: null
35 }, 62 },
36 draw: {
37 enumerable: false,
38 value: function() {
39 63
40 } 64 centerStage: {
65 value: null
41 }, 66 },
42 67
43 _loadXMLDoc: { 68
44 value:function(dname) { 69 /*********************************************************************
45 if (window.XMLHttpRequest) { 70 * Components Tree and Model Creation
46 xhttp = new XMLHttpRequest(); 71 *********************************************************************/
72
73 didCreate: {
74 value: function() {
75 // Setup the drop delegate
76 this.application.ninja.dragDropMediator.dropDelegate = this;
77 // Loop through the component and load the JSON data for them
78 this._loadComponents();
79 }
80 },
81
82 // Load all the data files for each component
83 // TODO: Implement the error case
84 _loadComponents: {
85 value: function() {
86
87 this.componentsToLoad = this.components.children[0].children.length;
88
89 for(var i = 0, component; component = this.components.children[0].children[i]; i++) {
90 var req = new XMLHttpRequest();
91 //req.identifier = "searchRequest";
92 req.open("GET", component.dataFile);
93 req.addEventListener("load", this, false);
94 req.addEventListener("error", this, false);
95 req.send();
47 } 96 }
48 xhttp.open("GET", dname, false);
49 xhttp.send();
50 return xhttp.responseXML;
51 } 97 }
52 }, 98 },
53 99
54 handleExecuteAddComponent: { 100 handleLoad: {
55 value: function(evt) { 101 value: function(evt) {
56 this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY) 102 var componentData, component, piID, piObj, section;
103
104 componentData = JSON.parse(evt.target.responseText);
105
106 component = componentData.name;
107