aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorValerio Virgillito2012-03-01 13:38:44 -0800
committerValerio Virgillito2012-03-01 13:38:44 -0800
commit0a500496236bedbdd9fbbcb3d841a195b3e5fc0f (patch)
tree0985abebdcf61dab85cfc97170a1c6339a5346eb
parentb09956e4a9a35c5588cc7cd1f01efb617cbe0884 (diff)
downloadninja-0a500496236bedbdd9fbbcb3d841a195b3e5fc0f.tar.gz
stage and elements fixes
- Resizing the iframe container when resizing the stage - Removing 3d rules from elements when adding them - Adding a name property in the pi Signed-off-by: Valerio Virgillito <valerio@motorola.com>
-rwxr-xr-xjs/controllers/elements/stage-controller.js2
-rwxr-xr-xjs/mediators/element-mediator.js9
-rwxr-xr-xjs/panels/properties/content.reel/content.html21
-rwxr-xr-xjs/panels/properties/content.reel/content.js31
-rwxr-xr-xjs/tools/TagTool.js10
5 files changed, 59 insertions, 14 deletions
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index abad3736..34bb1fb5 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -104,9 +104,11 @@ exports.StageController = Montage.create(ElementController, {
104 el.elementModel.viewPort.style.setProperty(p, value); 104 el.elementModel.viewPort.style.setProperty(p, value);
105 break; 105 break;
106 case "width": 106 case "width":
107 this.application.ninja.currentDocument.iframe.width = parseInt(value) + 1400;
107 el.elementModel.stageDimension.style.setProperty(p, value); 108 el.elementModel.stageDimension.style.setProperty(p, value);
108 break; 109 break;
109 case "height": 110 case "height":
111 this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400;
110 el.elementModel.stageDimension.style.setProperty(p, value); 112 el.elementModel.stageDimension.style.setProperty(p, value);
111 break; 113 break;
112 default: 114 default:
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 127f73e1..60a75992 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -90,10 +90,11 @@ exports.ElementMediator = Montage.create(NJComponent, {
90 _addElement: { 90 _addElement: {
91 value: function(el, rules, noEvent) { 91 value: function(el, rules, noEvent) {
92 ElementController.addElement(el, rules); 92 ElementController.addElement(el, rules);
93 var p3d = this.get3DProperties(el); 93 // Commenting this out because we should not add 3D properties by default when creating new elements.
94 if(p3d) { 94// var p3d = this.get3DProperties(el);
95 el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); 95// if(p3d) {
96 } 96// el.elementModel.controller["set3DProperties"](el, [p3d], 0, true);
97// }
97 if(!noEvent) { 98 if(!noEvent) {
98 this.application.ninja.documentController.activeDocument.needsSave = true; 99 this.application.ninja.documentController.activeDocument.needsSave = true;
99 NJevent("elementAdded", el); 100 NJevent("elementAdded", el);
diff --git a/js/panels/properties/content.reel/content.html b/js/panels/properties/content.reel/content.html
index ab485323..bf11e215 100755
--- a/js/panels/properties/content.reel/content.html
+++ b/js/panels/properties/content.reel/content.html
@@ -58,6 +58,22 @@
58 } 58 }
59 }, 59 },
60 60
61 "elementNameAttribute": {
62 "module": "montage/ui/textfield.reel",
63 "name": "Textfield",
64 "properties": {
65 "element": {"#": "elementNameAttribute"},
66 "readOnly": false
67 },
68 "bindings": {
69 "value": {
70 "boundObject": {"@": "owner"},
71 "boundObjectPropertyPath": "nameAttribute",
72 "oneway": false
73 }
74 }
75 },
76
61 77
62 "PosSizeSection": { 78 "PosSizeSection": {
63 "module": "js/panels/properties/section.reel", 79 "module": "js/panels/properties/section.reel",
@@ -128,6 +144,7 @@
128 "element": {"#": "propertiesPanel"}, 144 "element": {"#": "propertiesPanel"},
129 "elementNameInput": {"@": "elementNameInput1"}, 145 "elementNameInput": {"@": "elementNameInput1"},
130 "elementId": {"@": "elementID"}, 146 "elementId": {"@": "elementID"},
147 "elementNameAttribute": {"@": "elementNameAttribute"},
131 "positionSize": {"@": "PosSize"}, 148 "positionSize": {"@": "PosSize"},
132 "threeD": {"@": "threeDProperties"} 149 "threeD": {"@": "threeDProperties"}
133 } 150 }
@@ -150,6 +167,10 @@
150 <label id="lblClass">Class:</label> 167 <label id="lblClass">Class:</label>
151 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article> 168 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
152 </section> 169 </section>
170 <section class="fieldCol">
171 <label id="lblName">Name:</label>
172 <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
173 </section>
153 </section> 174 </section>
154 <section id="PosSize"></section> 175 <section id="PosSize"></section>
155 <section id="customSections"> 176 <section id="customSections">
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 72c02ffd..d4b0edc4 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -25,6 +25,10 @@ exports.Content = Montage.create(Component, {
25 value: null 25 value: null
26 }, 26 },
27 27
28 nameAttribute: {
29 value: null
30 },
31
28 customSections: { 32 customSections: {
29 value: [] 33 value: []
30 }, 34 },
@@ -72,6 +76,9 @@ exports.Content = Montage.create(Component, {
72 76
73 this.elementId.element.addEventListener("blur", this, false); 77 this.elementId.element.addEventListener("blur", this, false);
74 this.elementId.element.addEventListener("keyup", this, false); 78 this.elementId.element.addEventListener("keyup", this, false);
79
80 this.elementNameAttribute.element.addEventListener("blur", this, false);
81 this.elementNameAttribute.element.addEventListener("keyup", this, false);
75 } 82 }
76 }, 83 },
77 84
@@ -95,10 +102,18 @@ exports.Content = Montage.create(Component, {
95 */ 102 */
96 handleBlur: { 103 handleBlur: {
97 value: function(event) { 104 value: function(event) {
98 if(this.application.ninja.selectedElements.length) { 105 console.log(event.target);
99 ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); 106 if(event.target.id === "elementID") {
100 } else { 107 if(this.application.ninja.selectedElements.length) {
101 ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); 108 ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
109 } else {
110 ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
111 }
112 } else if(event.target.id === "elementNameAttribute") {
113 if(this.application.ninja.selectedElements.length) {
114 //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
115 this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
116 }
102 } 117 }
103 } 118 }
104 }, 119 },
@@ -106,7 +121,11 @@ exports.Content = Montage.create(Component, {
106 handleKeyup: { 121 handleKeyup: {
107 value: function(event) { 122 value: function(event) {
108 if(event.keyCode === 13) { 123 if(event.keyCode === 13) {
109 this.elementId.element.blur(); 124 if(event.target === "elementID") {
125 this.elementId.element.blur();
126 } else if(event.target === "elementNameAttribute") {
127 this.elementNameAttribute.element.blur();
128 }
110 } 129 }
111 } 130 }
112 }, 131 },
@@ -164,6 +183,7 @@ exports.Content = Montage.create(Component, {
164 this.elementName = "Stage"; 183 this.elementName = "Stage";
165 this.elementId.value = stage.elementModel.id; 184 this.elementId.value = stage.elementModel.id;
166 this.elementClassName = ""; 185 this.elementClassName = "";
186 this.nameAttribute = "";
167 187
168 this.positionSize.disablePosition = true; 188 this.positionSize.disablePosition = true;
169 this.threeD.disableTranslation = true; 189 this.threeD.disableTranslation = true;
@@ -226,6 +246,7 @@ exports.Content = Montage.create(Component, {
226 this.elementName = el.elementModel.selection; 246 this.elementName = el.elementModel.selection;
227 this.elementId.value = el.getAttribute("id") || ""; 247 this.elementId.value = el.getAttribute("id") || "";
228 this.elementClassName = el.getAttribute("class"); 248 this.elementClassName = el.getAttribute("class");
249 this.nameAttribute = el.getAttribute("name") || "";
229 250
230 this.positionSize.disablePosition = false; 251 this.positionSize.disablePosition = false;
231 this.threeD.disableTranslation = false; 252 this.threeD.disableTranslation = false;
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index e3f49bbe..39667aa7 100755
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -232,9 +232,9 @@ exports.TagTool = Montage.create(DrawingTool, {
232 styles = { 232 styles = {
233 'position': 'absolute', 233 'position': 'absolute',
234 'top' : top + 'px', 234 'top' : top + 'px',
235 'left' : left + 'px', 235 'left' : left + 'px'
236 '-webkit-transform-style' : 'preserve-3d', 236// '-webkit-transform-style' : 'preserve-3d',
237 '-webkit-transform' : matStr 237// '-webkit-transform' : matStr
238 }; 238 };
239 239
240 // TODO - for canvas, set both as style and attribute. 240 // TODO - for canvas, set both as style and attribute.
@@ -254,8 +254,8 @@ exports.TagTool = Montage.create(DrawingTool, {
254 makeStaticElement: { 254 makeStaticElement: {
255 value: function(tag) { 255 value: function(tag) {
256 var styles = { 256 var styles = {
257 "-webkit-transform-style": "preserve-3d", 257// "-webkit-transform-style": "preserve-3d",
258 "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" 258// "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"
259 }; 259 };
260 tag.innerHTML = "content"; 260 tag.innerHTML = "content";
261 261