library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Pager-custom-controls: keyboard use changes

Browse Source 
* A pager element must now be focused before keyboard keys work.
* Keyboard keys now include left, right, up, down, pageUp, pageDown,
  home, or end.
* `pageKeyStep` option added. Number of pages to skip with pageUp or pageDown.
This commit is contained in:
Rob Garrison 2016-08-23 22:56:24 -05:00
parent d18d2834ed
commit 6c661919c2
No known key found for this signature in database
GPG Key ID: 0A42D160D71978E1
3 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
beta-testing/example-pager-custom-controls.html
View File

@ -63,9 +63,10 @@
aroundCurrent : 1, // number of pages surrounding the current page
link : '<a href="#">{page}</a>', // page element; use {page} to include the page number
currentClass : 'current', // current page class name
adjacentSpacer : ' | ', // spacer for page numbers next to each other
distanceSpacer : ' \u2026 ', // spacer for page numbers away from each other (ellipsis &amp;hellip;)
addKeyboard : true // add left/right keyboard arrows to change current page
adjacentSpacer : '<span> | </span>', // spacer for page numbers next to each other
distanceSpacer : '<span> &#133; <span>', // spacer for page numbers away from each other (ellipsis = &amp;#133;)
addKeyboard : true, // use left,right,up,down,pageUp,pageDown,home, or end to change current page
pageKeyStep : 10 // page step to use for pageUp and pageDown
});
// initialize tablesorter & pager
@ -97,6 +98,20 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>Modified in <span class="version">v2.27.6</span>
<ul>
<li>Fixed issues with page less than one being shown.</li>
<li>The <code>ends</code> and <code>aroundCurrent</code> works properly when values are set to zero.</li>
<li>Modified <code>adjacentSpacer</code> and <code>distanceSpacer</code> to include surrounding span element.</li>
<li>Using the keyboard has changed!
<ul>
<li><span class="label warning">NOTE</span> The keyboard keys will only work IF a pager element has focus.</li>
<li>The <code>addKeyboard</code> function now includes <kbd>left</kbd>, <kbd>right</kbd>, <kbd>up</kbd>, <kbd>down</kbd>, <kbd>pageUp</kbd>, <kbd>pageDown</kbd>, <kbd>Home</kbd> and <kbd>End</kbd>.</li>
<li>A new <code>pageKeyStep</code> option was added to allow setting the number of pages to skip on <kbd>pageUp</kbd> or <kbd>pageDown</kbd>.</li>
</ul>
</li>
</ul>
</li>
<li>Modified in <span class="version">v2.17.1</span> to properly work with either the pager addon or pager widget.</li>
<li>In <span class="version">v2.16.4</span>, code was updated to correctly count process pages.</li>
</ul>

40
beta-testing/pager-custom-controls.js
View File

@ -29,7 +29,8 @@ $.tablesorter.customPagerControls = function(settings) {
currentClass : 'current', // current page class name
adjacentSpacer : '<span> | </span>', // spacer for page numbers next to each other
distanceSpacer : '<span> &#133; <span>', // spacer for page numbers away from each other (ellipsis)
addKeyboard : true // add left/right keyboard arrows to change current page
addKeyboard : true, // use left,right,up,down,pageUp,pageDown,home, or end to change current page
pageKeyStep : 10 // page step to use for pageUp and pageDown
},
options = $.extend({}, defaults, settings),
$table = $(options.table),
@ -84,7 +85,9 @@ $.tablesorter.customPagerControls = function(settings) {
}
$pager
.find('.pagecount')
.html(pages.html());
.html(pages.html())
.find('.' + options.currentClass)
.focus();
});
// set up pager controls
@ -113,23 +116,26 @@ $.tablesorter.customPagerControls = function(settings) {
if (options.addKeyboard) {
$(document).on('keydown', function(events) {
// ignore arrows inside form elements
if (/input|select|textarea/i.test(events.target.nodeName)) {
if (/input|select|textarea/i.test(events.target.nodeName) ||
!(events.which > 32 && events.which < 41)) {
return;
}
if (events.which === 37) {
// left
$pager
.find(options.currentPage)
.filter('.' + options.currentClass)
.prevAll(':not(span):first')
.click();
} else if (events.which === 39) {
// right
$pager
.find(options.currentPage)
.filter('.' + options.currentClass)
.nextAll(':not(span):first')
.click();
// only allow keyboard use if element inside of pager is focused
if ($(document.activeElement).closest(options.pager).is($pager)) {
events.preventDefault();
var key = events.which,
max = $table[0].config.totalRows,
$el = $pager.find(options.currentPage).filter('.' + options.currentClass),
page = $el.length ? parseInt($el.attr('data-page'), 10) : null;
if (page) {
if (key === 33) { page -= options.pageKeyStep; } // pageUp
if (key === 34) { page += options.pageKeyStep; } // pageDown
if (key === 35) { page = max; } // end
if (key === 36) { page = 1; } // home
if (key === 37 || key === 38) { page -= 1; } // left/up
if (key === 39 || key === 40) { page += 1; } // right/down
$table.trigger('pageSet', page);
}
}
});
}

5
docs/js/docs.js
View File

@ -5,13 +5,14 @@
var $t, t, v, animating, clicked,
cleanupCode = function(code){
return code.replace(/[<>\"\'\t\n]/g, function(m) { return {
return code.replace(/([<>\"\'\t\n]|&#133;)/g, function(m) { return {
'<' : '&lt;',
'>' : '&gt;',
"'" : '&#39;',
'"' : '&quot;',
'\t': ' ',
'\n': '<br/>' // needed for IE
'\n': '<br/>', // needed for IE
'&#133;' : '&amp;#133;' // pager custom controls ellipsis
}[m];});
};