remember horizontal scroll position after sorting

closes #108

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