diff options
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js')
-rwxr-xr-x | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 328 |
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 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 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var 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 | |||
11 | var treeControlModule = require("js/components/tree.reel"); | ||
12 | var PIData = require("js/data/pi/pi-data").PiData; | ||
13 | |||
14 | String.prototype.capitalizeFirstChar = function() { | ||
15 | return this.charAt(0).toUpperCase() + this.slice(1); | ||
16 | }; | ||
10 | 17 | ||
11 | var treeControlModule = require("js/components/tree.reel"); | ||
12 | 18 | ||
13 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { | 19 | var 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 | <