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

Core: Add sortDisabled language setting; used in aria-labels

Browse Source
This commit is contained in:
Rob Garrison 2015-11-08 08:36:13 -06:00
parent 9607fed175
commit 9bf590edb8
2 changed files with 80 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
docs/index.html
View File

@ -297,7 +297,7 @@
});</pre>
<p class="tip">
<span class="label label-info">NOTE!</span> tablesorter will auto-detect most data types including numbers, dates, ip-adresses for more information see <a href="#Examples">Examples</a>
<span class="label label-info">NOTE!</span> tablesorter will auto-detect most data types including numbers, dates, ip-addresses for more information see <a href="#Examples">Examples</a>
<p>
<a id="Examples"></a>
@ -5737,17 +5737,18 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
<tr id="variable-language">
<td><a href="#" class="permalink">$.tablesorter.language</a></td>
<td>Object</td>
<td>This object contains the phrases (in English by default) added to the <code>aria-label</code> on each header column.<br>
<td>This object contains the phrases (in English by default) added to the <code>aria-label</code> on each header column (<span class="version updated">v2.24.4</span>).
<div class="collapsible">
<br>
<p>In <span class="version updated">v2.24.4</span>, <code>sortDisabled</code> was added to the language settings. It is added to disabled columns which may have a sort applied; so, instead of "nextAsc", "nextDesc" or "nextNone" being appended to the sort message, the "sortDisabled" content is added.</p>
This is how the object is set up:
<pre class="prettyprint lang-js">$.tablesorter.language = {
sortAsc : 'Ascending sort applied, ',
sortDesc : 'Descending sort applied, ',
sortNone : 'No sort applied, ',
nextAsc : 'activate to apply an ascending sort',
nextDesc : 'activate to apply a descending sort',
nextNone : 'activate to remove the sort'
sortAsc : 'Ascending sort applied, ',
sortDesc : 'Descending sort applied, ',
sortNone : 'No sort applied, ',
sortDisabled : 'sorting is disabled', // added v2.24.4
nextAsc : 'activate to apply an ascending sort',
nextDesc : 'activate to apply a descending sort',
nextNone : 'activate to remove the sort'
};</pre>
So, as an example, in the following situation:
<ul>
@ -5765,22 +5766,28 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
"Account #: Ascending sort applied, activate to apply a descending sort"</pre>
If the next click were to reset the sort (<code>sortReset</code> applied), then the message would use <code>$.tablesorter.language.nextNone</code>.<br>
<br>
In <span class="version updated">v2.24.4</span>, if sorting is disabled but the column has a sort applied, the label will be built as follows:
<pre class="prettyprint lang-js">// "Header Name" + $.tablesorter.language.sortDesc + $.tablesorter.language.sortDisabled
"Account #: Descending sort applied, sorting is disabled"</pre>
Use this variable to change the language as follows:
<pre class="prettyprint lang-js">$(function(){
$.tablesorter.language = {
sortAsc : "sorting from a to z, ",
sortDesc : "sorting from z to a, ",
sortNone : "not sorted, but ",
nextAsc : "click to sort from a to z",
nextDesc : "click to sort from z to a",
nextNone : "click to clear the sort"
sortAsc : 'sorting from a to z, ',
sortDesc : 'sorting from z to a, ',
sortNone : 'not sorted, but ',
sortDisabled : 'sorting is disabled',
nextAsc : 'click to sort from a to z',
nextDesc : 'click to sort from z to a',
nextNone : 'click to clear the sort'
}
$("table").tablesorter();
$('table').tablesorter();
});</pre>
</div>
</td>
<td></td>
<td>
<a href="example-widget-header-titles.html">1</a>
</td>
</tr>
<tr id="variable-instanceMethods">
<td><a href="#" class="permalink">$.tablesorter.instanceMethods</a></td>
@ -7453,7 +7460,8 @@ $.tablesorter.addHeaderResizeEvent( table, true );</pre>
<li><a href="https://github.com/thezoggy">thezoggy</a></li>
<li><a href="https://github.com/TheSin-">TheSin-</a></li>
<li><a href="https://github.com/NickCraver">NickCraver</a></li>
<li><a href="https://github.com/prijutme4ty">prijutme4ty</a></li>
<li><a href="https://github.com/themilkman"themilkman</a> (maintains <a href="https://github.com/themilkman/jquery-tablesorter-rails">jquery-tablesorter-rails</a>)</li>
<li><a href="https://github.com/VorontsovIE">VorontsovIE</a></li>
<li>and <a href="https://github.com/Mottie/tablesorter/graphs/contributors">all the contributors</a>!</li>
</ul>
<p>

95
js/jquery.tablesorter.js
View File

@ -139,12 +139,13 @@
// labels applied to sortable headers for accessibility (aria) support
language : {
sortAsc : 'Ascending sort applied, ',
sortDesc : 'Descending sort applied, ',
sortNone : 'No sort applied, ',
nextAsc : 'activate to apply an ascending sort',
nextDesc : 'activate to apply a descending sort',
nextNone : 'activate to remove the sort'
sortAsc : 'Ascending sort applied, ',
sortDesc : 'Descending sort applied, ',
sortNone : 'No sort applied, ',
sortDisabled : 'sorting is disabled',
nextAsc : 'activate to apply an ascending sort',
nextDesc : 'activate to apply a descending sort',
nextNone : 'activate to remove the sort'
},
regex : {
@ -993,7 +994,7 @@
▀████▀ ██ █████▀ ██ ██ ██ ██████
*/
setHeadersCss : function( c ) {
var $sorted, header, indx, column, $header, nextSort, txt, tmp,
var $sorted, indx, column,
list = c.sortList,
len = list.length,
none = ts.css.sortNone + ' ' + c.cssNone,
@ -1061,50 +1062,62 @@
}
// add verbose aria labels
len = c.$headers.length;
$headers = c.$headers.not( '.sorter-false' );
for ( indx = 0; indx < len; indx++ ) {
$header = $headers.eq( indx );
if ( $header.length ) {
header = $headers[ indx ];
column = parseInt( $header.attr( 'data-column' ), 10 );
nextSort = c.sortVars[ column ].order[ ( c.sortVars[ column ].count + 1 ) % ( c.sortReset ? 3 : 2 ) ];
ts.setColumnAriaLabel( c, c.$headers.eq( indx ) );
}
},
// nextSort (optional), lets you disable next sort text
setColumnAriaLabel : function( c, $header, nextSort ) {
if ( $header.length ) {
var column = parseInt( $header.attr( 'data-column' ), 10 ),
tmp = $header.hasClass( ts.css.sortAsc ) ?
'sortAsc' :
$header.hasClass( ts.css.sortDesc ) ? 'sortDesc' : 'sortNone';
txt = $.trim( $header.text() ) + ': ' +
ts.language[ tmp ] +
ts.language[ nextSort === 0 ? 'nextAsc' : nextSort === 1 ? 'nextDesc' : 'nextNone' ];
$header.attr( 'aria-label', txt );
$header.hasClass( ts.css.sortDesc ) ? 'sortDesc' : 'sortNone',
txt = $.trim( $header.text() ) + ': ' + ts.language[ tmp ];
if ( $header.hasClass( 'sorter-false' ) || nextSort === false ) {
txt += ts.language.sortDisabled;
} else {
nextSort = c.sortVars[ column ].order[ ( c.sortVars[ column ].count + 1 ) % ( c.sortReset ? 3 : 2 ) ];
// if nextSort
txt += ts.language[ nextSort === 0 ? 'nextAsc' : nextSort === 1 ? 'nextDesc' : 'nextNone' ];
}
$header.attr( 'aria-label', txt );
}
},
updateHeader : function( c ) {
var index, isDisabled, $th, col,
var index, isDisabled, $header, col,
table = c.table,
len = c.$headers.length;
for ( index = 0; index < len; index++ ) {
$th = c.$headers.eq( index );
$header = c.$headers.eq( index );
col = ts.getColumnData( table, c.headers, index, true );
// add 'sorter-false' class if 'parser-false' is set
isDisabled = ts.getData( $th, col, 'sorter' ) === 'false' || ts.getData( $th, col, 'parser' ) === 'false';
$th[ 0 ].sortDisabled = isDisabled;
$th[ isDisabled ? 'addClass' : 'removeClass' ]( 'sorter-false' ).attr( 'aria-disabled', '' + isDisabled );
// disable tab index on disabled cells
if ( c.tabIndex ) {
if ( isDisabled ) {
$th.removeAttr( 'tabindex' );
} else {
$th.attr( 'tabindex', '0' );
}
isDisabled = ts.getData( $header, col, 'sorter' ) === 'false' || ts.getData( $header, col, 'parser' ) === 'false';
ts.setColumnSort( c, $header, isDisabled );
}
},
setColumnSort : function( c, $header, isDisabled ) {
var id = c.table.id;
$header[ 0 ].sortDisabled = isDisabled;
$header[ isDisabled ? 'addClass' : 'removeClass' ]( 'sorter-false' )
.attr( 'aria-disabled', '' + isDisabled );
// disable tab index on disabled cells
if ( c.tabIndex ) {
if ( isDisabled ) {
$header.removeAttr( 'tabindex' );
} else {
$header.attr( 'tabindex', '0' );
}
// aria-controls - requires table ID
if ( table.id ) {
if ( isDisabled ) {
$th.removeAttr( 'aria-controls' );
} else {
$th.attr( 'aria-controls', table.id );
}
}
// aria-controls - requires table ID
if ( id ) {
if ( isDisabled ) {
$header.removeAttr( 'aria-controls' );
} else {
$header.attr( 'aria-controls', id );
}
}
},
@ -2166,14 +2179,14 @@
// *** Process table ***
// add processing indicator
isProcessing : function( $table, toggle, $ths ) {
isProcessing : function( $table, toggle, $headers ) {
$table = $( $table );
var c = $table[ 0 ].config,
// default to all headers
$header = $ths || $table.find( '.' + ts.css.header );
$header = $headers || $table.find( '.' + ts.css.header );
if ( toggle ) {
// don't use sortList if custom $ths used
if ( typeof $ths !== 'undefined' && c.sortList.length > 0 ) {
// don't use sortList if custom $headers used
if ( typeof $headers !== 'undefined' && c.sortList.length > 0 ) {
// get headers from the sortList
$header = $header.filter( function() {
// get data-column from attr to keep compatibility with jQuery 1.2.6