aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel')
-rwxr-xr-xjs/panels/properties.reel/properties.js153
-rwxr-xr-xjs/panels/properties.reel/sections/position-and-size.reel/position-and-size.html30
-rwxr-xr-xjs/panels/properties.reel/sections/position-and-size.reel/position-and-size.js12
3 files changed, 51 insertions, 144 deletions
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 } 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'}; 268