From 0a500496236bedbdd9fbbcb3d841a195b3e5fc0f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 1 Mar 2012 13:38:44 -0800 Subject: 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 --- js/controllers/elements/stage-controller.js | 2 ++ js/mediators/element-mediator.js | 9 ++++---- js/panels/properties/content.reel/content.html | 21 +++++++++++++++++ js/panels/properties/content.reel/content.js | 31 +++++++++++++++++++++----- js/tools/TagTool.js | 10 ++++----- 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, { el.elementModel.viewPort.style.setProperty(p, value); break; case "width": + this.application.ninja.currentDocument.iframe.width = parseInt(value) + 1400; el.elementModel.stageDimension.style.setProperty(p, value); break; case "height": + this.application.ninja.currentDocument.iframe.height = parseInt(value) + 400; el.elementModel.stageDimension.style.setProperty(p, value); break; 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, { _addElement: { value: function(el, rules, noEvent) { ElementController.addElement(el, rules); - var p3d = this.get3DProperties(el); - if(p3d) { - el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); - } + // Commenting this out because we should not add 3D properties by default when creating new elements. +// var p3d = this.get3DProperties(el); +// if(p3d) { +// el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); +// } if(!noEvent) { this.application.ninja.documentController.activeDocument.needsSave = true; 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 @@ } }, + "elementNameAttribute": { + "module": "montage/ui/textfield.reel", + "name": "Textfield", + "properties": { + "element": {"#": "elementNameAttribute"}, + "readOnly": false + }, + "bindings": { + "value": { + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "nameAttribute", + "oneway": false + } + } + }, + "PosSizeSection": { "module": "js/panels/properties/section.reel", @@ -128,6 +144,7 @@ "element": {"#": "propertiesPanel"}, "elementNameInput": {"@": "elementNameInput1"}, "elementId": {"@": "elementID"}, + "elementNameAttribute": {"@": "elementNameAttribute"}, "positionSize": {"@": "PosSize"}, "threeD": {"@": "threeDProperties"} } @@ -150,6 +167,10 @@
+
+ +
+
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, { value: null }, + nameAttribute: { + value: null + }, + customSections: { value: [] }, @@ -72,6 +76,9 @@ exports.Content = Montage.create(Component, { this.elementId.element.addEventListener("blur", this, false); this.elementId.element.addEventListener("keyup", this, false); + + this.elementNameAttribute.element.addEventListener("blur", this, false); + this.elementNameAttribute.element.addEventListener("keyup", this, false); } }, @@ -95,10 +102,18 @@ exports.Content = Montage.create(Component, { */ handleBlur: { value: function(event) { - if(this.application.ninja.selectedElements.length) { - ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); - } else { - ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); + console.log(event.target); + if(event.target.id === "elementID") { + if(this.application.ninja.selectedElements.length) { + ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); + } else { + ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); + } + } else if(event.target.id === "elementNameAttribute") { + if(this.application.ninja.selectedElements.length) { + //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi"); + this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value); + } } } }, @@ -106,7 +121,11 @@ exports.Content = Montage.create(Component, { handleKeyup: { value: function(event) { if(event.keyCode === 13) { - this.elementId.element.blur(); + if(event.target === "elementID") { + this.elementId.element.blur(); + } else if(event.target === "elementNameAttribute") { + this.elementNameAttribute.element.blur(); + } } } }, @@ -164,6 +183,7 @@ exports.Content = Montage.create(Component, { this.elementName = "Stage"; this.elementId.value = stage.elementModel.id; this.elementClassName = ""; + this.nameAttribute = ""; this.positionSize.disablePosition = true; this.threeD.disableTranslation = true; @@ -226,6 +246,7 @@ exports.Content = Montage.create(Component, { this.elementName = el.elementModel.selection; this.elementId.value = el.getAttribute("id") || ""; this.elementClassName = el.getAttribute("class"); + this.nameAttribute = el.getAttribute("name") || ""; this.positionSize.disablePosition = false; 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, { styles = { 'position': 'absolute', 'top' : top + 'px', - 'left' : left + 'px', - '-webkit-transform-style' : 'preserve-3d', - '-webkit-transform' : matStr + 'left' : left + 'px' +// '-webkit-transform-style' : 'preserve-3d', +// '-webkit-transform' : matStr }; // TODO - for canvas, set both as style and attribute. @@ -254,8 +254,8 @@ exports.TagTool = Montage.create(DrawingTool, { makeStaticElement: { value: function(tag) { var styles = { - "-webkit-transform-style": "preserve-3d", - "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" +// "-webkit-transform-style": "preserve-3d", +// "-webkit-transform": "perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)" }; tag.innerHTML = "content"; -- cgit v1.2.3