Sizing test added

client/seep.js

@@ -275,11 +275,13 @@ seep.widget = function(json) {
 				} else if(prop=="width") {
 					self.element.style.width = val
 					self.sync(true)
+					self.pixelWidth = self.element.offsetWidth
 					self.sync("pixelWidth", "", self.element.offsetWidth)
 					self.sync(false)
 				} else if(prop=="height") {
 					self.element.style.height = val
 					self.sync(true)
+					self.pixelHeight = self.element.offsetHeight
 					self.sync("pixelHeight", "", self.element.offsetHeight)
 					self.sync(false)
 				}

client/widgets/input.js

@@ -3,13 +3,18 @@ seep.input = function(json) {
 		return
 
 	if(!json.elementType)
-		json.elementType = "input"
+		json.elementType = json.multiline? "textarea" : "input"
 
 	seep.field.call(this, json)
-	this.element.type = "text"
+
+	if(!json.multiline)
+		this.element.type = "text"
 
 	var self = this
 	$(this.element).change(function(e) {
+		self.sync(false)
+		self.text = this.value
+		self.sync(true)
 		self.application.sync(self.id, "text", this.value)
 	})
 }

lib/widgets/input.js

@@ -2,9 +2,14 @@ var Field = require("./field").Field
 
 exports.Input = Field.extend({
 
-	init: function(text) {
+	init: function(text, props) {
+		var props = props || {}
+		if(props.multiline) {
+			this.pushProp("multiline")
+		}
 		this._super(text)
 		this.setType(__filename)
+		this.multiline = props.multiline || false
 	}
 
 });

test/public/index.html

@@ -13,6 +13,7 @@
 	<fieldset class="test"><legend>Disabled</legend><div id="disabled"></div></fieldset>
 	<fieldset class="test"><legend>Server vs. Client Event Handling</legend><div id="change-text-with-button"></div></fieldset>
 	<fieldset class="test"><legend>Add & Remove</legend><div id="add-remove-widgets"></div></fieldset>
+	<fieldset class="test"><legend>Size</legend><div id="size"></div></fieldset>
 
 
 
@@ -32,6 +33,7 @@
 		 	seep.init("disabled", true)
 		 	seep.init("change-text-with-button", true)
 		 	seep.init("add-remove-widgets", true)
+		 	seep.init("size", true)
 
 		</script>
 

test/public/styles.css

@@ -23,6 +23,11 @@ body {
 	}
 
 
+.s-text {
+	display: inline-block;
+	zoom: 1;
+	}
+
 .s-button,
 .s-button.s-disabled:active {
 	-webkit-appearance: none;

test/size.js

@@ -0,0 +1,56 @@
+var seep = require("seep")
+
+exports.app = seep.Application.extend({
+
+	init: function() {
+		this._super("Set size")
+
+		var layout = new seep.layout.Flow({wrap: "div"})
+		this.add(layout)
+
+		this.change_me = new seep.Input("", {multiline: true})
+		layout.add(this.change_me)
+
+		var widthLayout = new seep.layout.Flow()
+		var label = new seep.Text("Width ")
+		label.width = "3.2em"
+		widthLayout.add(label)
+		this.width = new seep.Input()
+		this.width.width = "4em"
+		widthLayout.add(this.width)
+		layout.add(widthLayout)
+
+		var heightLayout = new seep.layout.Flow()
+		label = new seep.Text("Height ")
+		label.width = "3.2em"
+		heightLayout.add(label)
+		this.height = new seep.Input()
+		this.height.width = "4em"
+		heightLayout.add(this.height)
+		layout.add(heightLayout)
+
+		this.button = new seep.Button("Set")
+
+		var handler = function(e) {
+			this.change_me.width = this.width.text
+			this.change_me.height = this.height.text
+			this.change_me.text = this.change_me.pixelWidth + " x " + this.change_me.pixelHeight
+		}
+
+		this.button.addListener("click", handler, {bind: this, id: "handler"})
+
+		this.toggle = new seep.Checkbox("Clientside events")
+		this.toggle.addListener("change", function(e) {
+			this.button.removeListener("handler")
+			if(e.source.checked) {
+				this.button.addListener("click", handler, {bind: this, id: "handler", client: true})
+			} else {
+				this.button.addListener("click", handler, {bind: this, id: "handler"})
+			}
+		}, {bind: this})
+
+		layout.add(this.button)
+		layout.add(this.toggle)
+	}
+
+})