diff options
Diffstat (limited to 'js/panels/properties.reel')
-rwxr-xr-x | js/panels/properties.reel/properties.html | 10 | ||||
-rwxr-xr-x | js/panels/properties.reel/properties.js | 153 | ||||
-rwxr-xr-x | js/panels/properties.reel/sections/position-size.reel/position-size.css (renamed from js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css) | 0 | ||||
-rwxr-xr-x | js/panels/properties.reel/sections/position-size.reel/position-size.html (renamed from js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html) | 36 | ||||
-rwxr-xr-x | js/panels/properties.reel/sections/position-size.reel/position-size.js (renamed from js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js) | 14 |
5 files changed, 62 insertions, 151 deletions
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html index 3a1ae880..ac0dab5a 100755 --- a/js/panels/properties.reel/properties.html +++ b/js/panels/properties.reel/properties.html | |||
@@ -38,13 +38,15 @@ | |||
38 | "prototype": "js/panels/properties.reel/section.reel", | 38 | "prototype": "js/panels/properties.reel/section.reel", |
39 | "properties": { | 39 | "properties": { |
40 | "element": {"#": "PosSize"}, | 40 | "element": {"#": "PosSize"}, |
41 | "content" : {"@": "PosSize"}, | 41 | "content" : {"@": "positionSize"}, |
42 | "name" : "Position And Size" | 42 | "name" : "Position And Size" |
43 | } | 43 | } |
44 | }, | 44 | }, |
45 | "PosSize": { | 45 | |
46 | "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]" | 46 | "positionSize": { |
47 | "prototype": "js/panels/properties.reel/sections/position-size.reel" | ||
47 | }, | 48 | }, |
49 | |||
48 | "threeDSection": { | 50 | "threeDSection": { |
49 | "prototype": "js/panels/properties.reel/section.reel", | 51 | "prototype": "js/panels/properties.reel/section.reel", |
50 | "properties": { | 52 | "properties": { |
@@ -97,7 +99,7 @@ | |||
97 | "elementName": {"@": "elementName"}, | 99 | "elementName": {"@": "elementName"}, |
98 | "elementClass": {"@": "elementClass"}, | 100 | "elementClass": {"@": "elementClass"}, |
99 | "elementId": {"@": "elementId"}, | 101 | "elementId": {"@": "elementId"}, |
100 | "positionSize": {"@": "PosSize"}, | 102 | "positionSize": {"@": "positionSize"}, |
101 | "threeD": {"@": "threeDProperties"} | 103 | "threeD": {"@": "threeDProperties"} |
102 | } | 104 | } |
103 | } | 105 | } |
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 20f670d9..3ec48687 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -67,15 +67,11 @@ 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 | ||
78 | |||
79 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); | 75 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); |
80 | } | 76 | } |
81 | }, | 77 | }, |
@@ -173,8 +169,6 @@ exports.Properties = Montage.create(Component, { | |||
173 | handleSelectionChange: { | 169 | handleSelectionChange: { |
174 | value: function(event) { | 170 | value: function(event) { |
175 | if(event.detail.isDocument) { | 171 | if(event.detail.isDocument) { |
176 | // if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; | ||
177 | // this.displayStageProperties(); | ||
178 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); | 172 | this.displayElementProperties(this.application.ninja.currentDocument.documentRoot); |
179 | } else { | 173 | } else { |
180 | if(this.application.ninja.selectedElements.length === 1) { | 174 | if(this.application.ninja.selectedElements.length === 1) { |
@@ -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 |