Merge pull request #79 from visionappscz/feature/make-sortable-table-…

…lang-aware

Make sortable-table use locale aware sorting if supported

src/js/ckeditor-loader.js

@@ -7,7 +7,7 @@
   (function ($, window) {
     // We have to use $(winodow).load() as $(document).ready() can not be triggered manually
     // and thus it would make it impossible to test this part of the code.
-    $(window).load(function () {
+    $(window).on('load', function () {
       $('[data-onload-ckeditor]').each(function () {
         var language = $('html').attr('lang');
         var confObj = {};

src/js/datetimepicker-loader.js

@@ -16,7 +16,7 @@
 
   // We have to use $(winodow).load() as $(document).ready() can not be triggered manually
   // and thus it would make it impossible to test this part of the code.
-  $(window).load(function () {
+  $(window).on('load', function () {
     var initComponentFn = function (inlineConf) {
       var datetimePickerLoader = new DatetimePickerLoader($(this));
       var conf = {

src/js/disable.js

@@ -51,7 +51,7 @@
   (function (Plugin, $, window) {
     // We have to use $(window).load() as $(document).ready() can not be triggered manually
     // and thus it would make it impossible to test this part of the code.
-    $(window).load(function () {
+    $(window).on('load', function () {
       var $controls = $('[data-toggle=disable]');
 
       $controls.each(function () {

src/js/filterable.js

@@ -139,7 +139,7 @@
   var lastEventTarget;
   var lastEventValue;
 
-  $(window).load(function () {
+  $(window).on('load', function () {
     $.each($('form'), function () {
       var $this = $(this);
       var filterData;

src/js/select2-loader.js

@@ -7,7 +7,7 @@
   (function ($, window) {
     // We have to use $(winodow).load() as $(document).ready() can not be triggered manually
     // and thus it would make it impossible to test this part of the code.
-    $(window).load(function () {
+    $(window).on('load', function () {
       $('[data-onload-select2]').each(function () {
         var confObj = {};
         var $this = $(this);

src/js/sortable-table.js

@@ -98,7 +98,13 @@
       if ($.isNumeric(valA) && $.isNumeric(valB)) {
         result = valA - valB;
       } else {
-        result = valA.localeCompare(valB);
+        try {
+          result = valA.localeCompare(valB, $('html').attr('lang'));
+        } catch (err) {
+          if (err instanceof RangeError) {
+            result = valA.localeCompare(valB);
+          }
+        }
       }
 
       return sortDir === 'desc' ? result * -1 : result;
@@ -162,7 +168,7 @@
 
     // We have to use $(winodow).load() as $(document).ready() can not be triggered manually
     // and thus it would make it impossible to test this part of the code.
-    $(window).load(function () {
+    $(window).on('load', function () {
       var $sortedTh = $('th[data-sort-onload]');
       $sortedTh.each(function (i) {
         var $sortedTable = $($sortedTh[i]).closest('table');

src/js/tests/unit/select2-loader.js

@@ -66,7 +66,7 @@ $(function () {
     }));
 
     QUnit.ok(jQuery.fn.select2 .calledWithMatch(function (value) {
-      var testOpt = { element: $('option'), text: 'optionText' };
+      var testOpt = { element: $('<option></option>'), text: 'optionText' };
 
       return value.formatResult(testOpt) === 'optionText';
     }));

src/js/tests/unit/sortable-table.js

@@ -17,6 +17,7 @@ $(function () {
     teardown: function () {
       $.fn.sortableTable = $.fn.buiSortableTable;
       delete $.fn.buiSortableTable;
+      $('html').attr('lang', null);
     },
   });
 
@@ -447,6 +448,71 @@ $(function () {
     }
   );
 
+  QUnit.test('should sort with invalid html language', function () {
+    var $table = $('<table>' +
+      '<tbody>' +
+      '<thead><tr><th id="headerA">HeaderA</th></tr></thead>' +
+      '<tr id="row1"><td>šb</td></tr>' +
+      '<tr id="row2"><td>sa</td></tr>' +
+      '<tr id="row3"><td>sc</td></tr>' +
+      '</tbody>' +
+      '</table>');
+
+    QUnit.stop();
+    $('html').attr('lang', 'some-invalid-language-code');
+    $table.on('sorted.bui.sortableTable', function () {
+      var $rows = $(this).find('tbody tr');
+      $(this).off('sorted.bui.sortableTable');
+      QUnit.ok($($rows[0]).attr('id') === 'row2');
+      QUnit.ok($($rows[1]).attr('id') === 'row1');
+      QUnit.ok($($rows[2]).attr('id') === 'row3');
+      QUnit.start();
+    })
+    .buiSortableTable({ 'sorted-th': $(this).find('#headerA'), 'sort-direction': 'asc' });
+  });
+
+  QUnit.test('should sort based on html language ', function () {
+    var $table = $('<table>' +
+      '<tbody>' +
+      '<thead><tr><th id="headerA">HeaderA</th></tr></thead>' +
+      '<tr id="row1"><td>šb</td></tr>' +
+      '<tr id="row2"><td>sa</td></tr>' +
+      '<tr id="row3"><td>sc</td></tr>' +
+      '</tbody>' +
+      '</table>');
+
+    QUnit.stop();
+    $('html').attr('lang', 'cs');
+    $table.on('sorted.bui.sortableTable', function () {
+      var $rows = $(this).find('tbody tr');
+      var validateNoLocale = function ($rows) {
+        QUnit.ok($($rows[0]).attr('id') === 'row2');
+        QUnit.ok($($rows[1]).attr('id') === 'row1');
+        QUnit.ok($($rows[2]).attr('id') === 'row3');
+      };
+
+      $(this).off('sorted.bui.sortableTable');
+
+      // Test should pass regardless weather browser supports locales
+      // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare#Check_browser_support_for_extended_arguments
+      try {
+        'foo'.localeCompare('bar', 'i');
+        validateNoLocale($rows);
+      } catch (err) {
+        if (err instanceof RangeError) {
+          QUnit.ok($($rows[0]).attr('id') === 'row2');
+          QUnit.ok($($rows[1]).attr('id') === 'row3');
+          QUnit.ok($($rows[2]).attr('id') === 'row1');
+        } else {
+          validateNoLocale($rows);
+        }
+      }
+
+      QUnit.start();
+    })
+    .buiSortableTable({ 'sorted-th': $(this).find('#headerA'), 'sort-direction': 'asc' });
+  });
+
   // Data-api tests
   // ==============
   QUnit.test('should order table by the column whoms <th> element was clicked', function () {

src/less/components/javascript/sortable-table.less

@@ -1,8 +1,11 @@
 /*
 Sortable Table
 
-Provides client-side sorting functionality. To ensure keyboard accessibility, remember to add `tabindex="0"` to all
-sortable column headers.
+Provides client-side sorting functionality. If browser supports language argument to the
+`String.prototype.localeCompare()` function, the ordering will be locale aware.
+If the argument is not supported or if the supplied argument is not a valid locale the ordering will not be locale aware.
+
+To ensure keyboard accessibility, remember to add `tabindex="0"` to all sortable column headers.
 
 If a given cell has the attribute `data-sort-value="someValue"` specified, the value of this element is used as
 opposed to the value of the cell.