aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js')
-rwxr-xr-x[-rw-r--r--]js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js423
1 files changed, 315 insertions, 108 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..b4eec771 100644..100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,142 +4,349 @@ 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": "Anchor",
30 "dataFile" : "node_modules/components-data/anchor.json",
31 "component": "anchor"
32 },
33 {
34 "text": "Button",
35 "dataFile" : "node_modules/components-data/button.json",
36 "component": "button"
37 },
38 {
39 "text": "Checkbox",
40 "dataFile" : "node_modules/components-data/checkbox.json",
41 "component": "checkbox"
42 },
43 {
44 "text": "Image Component",
45 "dataFile" : "node_modules/components-data/image.json",
46 "component": "imageComponent"
47 },
48 {
49 "text": "NumberInput",
50 "dataFile" : "node_modules/components-data/number-input.json",
51 "component": "numberInput"
52 },
53 {
54 "text": "Select Input",
55 "dataFile" : "node_modules/components-data/select.json",
56 "component": "select"
57 },
58 {
59 "text": "Radio Button",
60 "dataFile" : "node_modules/components-data/radio-button.json",
61 "component": "radioButton"
62 },
63 {
64 "text": "Range Input",
65 "dataFile" : "node_modules/components-data/range-input.json",
66 "component": "rangeInput"
67 },
68 {
69 "text": "TextArea",
70 "dataFile" : "node_modules/components-data/textarea.json",
71 "component": "textarea"
72 },
73 {
74 "text": "Textfield",
75 "dataFile" : "node_modules/components-data/textfield.json",
76 "component": "textfield"
77 },
78 {
79 "text": "Toogle Button",
80 "dataFile" : "node_modules/components-data/toggle-button.json",
81 "component": "toggleButton"
82 }
83 ]
84 }
85 ]
86 }
87 },
88
89 componentsData: {
90 value: {}
91 },
92
93 componentsToLoad: {
94 value: null
95 },
96
97 componentsLoaded: {
98 value: 0
17 }, 99 },
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 100
27 this.eventManager.addEventListener( "executeAddComponent", this, false); 101 dragComponent: {
28 } 102 value: null
29 }, 103 },
30 willDraw: {
31 enumerable: false,
32 value: function() {
33 104
34 } 105 dragPosition: {
106 value: null
35 }, 107 },
36 draw: {
37 enumerable: false,
38 value: function() {
39 108
40 } 109 centerStage: {
110 value: null
111 },
112
113
114 /*********************************************************************
115 * Components Tree and Model Creation
116 *********************************************************************/
117
118 didCreate: {
119 value: function() {
120 // Setup the drop delegate
121 this.application.ninja.dragDropMediator.dropDelegate = this;
122 // Loop through the component and load the JSON data for them
123 this._loadComponents();
124 }
41 }, 125 },
42 126
43 _loadXMLDoc: { 127 // Load all the data files for each component
44 value:function(dname) { 128 // TODO: Implement the error case
45 if (window.XMLHttpRequest) { 129 _loadComponents: {
46 xhttp = new XMLHttpRequest(); 130 value: function() {
131
132 this.componentsToLoad = this.components.children[0].children.length;
133
134 for(var i = 0, component; component = this.components.children[0].children[i]; i++) {
135 var req = new XMLHttpRequest();
136 //req.identifier = "searchRequest";
137 req.open("GET", component.dataFile);
138 req.addEventListener("load", this, false);
139 req.addEventListener("error", this, false);
140 req.send();
47 } 141 }
48 xhttp.open("GET", dname, false);
49 xhttp.send();
50 return xhttp.responseXML;
51 } 142 }
52 }, 143 },
53 144
54 handleExecuteAddComponent: { 145 handleLoad: {
55 value: function(evt) { 146 value: function(evt) {
56 this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY) 147 var componentData, component, piID, piObj, section;
148
149 componentData = JSON.parse(evt.target.responseText);
150
151 component = componentData.name;
152
153 // Build the PI data and create a new object for Ninja PI
154 piID = component + "Pi";
155 piObj = [];
156 section = {};
157 section.label = component + " Properties";
158 section.Section = [];
159
160 for(var j = 0, props; props = componentData.properties[j]; j++) {
161 var row = {};
162 row.type = this.getControlType(props.type);
163 row.id = props.name;
164 row.prop = props.name;