diff options
Diffstat (limited to 'js/panels/properties.reel/properties.js')
-rwxr-xr-x | js/panels/properties.reel/properties.js | 157 |
1 files changed, 32 insertions, 125 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 8c2daa14..3ec48687 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -67,17 +67,12 @@ exports.Properties = Montage.create(Component, { | |||
67 | } | 67 | } |
68 | }, | 68 | }, |
69 | 69 | ||
70 | // Document is opened - Display the current selection | ||
71 | handleOpenDocument: { | 70 | handleOpenDocument: { |
72 | value: function() { | 71 | value: function() { |
73 | |||
74 | this.eventManager.addEventListener( "elementChange", this, false); | 72 | this.eventManager.addEventListener( "elementChange", this, false); |
75 | 73 | ||
76 | // For now always assume that the stage is selected by default when opening the old template | 74 | // Display the default document root PI |
77 | // TODO: Remove marker for old template: NINJA-STAGE-REWORK | 75 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); |
78 | if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") { | ||
79 | this.displayStageProperties(); | ||
80 | } | ||
81 | } | 76 | } |
82 | }, | 77 | }, |
83 | 78 | ||
@@ -174,8 +169,7 @@ exports.Properties = Montage.create(Component, { | |||
174 | handleSelectionChange: { | 169 | handleSelectionChange: { |
175 | value: function(event) { | 170 | value: function(event) { |
176 | if(event.detail.isDocument) { | 171 | if(event.detail.isDocument) { |
177 | if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; | 172 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); |
178 | this.displayStageProperties(); | ||
179 | } else { | 173 | } else { |
180 | if(this.application.ninja.selectedElements.length === 1) { | 174 | if(this.application.ninja.selectedElements.length === 1) { |
181 | this.displayElementProperties(this.application.ninja.selectedElements[0]); | 175 | this.displayElementProperties(this.application.ninja.selectedElements[0]); |
@@ -187,98 +181,23 @@ exports.Properties = Montage.create(Component, { | |||
187 | } | 181 | } |
188 | }, | 182 | }, |
189 | 183 | ||
190 | displayStageProperties: { | ||
191 | value: function() { | ||
192 | var stage = this.application.ninja.currentDocument.documentRoot; | ||
193 | //this is test code please remove | ||
194 | this.elementName.value = "Stage"; | ||
195 | this.elementId.value = stage.elementModel.id; | ||
196 | this.elementClass.value = ""; | ||
197 | |||
198 | this.positionSize.disablePosition = true; | ||
199 | this.threeD.disableTranslation = true; | ||
200 | |||
201 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height")); | ||
202 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width")); | ||
203 | |||
204 | if(this.threeD.inGlobalMode) | ||
205 | { | ||
206 | this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle"); | ||
207 | this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle"); | ||
208 | this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle"); | ||
209 | } | ||
210 | |||
211 | this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d"; | ||
212 | |||
213 | if(this.customPi !== stage.elementModel.pi) { | ||
214 | // We need to unregister color chips from the previous selection from the Color Model | ||
215 | var len = this.customSections.length; | ||
216 | for(var n = 0, controls; n < len; n++) { | ||
217 | controls = this.customSections[n].content.controls; | ||
218 | if(controls["colorSelect"]) { | ||
219 | controls["colorSelect"].destroy(); | ||
220 | } else if(controls["stageBackground"]) { | ||
221 | controls["stageBackground"].destroy(); | ||
222 | } | ||
223 | } | ||
224 | |||
225 | this.customPi = stage.elementModel.pi; | ||
226 | this.displayCustomProperties(stage, stage.elementModel.pi); | ||
227 | } | ||
228 | |||
229 | // For now hardcode the background since it is the only custom property | ||
230 | // No need to loop through all the properties. | ||
231 | var backgroundChip = this.customSections[0].content.controls["background"]; | ||
232 | backgroundChip.color = ElementsMediator.getProperty(stage, "background"); | ||
233 | |||
234 | /* | ||
235 | var customPI = PiData[this.customPi]; | ||
236 | // Get all the custom section for the custom PI | ||
237 | for(var i = 0, customSec; customSec = customPI[i]; i++) { | ||
238 | |||
239 | // Now set the Fields for the custom PI | ||
240 | for(var j = 0, fields; fields = customSec.Section[j]; j++) { | ||
241 | for(var k = 0, control; control = fields[k]; k++) { | ||
242 | |||
243 | var colorChipEl = this.customSections[i].content.controls[control.id]; | ||
244 | this.foo = colorChipEl; | ||
245 | colorChipEl.addEventListener("firstDraw", this, false); | ||
246 | |||
247 | } | ||
248 | } | ||
249 | } | ||
250 | */ | ||
251 | } | ||
252 | }, | ||
253 | |||
254 | handleFirstDraw: { | ||
255 | value: function() { | ||
256 | this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'}); | ||
257 | } | ||
258 | }, | ||
259 | |||
260 | displayElementProperties: { | 184 | displayElementProperties: { |
261 | value: function (el) { | 185 | value: function (el) { |
262 | var customPI, | 186 | var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument; |
263 | currentValue; | ||
264 | 187 | ||
265 | this.elementName.value = el.elementModel.selection; | 188 | this.elementName.value = el.elementModel.selection; |
266 | this.elementId.value = el.getAttribute("id") || ""; | 189 | this.elementId.value = el.getAttribute("id") || ""; |
267 | this.elementClass.value = el.getAttribute("class"); | 190 | this.elementClass.value = el.getAttribute("class"); |
268 | 191 | ||
269 | this.positionSize.disablePosition = false; | 192 | this.positionSize.disablePosition = isRoot; |
270 | this.threeD.disableTranslation = false; | 193 | this.threeD.disableTranslation = isRoot; |
194 | this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d"; | ||
271 | 195 | ||
272 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); | 196 | this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); |
273 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); | 197 | this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); |
274 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); | 198 | this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); |
275 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); | 199 | this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); |
276 | 200 | // this.positionSize.widthSize = ElementsMediator.getProperty(el, "width"); | |
277 | if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") { | ||
278 | this.threeD.flatten = false; | ||
279 | } else { | ||
280 | this.threeD.flatten = true; | ||
281 | } | ||
282 | 201 | ||
283 | if(this.threeD.inGlobalMode) | 202 | if(this.threeD.inGlobalMode) |
284 | { | 203 | { |
@@ -306,6 +225,12 @@ exports.Properties = Montage.create(Component, { | |||
306 | this.customPi = el.elementModel.pi; | 225 | this.customPi = el.elementModel.pi; |
307 | this.displayCustomProperties(el, el.elementModel.pi); | 226 | this.displayCustomProperties(el, el.elementModel.pi); |
308 | } | 227 | } |
228 | |||
229 | if(isRoot) { | ||
230 | var backgroundChip = this.customSections[0].content.controls["background"]; | ||
231 | backgroundChip.color = ElementsMediator.getProperty(el, "background"); | ||
232 | } | ||
233 | |||
309 | var previousInput = this.application.ninja.colorController.colorModel.input; | 234 | var previousInput = this.application.ninja.colorController.colorModel.input; |
310 | customPI = PiData[this.customPi]; | 235 | customPI = PiData[this.customPi]; |
311 | // Get all the custom section for the custom PI | 236 | // Get all the custom section for the custom PI |
@@ -317,64 +242,47 @@ exports.Properties = Montage.create(Component, { | |||
317 | 242 | ||
318 | if(control.type !== "color") { | 243 | if(control.type !== "color") { |
319 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); | 244 | currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator); |
320 | if(currentValue === null) | 245 | if(currentValue === null) { |
321 | { | ||
322 | currentValue = control.defaultValue; | 246 | currentValue = control.defaultValue; |
323 | } | 247 | } |
324 | this.customSections[i].content.controls[control.id] = currentValue; | 248 | this.customSections[i].content.controls[control.id] = currentValue; |
325 | } | 249 | } else { |
326 | else | 250 | if(control.prop === "border") { |
327 | { | ||
328 | if(control.prop === "border") | ||
329 | { | ||
330 | // TODO - For now, always return the top border if multiple border sides | 251 | // TODO - For now, always return the top border if multiple border sides |
331 | currentValue = ElementsMediator.getColor(el, false, "top"); | 252 | currentValue = ElementsMediator.getColor(el, false, "top"); |
332 | this.application.ninja.colorController.colorModel.input = "stroke"; | 253 | this.application.ninja.colorController.colorModel.input = "stroke"; |
333 | } | 254 | } else if(control.prop === "background") { |
334 | else if(control.prop === "background") | ||
335 | { | ||
336 | currentValue = ElementsMediator.getColor(el, true); | 255 | currentValue = ElementsMediator.getColor(el, true); |
337 | this.application.ninja.colorController.colorModel.input = "fill"; | 256 | this.application.ninja.colorController.colorModel.input = "fill"; |
338 | } | 257 | } |
339 | 258 | ||
340 | if(currentValue) | 259 | if(currentValue) { |
341 | { | 260 | if(currentValue.color) { |
342 | if(currentValue.color) | ||
343 | { | ||
344 | currentValue.color.wasSetByCode = true; | 261 | currentValue.color.wasSetByCode = true; |
345 | currentValue.color.type = "change"; | 262 | currentValue.color.type = "change"; |
346 | } | 263 | } |
347 | 264 | ||
348 | if(currentValue.mode === "gradient") | 265 | if(currentValue.mode === "gradient") { |
349 | { | 266 | this.application.ninja.colorController.colorModel["gradient"] = {value: currentValue.color, wasSetByCode: true, type: 'change'}; |
350 | this.application.ninja.colorController.colorModel["gradient"] = | 267 | } else { |
351 | {value: currentValue.color, wasSetByCode: true, type: 'change'}; |