(bug 40044) make $.tablesorter treat alt attribute like text

Now images in cells will not be ignored when sorting; instead, their alt
attribute will be used for the sort key.

Internal interface changes:
* renamed getElementText() to getElementSortKey() with changes

Change-Id: I3e9898f3424a995507095384e80c8b570da118f0

diff --git a/resources/jquery/jquery.tablesorter.js b/resources/jquery/jquery.tablesorter.js
index 6297f9a..8320304 100644 (file)
--- a/resources/jquery/jquery.tablesorter.js
+++ b/resources/jquery/jquery.tablesorter.js
@@ -86,7 +86,7 @@
                return false;
        }
 
-       function getElementText( node ) {
+       function getElementSortKey( node ) {
                var $node = $( node ),
                        // Use data-sort-value attribute.
                        // Use data() instead of attr() so that live value changes
@@ -98,13 +98,24 @@
                        // like charAt, toLowerCase and split are expected.
                        return String( data );
                } else {
-                       return $node.text();
+                       if ( node.tagName.toLowerCase() === 'img' ) {
+                               return $node.attr( 'alt' ) || ''; // handle undefined alt
+                       } else {
+                               return $.map( $.makeArray( node.childNodes ), function( elem ) {
+                                       // 1 is for document.ELEMENT_NODE (the constant is undefined on old browsers)
+                                       if ( elem.nodeType === 1 ) {
+                                               return getElementSortKey( elem );
+                                       } else {
+                                               return $.text( elem );
+                                       }
+                               } ).join( '' );
+                       }
                }
        }
 
        function getTextFromRowAndCellIndex( rows, rowIndex, cellIndex ) {
                if ( rows[rowIndex] && rows[rowIndex].cells[cellIndex] ) {
-                       return $.trim( getElementText( rows[rowIndex].cells[cellIndex] ) );
+                       return $.trim( getElementSortKey( rows[rowIndex].cells[cellIndex] ) );
                } else {
                        return '';
                }
@@ -205,7 +216,7 @@
                        cache.row.push( $row );
 
                        for ( var j = 0; j < totalCells; ++j ) {
-                               cols.push( parsers[j].format( getElementText( $row[0].cells[j] ), table, $row[0].cells[j] ) );
+                               cols.push( parsers[j].format( getElementSortKey( $row[0].cells[j] ), table, $row[0].cells[j] ) );
                        }
 
                        cols.push( cache.normalized.length ); // add position for rowCache

diff --git a/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js b/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
index 0000f0c..b8d816e 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
+++ b/tests/qunit/suites/resources/jquery/jquery.tablesorter.test.js
@@ -881,4 +881,61 @@
                }
        );
 
+QUnit.test( 'Sorting images using alt text', function ( assert ) {
+       var $table = $(
+               '<table class="sortable">' +
+               '<tr><th>THEAD</th></tr>' +
+               '<tr><td><img alt="2"/></td></tr>' +
+               '<tr><td>1</td></tr>' +
+               '</table>'
+       );
+       $table.tablesorter().find( '.headerSort:eq(0)' ).click();
+
+       assert.equal(
+               $table.find( 'td' ).first().text(),
+               '1',
+               'Applied correct sorting order'
+       );
+} );
+
+QUnit.test( 'Sorting images using alt text (complex)', function ( assert ) {
+       var $table = $(
+               '<table class="sortable">' +
+               '<tr><th>THEAD</th></tr>' +
+               '<tr><td><img alt="D" />A</td></tr>' +
+               '<tr><td>CC</td></tr>' +
+               '<tr><td><a><img alt="A" /></a>F</tr>' +
+               '<tr><td><img alt="A" /><strong>E</strong></tr>' +
+               '<tr><td><strong><img alt="A" />D</strong></tr>' +
+               '<tr><td><img alt="A" />C</tr>' +
+               '</table>'
+       );
+       $table.tablesorter().find( '.headerSort:eq(0)' ).click();
+
+       assert.equal(
+               $table.find( 'td' ).text(),
+               'CDEFCCA',
+               'Applied correct sorting order'
+       );
+} );
+
+QUnit.test( 'Sorting images using alt text (with format autodetection)', function ( assert ) {
+       var $table = $(
+               '<table class="sortable">' +
+               '<tr><th>THEAD</th></tr>' +
+               '<tr><td><img alt="1" />7</td></tr>' +
+               '<tr><td>1<img alt="6" /></td></tr>' +
+               '<tr><td>5</td></tr>' +
+               '<tr><td>4</td></tr>' +
+               '</table>'
+       );
+       $table.tablesorter().find( '.headerSort:eq(0)' ).click();
+
+       assert.equal(
+               $table.find( 'td' ).text(),
+               '4517',
+               'Applied correct sorting order'
+       );
+} );
+
 }( jQuery, mediaWiki ) );