PDA

View Full Version : PagingToolbar keyboard navigation enhancement



JeffHowden
22 Feb 2007, 2:30 AM
In PagingToolbar.js:

Updated the following (line 41):


this.field.on("keydown", this.onEnter, this);

to:


this.field.on("keydown", this.onPagingKeydown, this);

Replaced the onEnter() method with this:



onPagingKeydown : function(e){
if(e.getKey() == e.RETURN){
var d = this.getPageData();
var v = this.field.dom.value, pageNum;
if(!v || isNaN(pageNum = parseInt(v, 10))){
this.field.dom.value = d.activePage;
return;
}
pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
e.stopEvent();
}
else if(e.getKey() == e.HOME || (e.getKey() == e.UP && e.ctrlKey) || (e.getKey() == e.PAGEUP && e.ctrlKey) || (e.getKey() == e.RIGHT && e.ctrlKey) || e.getKey() == e.END || (e.getKey() == e.DOWN && e.ctrlKey) || (e.getKey() == e.LEFT && e.ctrlKey) || (e.getKey() == e.PAGEDOWN && e.ctrlKey))
{
var d = this.getPageData();
var pageNum = (e.getKey() == e.HOME || (e.getKey() == e.DOWN && e.ctrlKey) || (e.getKey() == e.LEFT && e.ctrlKey) || (e.getKey() == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
this.field.dom.value = pageNum;
this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
e.stopEvent();
}
else if(e.getKey() == e.UP || e.getKey() == e.RIGHT || e.getKey() == e.PAGEUP || e.getKey() == e.DOWN || e.getKey() == e.LEFT || e.getKey() == e.PAGEDOWN)
{
var d = this.getPageData();
var v = this.field.dom.value, pageNum;
var increment = (e.shiftKey) ? 10 : 1;
if(e.getKey() == e.DOWN || e.getKey() == e.LEFT || e.getKey() == e.PAGEDOWN)
increment *= -1;
if(!v || isNaN(pageNum = parseInt(v, 10))) {
this.field.dom.value = d.activePage;
return;
}
else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
{
this.field.dom.value = parseInt(v, 10) + increment;
pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
}
e.stopEvent();
}
},


What it do, you ask? Well, in short, it adds additional paging navigation via the keyboard when the input field has focus. The following is an approximate breakdown:


HOME moves to the first page
PAGEDOWN or DOWN or LEFT with the CTRL key pressed moves to the first page
PAGEDOWN or DOWN or LEFT with the SHIFT key pressed decrement the page number by 10
PAGEDOWN or DOWN or LEFT decrement the page number by 1
PAGEUP or UP or RIGHT increment the page number by 1
PAGEUP or UP or RIGHT with the SHIFT key pressed increment the page number by 10
PAGEUP or UP or RIGHT with the CTRL key pressed moves to the last pageEND moves to the last page

The code is moderately tested, meaning I used the paging.html example as my implementation and tested it in IE6 and Firefox 2.0.[/list]

jack.slocum
22 Feb 2007, 2:40 AM
Thank Jeff. I like it. I added it in with a few tweaks (like using local variables ;)).