diff options
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js')
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 148 |
1 files changed, 48 insertions, 100 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 4828839b..33241d42 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -31,7 +31,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
31 | "component": "button" | 31 | "component": "button" |
32 | }, | 32 | }, |
33 | { | 33 | { |
34 | "text": "Text Field", | 34 | "text": "Textfield", |
35 | "dataFile" : "node_modules/components-data/textfield.json", | 35 | "dataFile" : "node_modules/components-data/textfield.json", |
36 | "component": "textfield" | 36 | "component": "textfield" |
37 | } | 37 | } |
@@ -53,20 +53,24 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
53 | value: 0 | 53 | value: 0 |
54 | }, | 54 | }, |
55 | 55 | ||
56 | centerStage: { | ||
57 | value: null | ||
58 | }, | ||
59 | |||
56 | didCreate: { | 60 | didCreate: { |
57 | value: function() { | 61 | value: function() { |
58 | // Loop through the component and load the JSON data for them | 62 | // Loop through the component and load the JSON data for them |
59 | this._loadComponents(); | 63 | this._loadComponents(); |
60 | |||
61 | } | 64 | } |
62 | }, | 65 | }, |
63 | 66 | ||
67 | // Load all the data files for each component | ||
68 | // TODO: Implement the error case | ||
64 | _loadComponents: { | 69 | _loadComponents: { |
65 | value: function() { | 70 | value: function() { |
66 | 71 | ||
67 | this.componentsToLoad = this.components.children[0].children.length; | 72 | this.componentsToLoad = this.components.children[0].children.length; |
68 | 73 | ||
69 | // Build the PI objects for each component | ||
70 | for(var i = 0, component; component = this.components.children[0].children[i]; i++) { | 74 | for(var i = 0, component; component = this.components.children[0].children[i]; i++) { |
71 | var req = new XMLHttpRequest(); | 75 | var req = new XMLHttpRequest(); |
72 | //req.identifier = "searchRequest"; | 76 | //req.identifier = "searchRequest"; |
@@ -74,25 +78,22 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
74 | req.addEventListener("load", this, false); | 78 | req.addEventListener("load", this, false); |
75 | req.addEventListener("error", this, false); | 79 | req.addEventListener("error", this, false); |
76 | req.send(); | 80 | req.send(); |
77 | |||
78 | } | 81 | } |
79 | |||
80 | |||
81 | } | 82 | } |
82 | }, | 83 | }, |
83 | 84 | ||
84 | handleLoad: { | 85 | handleLoad: { |
85 | value: function(evt) { | 86 | value: function(evt) { |
86 | var componentData = JSON.parse(evt.target.responseText); | 87 | var componentData, component, piID, piObj, section; |
87 | |||
88 | //var component = response.component.capitalizeFirstChar(); | ||
89 | var component = componentData.name; | ||
90 | 88 | ||
91 | var piIdentifier = component + "Pi"; | 89 | componentData = JSON.parse(evt.target.responseText); |
92 | var piObj = []; | ||
93 | var section = {}; | ||
94 | 90 | ||
91 | component = componentData.name; | ||
95 | 92 | ||
93 | // Build the PI data and create a new object for Ninja PI | ||
94 | piID = component + "Pi"; | ||
95 | piObj = []; | ||
96 | section = {}; | ||
96 | section.label = component + " Properties"; | 97 | section.label = component + " Properties"; |
97 | section.Section = []; | 98 | section.Section = []; |
98 | 99 | ||
@@ -107,21 +108,23 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
107 | section.Section.push([row]); | 108 | section.Section.push([row]); |
108 | } | 109 | } |
109 | 110 | ||
110 | PIData[piIdentifier] = []; | 111 | PIData[piID] = []; |
111 | PIData[piIdentifier].push(section); | 112 | PIData[piID].push(section); |
112 | 113 | ||
113 | // Setup the componentsData | 114 | // Setup the component hash object to store references to each component data |
114 | this.componentsData[componentData.component] = componentData; | 115 | this.componentsData[componentData.component] = componentData; |
115 | 116 | ||
116 | this.componentsLoaded++; | 117 | this.componentsLoaded++; |
117 | 118 | ||
118 | if(this.componentsLoaded === this.componentsToLoad) { | 119 | if(this.componentsLoaded === this.componentsToLoad) { |
119 | console.log("all loaded"); | 120 | // console.log("all loaded"); |
121 | // Here we need to stop some sort of loading animation | ||
120 | } | 122 | } |
121 | 123 | ||
122 | } | 124 | } |
123 | }, | 125 | }, |
124 | 126 | ||
127 | // PI conversion method. This will convert the property type into a Ninja component | ||
125 | getControlType: { | 128 | getControlType: { |
126 | value: function(type) { | 129 | value: function(type) { |
127 | switch(type) { | 130 | switch(type) { |
@@ -137,27 +140,15 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
137 | 140 | ||
138 | applySelection: { | 141 | applySelection: { |
139 | value: function(selection) { | 142 | value: function(selection) { |
140 | console.log(selection); | 143 | //console.log(selection); |
141 | console.log(this.componentsData[selection.component]); | 144 | //console.log(this.componentsData[selection.component]); |
142 | this._stash.dropx = 200; | 145 | this.addComponentToStage(this.componentsData[selection.component]); |
143 | this._stash.dropy = 200; | ||
144 | this.addComponentToStage(this.componentsData[selection.component]);// evt.detail.dropX, evt.detail.dropY); | ||
145 | |||
146 | } | 146 | } |
147 | }, | 147 | }, |
148 | 148 | ||
149 | _stash: { | 149 | // This method will be used once we handle drag and drop |
150 | value: {} | ||
151 | }, | ||
152 | |||
153 | handleExecuteAddComponent: { | 150 | handleExecuteAddComponent: { |
154 | value: function(evt) { | 151 | value: function(evt) { |
155 | //var component = evt.detail.component; | ||
156 | // Get the data from the event detail component | ||
157 | var component = this._testButtonJson; | ||
158 | this._stash.dropx = evt.detail.dropX; | ||
159 | this._stash.dropy = evt.detail.dropY; | ||
160 | this.addComponentToStage(component);// evt.detail.dropX, evt.detail.dropY); | ||
161 | } | 152 | } |
162 | }, | 153 | }, |
163 | 154 | ||
@@ -168,17 +159,19 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
168 | value: function(component) { | 159 | value: function(component) { |
169 | var that = this; | 160 | var that = this; |
170 | var element = this.makeComponent(component.component); | 161 | var element = this.makeComponent(component.component); |
162 | |||
171 | this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) { | 163 | this.application.ninja.currentDocument._window.addComponent(element, {type: component.name, path: component.module, name: "Button"}, function(instance, element) { |
172 | 164 | ||
165 | var pos = that.getStageCenter(); | ||
166 | |||
173 | var styles = { | 167 | var styles = { |
174 | 'position': 'absolute', | 168 | 'position': 'absolute', |
175 | 'top' : that._stash.dropy + 'px', | 169 | 'left' : pos[0] + 'px', |
176 | 'left' : that._stash.dropx + 'px', | 170 | 'top' : pos[1] + 'px', |
177 | '-webkit-transform-style' : 'preserve-3d', | 171 | '-webkit-transform-style' : 'preserve-3d', |
178 | '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' | 172 | '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' |
179 | }; | 173 | }; |
180 | 174 | ||
181 | |||
182 | that.application.ninja.currentDocument.setComponentInstance(instance, element); | 175 | that.application.ninja.currentDocument.setComponentInstance(instance, element); |
183 | 176 | ||
184 | NJevent("elementAdding", {"el": element, "data":styles}); | 177 | NJevent("elementAdding", {"el": element, "data":styles}); |
@@ -186,25 +179,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
186 | } | 179 | } |
187 | }, | 180 | }, |
188 | 181 | ||
189 | callback: { | ||
190 | value: function(instance, element) { | ||
191 | console.log(instance); | ||
192 |