feat(pagination): Add handler to pagination buttons

src/scripts/script.js

@@ -85,7 +85,7 @@ registryUI.removeServer = function(url) {
 }
 
 registryUI.updateHistory = function(url) {
-  history.pushState(null, '', (url ? '?url=' + registryUI.encodeURI(url) : '?') + window.location.hash);
+  registryUI.updateQueryString({ url: registryUI.encodeURI(url) })
   registryUI._url = url;
 }
 
@@ -100,10 +100,12 @@ registryUI.getUrlQueryParam = function () {
 };
 
 registryUI.encodeURI = function(url) {
+  if (!url) { return; }
   return url.indexOf('&') < 0 ? window.encodeURIComponent(url) : btoa(url);
 };
 
 registryUI.decodeURI = function(url) {
+  if (!url) { return; }
   return url.startsWith('http') ? window.decodeURIComponent(url) : atob(url);
 };
 

src/scripts/utils.js

@@ -76,7 +76,7 @@ registryUI.getPage = function(elts, page, limit) {
 registryUI.getNumPages = function(elts, limit) {
   if (!limit) { limit = 100; }
   if (!elts) { return 0; }
-  return Math.trunc((elts.length / limit) % 10);
+  return Math.trunc((elts.length / limit) % 10) + 1;
 }
 
 registryUI.getPageLabels = function(page, nPages) {
@@ -95,4 +95,14 @@ registryUI.getPageLabels = function(page, nPages) {
     pageLabels.push({'icon': 'last_page', page: nPages});
   }
   return pageLabels;
+}
+
+registryUI.updateQueryString = function(qs) {
+  var search = '';
+  for (var key in qs) {
+    if (qs[key] !== undefined) {
+      search += (search.length > 0 ? '&' : '?') +key + '=' + qs[key];
+    }
+  }
+  history.pushState(null, '', search + window.location.hash);
 }

src/tags/app.tag

@@ -231,6 +231,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         return qs.page !== undefined ? parseInt(qs.page.replace(/#.*/, '')) : 1;
       } catch(e) { return 1; }
     }
+
+    registryUI.getQueryParams = function(update) {
+      var qs = route.query();
+      update = update || {};
+      for (var key in qs) {
+        if (qs[key] !== undefined) {
+          qs[key] = qs[key].replace(/#!.*/, '');
+        } else {
+          delete qs[key];
+        }
+      }
+      for (var key in update) {
+        if (update[key] !== undefined) {
+          qs[key] = update[key];
+        }
+      }
+      return qs;
+    }
     route.start(true);
   </script>
 </app>

src/tags/pagination.tag

@@ -25,7 +25,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     </div>
   <div>
   <script>
-
+    this.on('updated', function() {
+      if (!this.tags['material-button']) { return; }
+      var buttons = Array.isArray(this.tags['material-button']) ? this.tags['material-button'] : [this.tags['material-button']];
+      buttons.forEach(function(button) {
+        button.root.onclick = function() {
+          registryUI.updateQueryString(registryUI.getQueryParams({ page: button.p.page }) );
+          registryUI.taglist.instance.trigger('page-update', button.p.page)
+        }
+      });
+    });
   </script>
   <!-- End of tag -->
 </pagination>

src/tags/taglist.tag

@@ -113,6 +113,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       }
     });
 
+    this.on('page-update', function(page) {
+      self.page = page;
+      this.update();
+    });
+
     this._getRemoveImageTags = function() {
       var images = self.refs['taglist-tag'].tags['remove-image'];
       if (!(images instanceof Array)) {