Current Path : C:/xampp/htdocs/moodle/mod/hvp/library/js/ |
Current File : C:/xampp/htdocs/moodle/mod/hvp/library/js/h5p-library-details.js |
/* global H5PAdminIntegration H5PUtils */ var H5PLibraryDetails = H5PLibraryDetails || {}; (function ($) { H5PLibraryDetails.PAGER_SIZE = 20; /** * Initializing */ H5PLibraryDetails.init = function () { H5PLibraryDetails.$adminContainer = H5P.jQuery(H5PAdminIntegration.containerSelector); H5PLibraryDetails.library = H5PAdminIntegration.libraryInfo; // 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 = $('<div class="h5p-library-info"></div>'); $.each(H5PLibraryDetails.library.info, function (title, value) { $libraryInfo.append(H5PUtils.createLabeledField(title, value)); }); return $libraryInfo; }; /** * Create the content list with searching and paging */ H5PLibraryDetails.createContentElement = function () { if (H5PLibraryDetails.library.notCached !== undefined) { return H5PUtils.getRebuildCache(H5PLibraryDetails.library.notCached); } if (H5PLibraryDetails.currentContent === undefined) { H5PLibraryDetails.$content = $('<div class="h5p-content empty">' + H5PLibraryDetails.library.translations.noContent + '</div>'); } else { H5PLibraryDetails.$content = $('<div class="h5p-content"><h3>' + H5PLibraryDetails.library.translations.contentHeader + '</h3></div>'); 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<lastIndex; i++) { var content = H5PLibraryDetails.currentContent[i]; H5PLibraryDetails.$contentTable.append(H5PUtils.createTableRow(['<a href="' + content.url + '">' + content.title + '</a>'])); } // Appends it to the browser DOM H5PLibraryDetails.$contentTable.insertAfter(H5PLibraryDetails.$search); }; /** * Creates the pager element on the bottom of the list */ H5PLibraryDetails.createPagerElement = function () { H5PLibraryDetails.$previous = $('<button type="button" class="previous h5p-admin"><</button>'); H5PLibraryDetails.$next = $('<button type="button" class="next h5p-admin">></button>'); 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 = $('<span class="pager-info"></span>'); H5PLibraryDetails.$pager = $('<div class="h5p-content-pager"></div>').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 = $('<input/>', { 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 = $('<span/>', { '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 = $('<div class="h5p-content-search"><input placeholder="' + H5PLibraryDetails.library.translations.filterPlaceholder + '" type="search"></div>'); 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 = $('<span class="h5p-admin-search-results">' + H5PLibraryDetails.currentContent.length + ' hits on ' + H5PLibraryDetails.currentFilter + '</span>'); H5PLibraryDetails.$search.append(H5PLibraryDetails.$searchResults); } H5PLibraryDetails.updatePager(); }; var inputTimer; $('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('<div class="h5p-admin-pager-size-selector">' + H5PLibraryDetails.library.translations.pageSizeSelectorLabel + ':<span data-page-size="10">10</span><span class="selected" data-page-size="20">20</span><span data-page-size="50">50</span><span data-page-size="100">100</span><span data-page-size="200">200</span></div>'); // 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);