diff --git a/templates/table/layout.julius b/templates/table/layout.julius index 74770e57c..43a6595a3 100644 --- a/templates/table/layout.julius +++ b/templates/table/layout.julius @@ -3,14 +3,15 @@ window.utils = window.utils || {}; - window.utils.asyncTable = function(wrapper) { + window.utils.asyncTable = function(wrapper, options) { var tableIdent = #{String dbtIdent}; var shortCircuitHeader = #{String (toPathPiece HeaderDBTableShortcircuit)}; var ths = []; - var pagination; + var pageLinks = []; var pagesizeForm; + var scrollTable; function init() { var table = wrapper.querySelector('#' + tableIdent); @@ -18,54 +19,80 @@ return; } - ths = Array.from(table.querySelectorAll('th.sortable')); - pagination = wrapper.querySelector('#' + tableIdent + '-pagination'); + scrollTable = wrapper.querySelector('.scrolltable'); + + // sortable table headers + ths = Array.from(table.querySelectorAll('th.sortable')).map(function(th) { + return { element: th }; + }); + + // pagination links + var pagination = wrapper.querySelector('#' + tableIdent + '-pagination'); + if (pagination) { + pageLinks = Array.from(pagination.querySelectorAll('.page-link')).map(function(link) { + return { element: link }; + }); + } + + // pagesize form pagesizeForm = wrapper.querySelector('#' + tableIdent + '-pagesize-form'); + // take options into account + if (options && options.scrollToTop) { + window.scrollTo(0, 0); + } + + if (options && options.horizPos && scrollTable) { + scrollTable.scrollLeft = options.horizPos; + } + setupListeners(); wrapper.classList.add('js-initialized'); } function setupListeners() { ths.forEach(function(th) { - th.addEventListener('click', clickHandler); + th.clickHandler = function(event) { + var boundClickHandler = clickHandler.bind(this); + var horizPos = (scrollTable || {}).scrollLeft; + boundClickHandler(event, { horizPos }); + }; + th.element.addEventListener('click', th.clickHandler); }); - if (pagination) { - var pageLinks = Array.from(pagination.querySelectorAll('.page-link')); - pageLinks.forEach(function(p) { - p.addEventListener('click', clickHandler); - }); - } + pageLinks.forEach(function(link) { + link.clickHandler = function(event) { + var boundClickHandler = clickHandler.bind(this); + boundClickHandler(event, { scrollToTop: true }); + } + link.element.addEventListener('click', link.clickHandler); + }); if (pagesizeForm) { var pagesizeSelect = pagesizeForm.querySelector('[name=' + tableIdent + '-pagesize]') - pagesizeSelect.addEventListener('change', changeHandler); + pagesizeSelect.addEventListener('change', changePagesizeHandler); } } function removeListeners() { ths.forEach(function(th) { - th.removeEventListener('click', clickHandler); + th.element.removeEventListener('click', th.clickHandler); }); - if (pagination) { - var pageLinks = Array.from(pagination.querySelectorAll('.page-link')); - pageLinks.forEach(function(p) { - p.removeEventListener('click', clickHandler); - }); - } + pageLinks.forEach(function(link) { + link.element.removeEventListener('click', link.clickHandler); + }); if (pagesizeForm) { var pagesizeSelect = pagesizeForm.querySelector('[name=' + tableIdent + '-pagesize]') - pagesizeSelect.removeEventListener('change', changeHandler); + pagesizeSelect.removeEventListener('change', changePagesizeHandler); } } - function clickHandler(event) { + function clickHandler(event, options) { event.preventDefault(); var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this)); - updateTableFrom(url); + updateTableFrom(url, options); } function getClickDestination(el) { @@ -75,7 +102,7 @@ return el.querySelector('a').getAttribute('href'); } - function changeHandler(event) { + function changePagesizeHandler(event) { var currentTableUrl = wrapper.dataset.currentUrl || window.location.href; var url = getUrlWithUpdatedPagesize(currentTableUrl, event.target.value); url = getUrlWithResetPagenumber(url); @@ -96,12 +123,12 @@ return url.replace(/-page=\d+/, '-page=0'); } - function updateWrapperContents(newHtml) { + function updateWrapperContents(newHtml, options) { wrapper.innerHTML = newHtml; wrapper.classList.remove("js-initialized"); // setup the wrapper and its components to behave async again - window.utils.asyncTable(wrapper); + window.utils.asyncTable(wrapper, options); // make sure to hide any new submit buttons document.dispatchEvent(new CustomEvent('setup', { @@ -113,7 +140,7 @@ } // fetches new sorted table from url with params and replaces contents of current table - function updateTableFrom(url) { + function updateTableFrom(url, options) { fetch(url, { credentials: 'same-origin', @@ -129,7 +156,7 @@ }).then(function(data) { wrapper.dataset.currentUrl = url; removeListeners(); - updateWrapperContents(data); + updateWrapperContents(data, options); }).catch(function(err) { console.error(err); });