var H5PLibraryDetails= H5PLibraryDetails || {}; (function ($) { H5PLibraryDetails.PAGER_SIZE = 20; /** * Initializing */ H5PLibraryDetails.init = function () { H5PLibraryDetails.$adminContainer = H5PIntegration.getAdminContainer(); H5PLibraryDetails.library = H5PIntegration.getLibraryInfo(); // currentContent holds the current list if data (relevant for filtering) H5PLibraryDetails.currentContent = H5PLibraryDetails.library.content; // The current page index (for pager) H5PLibraryDetails.currentPage = 0; // The current filter H5PLibraryDetails.currentFilter = ''; // We cache the filtered results, so we don't have to do unneccessary searches H5PLibraryDetails.filterCache = []; // Append library info H5PLibraryDetails.$adminContainer.append(H5PLibraryDetails.createLibraryInfo()); // Append node list H5PLibraryDetails.$adminContainer.append(H5PLibraryDetails.createContentElement()); }; /** * Create the library details view */ H5PLibraryDetails.createLibraryInfo = function () { var $libraryInfo = $('
'); $.each(H5PLibraryDetails.library.info, function (title, value) { $libraryInfo.append(H5PUtils.createLabeledField(title, value)); }); // List counter: $libraryInfo.append(H5PUtils.createLabeledField(H5PLibraryDetails.library.translations.contentCount, H5PLibraryDetails.currentContent ? H5PLibraryDetails.currentContent.length : 0)); return $libraryInfo; }; /** * Create the content list with searching and paging */ H5PLibraryDetails.createContentElement = function () { if (H5PLibraryDetails.currentContent === undefined) { H5PLibraryDetails.$content = $('
' + H5PLibraryDetails.library.translations.noContent + '
'); } else { H5PLibraryDetails.$content = $('

' + H5PLibraryDetails.library.translations.contentHeader + '

'); H5PLibraryDetails.createSearchElement(); H5PLibraryDetails.createPageSizeSelector(); H5PLibraryDetails.createContentTable(); H5PLibraryDetails.createPagerElement(); return H5PLibraryDetails.$content; } }; /** * Creates the content list */ H5PLibraryDetails.createContentTable = function () { // Remove it if it exists: if(H5PLibraryDetails.$contentTable) { H5PLibraryDetails.$contentTable.remove(); } H5PLibraryDetails.$contentTable = H5PUtils.createTable(); var i = (H5PLibraryDetails.currentPage*H5PLibraryDetails.PAGER_SIZE); var lastIndex = (i+H5PLibraryDetails.PAGER_SIZE); if(lastIndex > H5PLibraryDetails.currentContent.length) { lastIndex = H5PLibraryDetails.currentContent.length; } for(; i' + content.title + ''])); } // Appends it to the browser DOM H5PLibraryDetails.$contentTable.insertAfter(H5PLibraryDetails.$search); }; /** * Creates the pager element on the bottom of the list */ H5PLibraryDetails.createPagerElement = function () { // Only create pager if needed: if(H5PLibraryDetails.currentContent.length > H5PLibraryDetails.PAGER_SIZE) { H5PLibraryDetails.$previous = $(''); H5PLibraryDetails.$next = $(''); H5PLibraryDetails.$previous.on('click', function () { if(H5PLibraryDetails.$previous.hasClass('disabled')) { return; } H5PLibraryDetails.currentPage--; H5PLibraryDetails.updatePager(); H5PLibraryDetails.createContentTable(); }); H5PLibraryDetails.$next.on('click', function () { if(H5PLibraryDetails.$next.hasClass('disabled')) { return; } H5PLibraryDetails.currentPage++; H5PLibraryDetails.updatePager(); H5PLibraryDetails.createContentTable(); }); // This is the Page x of y widget: H5PLibraryDetails.$pagerInfo = $(''); H5PLibraryDetails.$pager = $('
').append(H5PLibraryDetails.$previous, H5PLibraryDetails.$pagerInfo, H5PLibraryDetails.$next); H5PLibraryDetails.$content.append(H5PLibraryDetails.$pager); H5PLibraryDetails.$pagerInfo.on('click', function () { var width = H5PLibraryDetails.$pagerInfo.innerWidth(); H5PLibraryDetails.$pagerInfo.hide(); // User has updated the pageNumber var pageNumerUpdated = function() { var newPageNum = $gotoInput.val()-1; var intRegex = /^\d+$/; $goto.remove(); H5PLibraryDetails.$pagerInfo.css({display: 'inline-block'}); // Check if input value is valid, and that it has actually changed if(!(intRegex.test(newPageNum) && newPageNum >= 0 && newPageNum < H5PLibraryDetails.getNumPages() && newPageNum != H5PLibraryDetails.currentPage)) { return; } H5PLibraryDetails.currentPage = newPageNum; H5PLibraryDetails.updatePager(); H5PLibraryDetails.createContentTable(); }; // We create an input box where the user may type in the page number // he wants to be displayed. // Reson for doing this is when user has ten-thousands of elements in list, // this is the easiest way of getting to a specified page var $gotoInput = $('', { type: 'number', min : 1, max: H5PLibraryDetails.getNumPages(), on: { // Listen to blur, and the enter-key: 'blur': pageNumerUpdated, 'keyup': function (event) { if (event.keyCode === 13) { pageNumerUpdated(); } } } }).css({width: width}); var $goto = $('', { 'class': 'h5p-pager-goto' }).css({width: width}).append($gotoInput).insertAfter(H5PLibraryDetails.$pagerInfo); $gotoInput.focus(); }); H5PLibraryDetails.updatePager(); } }; /** * Calculates number of pages */ H5PLibraryDetails.getNumPages = function () { return Math.ceil(H5PLibraryDetails.currentContent.length / H5PLibraryDetails.PAGER_SIZE); }; /** * Update the pager text, and enables/disables the next and previous buttons as needed */ H5PLibraryDetails.updatePager = function () { H5PLibraryDetails.$pagerInfo.css({display: 'inline-block'}); if(H5PLibraryDetails.getNumPages() > 0) { var message = H5PUtils.translateReplace(H5PLibraryDetails.library.translations.pageXOfY, { '$x': (H5PLibraryDetails.currentPage+1), '$y': H5PLibraryDetails.getNumPages() }); H5PLibraryDetails.$pagerInfo.html(message); } else { H5PLibraryDetails.$pagerInfo.html(''); } H5PLibraryDetails.$previous.toggleClass('disabled', H5PLibraryDetails.currentPage <= 0); H5PLibraryDetails.$next.toggleClass('disabled', H5PLibraryDetails.currentContent.length < (H5PLibraryDetails.currentPage+1)*H5PLibraryDetails.PAGER_SIZE); }; /** * Creates the search element */ H5PLibraryDetails.createSearchElement = function () { H5PLibraryDetails.$search = $(''); var performSeach = function () { var searchString = $('.h5p-content-search > input').val(); // If search string same as previous, just do nothing if(H5PLibraryDetails.currentFilter === searchString) { return; } if (searchString.trim().length === 0) { // If empty search, use the complete list H5PLibraryDetails.currentContent = H5PLibraryDetails.library.content; } else if(H5PLibraryDetails.filterCache[searchString]) { // If search is cached, no need to filter H5PLibraryDetails.currentContent = H5PLibraryDetails.filterCache[searchString]; } else { var listToFilter = H5PLibraryDetails.library.content; // Check if we can filter the already filtered results (for performance) if(searchString.length > 1 && H5PLibraryDetails.currentFilter === searchString.substr(0, H5PLibraryDetails.currentFilter.length)) { listToFilter = H5PLibraryDetails.currentContent; } H5PLibraryDetails.currentContent = $.grep(listToFilter, function(content) { return content.title && content.title.match(new RegExp(searchString, 'i')); }); } H5PLibraryDetails.currentFilter = searchString; // Cache the current result H5PLibraryDetails.filterCache[searchString] = H5PLibraryDetails.currentContent; H5PLibraryDetails.currentPage = 0; H5PLibraryDetails.createContentTable(); // Display search results: if (H5PLibraryDetails.$searchResults) { H5PLibraryDetails.$searchResults.remove(); } if (searchString.trim().length > 0) { H5PLibraryDetails.$searchResults = $('' + H5PLibraryDetails.currentContent.length + ' hits on ' + H5PLibraryDetails.currentFilter + ''); H5PLibraryDetails.$search.append(H5PLibraryDetails.$searchResults); } H5PLibraryDetails.updatePager(); }; var inputTimer = undefined; $('input', H5PLibraryDetails.$search).on('change keypress paste input', function () { // Here we start the filtering // We wait at least 500 ms after last input to perform search if(inputTimer) { clearTimeout(inputTimer); } inputTimer = setTimeout( function () { performSeach(); }, 500); }); H5PLibraryDetails.$content.append(H5PLibraryDetails.$search); }; /** * Creates the page size selector */ H5PLibraryDetails.createPageSizeSelector = function () { H5PLibraryDetails.$search.append('
' + H5PLibraryDetails.library.translations.pageSizeSelectorLabel + ':102050100200
'); // Listen to clicks on the page size selector: $('.h5p-admin-pager-size-selector > span', H5PLibraryDetails.$search).on('click', function () { H5PLibraryDetails.PAGER_SIZE = $(this).data('page-size'); $('.h5p-admin-pager-size-selector > span', H5PLibraryDetails.$search).removeClass('selected'); $(this).addClass('selected'); H5PLibraryDetails.currentPage = 0; H5PLibraryDetails.createContentTable(); H5PLibraryDetails.updatePager(); }); }; // Initialize me: $(document).ready(function () { if (!H5PLibraryDetails.initialized) { H5PLibraryDetails.initialized = true; H5PLibraryDetails.init(); } }); })(H5P.jQuery);