Added support for text filters in data view.

d6
Frode Petterson 2014-10-16 16:07:32 +02:00
parent 86c18476cd
commit 04b8c8a8a1
3 changed files with 94 additions and 6 deletions

View File

@ -8,7 +8,7 @@ var H5PDataView = (function ($) {
* @param {Array} headers for data * @param {Array} headers for data
* @param {Object} l10n translations * @param {Object} l10n translations
*/ */
function H5PDataView(container, source, headers, l10n, classes) { function H5PDataView(container, source, headers, l10n, classes, filters) {
var self = this; var self = this;
self.$container = $(container).addClass('h5p-data-view').html(''); self.$container = $(container).addClass('h5p-data-view').html('');
@ -18,7 +18,11 @@ var H5PDataView = (function ($) {
self.headers = headers; self.headers = headers;
self.l10n = l10n; self.l10n = l10n;
self.classes = (classes === undefined ? {} : classes); self.classes = (classes === undefined ? {} : classes);
self.filters = (filters === undefined ? [] : filters);
self.limit = 20; self.limit = 20;
self.offset = 0;
self.filterOn = [];
self.loadData(); self.loadData();
} }
@ -28,13 +32,20 @@ var H5PDataView = (function ($) {
* *
* @param {Number} offset data collection offset * @param {Number} offset data collection offset
*/ */
H5PDataView.prototype.loadData = function (offset) { H5PDataView.prototype.loadData = function () {
var self = this; var self = this;
// Create URL // Create URL
var url = self.source; var url = self.source;
if (offset !== undefined) { url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + self.offset + '&limit=' + self.limit;
url += (url.indexOf('?') === -1 ? '?' : '&') + 'offset=' + offset + '&limit=' + self.limit;
// Add filters
for (var i = 0; i < self.filterOn.length; i++) {
if (self.filterOn[i] === undefined) {
continue;
}
url += '&filters[' + i + ']=' + encodeURIComponent(self.filterOn[i]);
} }
// Fire ajax request // Fire ajax request
@ -87,9 +98,15 @@ var H5PDataView = (function ($) {
var self = this; var self = this;
if (self.table === undefined) { if (self.table === undefined) {
// Clear out container
self.$container.html('');
// Add filters
self.addFilters();
// 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.appendTo(self.$container.html('')); self.table.appendTo(self.$container);
} }
// Add/update rows // Add/update rows
@ -110,7 +127,8 @@ var H5PDataView = (function ($) {
self.pagination = new H5PUtils.Pagination(num, self.limit, function (offset) { self.pagination = new H5PUtils.Pagination(num, self.limit, function (offset) {
// Handle page changes in pagination widget // Handle page changes in pagination widget
self.table.setBody(H5PUtils.throbber(self.l10n.loading)); self.table.setBody(H5PUtils.throbber(self.l10n.loading));
self.loadData(offset); self.offset = offset;
self.loadData();
}, self.l10n); }, self.l10n);
self.pagination.appendTo($pagerContainer); self.pagination.appendTo($pagerContainer);
@ -122,5 +140,71 @@ var H5PDataView = (function ($) {
} }
}; };
/**
* Add filters.
* @public
*/
H5PDataView.prototype.addFilters = function () {
var self = this;
for (var i = 0; i < self.filters.length; i++) {
if (self.filters[i] === true) {
// Add text input filter for col i
self.addTextFilter(i);
}
}
};
/**
* Add text filter for given col num.
* @public
* @param {Number} col
*/
H5PDataView.prototype.addTextFilter = function (col) {
var self = this;
/**
* Find input value and filter on it.
* @private
*/
var search = function () {
var filterOn = $input.val().replace(/^\s+|\s+$/g, '');
if (filterOn === '') {
filterOn = undefined;
}
if (filterOn !== self.filterOn[col]) {
self.filterOn[col] = filterOn;
self.loadData();
}
};
// Add text field for filtering
var typing;
var $input = $('<input/>', {
type: 'text',
placeholder: self.l10n.search,
on: {
'blur': function () {
clearTimeout(typing);
search();
},
'keyup': function (event) {
if (event.keyCode === 13) {
clearTimeout(typing);
search();
return false;
}
else {
clearTimeout(typing);
typing = setTimeout(function () {
search();
}, 500);
}
}
}
}).appendTo(self.$container);
};
return H5PDataView; return H5PDataView;
})(H5P.jQuery); })(H5P.jQuery);

View File

@ -257,6 +257,7 @@ var H5PUtils = H5PUtils || {};
'keyup': function (event) { 'keyup': function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
gotInput(); gotInput();
return false;
} }
} }
} }

View File

@ -252,3 +252,6 @@ button.h5p-admin.disabled:hover {
.h5p-pagination > span, .h5p-pagination > input { .h5p-pagination > span, .h5p-pagination > input {
margin: 0 1em; margin: 0 1em;
} }
.h5p-data-view input[type="text"] {
margin-bottom: 0.5em;
}