diff options
Diffstat (limited to 'js/panels/properties.reel/properties.js')
-rwxr-xr-x | js/panels/properties.reel/properties.js | 204 |
1 files changed, 61 insertions, 143 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 8c2daa14..84b0d589 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js | |||
@@ -46,17 +46,15 @@ exports.Properties = Montage.create(Component, { | |||
46 | 46 | ||
47 | prepareForDraw: { | 47 | prepareForDraw: { |
48 | value : function() { | 48 | value : function() { |
49 | 49 | this.eventManager.addEventListener("openDocument", this, false); | |
50 | this.eventManager.addEventListener("selectionChange", this, false); | 50 | this.eventManager.addEventListener("selectionChange", this, false); |
51 | this.eventManager.addEventListener("closeDocument", this, false); | ||
51 | 52 | ||
52 | // This will be a toggle option | 53 | // This will be a toggle option |
53 | if(this.application.ninja.appData.PILiveUpdate) { | 54 | if(this.application.ninja.appData.PILiveUpdate) { |
54 | this.eventManager.addEventListener( "elementChanging", this, false); | 55 | this.eventManager.addEventListener( "elementChanging", this, false); |
55 | } | 56 | } |
56 | 57 | ||
57 | this.eventManager.addEventListener("openDocument", this, false); | ||
58 | this.eventManager.addEventListener("switchDocument", this, false); | ||
59 | |||
60 | this.elementId.element.addEventListener("blur", this, false); | 58 | this.elementId.element.addEventListener("blur", this, false); |
61 | this.elementId.element.addEventListener("focus", this, false); | 59 | this.elementId.element.addEventListener("focus", this, false); |
62 | this.elementId.element.addEventListener("keyup", this, false); | 60 | this.elementId.element.addEventListener("keyup", this, false); |
@@ -67,32 +65,21 @@ exports.Properties = Montage.create(Component, { | |||
67 | } | 65 | } |
68 | }, | 66 | }, |
69 | 67 | ||
70 | // Document is opened - Display the current selection | ||
71 | handleOpenDocument: { | 68 | handleOpenDocument: { |
72 | value: function() { | 69 | value: function() { |
73 | |||
74 | this.eventManager.addEventListener( "elementChange", this, false); | 70 | this.eventManager.addEventListener( "elementChange", this, false); |
75 | 71 | ||
76 | // For now always assume that the stage is selected by default when opening the old template | 72 | // Save a reference of the pi inside the document view to be able to clear |
77 | // TODO: Remove marker for old template: NINJA-STAGE-REWORK | 73 | this.application.ninja.currentDocument.model.views.design.propertiesPanel = this; |
78 | if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") { | 74 | |
79 | this.displayStageProperties(); | 75 | // Display the default document root PI |
80 | } | 76 | this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot); |
81 | } | 77 | } |
82 | }, | 78 | }, |
83 | 79 | ||
84 | handleSwitchDocument: { | 80 | handleCloseDocument: { |
85 | value: function(){ | 81 | value: function(){ |
86 | // For now always assume that the stage is selected by default | 82 | this.clear(); |
87 | if(this.application.ninja.selectedElements.length === 0) { | ||
88 | this.displayStageProperties(); | ||
89 | } else { | ||
90 | if(this.application.ninja.selectedElements.length === 1) { | ||
91 | this.displayElementProperties(this.application.ninja.selectedElements[0]); | ||
92 | } else { | ||
93 | this.displayGroupProperties(this.application.ninja.selectedElements); | ||
94 | } | ||
95 | } | ||
96 | } | 83 | } |
97 | }, | 84 | }, |
98 | 85 | ||
@@ -102,13 +89,13 @@ exports.Properties = Montage.create(Component, { | |||
102 | handleBlur: { | 89 | handleBlur: { |
103 | value: function(event) { | 90 | value: function(event) { |
104 | 91 | ||
105 | if(event.target.id === "elementId") { | 92 | if(event.target === this.elementId.element) { |
106 | 93 | ||
107 | // Remove all white spaces from the id | 94 | // Remove all white spaces from the id |
108 | this.elementId.value = this.elementId.value.replace(/\s/g, ''); | 95 | this.elementId.value = this.elementId.value.replace(/\s/g, ''); |
109 | 96 | ||
110 | // Check if that id is in use | 97 | // Check if that id is in use |
111 | if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) { | 98 | if(this.application.ninja.currentDocument.model.views.design.document.getElementById(this.elementId.value) !== null) { |
112 | // TODO: Replace with Ninja Alert | 99 | // TODO: Replace with Ninja Alert |
113 | alert("The following ID: " + this.elementId.value + " is already in use"); | 100 | alert("The following ID: " + this.elementId.value + " is already in use"); |
114 | } | 101 | } |
@@ -117,13 +104,13 @@ exports.Properties = Montage.create(Component, { | |||
117 | // ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); | 104 | // ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); |
118 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi"); | 105 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi"); |
119 | } else { | 106 | } else { |
120 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); | 107 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.model.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.model.documentRoot.elementModel.id); |
121 | } | 108 | } |
122 | } else if(event.target.id === "elementClass") { | 109 | } else if(event.target === this.elementClass.element) { |
123 | if(this.application.ninja.selectedElements.length) { | 110 | if(this.application.ninja.selectedElements.length) { |
124 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi"); | 111 | ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi"); |
125 | } else { | 112 | } else { |
126 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); | 113 | ElementsMediator.setAttribute(this.application.ninja.currentDocument.model.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.model.documentRoot.elementModel.elementClass); |
127 | } | 114 | } |
128 | } | 115 | } |
129 | } | 116 | } |
@@ -148,7 +135,7 @@ exports.Properties = Montage.create(Component, { | |||
148 | value: function(event) { | 135 | value: function(event) { |
149 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update | 136 | // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update |
150 | if(event.detail.source && event.detail.source !== "pi") { | 137 | if(event.detail.source && event.detail.source !== "pi") { |
151 | var el = this.application.ninja.currentDocument.documentRoot; | 138 | var el = this.application.ninja.currentDocument.model.documentRoot; |
152 | if(this.application.ninja.selectedElements.length) { | 139 | if(this.application.ninja.selectedElements.length) { |
153 | el = this.application.ninja.selectedElements[0]; | 140 | el = this.application.ninja.selectedElements[0]; |
154 | } | 141 | } |
@@ -174,8 +161,7 @@ exports.Properties = Montage.create(Component, { | |||
174 | handleSelectionChange: { | 161 | handleSelectionChange: { |
175 | value: function(event) { | 162 | value: function(event) { |
176 | if(event.detail.isDocument) { | 163 | if(event.detail.isDocument) { |
177 | if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; | 164 | this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot); |
178 | this.displayStageProperties(); | ||
179 | } else { | 165 | } else { |
180 | if(this.application.ninja.selectedElements.length === 1) { | 166 | if(this.application.ninja.selectedElements.length === 1) { |
181 | this.displayElementProperties(this.application.ninja.selectedElements[0]); | 167 | this.displayElementProperties(this.application.ninja.selectedElements[0]); |
@@ -187,98 +173,33 @@ exports.Properties = Montage.create(Component, { | |||
187 | } | 173 | } |
188 | }, | 174 | }, |
189 | 175 | ||
190 | displayStageProperties: { | 176 | clear: { |
191 | value: function() { | 177 | value: function() { |
192 | var stage = this.application.ninja.currentDocument.documentRoot; | 178 | this.elementName.value = ""; |
193 | //this is test code please remove | 179 | this.elementId.value = ""; |
194 | this.elementName.value = "Stage"; | ||
195 | this.elementId.value = stage.elementModel.id; | ||
196 | this.elementClass.value = ""; | 180 | this.elementClass.value = ""; |
197 | 181 | this.customPi = null; | |
198 | this.positionSize.disablePosition = true; | 182 | this.customSections = []; |
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 | } |