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

32
docs/index.html
View File

@ -297,7 +297,7 @@
});</pre> });</pre>
<p class="tip"> <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> <p>
<a id="Examples"></a> <a id="Examples"></a>
@ -5737,14 +5737,15 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
<tr id="variable-language"> <tr id="variable-language">
<td><a href="#" class="permalink">$.tablesorter.language</a></td> <td><a href="#" class="permalink">$.tablesorter.language</a></td>
<td>Object</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"> <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: This is how the object is set up:
<pre class="prettyprint lang-js">$.tablesorter.language = { <pre class="prettyprint lang-js">$.tablesorter.language = {
sortAsc : 'Ascending sort applied, ', sortAsc : 'Ascending sort applied, ',
sortDesc : 'Descending sort applied, ', sortDesc : 'Descending sort applied, ',
sortNone : 'No sort applied, ', sortNone : 'No sort applied, ',
sortDisabled : 'sorting is disabled', // added v2.24.4
nextAsc : 'activate to apply an ascending sort', nextAsc : 'activate to apply an ascending sort',
nextDesc : 'activate to apply a descending sort', nextDesc : 'activate to apply a descending sort',
nextNone : 'activate to remove the sort' nextNone : 'activate to remove the sort'
@ -5765,22 +5766,28 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
"Account #: Ascending sort applied, activate to apply a descending sort"</pre> "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> 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> <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: Use this variable to change the language as follows:
<pre class="prettyprint lang-js">$(function(){ <pre class="prettyprint lang-js">$(function(){
$.tablesorter.language = { $.tablesorter.language = {
sortAsc : "sorting from a to z, ", sortAsc : 'sorting from a to z, ',
sortDesc : "sorting from z to a, ", sortDesc : 'sorting from z to a, ',
sortNone : "not sorted, but ", sortNone : 'not sorted, but ',
nextAsc : "click to sort from a to z", sortDisabled : 'sorting is disabled',
nextDesc : "click to sort from z to a", nextAsc : 'click to sort from a to z',
nextNone : "click to clear the sort" nextDesc : 'click to sort from z to a',
nextNone : 'click to clear the sort'
} }
$("table").tablesorter(); $('table').tablesorter();
});</pre> });</pre>
</div> </div>
</td> </td>
<td></td> <td>
<a href="example-widget-header-titles.html">1</a>
</td>
</tr> </tr>
<tr id="variable-instanceMethods"> <tr id="variable-instanceMethods">
<td><a href="#" class="permalink">$.tablesorter.instanceMethods</a></td> <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/thezoggy">thezoggy</a></li>
<li><a href="https://github.com/TheSin-">TheSin-</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/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> <li>and <a href="https://github.com/Mottie/tablesorter/graphs/contributors">all the contributors</a>!</li>
</ul> </ul>
<p> <p>

65
js/jquery.tablesorter.js
View File

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