aboutsummaryrefslogtreecommitdiff
path: root/js/panels/components-panel.reel/components-panel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/components-panel.reel/components-panel.js')
-rwxr-xr-xjs/panels/components-panel.reel/components-panel.js423
1 files changed, 423 insertions, 0 deletions
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
new file mode 100755
index 00000000..acbf702f
--- /dev/null
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -0,0 +1,423 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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/core/core").Montage,
8 Component = require("montage/ui/component").Component,
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};
17
18
19exports.ComponentsPanel = Montage.create(Component, {
20
21 components: {
22 value: {
23 "text": "styles",
24 "children": [
25 {
26 "text": "Widgets",
27 "children": [
28 {
29 "text": "Feed Reader",
30 "dataFile" : "node_modules/components-data/feed-reader.json",
31 "component": "feedreader"
32 },
33 {
34 "text": "Map",
35 "dataFile" : "node_modules/components-data/map.json",
36 "component": "map"
37 },
38 {
39 "text": "Picasa Carousel",
40 "dataFile" : "node_modules/components-data/picasa-carousel.json",
41 "component": "picasa-carousel"
42 },
43 {
44 "text": "Search Bar",
45 "dataFile" : "node_modules/components-data/searchfield.json",
46 "component": "searchfield"
47 },
48 {
49 "text": "Youtube Channel",
50 "dataFile" : "node_modules/components-data/youtube-channel.json",
51 "component": "youtube-channel"
52 }
53 ]
54 },
55 {
56 "text": "Montage Components",
57 "children": [
58 {
59 "text": "Anchor",
60 "dataFile" : "node_modules/components-data/anchor.json",
61 "component": "anchor"
62 },
63 {
64 "text": "Button",
65 "dataFile" : "node_modules/components-data/button.json",
66 "component": "button"
67 },
68 {
69 "text": "Checkbox",
70 "dataFile" : "node_modules/components-data/checkbox.json",
71 "component": "checkbox"
72 },
73 {
74 "text": "Image Component",
75 "dataFile" : "node_modules/components-data/image.json",
76 "component": "imageComponent"
77 },
78 {
79 "text": "NumberInput",
80 "dataFile" : "node_modules/components-data/number-input.json",
81 "component": "numberInput"
82 },
83 {
84 "text": "Radio Button",
85 "dataFile" : "node_modules/components-data/radio-button.json",
86 "component": "radioButton"
87 },
88 {
89 "text": "Range Input",
90 "dataFile" : "node_modules/components-data/range-input.json",
91 "component": "rangeInput"
92 },
93 {
94 "text": "Select Input",
95 "dataFile" : "node_modules/components-data/select.json",
96 "component": "select"
97 },
98 {
99 "text": "TextArea",
100 "dataFile" : "node_modules/components-data/textarea.json",
101 "component": "textarea"
102 },
103 {
104 "text": "Textfield",
105 "dataFile" : "node_modules/components-data/textfield.json",
106 "component": "textfield"
107 },
108 {
109 "text": "Toggle Button",
110 "dataFile" : "node_modules/components-data/toggle-button.json",
111 "component": "toggleButton"
112 }
113 ]
114 }
115 ]
116 }
117 },
118
119 componentsData: {
120 value: {}
121 },
122
123 componentsToLoad: {
124 value: null
125 },
126
127 componentsLoaded: {
128 value: 0
129 },
130
131 dragComponent: {
132 value: null
133 },
134
135 dragPosition: {
136 value: null
137 },
138
139 centerStage: {
140 value: null
141 },
142
143
144 /*********************************************************************
145 * Components Tree and Model Creation
146 *********************************************************************/
147
148 didCreate: {
149 value: function() {
150 // Setup the drop delegate
151 this.application.ninja.dragDropMediator.dropDelegate = this;
152 // Loop through the component and load the JSON data for them
153 this._loadComponents();
154 }
155 },
156
157 // Load all the data files for each component
158 // TODO: Implement the error case
159 _loadComponents: {
160 value: function() {
161
162 for(var cat in this.components.children) {
163
164 this.componentsToLoad += this.components.children[cat].children.length;
165
166 for(var i = 0, component; component = this.components.children[cat].children[i]; i++) {
167 var req = new XMLHttpRequest();
168 //req.identifier = "searchRequest";
169 req.open("GET", component.dataFile);
170 req.addEventListener("load", this, false);
171 req.addEventListener("error", this, false);
172 req.send();
173 }
174
175 }
176 }
177 },
178
179 handleLoad: {
180 value: function(evt) {
181 var componentData, component, piID, piObj, section;
182
183 componentData = JSON.parse(evt.target.responseText);
184
185 component = componentData.name;
186
187 // Build the PI data and create a new object for Ninja PI
188 piID = component + "Pi";
189 piObj = [];
190 section = {};
191 section.label = component + " Properties";
192 section.Section = [];
193
194 for(var j = 0, props; props = componentData.properties[j]; j++) {
195 var row = {};
196 row.type = this.getControlType(props.type);
197 row.id = props.name;
198 row.prop = props.name;
199 row.defaultValue = props["default"];
200 row.label = props.name;
201 row.items = props.possibleValues;
202
203 section.Section.push([row]);
204 }
205
206 PIData[piID] = [];
207 PIData[piID].push(section);
208
209 // Setup the component hash object to store references to each component data
210 this.componentsData[componentData.component] = componentData;
211
212 this.componentsLoaded++;
213
214 if(this.componentsLoaded === this.componentsToLoad) {
215 // console.log("all loaded");
216 // Here we need to stop some sort of loading animation
217 }
218
219 }