diff options
Diffstat (limited to 'js/panels/properties.reel')
-rwxr-xr-x | js/panels/properties.reel/properties.css | 8 | ||||
-rwxr-xr-x | js/panels/properties.reel/properties.html | 10 | ||||
-rwxr-xr-x | js/panels/properties.reel/properties.js | 157 | ||||
-rwxr-xr-x | js/panels/properties.reel/sections/custom.reel/custom.js | 16 | ||||
-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 |
7 files changed, 76 insertions, 165 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 { | ||
280 | this.threeD.flatten = true; | ||
281 | } | ||
282 | 201 | ||