Merge branch 'scrollbehavior' into 'master'

Fixes to scroll behavior when dynamically changing table contents

Closes #108

See merge request !137

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);
       });