Grid Editing: Add cursor cell navigation to grid. Also includes some …

…cleanup and bugfix in grid and datasource-local
michelled · Jun 22, 2011 · 258c960 · 258c960
1 parent 4f09739
commit 258c960
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 12 deletions.
diff --git a/grid-editing/editor.js b/grid-editing/editor.js
@@ -42,7 +42,11 @@ $.widget( "ui.editor", {
 					that.submit( event );
 				}, 100 );
 			},
+			keydown: function( event ) {
+				event.stopPropagation();
+			},
 			keyup: function( event ) {
+				event.stopPropagation();
 				if ( event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.NUMPAD_ENTER ) {
 					this.submit( event );
 				} else if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
@@ -58,6 +62,7 @@ $.widget( "ui.editor", {
 		this._trigger("start", event );
 	},
 	_hide: function( event ) {
+		this.input.blur();
 		this.inputWrapper.hide();
 		this.inner.show();
 	},

diff --git a/grid-editing/grid-editor.js b/grid-editing/grid-editor.js
@@ -1,11 +1,9 @@
 /*
- * Inline Editor
+ * Grid Inline Editor
  *
  * Depends on:
  * widget
- *
- * Optional:
- * spinner
+ * editor
  */
 (function( $ ) {
 

diff --git a/grid-editing/grid.html b/grid-editing/grid.html
@@ -20,9 +20,19 @@
 	<script src="../grid-spf/pager.js"></script>
 	<script src="editor.js"></script>
 	<script src="grid-editor.js"></script>
+	<script src="navigator.js"></script>
 	<script src="localstore.js"></script>
 	<script src="helpers.js"></script>
 	<script>
+	if ( !window.console ) {
+		window.console = {
+			log: function() {
+				var message = Array.prototype.slice.call( arguments, 1 ).join( ", " );
+				$("<div>").text( message ).appendTo("body");
+			}
+		}
+	}
+
 	var store = $.demos.localstore( {
 		key: "grid-editing-developers",
 		initial: "../grid-spf/developers.json"
@@ -74,8 +84,11 @@
 				developers._trigger("objectchange", event, {
 					object: object
 				});
+				// for the navigator
+				grid.element.focus();
 			}
 		});
+		grid.element.navigator();
 
 		// TODO find a better way to add markup to the generated row template
 		grid.options.rowTemplate = grid.options.rowTemplate.substring( 0, grid.options.rowTemplate.length - 35 )
@@ -141,6 +154,7 @@
 	});
 	</script>
 	<style>
+		.navigator-active { border: 2px solid blue; }
 	</style>
 </head>
 <body>

diff --git a/grid-editing/helpers.js b/grid-editing/helpers.js
@@ -51,7 +51,6 @@ function meta( input ) {
 		}
 		output.push(field);
 	}
-	console.log(input, output)
 	return output;
 }
 

diff --git a/grid-editing/navigator.js b/grid-editing/navigator.js
@@ -0,0 +1,95 @@
+/*
+ * Grid Navigator
+ *
+ * Depends on:
+ * widget
+ */
+(function( $ ) {
+
+$.widget( "ui.navigator", {
+	_create: function() {
+		this.active = $();
+		this.element.attr( "tabIndex", 0 );
+		this._bind({
+			focusin: "activate",
+			focusout: "deactivate",
+			keydown: "move",
+			keyup: "enter",
+			click: "select"
+		});
+	},
+	select: function( event ) {
+		var target = $( event.target ).closest( "td" );
+		if (target.length) {
+			this.deactivate();
+			this.active = target;
+			this.activate();
+		}
+	},
+	activate: function() {
+		if ( !this.active.length || !this.active.parents("body").length ) {
+			this.active = this.element.find("td:first");
+		}
+		this.active.addClass("navigator-active");
+	},
+	deactivate: function() {
+		this.active.removeClass("navigator-active");
+	},
+	move: function( event ) {
+		switch ( event.keyCode ) {
+		case $.ui.keyCode.RIGHT:
+			this.right(); break;
+		case $.ui.keyCode.LEFT:
+			this.left(); break;
+		case $.ui.keyCode.UP:
+			this.up(); break;
+		case $.ui.keyCode.DOWN:
+			this.down(); break;
+		}
+	},
+	enter: function( event ) {
+		switch ( event.keyCode ) {
+		case $.ui.keyCode.ENTER:
+			this.click(); break;
+		}
+	},
+	right: function() {
+		var next = this.active.next();
+		if (next.length) {
+			this.deactivate();
+			this.active = next;
+			this.activate();
+		}
+	},
+	left: function() {
+		var next = this.active.prev();
+		if (next.length) {
+			this.deactivate();
+			this.active = next;
+			this.activate();
+		}
+	},
+	up: function() {
+		var index = this.active[ 0 ].cellIndex;
+		var next = this.active.parent().prev().children( "td" ).eq( index );
+		if (next.length) {
+			this.deactivate();
+			this.active = next;
+			this.activate();
+		}
+	},
+	down: function() {
+		var index = this.active[ 0 ].cellIndex;
+		var next = this.active.parent().next().children( "td" ).eq( index );
+		if (next.length) {
+			this.deactivate();
+			this.active = next;
+			this.activate();
+		}
+	},
+	click: function() {
+		this.active.trigger("click");
+	}
+});
+
+})( jQuery );
diff --git a/grid-spf/datasource-local.js b/grid-spf/datasource-local.js
@@ -10,12 +10,11 @@ $.widget( "ui.localDatasource", $.ui.datasource, {
 			var sortedItems = that._sort( that._filter( that.options.input ) );
 			response( that._page( sortedItems ), sortedItems.length );
 		}
-		this.refresh();
 	},
 	_filter: function( items ) {
 		if ( this.options.filter ) {
 			var that = this;
-			return $.grep( items, function ( item ) { 
+			return $.grep( items, function ( item ) {
 				var property,
 					filter,
 					match = true;

diff --git a/grid-spf/grid.js b/grid-spf/grid.js
@@ -1,10 +1,10 @@
 /*
  * Grid
- * 
+ *
  * Depends on:
  * tmpl
  * datastore
- * 
+ *
  * Optional:
  * extractingDatasource
  */
@@ -17,7 +17,6 @@ $.widget( "ui.grid", {
 	},
 	_create: function() {
 		var that = this;
-
 		this._columns();
 		this._rowTemplate();
 		this.element.addClass( "ui-widget" );
@@ -27,7 +26,7 @@ $.widget( "ui.grid", {
 				// TODO add item
 			});
 		});
-		$(this.options.source).bind("datasourceresponse", function() {
+		$(this.options.source.element).bind("datasourceresponse", function() {
 			that.refresh();
 		});
 	},
@@ -44,7 +43,7 @@ $.widget( "ui.grid", {
 		tbody.find( "td" ).addClass( "ui-widget-content" );
 		this._trigger("refresh");
 	},
-	
+
 	_columns: function() {
 		if ( this.options.columns ) {
 			// TODO this code assumes any present th is a column header, but it may be a row header