From 509092ff335f74517a413cfb2deeb9d2de20f8e3 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 12 Jun 2012 15:13:09 -0700 Subject: Fixing properties panel to support px and % for body and other elements. Signed-off-by: Nivesh Rajbhandari --- .../properties.reel/sections/custom.reel/custom.js | 6 ++++ .../sections/position-size.reel/position-size.html | 16 +++++++-- .../sections/position-size.reel/position-size.js | 40 +++++++++++++++------- 3 files changed, 47 insertions(+), 15 deletions(-) (limited to 'js/panels/properties.reel/sections') diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js index 9df16112..c599dcb0 100755 --- a/js/panels/properties.reel/sections/custom.reel/custom.js +++ b/js/panels/properties.reel/sections/custom.reel/custom.js @@ -233,6 +233,12 @@ exports.CustomSection = Montage.create(Component, { boundObjectPropertyPath: "value" }); + //Bind object value to controls list so it can be manipulated + Object.defineBinding(this.controls, aField.id + "Units", { + boundObject: obj, + boundObjectPropertyPath: "units" + }); + return obj; } }, diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html index 5d1a805a..bc93da33 100755 --- a/js/panels/properties.reel/sections/position-size.reel/position-size.html +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html @@ -29,9 +29,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "properties": { "element": {"#": "PosX"}, "maxValue": 10000, - "minValue": -10000 + "minValue": -10000, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { + "units": {"<<->": "@owner.leftUnits"}, "value": {"<<->": "@owner.leftPosition"} } }, @@ -40,9 +43,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "properties": { "element": {"#": "PosY"}, "maxValue": 10000, - "minValue": -10000 + "minValue": -10000, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { + "units": {"<<->": "@owner.topUnits"}, "value": {"<<->": "@owner.topPosition"} } }, @@ -50,9 +56,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "PosH": { "prototype": "js/components/hottextunit.reel[HotTextUnit]", "properties": { - "element": {"#": "PosH"} + "element": {"#": "PosH"}, + "acceptableUnits" : ["px", "%"], + "units": "px" }, "bindings": { + "units": {"<<->": "@owner.heightUnits"}, "value": {"<<->": "@owner.heightSize"} } }, @@ -65,6 +74,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot "units": "px" }, "bindings": { + "units": {"<<->": "@owner.widthUnits"}, "value": {"<<->": "@owner.widthSize"} } diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.js b/js/panels/properties.reel/sections/position-size.reel/position-size.js index 7c24e02a..d9fd629c 100755 --- a/js/panels/properties.reel/sections/position-size.reel/position-size.js +++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js @@ -12,17 +12,33 @@ exports.PositionSize = Montage.create(Component, { value: 0 }, + leftUnits: { + value: "px" + }, + topPosition: { value: 0 }, + topUnits: { + value: "px" + }, + heightSize: { value: 0 }, + heightUnits: { + value: "px" + }, + widthSize: { value: 0 }, + + widthUnits: { + value: "px" + }, /* widthSize: { get: function() { return this._widthSize;}, @@ -132,7 +148,7 @@ exports.PositionSize = Montage.create(Component, { if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + this.leftControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } } @@ -145,7 +161,7 @@ exports.PositionSize = Montage.create(Component, { if(!event.wasSetByCode) { if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + this.topControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } } @@ -156,7 +172,7 @@ exports.PositionSize = Montage.create(Component, { var prevPosition, items; if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + if(this.savedPosition) prevPosition = [this.savedPosition]; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -170,7 +186,7 @@ exports.PositionSize = Montage.create(Component, { this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi"); } - this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + this.heightControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } } @@ -181,7 +197,7 @@ exports.PositionSize = Montage.create(Component, { var prevPosition, items; if(!event.wasSetByCode) { - if(this.savedPosition) prevPosition = [this.savedPosition + "px"]; + if(this.savedPosition) prevPosition = [this.savedPosition]; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -196,7 +212,7 @@ exports.PositionSize = Montage.create(Component, { } - this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition); + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + this.widthControl.units] , "Change", "pi", prevPosition); this.savedPosition = null; } @@ -208,7 +224,7 @@ exports.PositionSize = Montage.create(Component, { value: function(event) { if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.leftPosition; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + this.leftControl.units] , "Changing", "pi"); } } @@ -218,7 +234,7 @@ exports.PositionSize = Montage.create(Component, { value: function(event) { if(!event.wasSetByCode) { if(!this.savedPosition) this.savedPosition = this.topPosition; - this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + this.topControl.units] , "Changing", "pi"); } } @@ -229,7 +245,7 @@ exports.PositionSize = Montage.create(Component, { var items; if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.heightSize; + if(!this.savedPosition) this.savedPosition = this.heightSize + " " + this.heightUnits; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -243,7 +259,7 @@ exports.PositionSize = Montage.create(Component, { this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi"); } - this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(items, "height", [this.heightSize + this.heightUnits] , "Changing", "pi"); } } @@ -254,7 +270,7 @@ exports.PositionSize = Montage.create(Component, { var items; if(!event.wasSetByCode) { - if(!this.savedPosition) this.savedPosition = this.widthSize; + if(!this.savedPosition) this.savedPosition = this.widthSize + " " + this.widthUnits; this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.model.documentRoot]; @@ -267,7 +283,7 @@ exports.PositionSize = Montage.create(Component, { this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi"); } - this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi"); + this.application.ninja.elementMediator.setProperty(items, "width", [this.widthSize + this.widthUnits] , "Changing", "pi"); } } } -- cgit v1.2.3