var H5PUtils = H5PUtils || {}; (function ($) { /** * Generic function for creating a table including the headers * * @param {array} headers List of headers */ H5PUtils.createTable = function (headers) { var $table = $('
'); if(headers) { var $thead = $(''); var $tr = $(''); $.each(headers, function (index, value) { if (!(value instanceof Object)) { value = { html: value }; } $('', value).appendTo($tr); }); $table.append($thead.append($tr)); } return $table; }; /** * Generic function for creating a table row * * @param {array} rows Value list. Object name is used as class name in */ H5PUtils.createTableRow = function (rows) { var $tr = $(''); $.each(rows, function (index, value) { if (!(value instanceof Object)) { value = { html: value }; } $('', value).appendTo($tr); }); return $tr; }; /** * Generic function for creating a field containing label and value * * @param {string} label The label displayed in front of the value * @param {string} value The value */ H5PUtils.createLabeledField = function (label, value) { var $field = $('
'); $field.append('
' + label + '
'); $field.append('
' + value + '
'); return $field; }; /** * Replaces placeholder fields in translation strings * * @param {string} template The translation template string in the following format: "$name is a $sex" * @param {array} replacors An js object with key and values. Eg: {'$name': 'Frode', '$sex': 'male'} */ H5PUtils.translateReplace = function (template, replacors) { $.each(replacors, function (key, value) { template = template.replace(new RegExp('\\'+key, 'g'), value); }); return template; }; /** * Get throbber with given text. * * @param {String} text * @returns {$} */ H5PUtils.throbber = function (text) { return $('
', { class: 'h5p-throbber', text: text }); }; /** * Makes it possbile to rebuild all content caches from admin UI. * @param {Object} notCached * @returns {$} */ H5PUtils.getRebuildCache = function (notCached) { var $container = $('

' + notCached.message + '

' + notCached.progress + '

'); var $button = $('').appendTo($container).click(function () { var $spinner = $('
', {class: 'h5p-spinner'}).replaceAll($button); var parts = ['|', '/', '-', '\\']; var current = 0; var spinning = setInterval(function () { $spinner.text(parts[current]); current++; if (current === parts.length) current = 0; }, 100); var $counter = $container.find('.progress'); var build = function () { $.post(notCached.url, function (left) { if (left === '0') { clearInterval(spinning); $container.remove(); location.reload(); } else { var counter = $counter.text().split(' '); counter[0] = left; $counter.text(counter.join(' ')); build(); } }); }; build(); }); return $container; }; /** * Generic table class with useful helpers. * * @class * @param {Object} classes * Custom html classes to use on elements. * e.g. {tableClass: 'fixed'}. */ H5PUtils.Table = function (classes) { var numCols; var sortByCol; var $sortCol; var sortCol; var sortDir; // Create basic table var tableOptions = {}; if (classes.table !== undefined) { tableOptions['class'] = classes.table; } var $table = $('', tableOptions); var $thead = $('').appendTo($table); var $tfoot = $('').appendTo($table); var $tbody = $('').appendTo($table); /** * Add columns to given table row. * * @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 options = { on: {} }; if (!(col instanceof Object)) { options.text = col; } else { if (col.text !== undefined) { options.text = col.text; } if (col.class !== undefined) { options.class = col.class; } if (sortByCol !== undefined && col.sortable === true) { // Make sortable options.role = 'button'; 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); } }; } } // Append var $th = $(''); var $tr = $('').appendTo($newThead); for (var i = 0; i < cols.length; i++) { addCol($tr, cols[i], i); } // Update DOM $thead.replaceWith($newThead); $thead = $newThead; }; /** * Set table rows. * * @public * @param {Array} rows Table rows with cols: [[1,'hello',3],[2,'asd',6]] */ this.setRows = function (rows) { var $newTbody = $(''); for (var i = 0; i < rows.length; i++) { var $tr = $('').appendTo($newTbody); for (var j = 0; j < rows[i].length; j++) { $(''); var $tr = $('').appendTo($newTbody); $(''); var $tr = $('').appendTo($newTfoot); $('
', options).appendTo($tr); if (sortCol === id) { $sortCol = $th; // Default sort column } }; /** * Updates the UI when a column header has been clicked. * Triggers sorting callback. * * @private * @param {jQuery} $th Table header * @param {Number} id Used to seperate the columns */ 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({ by: sortCol, dir: sortDir }); }; /** * Set table headers. * * @public * @param {Array} cols * 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 * @param {Object} [order] */ this.setHeaders = function (cols, sort, order) { numCols = cols.length; sortByCol = sort; if (order) { sortCol = order.by; sortDir = order.dir; } // Create new head var $newThead = $('
', { html: rows[i][j] }).appendTo($tr); } } $tbody.replaceWith($newTbody); $tbody = $newTbody; return $tbody; }; /** * Set custom table body content. This can be a message or a throbber. * Will cover all table columns. * * @public * @param {jQuery} $content Custom content */ this.setBody = function ($content) { var $newTbody = $('
', { colspan: numCols }).append($content).appendTo($tr); $tbody.replaceWith($newTbody); $tbody = $newTbody; }; /** * Set custom table foot content. This can be a pagination widget. * Will cover all table columns. * * @public * @param {jQuery} $content Custom content */ this.setFoot = function ($content) { var $newTfoot = $('
', { colspan: numCols }).append($content).appendTo($tr); $tfoot.replaceWith($newTfoot); }; /** * Appends the table to the given container. * * @public * @param {jQuery} $container */ this.appendTo = function ($container) { $table.appendTo($container); }; }; /** * Generic pagination class. Creates a useful pagination widget. * * @class * @param {Number} num Total number of items to pagiate. * @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) { var current = 0; var pages = Math.ceil(num / limit); // Create components // Previous button var $left = $('