From 15660fece10b6d68af42ea74cf034c83fe09feba Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Tue, 28 May 2019 23:24:27 +0200 Subject: [PATCH] removed obsolete static js file for asyncTable (re-appeared by accident) --- static/js/utils/asyncTable.js | 430 ---------------------------------- 1 file changed, 430 deletions(-) delete mode 100644 static/js/utils/asyncTable.js diff --git a/static/js/utils/asyncTable.js b/static/js/utils/asyncTable.js deleted file mode 100644 index ccc441038..000000000 --- a/static/js/utils/asyncTable.js +++ /dev/null @@ -1,430 +0,0 @@ -(function collonadeClosure() { - 'use strict'; - - /** - * - * Async Table Utility - * makes table filters, sorting and pagination behave asynchronously via AJAX calls - * - * Attribute: uw-async-table - * - * Example usage: - * (regular table) - */ - - var INPUT_DEBOUNCE = 600; - var HEADER_HEIGHT = 80; - - var ASYNC_TABLE_UTIL_NAME = 'asyncTable'; - var ASYNC_TABLE_UTIL_SELECTOR = '[uw-async-table]'; - - var ASYNC_TABLE_LOCAL_STORAGE_KEY = 'ASYNC_TABLE'; - var ASYNC_TABLE_SCROLLTABLE_SELECTOR = '.scrolltable'; - var ASYNC_TABLE_INITIALIZED_CLASS = 'async-table--initialized'; - var ASYNC_TABLE_LOADING_CLASS = 'async-table--loading'; - - var ASYNC_TABLE_FILTER_FORM_SELECTOR = '.table-filter-form'; - var ASYNC_TABLE_FILTER_FORM_ID_SELECTOR = '[name="form-identifier"]'; - - - var asyncTableUtil = function(element) { - var asyncTableHeader; - var asyncTableId; - - var ths = []; - var pageLinks = []; - var pagesizeForm; - var scrollTable; - var cssIdPrefix = ''; - - var tableFilterInputs = { - search: [], - input: [], - change: [], - select: [], - } - - function init() { - if (!element) { - throw new Error('Async Table utility cannot be setup without an element!'); - } - - if (element.classList.contains(ASYNC_TABLE_INITIALIZED_CLASS)) { - return false; - } - - // param asyncTableDbHeader - if (element.dataset.asyncTableDbHeader !== undefined) { - asyncTableHeader = element.dataset.asyncTableDbHeader; - } - - var rawTableId = element.querySelector('table').id; - cssIdPrefix = findCssIdPrefix(rawTableId); - asyncTableId = rawTableId.replace(cssIdPrefix, ''); - - // find scrolltable wrapper - scrollTable = element.querySelector(ASYNC_TABLE_SCROLLTABLE_SELECTOR); - if (!scrollTable) { - throw new Error('Async Table cannot be set up without a scrolltable element!'); - } - - setupSortableHeaders(); - setupPagination(); - setupPageSizeSelect(); - setupTableFilter(); - - processLocalStorage(); - - // clear currentTableUrl from previous requests - setLocalStorageParameter('currentTableUrl', null); - - // mark initialized - element.classList.add(ASYNC_TABLE_INITIALIZED_CLASS); - - return { - name: ASYNC_TABLE_UTIL_NAME, - element: element, - destroy: function() {}, - }; - } - - function setupSortableHeaders() { - ths = Array.from(scrollTable.querySelectorAll('th.sortable')).map(function(th) { - return { element: th }; - }); - - ths.forEach(function(th) { - th.clickHandler = function(event) { - setLocalStorageParameter('horizPos', (scrollTable || {}).scrollLeft); - linkClickHandler(event); - }; - th.element.addEventListener('click', th.clickHandler); - }); - } - - function setupPagination() { - var pagination = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagination'); - if (pagination) { - pageLinks = Array.from(pagination.querySelectorAll('.page-link')).map(function(link) { - return { element: link }; - }); - - pageLinks.forEach(function(link) { - link.clickHandler = function(event) { - var tableBoundingRect = scrollTable.getBoundingClientRect(); - if (tableBoundingRect.top < HEADER_HEIGHT) { - var scrollTo = { - top: (scrollTable.offsetTop || 0) - HEADER_HEIGHT, - left: scrollTable.offsetLeft || 0, - behavior: 'smooth', - }; - setLocalStorageParameter('scrollTo', scrollTo); - } - linkClickHandler(event); - } - link.element.addEventListener('click', link.clickHandler); - }); - } - } - - function setupPageSizeSelect() { - // pagesize form - pagesizeForm = element.querySelector('#' + cssIdPrefix + asyncTableId + '-pagesize-form'); - - if (pagesizeForm) { - var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]'); - pagesizeSelect.addEventListener('change', changePagesizeHandler); - } - } - - function setupTableFilter() { - var tableFilterForm = element.querySelector(ASYNC_TABLE_FILTER_FORM_SELECTOR); - - if (tableFilterForm) { - gatherTableFilterInputs(tableFilterForm); - addTableFilterEventListeners(tableFilterForm); - } - } - - function gatherTableFilterInputs(tableFilterForm) { - Array.from(tableFilterForm.querySelectorAll('input[type="search"]')).forEach(function(input) { - tableFilterInputs.search.push(input); - }); - - Array.from(tableFilterForm.querySelectorAll('input[type="text"]')).forEach(function(input) { - tableFilterInputs.input.push(input); - }); - - Array.from(tableFilterForm.querySelectorAll('input:not([type="text"]):not([type="search"])')).forEach(function(input) { - tableFilterInputs.change.push(input); - }); - - Array.from(tableFilterForm.querySelectorAll('select')).forEach(function(input) { - tableFilterInputs.select.push(input); - }); - } - - function addTableFilterEventListeners(tableFilterForm) { - tableFilterInputs.search.forEach(function(input) { - var debouncedInput = debounce(function() { - if (input.value.length === 0 || input.value.length > 2) { - updateFromTableFilter(tableFilterForm); - } - }, INPUT_DEBOUNCE); - input.addEventListener('input', debouncedInput); - }); - - tableFilterInputs.input.forEach(function(input) { - var debouncedInput = debounce(function() { - if (input.value.length === 0 || input.value.length > 2) { - updateFromTableFilter(tableFilterForm); - } - }, INPUT_DEBOUNCE); - input.addEventListener('input', debouncedInput); - }); - - tableFilterInputs.change.forEach(function(input) { - input.addEventListener('change', function() { - updateFromTableFilter(tableFilterForm); - }); - }); - - tableFilterInputs.select.forEach(function(input) { - input.addEventListener('change', function() { - updateFromTableFilter(tableFilterForm); - }); - }); - - tableFilterForm.addEventListener('submit', function(event) { - event.preventDefault(); - updateFromTableFilter(tableFilterForm); - }); - } - - function updateFromTableFilter(tableFilterForm) { - var url = serializeTableFilterToURL(); - var callback = null; - - var focusedInput = tableFilterForm.querySelector(':focus, :active'); - // focus previously focused input - if (focusedInput && focusedInput.selectionStart !== null) { - var selectionStart = focusedInput.selectionStart; - // remove the following part of the id to get rid of the random - // (yet somewhat structured) prefix we got from nudging. - var prefix = findCssIdPrefix(focusedInput.id); - var focusId = focusedInput.id.replace(prefix, ''); - callback = function(wrapper) { - var idPrefix = getLocalStorageParameter('cssIdPrefix'); - var toBeFocused = wrapper.querySelector('#' + idPrefix + focusId); - if (toBeFocused) { - toBeFocused.focus(); - toBeFocused.selectionStart = selectionStart; - } - }; - } - updateTableFrom(url, callback); - } - - function serializeTableFilterToURL() { - var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href); - - var formIdElement = element.querySelector(ASYNC_TABLE_FILTER_FORM_ID_SELECTOR); - if (!formIdElement) { - // cannot serialize the filter form without an identifier - return; - } - - url.searchParams.set('form-identifier', formIdElement.value); - url.searchParams.set('_hasdata', 'true'); - url.searchParams.set(asyncTableId + '-page', '0'); - - tableFilterInputs.search.forEach(function(input) { - url.searchParams.set(input.name, input.value); - }); - - tableFilterInputs.input.forEach(function(input) { - url.searchParams.set(input.name, input.value); - }); - - tableFilterInputs.change.forEach(function(input) { - if (input.checked) { - url.searchParams.set(input.name, input.value); - } - }); - - tableFilterInputs.select.forEach(function(select) { - var options = Array.from(select.querySelectorAll('option')); - var selected = options.find(function(option) { return option.selected }); - if (selected) { - url.searchParams.set(select.name, selected.value); - } - }); - - return url; - } - - function processLocalStorage() { - var scrollTo = getLocalStorageParameter('scrollTo'); - if (scrollTo && scrollTable) { - window.scrollTo(scrollTo); - } - setLocalStorageParameter('scrollTo', null); - - var horizPos = getLocalStorageParameter('horizPos'); - if (horizPos && scrollTable) { - scrollTable.scrollLeft = horizPos; - } - setLocalStorageParameter('horizPos', null); - } - - function removeListeners() { - ths.forEach(function(th) { - th.element.removeEventListener('click', th.clickHandler); - }); - - pageLinks.forEach(function(link) { - link.element.removeEventListener('click', link.clickHandler); - }); - - if (pagesizeForm) { - var pagesizeSelect = pagesizeForm.querySelector('[name=' + asyncTableId + '-pagesize]') - pagesizeSelect.removeEventListener('change', changePagesizeHandler); - } - } - - function linkClickHandler(event) { - event.preventDefault(); - var url = getClickDestination(event.target); - if (!url.match(/^http/)) { - url = window.location.origin + window.location.pathname + url; - } - updateTableFrom(url); - } - - function getClickDestination(el) { - if (!el.matches('a') && !el.querySelector('a')) { - return ''; - } - return el.getAttribute('href') || el.querySelector('a').getAttribute('href'); - } - - function changePagesizeHandler(event) { - var paginationParamKey = asyncTableId + '-pagination'; - var pagesizeParamKey = asyncTableId + '-pagesize'; - var pageParamKey = asyncTableId + '-page'; - - var paginationParamEl = pagesizeForm.querySelector('[name="' + paginationParamKey + '"]'); - var url = new URL(getLocalStorageParameter('currentTableUrl') || window.location.href); - url.searchParams.set(pagesizeParamKey, event.target.value); - url.searchParams.set(pageParamKey, 0); - - if (paginationParamEl) { - var encodedValue = encodeURIComponent(paginationParamEl.value); - url.searchParams.set(paginationParamKey, encodedValue); - } - updateTableFrom(url.href); - } - - // fetches new sorted element from url with params and replaces contents of current element - function updateTableFrom(url, callback) { - if (!HttpClient) { - throw new Error('HttpClient not found!'); - } - - element.classList.add(ASYNC_TABLE_LOADING_CLASS); - - var headers = { - 'Accept': 'text/html', - [asyncTableHeader]: asyncTableId - }; - - HttpClient.get({ - url: url, - headers: headers, - accept: HttpClient.ACCEPT.TEXT_HTML, - }).then(function(response) { - return HtmlHelpers.parseResponse(response); - }).then(function(response) { - setLocalStorageParameter('currentTableUrl', url.href); - // reset table - removeListeners(); - element.classList.remove(ASYNC_TABLE_INITIALIZED_CLASS); - // update table with new - updateWrapperContents(response); - - if (UtilRegistry) { - UtilRegistry.setupAll(element); - } - - if (callback && typeof callback === 'function') { - setLocalStorageParameter('cssIdPrefix', response.idPrefix); - callback(element); - setLocalStorageParameter('cssIdPrefix', ''); - } - }).catch(function(err) { - console.error(err); - }).finally(function() { - element.classList.remove(ASYNC_TABLE_LOADING_CLASS); - }); - } - - function updateWrapperContents(response) { - var newPage = document.createElement('div'); - newPage.appendChild(response.element); - var newWrapperContents = newPage.querySelector('#' + response.idPrefix + element.id); - element.innerHTML = newWrapperContents.innerHTML; - } - - return init(); - }; - - // returns any random nudged prefix found in the given id - function findCssIdPrefix(id) { - var matcher = /r\d*?__/; - var maybePrefix = id.match(matcher); - if (maybePrefix && maybePrefix[0]) { - return maybePrefix[0] - } - return ''; - } - - function setLocalStorageParameter(key, value) { - var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {}; - if (value !== null) { - currentLSState[key] = value; - } else { - delete currentLSState[key]; - } - window.localStorage.setItem(ASYNC_TABLE_LOCAL_STORAGE_KEY, JSON.stringify(currentLSState)); - } - - function getLocalStorageParameter(key) { - var currentLSState = JSON.parse(window.localStorage.getItem(ASYNC_TABLE_LOCAL_STORAGE_KEY)) || {}; - return currentLSState[key]; - } - - // debounce function, taken from Underscore.js - function debounce(func, wait, immediate) { - var timeout; - return function() { - var context = this, args = arguments; - var later = function() { - timeout = null; - if (!immediate) func.apply(context, args); - }; - var callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - if (callNow) func.apply(context, args); - }; - } - - // register async table utility - if (UtilRegistry) { - UtilRegistry.register({ - name: ASYNC_TABLE_UTIL_NAME, - selector: ASYNC_TABLE_UTIL_SELECTOR, - setup: asyncTableUtil, - }); - } -})();