From 38d9b73c665897553e489b88822f7f9a24bb10a7 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 9 Feb 2019 14:23:53 +0100 Subject: [PATCH 1/2] scroll to top after changing page in paginated table --- templates/table/layout.julius | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/templates/table/layout.julius b/templates/table/layout.julius index 74770e57c..dea52d0c9 100644 --- a/templates/table/layout.julius +++ b/templates/table/layout.julius @@ -40,7 +40,7 @@ if (pagesizeForm) { var pagesizeSelect = pagesizeForm.querySelector('[name=' + tableIdent + '-pagesize]') - pagesizeSelect.addEventListener('change', changeHandler); + pagesizeSelect.addEventListener('change', changePagesizeHandler); } } @@ -58,14 +58,14 @@ if (pagesizeForm) { var pagesizeSelect = pagesizeForm.querySelector('[name=' + tableIdent + '-pagesize]') - pagesizeSelect.removeEventListener('change', changeHandler); + pagesizeSelect.removeEventListener('change', changePagesizeHandler); } } function clickHandler(event) { event.preventDefault(); var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this)); - updateTableFrom(url); + updateTableFrom(url, { scrollToTop: true }); } function getClickDestination(el) { @@ -75,7 +75,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); @@ -113,7 +113,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', @@ -130,6 +130,9 @@ wrapper.dataset.currentUrl = url; removeListeners(); updateWrapperContents(data); + if (options && options.scrollToTop) { + window.scrollTo(0, 0); + } }).catch(function(err) { console.error(err); }); From 41db96ed15fdf5f8944c386f6300820a565b06b2 Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 9 Feb 2019 15:00:17 +0100 Subject: [PATCH 2/2] remember horizontal scroll position after sorting closes #108 --- templates/table/layout.julius | 76 +++++++++++++++++++++++------------ 1 file changed, 50 insertions(+), 26 deletions(-) diff --git a/templates/table/layout.julius b/templates/table/layout.julius index dea52d0c9..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,25 +19,54 @@ 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]') @@ -46,15 +76,12 @@ 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]') @@ -62,10 +89,10 @@ } } - function clickHandler(event) { + function clickHandler(event, options) { event.preventDefault(); var url = new URL(window.location.origin + window.location.pathname + getClickDestination(this)); - updateTableFrom(url, { scrollToTop: true }); + updateTableFrom(url, options); } function getClickDestination(el) { @@ -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', { @@ -129,10 +156,7 @@ }).then(function(data) { wrapper.dataset.currentUrl = url; removeListeners(); - updateWrapperContents(data); - if (options && options.scrollToTop) { - window.scrollTo(0, 0); - } + updateWrapperContents(data, options); }).catch(function(err) { console.error(err); });