Skip to content

Commit 258c960

Browse files
jzaeffererjzaefferer
committed
Grid Editing: Add cursor cell navigation to grid. Also includes some cleanup and bugfix in grid and datasource-local
1 parent 4f09739 commit 258c960

File tree

7 files changed

+121
-12
lines changed

7 files changed

+121
-12
lines changed

‎grid-editing/editor.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,11 @@ $.widget( "ui.editor", {
4242
that.submit( event );
4343
}, 100 );
4444
},
45+
keydown: function( event ) {
46+
event.stopPropagation();
47+
},
4548
keyup: function( event ) {
49+
event.stopPropagation();
4650
if ( event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.NUMPAD_ENTER ) {
4751
this.submit( event );
4852
} else if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
@@ -58,6 +62,7 @@ $.widget( "ui.editor", {
5862
this._trigger("start", event );
5963
},
6064
_hide: function( event ) {
65+
this.input.blur();
6166
this.inputWrapper.hide();
6267
this.inner.show();
6368
},

‎grid-editing/grid-editor.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
/*
2-
* Inline Editor
2+
* Grid Inline Editor
33
*
44
* Depends on:
55
* widget
6-
*
7-
* Optional:
8-
* spinner
6+
* editor
97
*/
108
(function( $ ) {
119

‎grid-editing/grid.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,19 @@
2020
<script src="../grid-spf/pager.js"></script>
2121
<script src="editor.js"></script>
2222
<script src="grid-editor.js"></script>
23+
<script src="navigator.js"></script>
2324
<script src="localstore.js"></script>
2425
<script src="helpers.js"></script>
2526
<script>
27+
if ( !window.console ) {
28+
window.console = {
29+
log: function() {
30+
var message = Array.prototype.slice.call( arguments, 1 ).join( ", " );
31+
$("<div>").text( message ).appendTo("body");
32+
}
33+
}
34+
}
35+
2636
var store = $.demos.localstore( {
2737
key: "grid-editing-developers",
2838
initial: "../grid-spf/developers.json"
@@ -74,8 +84,11 @@
7484
developers._trigger("objectchange", event, {
7585
object: object
7686
});
87+
// for the navigator
88+
grid.element.focus();
7789
}
7890
});
91+
grid.element.navigator();
7992

8093
// TODO find a better way to add markup to the generated row template
8194
grid.options.rowTemplate = grid.options.rowTemplate.substring( 0, grid.options.rowTemplate.length - 35 )
@@ -141,6 +154,7 @@
141154
});
142155
</script>
143156
<style>
157+
.navigator-active { border: 2px solid blue; }
144158
</style>
145159
</head>
146160
<body>

‎grid-editing/helpers.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ function meta( input ) {
5151
}
5252
output.push(field);
5353
}
54-
console.log(input, output)
5554
return output;
5655
}
5756

‎grid-editing/navigator.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/*
2+
* Grid Navigator
3+
*
4+
* Depends on:
5+
* widget
6+
*/
7+
(function( $ ) {
8+
9+
$.widget( "ui.navigator", {
10+
_create: function() {
11+
this.active = $();
12+
this.element.attr( "tabIndex", 0 );
13+
this._bind({
14+
focusin: "activate",
15+
focusout: "deactivate",
16+
keydown: "move",
17+
keyup: "enter",
18+
click: "select"
19+
});
20+
},
21+
select: function( event ) {
22+
var target = $( event.target ).closest( "td" );
23+
if (target.length) {
24+
this.deactivate();
25+
this.active = target;
26+
this.activate();
27+
}
28+
},
29+
activate: function() {
30+
if ( !this.active.length || !this.active.parents("body").length ) {
31+
this.active = this.element.find("td:first");
32+
}
33+
this.active.addClass("navigator-active");
34+
},
35+
deactivate: function() {
36+
this.active.removeClass("navigator-active");
37+
},
38+
move: function( event ) {
39+
switch ( event.keyCode ) {
40+
case $.ui.keyCode.RIGHT:
41+
this.right(); break;
42+
case $.ui.keyCode.LEFT:
43+
this.left(); break;
44+
case $.ui.keyCode.UP:
45+
this.up(); break;
46+
case $.ui.keyCode.DOWN:
47+
this.down(); break;
48+
}
49+
},
50+
enter: function( event ) {
51+
switch ( event.keyCode ) {
52+
case $.ui.keyCode.ENTER:
53+
this.click(); break;
54+
}
55+
},
56+
right: function() {
57+
var next = this.active.next();
58+
if (next.length) {
59+
this.deactivate();
60+
this.active = next;
61+
this.activate();
62+
}
63+
},
64+
left: function() {
65+
var next = this.active.prev();
66+
if (next.length) {
67+
this.deactivate();
68+
this.active = next;
69+
this.activate();
70+
}
71+
},
72+
up: function() {
73+
var index = this.active[ 0 ].cellIndex;
74+
var next = this.active.parent().prev().children( "td" ).eq( index );
75+
if (next.length) {
76+
this.deactivate();
77+
this.active = next;
78+
this.activate();
79+
}
80+
},
81+
down: function() {
82+
var index = this.active[ 0 ].cellIndex;
83+
var next = this.active.parent().next().children( "td" ).eq( index );
84+
if (next.length) {
85+
this.deactivate();
86+
this.active = next;
87+
this.activate();
88+
}
89+
},
90+
click: function() {
91+
this.active.trigger("click");
92+
}
93+
});
94+
95+
})( jQuery );

‎grid-spf/datasource-local.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,11 @@ $.widget( "ui.localDatasource", $.ui.datasource, {
1010
var sortedItems = that._sort( that._filter( that.options.input ) );
1111
response( that._page( sortedItems ), sortedItems.length );
1212
}
13-
this.refresh();
1413
},
1514
_filter: function( items ) {
1615
if ( this.options.filter ) {
1716
var that = this;
18-
return $.grep( items, function ( item ) {
17+
return $.grep( items, function ( item ) {
1918
var property,
2019
filter,
2120
match = true;

‎grid-spf/grid.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
22
* Grid
3-
*
3+
*
44
* Depends on:
55
* tmpl
66
* datastore
7-
*
7+
*
88
* Optional:
99
* extractingDatasource
1010
*/
@@ -17,7 +17,6 @@ $.widget( "ui.grid", {
1717
},
1818
_create: function() {
1919
var that = this;
20-
2120
this._columns();
2221
this._rowTemplate();
2322
this.element.addClass( "ui-widget" );
@@ -27,7 +26,7 @@ $.widget( "ui.grid", {
2726
// TODO add item
2827
});
2928
});
30-
$(this.options.source).bind("datasourceresponse", function() {
29+
$(this.options.source.element).bind("datasourceresponse", function() {
3130
that.refresh();
3231
});
3332
},
@@ -44,7 +43,7 @@ $.widget( "ui.grid", {
4443
tbody.find( "td" ).addClass( "ui-widget-content" );
4544
this._trigger("refresh");
4645
},
47-
46+
4847
_columns: function() {
4948
if ( this.options.columns ) {
5049
// TODO this code assumes any present th is a column header, but it may be a row header

0 commit comments

Comments
 (0)