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.css8
-rwxr-xr-xjs/panels/properties.reel/properties.html10
-rwxr-xr-xjs/panels/properties.reel/properties.js157
-rwxr-xr-xjs/panels/properties.reel/sections/custom.reel/custom.js8
-rwxr-xr-xjs/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-xjs/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-xjs/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
7 files changed, 72 insertions, 161 deletions
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index eee44561..5306eb5b 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -271,17 +271,17 @@ padding-right:6px;
271 content: "•"; 271 content: "•";
272} 272}
273 273
274.propertiesPanel input.nj-skinned label { 274.propertiesPanel .checkbox-label {
275 position: absolute; 275 position: absolute;
276 top: 0; 276 top: 4px;
277 left: 15px; 277 padding-left: 5px;
278 /*left: 15px;*/
278 font-size: 10px; 279 font-size: 10px;
279 width:55px; 280 width:55px;
280 text-align: left; 281 text-align: left;
281 font-weight: normal; 282 font-weight: normal;
282 color:#FFF; 283 color:#FFF;
283} 284}
284
285.propertiesPanel input[type='radio'].nj-skinned { 285.propertiesPanel input[type='radio'].nj-skinned {
286 text-indent: 0px; 286 text-indent: 0px;
287 line-height: 5px; 287 line-height: 5px;
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 8c2daa14..fa62c850 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 {