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.js328
1 files changed, 220 insertions, 108 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..7e5a76ee 100644..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
108 // Build the PI data and create a new object for Ninja PI
109 piID = component + "Pi";
110 piObj = [];
111 section = {};
112 section.label = component + " Properties";
113 section.Section = [];
114
115 for(var j = 0, props; props = componentData.properties[j]; j++) {
116 var row = {};
117 row.type = this.getControlType(props.type);
118 row.id = props.name;
119 row.prop = props.name;
120 row.defaultValue = props["default"];
121 row.label = props.name;
122
123 section.Section.push([row]);
124 }
125
126 PIData[piID] = [];
127 PIData[piID].push(section);
128
129 // Setup the component hash object to store references to each component data
130 this.componentsData[componentData.component] = componentData;
131
132 this.componentsLoaded++;
133
134 if(this.componentsLoaded === this.componentsToLoad) {
135 // console.log("all loaded");
136 // Here we need to stop some sort of loading animation
137 }
138
57 } 139 }
58 }, 140 },
59 141
60 addComponentToStage:{ 142 // PI conversion method. This will convert the property type into a Ninja component
61 value:function(componentType, dropX, dropY){ 143 getControlType: {
62 var compW = 100, 144 value: function(type) {
63 compH = 100, 145 switch(type) {
64 elementType = "div", 146 case "string":
65 componentContainer, 147 return "textbox";
66 componentElement; 148 case "boolean":
67 149 return "checkbox";
68 if(componentType == "Button"){ 150 default:
69 compW = 118; 151 alert("Conversion not implemented for ", type);
70 compH = 52;
71 }else if(componentType == "Checkbox"){
72 compW = 53;
73 compH = 53;
74// elementType = "input";
75 }else if(componentType == "DynamicText"){
76 compW = 100;
77 compH = 20;
78 }else if(componentType == "Flow