[form] [keyboard nav] started

public/build.json

@@ -94,7 +94,6 @@
 			"lib/public/js/legacy/utils/handler.js",
 			"lib/public/js/legacy/utils/printElement.js",
 			"lib/public/js/legacy/widgets/dialog.js",
-			"lib/public/js/legacy/widgets/form/fields.js",
 			"lib/public/js/legacy/webpage/loaders.js",
 
 			"lib/public/js/wn/upload.js",
@@ -135,7 +134,6 @@
 			"lib/public/js/wn/ui/toolbar/bookmarks.js",
 			"lib/public/js/wn/ui/toolbar/toolbar.js",
 			
-			"lib/public/js/legacy/widgets/form/fields.js",
 			"lib/public/js/legacy/widgets/form/form_dialog.js",
 			"lib/public/js/legacy/widgets/form/form_header.js",
 			"lib/public/js/legacy/widgets/form/form.js",

public/js/wn/form/control.js

@@ -7,6 +7,17 @@ wn.ui.form.make_control = function(opts) {
 	}
 }
 
+// old style
+function make_field(docfield, doctype, parent, frm, in_grid, hide_label) { // Factory
+	return new wn.ui.form.make_control({
+		df: docfield,
+		doctype: doctype,
+		parent: parent,
+		hide_label: hide_label,
+		frm: frm
+	});
+}
+
 wn.ui.form.Control = Class.extend({
 	init: function(opts) {
 		$.extend(this, opts);
@@ -205,14 +216,22 @@ wn.ui.form.ControlData = wn.ui.form.ControlInput.extend({
 	make_input: function() {
 		this.$input = $("<"+ this.html_element +">")
 			.attr("type", this.input_type)
-			.attr("placeholder", this.df.placeholder || "")
-			.attr("data-fieldtype", this.df.fieldtype)
 			.addClass("col-span-12")
 			.prependTo(this.input_area)
+		
+		this.set_input_attributes();
 		this.input = this.$input.get(0);
 		this.has_input = true;
 		this.bind_change_event();
 	},
+	set_input_attributes: function() {
+		this.$input
+			.attr("data-fieldtype", this.df.fieldtype)
+			.attr("data-fieldname", this.df.fieldname)
+			.attr("placeholder", this.df.placeholder || "")
+		if(this.doctype)
+			this.$input.attr("data-doctype", this.doctype);
+	},
 	bind_change_event: function() {
 		var me = this;
 		this.$input.on("change", this.change || function() { 
@@ -505,7 +524,7 @@ wn.ui.form.ControlSelect = wn.ui.form.ControlData.extend({
 wn.ui.form.ControlLink = wn.ui.form.ControlData.extend({
 	make_input: function() {
 		$('<div class="input-group link-field">\
-			<input type="text" data-fieldtype="Link">\
+			<input type="text">\
 			<div class="input-group-btn">\
 				<button class="btn btn-search" title="Search Link">\
 					<i class="icon-search"></i>\
@@ -519,6 +538,7 @@ wn.ui.form.ControlLink = wn.ui.form.ControlData.extend({
 		</div>').appendTo(this.input_area);
 		this.$input_area = $(this.input_area);
 		this.$input = this.$input_area.find('input');
+		this.set_input_attributes();
 		this.input = this.$input.get(0);
 		this.has_input = true;
 		//this.bind_change_event();

public/js/wn/form/editors.js

@@ -80,6 +80,9 @@ wn.editors.BootstrapWYSIWYG = Class.extend({
 		this.$textarea = this.$parent.find(".html-editor");
 		this.input = this.$editor.get(0);
 	},
+	set_focus: function() {
+		this.$editor.focus();
+	},
 	make_bindings: function() {
 		var me = this;
 		var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 
@@ -215,6 +218,9 @@ wn.editors.ACE = Class.extend({
 	get_value: function() {
 		return this.editor.getSession().getValue();
 	},
+	set_focus: function() {
+		this.editor.focus();
+	},
 	bind_form_load: function() {
 		var me = this;
 		if(cur_frm) {
@@ -226,5 +232,8 @@ wn.editors.ACE = Class.extend({
 				})
 			});
 		}
-	}
+	},
+	set_focus: function() {
+		this.$editor.focus();
+	},
 })

public/js/wn/form/grid.js

@@ -127,6 +127,13 @@ wn.ui.form.Grid = Class.extend({
 	},
 	set_value: function(fieldname, value, doc) {
 		this.grid_rows_by_docname[doc.name].set_value(fieldname, value);
+	},
+	add_new_row: function(idx, callback) {
+		wn.model.add_child(this.frm.doc, this.df.options, this.df.fieldname, idx);
+		this.refresh();
+		// show
+		this.wrapper.find("[data-idx='"+idx+"']").data("grid_row")
+			.toggle_view(true, callback);
 	}
 });
 
@@ -200,10 +207,7 @@ wn.ui.form.GridRow = Class.extend({
 		this.wrapper.find(".grid-insert-row").click(function() {
 			var idx = me.doc.idx;
 			me.toggle_view(false);
-			wn.model.add_child(me.frm.doc, me.grid.df.options, me.grid.df.fieldname, 
-				me.doc.idx);
-			me.grid.refresh();
-			me.grid.wrapper.find("[data-idx='"+idx+"']").data("grid_row").toggle_view(true);
+			me.grid.add_new_row(idx);
 			return false;
 		})
 	},
@@ -259,7 +263,7 @@ wn.ui.form.GridRow = Class.extend({
 			}
 		});
 	},
-	toggle_view: function(show) {
+	toggle_view: function(show, callback) {
 		this.doc = locals[this.doc.doctype][this.doc.name];
 		// hide other
 		var open_row = $(".grid-row-open").data("grid_row"),
@@ -267,13 +271,22 @@ wn.ui.form.GridRow = Class.extend({
 
 		this.fields = [];
 		this.fields_dict = {};
-		
-		open_row && open_row != this && open_row.toggle_view(false);
-		
+				
 		this.show = show===undefined ? 
 			show = !this.show :
 			show
 
+		if(show && open_row) {
+			if(open_row==this) {
+				// already open, do nothing
+				callback();
+				return;
+			} else {
+				// close other views
+				open_row.toggle_view(false);
+			}
+		}
+
 		this.make_columns();
 		this.wrapper.toggleClass("grid-row-open", this.show);
 
@@ -281,10 +294,13 @@ wn.ui.form.GridRow = Class.extend({
 		this.show && this.row.toggle(false);
 
 		this.form_panel.slideToggle(this.show, function() {
-			if(!me.show) {
+			if(me.show) {
+				me.form_area.find(":input:first").focus();
+			} else {
 				$(me.form_area).empty();
 				me.row.toggle(true);
 			}
+			callback && callback();
 		});
 	},
 	render_form: function() {

public/js/wn/form/layout.js

@@ -9,6 +9,7 @@ wn.ui.form.Layout = Class.extend({
 		this.wrapper = $('<div class="form-layout">').appendTo(this.parent);
 		this.fields = wn.meta.docfield_list[this.doctype];
 		this.fields.sort(function(a,b) { return a.idx - b.idx});
+		this.setup_tabbing();
 	},
 	refresh: function() {
 		var me = this;
@@ -80,5 +81,84 @@ wn.ui.form.Layout = Class.extend({
 		}
 		this.column = null;
 		return this.section;
-	}
+	},
+	setup_tabbing: function() {
+		var me = this;
+		this.wrapper.on("keydown", function(ev) {
+			if(ev.which==9) {
+				var current = $(ev.target),
+					doctype = current.attr("data-doctype"),
+					fieldname = current.attr("data-fieldname");
+				if(doctype)
+					return me.handle_tab(doctype, fieldname);
+			}
+		})
+	},
+	handle_tab: function(doctype, fieldname) {
+		var me = this,
+			grid_row = null;
+			next = null,
+			fields = me.frm.fields,
+			in_grid = false;
+			
+		// in grid
+		if(doctype != me.frm.doctype) {
+			grid_row =me.get_open_grid_row() 
+			fields = grid_row.fields;
+		}
+								
+		for(var i=0, len=fields.length; i < len; i++) {
+			if(fields[i].df.fieldname==fieldname) {
+				if(i==len-1) {
+					// last field in this group
+					if(grid_row) {
+						// in grid
+						if(grid_row.doc.idx==grid_row.grid.grid_rows.length) {
+							// last row, close it and find next field
+							grid_row.toggle_view(false, function() {
+								me.handle_tab(grid_row.grid.df.parent, grid_row.grid.df.fieldname);
+							})
+						} else {
+							// next row
+							grid_row.grid.grid_rows[grid_row.doc.idx].toggle_view(true);
+						}
+					} else {
+						// last field - to title buttons
+					}
+				} else {
+					me.focus_on_next_field(i, fields);
+				}
+				
+				break;
+			}
+		}
+		return false;
+	},
+	focus_on_next_field: function(start_idx, fields) {
+		// loop to find next eligible fields
+		for(var ii= start_idx + 1, len = fields.length; ii < len; ii++) {
+			if(fields[ii].disp_status=="Write") {
+				var next = fields[ii];
+
+				// next is table, show the table
+				if(next.df.fieldtype=="Table") {
+					if(!next.grid.grid_rows.length) {
+						next.grid.add_new_row(1);
+					} else {
+						next.grid.grid_rows[0].toggle_view(true);
+					}
+				}
+				else if(next.editor) {
+					next.editor.set_focus();
+				}
+				else if(next.$input) {
+					next.$input.focus();
+				}
+				break;
+			}
+		}
+	},
+	get_open_grid_row: function() {
+		return $(".grid-row-open").data("grid_row");
+	},
 })

public/js/wn/model/create_new.js

@@ -37,7 +37,7 @@ $.extend(wn.model, {
 		
 		for(var fid=0;fid<docfields.length;fid++) {
 			var f = docfields[fid];
-			if(!in_list(no_value_fields, f.fieldtype) && doc[f.fieldname]==null) {
+			if(!in_list(wn.model.no_value_type, f.fieldtype) && doc[f.fieldname]==null) {
 				var v = wn.model.get_default_value(f, doc);
 				if(v) {
 					if(in_list(["Int", "Check"], f.fieldtype))