Added support for sorting.
parent
c6f92ea49b
commit
9ef34c2119
|
@ -41,6 +41,11 @@ var H5PDataView = (function ($) {
|
||||||
var url = self.source;
|
var url = self.source;
|
||||||
url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + self.offset + '&limit=' + self.limit;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
// Add filters
|
// Add filters
|
||||||
for (var i = 0; i < self.filterOn.length; i++) {
|
for (var i = 0; i < self.filterOn.length; i++) {
|
||||||
if (self.filterOn[i] === undefined) {
|
if (self.filterOn[i] === undefined) {
|
||||||
|
@ -106,6 +111,12 @@ 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) {
|
||||||
|
// Sorting column or direction has changed callback.
|
||||||
|
self.sortBy = col;
|
||||||
|
self.sortDir = dir;
|
||||||
|
self.loadData();
|
||||||
|
});
|
||||||
self.table.appendTo(self.$container);
|
self.table.appendTo(self.$container);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
110
js/h5p-utils.js
110
js/h5p-utils.js
|
@ -133,27 +133,117 @@ var H5PUtils = H5PUtils || {};
|
||||||
/**
|
/**
|
||||||
* Generic table class with useful helpers.
|
* Generic table class with useful helpers.
|
||||||
*
|
*
|
||||||
|
* @class
|
||||||
* @param {Object} classes to use for styling
|
* @param {Object} classes to use for styling
|
||||||
* @param {Array} cols headers
|
* @param {Array} cols headers
|
||||||
*/
|
*/
|
||||||
H5PUtils.Table = function (classes, cols) {
|
H5PUtils.Table = function (classes) {
|
||||||
// Create basic table
|
// Create basic table
|
||||||
var tableOptions = {};
|
var tableOptions = {};
|
||||||
if (classes.table !== undefined) {
|
if (classes.table !== undefined) {
|
||||||
tableOptions['class'] = classes.table;
|
tableOptions['class'] = classes.table;
|
||||||
}
|
}
|
||||||
|
var numCols;
|
||||||
|
var sortByCol;
|
||||||
|
var $sortCol;
|
||||||
|
var sortCol;
|
||||||
|
var sortDir;
|
||||||
|
|
||||||
var $table = $('<table/>', tableOptions);
|
var $table = $('<table/>', tableOptions);
|
||||||
var $thead = $('<thead/>').appendTo($table);
|
var $thead = $('<thead/>').appendTo($table);
|
||||||
var $tfoot = $('<tfoot/>').appendTo($table);
|
var $tfoot = $('<tfoot/>').appendTo($table);
|
||||||
var $tbody = $('<tbody/>').appendTo($table);
|
var $tbody = $('<tbody/>').appendTo($table);
|
||||||
|
|
||||||
// Set cols - create header
|
/**
|
||||||
var $tr = $('<tr/>').appendTo($thead);
|
* Add columns to given table row.
|
||||||
for (var i = 0; i < cols.length; i++) {
|
*
|
||||||
$('<th>', {
|
* @private
|
||||||
html: cols[i]
|
*
|
||||||
}).appendTo($tr);
|
*/
|
||||||
}
|
var addCol = function ($tr, col, id) {
|
||||||
|
var options = {
|
||||||
|
on: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!(col instanceof Object)) {
|
||||||
|
options.text = col;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
options.text = col.text;
|
||||||
|
|
||||||
|
if (sortByCol !== undefined && col.sortable === true) {
|
||||||
|
// Make sortable
|
||||||
|
options.role = 'button';
|
||||||
|
options.tabIndex = 1;
|
||||||
|
|
||||||
|
// This is the first sortable column, use as default sort
|
||||||
|
if (sortCol === undefined) {
|
||||||
|
sortCol = id;
|
||||||
|
sortDir = 0;
|
||||||
|
options['class'] = 'h5p-sort';
|
||||||
|
}
|
||||||
|
|
||||||
|
options.on.click = function () {
|
||||||
|
sort($th, id);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append
|
||||||
|
var $th = $('<th>', options).appendTo($tr);
|
||||||
|
if (sortCol === id) {
|
||||||
|
$sortCol = $th; // Default sort column
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
var sort = function ($th, id) {
|
||||||
|
if (id === sortCol) {
|
||||||
|
// Change sorting direction
|
||||||
|
if (sortDir === 0) {
|
||||||
|
sortDir = 1;
|
||||||
|
$th.addClass('h5p-reverse');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
sortDir = 0;
|
||||||
|
$th.removeClass('h5p-reverse');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Change sorting column
|
||||||
|
$sortCol.removeClass('h5p-sort').removeClass('h5p-reverse');
|
||||||
|
$sortCol = $th.addClass('h5p-sort');
|
||||||
|
sortCol = id;
|
||||||
|
sortDir = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
sortByCol(sortCol, sortDir);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set headers
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
* @param {Array} cols
|
||||||
|
* @param {Function} sort callback when sorting changes
|
||||||
|
*/
|
||||||
|
this.setHeaders = function (cols, sort) {
|
||||||
|
numCols = cols.length;
|
||||||
|
sortByCol = sort;
|
||||||
|
|
||||||
|
// Create new head
|
||||||
|
var $newThead = $('<thead/>');
|
||||||
|
var $tr = $('<tr/>').appendTo($newThead);
|
||||||
|
for (var i = 0; i < cols.length; i++) {
|
||||||
|
addCol($tr, cols[i], i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update DOM
|
||||||
|
$thead.replaceWith($newThead);
|
||||||
|
$thead = $newThead;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Public.
|
* Public.
|
||||||
|
@ -186,7 +276,7 @@ var H5PUtils = H5PUtils || {};
|
||||||
var $newTbody = $('<tbody/>');
|
var $newTbody = $('<tbody/>');
|
||||||
var $tr = $('<tr/>').appendTo($newTbody);
|
var $tr = $('<tr/>').appendTo($newTbody);
|
||||||
$('<td>', {
|
$('<td>', {
|
||||||
colspan: cols.length
|
colspan: numCols
|
||||||
}).append($content).appendTo($tr);
|
}).append($content).appendTo($tr);
|
||||||
$tbody.replaceWith($newTbody);
|
$tbody.replaceWith($newTbody);
|
||||||
$tbody = $newTbody;
|
$tbody = $newTbody;
|
||||||
|
@ -201,7 +291,7 @@ var H5PUtils = H5PUtils || {};
|
||||||
var $newTfoot = $('<tfoot/>');
|
var $newTfoot = $('<tfoot/>');
|
||||||
var $tr = $('<tr/>').appendTo($newTfoot);
|
var $tr = $('<tr/>').appendTo($newTfoot);
|
||||||
$('<td>', {
|
$('<td>', {
|
||||||
colspan: cols.length
|
colspan: numCols
|
||||||
}).append($content).appendTo($tr);
|
}).append($content).appendTo($tr);
|
||||||
$tfoot.replaceWith($newTfoot);
|
$tfoot.replaceWith($newTfoot);
|
||||||
};
|
};
|
||||||
|
|
|
@ -258,3 +258,24 @@ button.h5p-admin.disabled:hover {
|
||||||
.h5p-data-view input[type="text"] {
|
.h5p-data-view input[type="text"] {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
.h5p-data-view th[role="button"] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.h5p-data-view th[role="button"].h5p-sort:after,
|
||||||
|
.h5p-data-view th[role="button"]:hover:after,
|
||||||
|
.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:hover:after {
|
||||||
|
content: "\25BE";
|
||||||
|
position: relative;
|
||||||
|
left: 0.5em;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:after,
|
||||||
|
.h5p-data-view th[role="button"].h5p-sort:hover:after {
|
||||||
|
content: "\25B4";
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
.h5p-data-view th[role="button"]:hover:after,
|
||||||
|
.h5p-data-view th[role="button"].h5p-sort.h5p-reverse:hover:after,
|
||||||
|
.h5p-data-view th[role="button"].h5p-sort:hover:after {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue