aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel/properties.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel/properties.js')
-rwxr-xr-xjs/panels/properties.reel/properties.js206
1 files changed, 63 insertions, 143 deletions
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 9af9253b..7f8197ea 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
@@ -101,12 +88,14 @@ exports.Properties = Montage.create(Component, {
101 */ 88 */
102 handleBlur: { 89 handleBlur: {
103 value: function(event) { 90 value: function(event) {
104 if(event.target.dataset.montageId === "elementId") { 91
92 if(event.target === this.elementId.element) {
93
105 // Remove all white spaces from the id 94 // Remove all white spaces from the id
106 this.elementId.value = this.elementId.value.replace(/\s/g, ''); 95 this.elementId.value = this.elementId.value.replace(/\s/g, '');
107 96
108 // Check if that id is in use 97 // Check if that id is in use
109 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) {
110 // TODO: Replace with Ninja Alert 99 // TODO: Replace with Ninja Alert
111 alert("The following ID: " + this.elementId.value + " is already in use"); 100 alert("The following ID: " + this.elementId.value + " is already in use");
112 } 101 }
@@ -115,13 +104,13 @@ exports.Properties = Montage.create(Component, {
115// 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");
116 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");
117 } else { 106 } else {
118 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);
119 } 108 }
120 } else if(event.target.dataset.montageId === "elementClass") { 109 } else if(event.target === this.elementClass.element) {
121 if(this.application.ninja.selectedElements.length) { 110 if(this.application.ninja.selectedElements.length) {
122 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");
123 } else { 112 } else {
124 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);
125 } 114 }
126 } 115 }
127 NJevent("updatedID",this.application.ninja.selectedElements[0]); 116 NJevent("updatedID",this.application.ninja.selectedElements[0]);
@@ -147,7 +136,7 @@ exports.Properties = Montage.create(Component, {
147 value: function(event) { 136 value: function(event) {
148// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update 137// console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
149 if(event.detail.source && event.detail.source !== "pi") { 138 if(event.detail.source && event.detail.source !== "pi") {
150 var el = this.application.ninja.currentDocument.documentRoot; 139 var el = this.application.ninja.currentDocument.model.documentRoot;
151 if(this.application.ninja.selectedElements.length) { 140 if(this.application.ninja.selectedElements.length) {
152 el = this.application.ninja.selectedElements[0]; 141 el = this.application.ninja.selectedElements[0];
153 } 142 }
@@ -173,8 +162,7 @@ exports.Properties = Montage.create(Component, {
173 handleSelectionChange: { 162 handleSelectionChange: {
174 value: function(event) { 163 value: function(event) {
175 if(event.detail.isDocument) { 164 if(event.detail.isDocument) {
176 if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return; 165 this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot);
177 this.displayStageProperties();
178 } else { 166 } else {
179 if(this.application.ninja.selectedElements.length === 1) { 167 if(this.application.ninja.selectedElements.length === 1) {
180 this.displayElementProperties(this.application.ninja.selectedElements[0]); 168 this.displayElementProperties(this.application.ninja.selectedElements[0]);
@@ -186,98 +174,33 @@ exports.Properties = Montage.create(Component, {
186 } 174 }
187 }, 175 },
188 176
189 displayStageProperties: { 177 clear: {
190 value: function() { 178 value: function() {
191 var stage = this.application.ninja.currentDocument.documentRoot; 179 this.elementName.value = "";
192 //this is test code please remove 180 this.elementId.value = "";
193 this.elementName.value = "Stage";
194 this.elementId.value = stage.elementModel.id;
195 this.elementClass.value = ""; 181 this.elementClass.value = "";
196 182 this.customPi = null;
197 this.positionSize.disablePosition = true; 183 this.customSections = [];
198 this.threeD.disableTranslation = true;
199
200 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height"));
201 this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width"));
202
203 if(this.threeD.inGlobalMode)
204 {
205 this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle");
206 this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle");
207 this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
208 }
209
210 this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d";
211
212 if(this.customPi !== stage.elementModel.pi) {
213 // We need to unregister color chips from the previous selection from the Color Model
214 var len = this.customSections.length;
215 for(var n = 0, controls; n < len; n++) {
216 controls = this.customSections[n].content.controls;
217 if(controls["colorSelect"]) {
218 controls["colorSelect"].destroy();
219 } else if(controls["stageBackground"]) {
220 controls["stageBackground"].destroy();
221 }
222 }
223
224 this.customPi = stage.elementModel.pi;
225 this.displayCustomProperties(stage, stage.elementModel.pi);
226 }
227
228 // For now hardcode the background since it is the only custom property
229 // No need to loop through all the properties.
230 var backgroundChip = this.customSections[0].content.controls["background"];
231 backgroundChip.color = ElementsMediator.getProperty(stage, "background");
232
233 /*
234 var customPI = PiData[this.customPi];
235 // Get all the custom section for the custom PI
236 for(var i = 0, customSec; customSec = customPI[i]; i++) {
237
238 // Now set the Fields for the custom PI
239 for(var j = 0, fields; fields = customSec.Section[j]; j++) {
240 for(var k = 0, control; control = fields[k]; k++) {
241
242 var colorChipEl = this.customSections[i].content.controls[control.id];
243 this.foo = colorChipEl;
244 colorChipEl.addEventListener("firstDraw", this, false);
245
246 }
247 }