EDUCATIC
/
h5p-php-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added default sort option to data view. Improved buttons.

d6
Frode Petterson 2015-03-11 11:40:07 +01:00
parent efd79c9e79
commit 7ef9ffbf1f
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
js/h5p-data-view.js
View File

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

27
js/h5p-utils.js
View File

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