Added default sort option to data view. Improved buttons.

js/h5p-data-view.js

@@ -32,8 +32,9 @@ var H5PDataView = (function ($) {
    *   search in column 2.
    * @param {Function} loaded
    *   Callback for when data has been loaded.
+   * @param {Object} order
    */
-  function H5PDataView(container, source, headers, l10n, classes, filters, loaded) {
+  function H5PDataView(container, source, headers, l10n, classes, filters, loaded, order) {
     var self = this;
 
     self.$container = $(container).addClass('h5p-data-view').html('');
@@ -44,6 +45,7 @@ var H5PDataView = (function ($) {
     self.classes = (classes === undefined ? {} : classes);
     self.filters = (filters === undefined ? [] : filters);
     self.loaded = loaded;
+    self.order = order;
 
     self.limit = 20;
     self.offset = 0;
@@ -68,8 +70,8 @@ var H5PDataView = (function ($) {
     url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + self.offset + '&limit=' + self.limit;
 
     // Add sorting
-    if (self.sortBy !== undefined && self.sortDir !== undefined) {
-      url += '&sortBy=' + self.sortBy + '&sortDir=' + self.sortDir;
+    if (self.order !== undefined) {
+      url += '&sortBy=' + self.order.by + '&sortDir=' + self.order.dir;
     }
 
     // Add filters
@@ -144,12 +146,11 @@ var H5PDataView = (function ($) {
 
       // Create new table
       self.table = new H5PUtils.Table(self.classes, self.headers);
-      self.table.setHeaders(self.headers, function (col, dir) {
-        // Sorting column or direction has changed callback.
-        self.sortBy = col;
-        self.sortDir = dir;
+      self.table.setHeaders(self.headers, function (order) {
+        // Sorting column or direction has changed.
+        self.order = order;
         self.loadData();
-      });
+      }, self.order);
       self.table.appendTo(self.$container);
     }
 

js/h5p-utils.js

@@ -182,18 +182,30 @@ var H5PUtils = H5PUtils || {};
         if (sortByCol !== undefined && col.sortable === true) {
           // Make sortable
           options.role = 'button';
-          options.tabIndex = 1;
+          options.tabIndex = 0;
 
           // This is the first sortable column, use as default sort
           if (sortCol === undefined) {
             sortCol = id;
             sortDir = 0;
+          }
+
+          // This is the sort column
+          if (sortCol === id) {
             options['class'] = 'h5p-sort';
+            if (sortDir === 1) {
+              options['class'] += ' h5p-reverse';
+            }
           }
 
           options.on.click = function () {
             sort($th, id);
           };
+          options.on.keypress = function (event) {
+            if ((event.charCode || event.keyCode) === 32) { // Space
+              sort($th, id);
+            }
+          };
         }
       }
 
@@ -232,7 +244,10 @@ var H5PUtils = H5PUtils || {};
         sortDir = 0;
       }
 
-      sortByCol(sortCol, sortDir);
+      sortByCol({
+        by: sortCol,
+        dir: sortDir
+      });
     };
 
     /**
@@ -244,11 +259,17 @@ var H5PUtils = H5PUtils || {};
      *   "text" and "sortable". E.g.
      *   [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
      * @param {Function} sort Callback which is runned when sorting changes
+     * @param {Object} [order]
      */
-    this.setHeaders = function (cols, sort) {
+    this.setHeaders = function (cols, sort, order) {
       numCols = cols.length;
       sortByCol = sort;
 
+      if (order) {
+        sortCol = order.by;
+        sortDir = order.dir;
+      }
+
       // Create new head
       var $newThead = $('<thead/>');
       var $tr = $('<tr/>').appendTo($newThead);