web client: split Field widget into two objects

1 files changed, 45 insertions, 39 deletions

diff --git a/web/client.js b/web/client.js
index dd30575..65a4289 100644
--- a/web/client.js
+++ b/web/client.js
@@ -357,66 +357,72 @@ $(function() {
 		return $("<a>").attr({href: "javascript:void(0);"});
 	    }
 
-	    var Field = {
+	    var Widget = {
 		init: function(value, meta, label, level, update, remove) {
+
+		    function attachLabel(el) {
+			var row = $("<tr>");
+			row.append($("<td>").text(label));
+			row.append(el);			
+			return row;
+		    }
+
 		    if (!update) {
 			var el = this.staticRender(value, level);
 			this.setElStatus(el, status);
-			if (label) return this.wrap(el, label).row;
+			if (label) return attachLabel(el);
 			return el;
 		    }
 
 		    this.el = this.render(value, meta, level);
 		    this.el.change(update);
 
-		    if (!this.field) this.field = this.el;
-
-		    this.els = this.wrap(this.el, label, remove);
-		    return this.els.row;
-		},
-
-		staticRender: function(value, level) {
-		    return $("<div>").text(value);
-		},
-
-		setElStatus: function(el, status) {
-		    el.prop("class", status);
-		},
-
-		wrap: function(el, label, remove) {
-		    var row = $("<tr>");
-		    row.append($("<td>").text(label));
-
-		    var td = $("<td>");
-		    var msg = $("<div>");
-		    td.append(msg);
-		    td.append(el);
-		    row.append(td);
-
+		    var el = attachLabel(this.wrap());
 		    if (remove)
-			row.append(
+			el.append(
 			    $("<td>").html(href().click(remove).text("Delete"))
 			);
-
-		    return {row: row, msg: msg};
+		    return el;
 		},
 
-		render: function(value, meta, level) {
-		    return $("<input>").attr({type: "text", value: value});
+		setElStatus: function(el, status) {
+		    el.prop("class", status);
 		},
 
-		setMessage: function(msg, html) {
-		    if (html) this.els.msg.html(msg);
-		    else this.els.msg.text(msg);
-		},
+		wrap: function() { return this.el; },
 
 		setStatus: function(status) {
 		    this.setElStatus(this.el, status);
-		},
-
-		get: function() { return this.field.val() || null; }
+		}
 	    }
 
+	    var Field = Object.create(Widget);
+	    Field.init = function(value, meta, label, level, update, remove) {
+		var el = _.bind(Widget.init, this)(
+		    value, meta, label, level, update, remove
+		);
+		if (!this.field) this.field = this.el;
+		return el;
+	    };
+	    Field.staticRender = function(value, level) {
+		return $("<div>").text(value);
+	    };
+	    Field.render = function(value, meta, level) {
+		return $("<input>").attr({type: "text", value: value});
+	    };
+	    Field.wrap = function() {
+		var td = $("<td>");
+		this.msg = $("<div>");
+		td.append(this.msg);
+		td.append(this.el);
+		return td;
+	    };
+	    Field.setMessage = function(msg, html) {
+		if (html) this.msg.html(msg);
+		else this.msg.text(msg);
+	    };
+	    Field.get = function() { return this.field.val() || null; };
+
 	    var ComboBox = Object.create(Field);
 	    ComboBox.render = function(value, meta, level) {
 		var el = $("<select>");
@@ -452,7 +458,7 @@ $(function() {
 	    };
 	    CheckBox.get = function() { return this.el.is(":checked"); };
 
-	    var Link = Object.create(Field);
+	    var Link = Object.create(Widget);
 	    Link.staticRender = function(value, level) {
 		var el = href();
 		if (value) {