web client: split Inline widget into two parts

1 files changed, 82 insertions, 66 deletions

diff --git a/web/client.js b/web/client.js
index c2dc508..1a7cd51 100644
--- a/web/client.js
+++ b/web/client.js
@@ -565,10 +565,6 @@ $(function() {
 		return el;
 	    }
 
-	    Inline.staticRender = function(value) { return $("<div>"); };
-
-	    Inline.wrap = function() { return $("<div>").html(this.el); };
-
 	    Inline.setStatus = function(status) {};
 
 	    Inline.requestData = function(path) {
@@ -579,63 +575,12 @@ $(function() {
 	    };
 
 	    Inline.renderObject = function(data) {
-		this.el.html(
-		    $("<h" + this.level + ">").text(data.meta["ui-name"])
-		);
-
-		if (!isTreeNode(data.meta))
-		    return this.el.append(JSON.stringify(data));
-		
-		var div = $("<div>");
-		this.el.append(div);
-		
-		var table;
-		function appendRow(row) {
-		    if (!table) {
-			table = $("<table>");
-			div.append(table);
-		    }
-		    table.append(row);
-		}
-
+		this.data = data;
 		var self = this;
-		
-		function renderField(name, meta, label, editable, removable) {
-		    var el = makeRow(
-			Object.create(self.widget(meta)).init(
-			    data,
-			    name,
-			    meta,
-			    this.level,
-			    editable,
-			    removable
-			)
-		    );
 
-		    if (el.is("tr")) {
-			el.prepend($("<td>").text(label));
-			appendRow(el);
-		    }
-		    else {
-			table = null;
-			div.append(el);
-		    }
-		}
-		
-		function renderCollectionMember(name, meta) {
-		    var set = meta.type == "set";
-		    renderField(
-			name,
-			meta.members,
-			meta["ui-member"] + " " + name,
-			!set,
-			!set
-		    );
-		}
-		
 		if (data.meta.type == "model")
 		    _.each(data.meta.fields, function(field) {
-			renderField(
+			self.renderField(
 			    field.name,
 			    field,
 			    field["ui-name"],
@@ -646,8 +591,60 @@ $(function() {
 		
 		else _.each(data.data, function(value, name) {
 		    if (_.isArray(data.data)) name++;
-		    renderCollectionMember(name, data.meta);
-		});
+		    self.renderCollectionMember(name, data.meta);
+		});		
+	    };
+
+	    Inline.renderField = function(
+		name, meta, label, editable, removable
+	    ) {
+		this.appendWidget(
+		    Object.create(this.widget(meta)).init(
+			this.data,
+			name,
+			meta,
+			this.level,
+			editable,
+			removable
+		    ),
+		    label
+		);
+	    }
+		
+	    Inline.renderCollectionMember = function(name, meta) {
+		var set = meta.type == "set";
+		this.renderField(
+		    name,
+		    meta.members,
+		    meta["ui-member"] + " " + name,
+		    !set,
+		    !set
+		);
+	    };
+
+	    Inline.widget = function(meta) { return widgets[meta.widget]; };
+
+
+	    var Vertical = Object.create(Inline);
+
+	    Vertical.staticRender = function(value) { return $("<div>"); };
+
+	    Vertical.wrap = function() { return $("<div>").html(this.el); };
+
+	    Vertical.renderObject = function(data) {
+		this.el.html(
+		    $("<h" + this.level + ">").text(data.meta["ui-name"])
+		);
+
+		if (!isTreeNode(data.meta))
+		    return this.el.append(JSON.stringify(data));
+		
+		this.div = $("<div>");
+		this.el.append(this.div);
+
+		_.bind(Inline.renderObject, this)(data);
+
+		var self = this;
 		
 		if (_.contains(["collection", "list"], data.meta.type)) {
 		    var keys = _.clone(_.keys(data.data));
@@ -670,7 +667,7 @@ $(function() {
 			    data.set(
 				name, isTreeNode(data.meta.members) ? {} : null
 			    ).done(function(txnValid) {
-				renderCollectionMember(name, data.meta);
+				self.renderCollectionMember(name, data.meta);
 				button.prop("class", null);
 				statusBar.validationReady(txnValid);
 			    });
@@ -687,7 +684,7 @@ $(function() {
 				return res;
 			    }
 			    field.change(insert);
-			    appendRow(row);
+			    self.appendRow(row);
 			}
 			else {
 			    getter = function() {
@@ -700,7 +697,26 @@ $(function() {
 		}
 	    };
 
-	    Inline.widget = function(meta) { return widgets[meta.widget]; };
+	    Vertical.appendWidget = function(el, label) {
+		el = makeRow(el);
+
+		if (el.is("tr")) {
+		    el.prepend($("<td>").text(label));
+		    this.appendRow(el);
+		}
+		else {
+		    this.table = null;
+		    this.div.append(el);
+		}
+	    };
+
+	    Vertical.appendRow = function(row) {
+		if (!this.table) {
+		    this.table = $("<table>");
+		    this.div.append(this.table);
+		}
+		this.table.append(row);
+	    };
 
 
 	    var Reference = Object.create(ComboBox);
@@ -743,16 +759,16 @@ $(function() {
 		boolean: CheckBox,
 		combobox: ComboBox,
 		field: Field,
-		inline: Inline,
+		inline: Vertical,
 		link: Link,
 		reference: Reference
 	    };
 
 
-	    var Stacked = Object.create(Inline);
+	    var Stacked = Object.create(Vertical);
 
 	    Stacked.widget = function(meta) {
-		return isTreeNode(meta) ? Inline : Inline.widget(meta);
+		return isTreeNode(meta) ? Vertical : Vertical.widget(meta);
 	    };
 
 
@@ -766,7 +782,7 @@ $(function() {
 		    data ? $.Deferred().resolve(data) : txnMgr.query(path)
 		).done(function(data) {
 		    var layout = data.meta.widget;
-		    var form = Object.create(layout ? layouts[layout] : Inline);
+		    var form = Object.create(layout ? layouts[layout] : Vertical);
 
 		    form.staticRender = function(value) {
 			return $("#content");