From 258c960111f239227beffdf51a2f81176b501d79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn=20Zaefferer?= Date: Wed, 22 Jun 2011 14:32:24 +0200 Subject: [PATCH] Grid Editing: Add cursor cell navigation to grid. Also includes some cleanup and bugfix in grid and datasource-local --- grid-editing/editor.js | 5 ++ grid-editing/grid-editor.js | 6 +-- grid-editing/grid.html | 14 ++++++ grid-editing/helpers.js | 1 - grid-editing/navigator.js | 95 ++++++++++++++++++++++++++++++++++++ grid-spf/datasource-local.js | 3 +- grid-spf/grid.js | 9 ++-- 7 files changed, 121 insertions(+), 12 deletions(-) create mode 100644 grid-editing/navigator.js diff --git a/grid-editing/editor.js b/grid-editing/editor.js index d3bb6fea540..bc00fe07dbe 100644 --- 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 index 2d021f334d7..5c1a6507e8a 100644 --- 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 index cba90329a24..4e812a78d71 100644 --- a/grid-editing/grid.html +++ b/grid-editing/grid.html @@ -20,9 +20,19 @@ + diff --git a/grid-editing/helpers.js b/grid-editing/helpers.js index b92977cca01..60c8507b27f 100644 --- 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 new file mode 100644 index 00000000000..dcf0643839c --- /dev/null +++ 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 index fad9db7b38f..05bd28b1d17 100644 --- 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 index 955281d5d2d..9603a0a674e 100755 --- 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