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

Updated js doc.

d6
Frode Petterson 2014-10-17 16:06:47 +02:00
parent 9ef34c2119
commit 36ed607f9e
2 changed files with 92 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,33 @@ var H5PDataView = (function ($) {
/** /**
* Initialize a new H5P data view. * Initialize a new H5P data view.
* *
* @class
* @param {Object} container * @param {Object} container
* @param {String} source URL for data * Element to clear out and append to.
* @param {Array} headers for data * @param {String} source
* @param {Object} l10n translations * URL to get data from. Data format: {num: 123, rows:[[1,2,3],[2,4,6]]}
* @param {Array} headers
* List with column headers. Can be strings or objects with options like
* "text" and "sortable". E.g.
* [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
* @param {Object} l10n
* Localization / translations. e.g.
* {
* loading: 'Loading data.',
* ajaxFailed: 'Failed to load data.',
* noData: "There's no data available that matches your criteria.",
* currentPage: 'Page $current of $total',
* nextPage: 'Next page',
* previousPage: 'Previous page',
* search: 'Search'
* }
* @param {Object} classes
* Custom html classes to use on elements.
* e.g. {tableClass: 'fixed'}.
* @param {Array} filters
* Make it possible to filter/search in the given column.
* e.g. [null, true, null, null] will make it possible to do a text
* search in column 2.
*/ */
function H5PDataView(container, source, headers, l10n, classes, filters) { function H5PDataView(container, source, headers, l10n, classes, filters) {
var self = this; var self = this;
@ -27,9 +50,9 @@ var H5PDataView = (function ($) {
} }
/** /**
* Load data for view. * Load data from source URL.
* *
* @param {Number} offset data collection offset * @public
*/ */
H5PDataView.prototype.loadData = function () { H5PDataView.prototype.loadData = function () {
var self = this; var self = this;
@ -97,6 +120,7 @@ var H5PDataView = (function ($) {
/** /**
* Update table data. * Update table data.
* *
* @public
* @param {Array} rows * @param {Array} rows
*/ */
H5PDataView.prototype.updateTable = function (rows) { H5PDataView.prototype.updateTable = function (rows) {
@ -127,6 +151,7 @@ var H5PDataView = (function ($) {
/** /**
* Update pagination widget. * Update pagination widget.
* *
* @public
* @param {Number} num size of data collection * @param {Number} num size of data collection
*/ */
H5PDataView.prototype.updatePagination = function (num) { H5PDataView.prototype.updatePagination = function (num) {
@ -152,6 +177,7 @@ var H5PDataView = (function ($) {
/** /**
* Add filters. * Add filters.
*
* @public * @public
*/ */
H5PDataView.prototype.addFilters = function () { H5PDataView.prototype.addFilters = function () {

89
js/h5p-utils.js
View File

@ -134,21 +134,22 @@ var H5PUtils = H5PUtils || {};
* Generic table class with useful helpers. * Generic table class with useful helpers.
* *
* @class * @class
* @param {Object} classes to use for styling * @param {Object} classes
* @param {Array} cols headers * Custom html classes to use on elements.
* e.g. {tableClass: 'fixed'}.
*/ */
H5PUtils.Table = function (classes) { H5PUtils.Table = function (classes) {
// Create basic table
var tableOptions = {};
if (classes.table !== undefined) {
tableOptions['class'] = classes.table;
}
var numCols; var numCols;
var sortByCol; var sortByCol;
var $sortCol; var $sortCol;
var sortCol; var sortCol;
var sortDir; var sortDir;
// Create basic table
var tableOptions = {};
if (classes.table !== undefined) {
tableOptions['class'] = classes.table;
}
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);
@ -158,7 +159,9 @@ var H5PUtils = H5PUtils || {};
* Add columns to given table row. * Add columns to given table row.
* *
* @private * @private
* * @param {jQuery} $tr Table row
* @param {(String|Object)} col Column properties
* @param {Number} id Used to seperate the columns
*/ */
var addCol = function ($tr, col, id) { var addCol = function ($tr, col, id) {
var options = { var options = {
@ -197,7 +200,12 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Updates the UI when a column header has been clicked.
* Triggers sorting callback.
*
* @private * @private
* @param {jQuery} $th Table header
* @param {Number} id Used to seperate the columns
*/ */
var sort = function ($th, id) { var sort = function ($th, id) {
if (id === sortCol) { if (id === sortCol) {
@ -223,11 +231,14 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Set headers * Set table headers.
* *
* @public * @public
* @param {Array} cols * @param {Array} cols
* @param {Function} sort callback when sorting changes * Table header data. Can be strings or objects with options like
* "text" and "sortable". E.g.
* [{text: 'Col 1', sortable: true}, 'Col 2', 'Col 3']
* @param {Function} sort Callback which is runned when sorting changes
*/ */
this.setHeaders = function (cols, sort) { this.setHeaders = function (cols, sort) {
numCols = cols.length; numCols = cols.length;
@ -246,9 +257,10 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Public. * Set table rows.
* *
* @param {Array} rows with cols * @public
* @param {Array} rows Table rows with cols: [[1,'hello',3],[2,'asd',6]]
*/ */
this.setRows = function (rows) { this.setRows = function (rows) {
var $newTbody = $('<tbody/>'); var $newTbody = $('<tbody/>');
@ -268,9 +280,11 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Public. * Set custom table body content. This can be a message or a throbber.
* Will cover all table columns.
* *
* @param {jQuery} $content custom * @public
* @param {jQuery} $content Custom content
*/ */
this.setBody = function ($content) { this.setBody = function ($content) {
var $newTbody = $('<tbody/>'); var $newTbody = $('<tbody/>');
@ -283,9 +297,11 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Public. * Set custom table foot content. This can be a pagination widget.
* Will cover all table columns.
* *
* @param {jQuery} $content custom * @public
* @param {jQuery} $content Custom content
*/ */
this.setFoot = function ($content) { this.setFoot = function ($content) {
var $newTfoot = $('<tfoot/>'); var $newTfoot = $('<tfoot/>');
@ -298,8 +314,9 @@ var H5PUtils = H5PUtils || {};
/** /**
* Public. * Appends the table to the given container.
* *
* @public
* @param {jQuery} $container * @param {jQuery} $container
*/ */
this.appendTo = function ($container) { this.appendTo = function ($container) {
@ -308,11 +325,20 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Generic pagination class. * Generic pagination class. Creates a useful pagination widget.
* *
* @param {Number} num total items * @class
* @param {Number} limit items per page * @param {Number} num Total number of items to pagiate.
* @param {Function} goneTo page callback * @param {Number} limit Number of items to dispaly per page.
* @param {Function} goneTo
* Callback which is fired when the user wants to go to another page.
* @param {Object} l10n
* Localization / translations. e.g.
* {
* currentPage: 'Page $current of $total',
* nextPage: 'Next page',
* previousPage: 'Previous page'
* }
*/ */
H5PUtils.Pagination = function (num, limit, goneTo, l10n) { H5PUtils.Pagination = function (num, limit, goneTo, l10n) {
var current = 0; var current = 0;
@ -363,7 +389,9 @@ var H5PUtils = H5PUtils || {};
}); });
/** /**
* Private. Input box value may have changed. * Check what page the user has typed in and jump to it.
*
* @private
*/ */
var gotInput = function () { var gotInput = function () {
var page = parseInt($input.hide().val()); var page = parseInt($input.hide().val());
@ -374,7 +402,9 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Private. Update UI elements. * Update UI elements.
*
* @private
*/ */
var updateUI = function () { var updateUI = function () {
var next = current + 1; var next = current + 1;
@ -388,8 +418,9 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Private. Try to go to the requested page. * Try to go to the requested page.
* *
* @private
* @param {Number} page * @param {Number} page
*/ */
var goTo = function (page) { var goTo = function (page) {
@ -405,10 +436,11 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Public. Update number of items and limit. * Update number of items and limit.
* *
* @param {Number} newNum * @public
* @param {Number} newLimit * @param {Number} newNum Total number of items to pagiate.
* @param {Number} newLimit Number of items to dispaly per page.
*/ */
this.update = function (newNum, newLimit) { this.update = function (newNum, newLimit) {
if (newNum !== num || newLimit !== limit) { if (newNum !== num || newLimit !== limit) {
@ -429,8 +461,9 @@ var H5PUtils = H5PUtils || {};
}; };
/** /**
* Public. Append the pagination widget to the given item. * Append the pagination widget to the given container.
* *
* @public
* @param {jQuery} $container * @param {jQuery} $container
*/ */
this.appendTo = function ($container) { this.appendTo = function ($container) {