From 73565912926776a48663442f06fabc1a5187c7e6 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sun, 26 May 2019 01:20:02 +0200
Subject: [PATCH 01/11] feat(pagination): Show only 100 first elements

---
 src/scripts/utils.js    | 6 ++++++
 src/tags/app.tag        | 4 ++--
 src/tags/image-date.tag | 2 ++
 src/tags/taglist.tag    | 5 +++--
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 96067a6..79056bb 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -65,4 +65,10 @@ registryUI.getHistoryIcon = function(attribute) {
     default:
       ''
   }
+}
+
+registryUI.getPage = function(elts, page, limit) {
+  if (!limit) { limit = 100; }
+  if (!elts) { return []; }
+  return elts.slice(page * limit, limit);
 }
\ No newline at end of file
diff --git a/src/tags/app.tag b/src/tags/app.tag
index 190a784..6fcf3c3 100644
--- a/src/tags/app.tag
+++ b/src/tags/app.tag
@@ -130,8 +130,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         return this.fillInfo();
       });
       this.on('get-date', function() {
-        if (this.date !== undefined) {
-          return this.trigger('date', this.date);
+        if (this.creationDate !== undefined) {
+          return this.trigger('creation-date', this.creationDate);
         }
         return this.fillInfo();
       });
diff --git a/src/tags/image-date.tag b/src/tags/image-date.tag
index 1064d70..03b8bbd 100644
--- a/src/tags/image-date.tag
+++ b/src/tags/image-date.tag
@@ -24,5 +24,7 @@
       self.localDate = date.toLocaleString()
       self.update();
     });
+
+    opts.image.trigger('get-date');
   </script>
 </image-date>
\ No newline at end of file
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 9b31ccc..06a46f7 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <taglist>
   <!-- Begin of tag -->
-  <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete }>
+  <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) }>
     <div class="material-card-title-action">
       <material-button waves-center="true" rounded="true" waves-color="#ddd" onclick="registryUI.home();">
         <i class="material-icons">arrow_back</i>
@@ -50,7 +50,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </tr>
       </thead>
       <tbody>
-      <tr each="{ image in registryUI.taglist.tags }">
+      <tr each="{ image in this.opts.tags }">
         <td class="material-card-th-left">{ image.name }</td>
         <td class="copy-to-clipboard">
           <copy-to-clipboard image={ image }/>
@@ -76,6 +76,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </material-card>
   <script>
     var self = registryUI.taglist.instance = this;
+    self.page = 0;
 
     this.multiDelete = false;
     this.toDelete = 0;

From 660a938d6e94056455143392cdd13a3405f86e27 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 27 May 2019 22:23:24 +0200
Subject: [PATCH 02/11] feat(pagination): Small UI improvements

---
 src/style.css            |  4 ++++
 src/tags/catalog.tag     |  8 ++++----
 src/tags/tag-history.tag |  2 +-
 src/tags/taglist.tag     | 18 ++++++++++--------
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/style.css b/src/style.css
index a4634b0..145b89c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -56,6 +56,10 @@ material-card {
   margin-bottom: 20px;
 }
 
+material-card.header {
+  min-height: auto;
+}
+
 @media screen and (max-width: 950px){
   material-card {
     width: 95%;
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index c0b96fe..6cb181f 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -16,17 +16,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <catalog>
   <!-- Begin of tag -->
-  <material-card ref="catalog-tag" class="catalog">
+  <material-card ref="catalog-tag" class="catalog header">
     <div class="material-card-title-action">
       <h2>
         Repositories of { registryUI.name() }
         <div class="item-count">{ registryUI.catalog.length } images</div>
       </h2>
     </div>
-    <div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
-      <material-spinner></material-spinner>
-    </div>
   </material-card>
+  <div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
+    <material-spinner></material-spinner>
+  </div>
   <catalog-element each="{ item in registryUI.catalog.repositories }" />
   <script>
     registryUI.catalog.instance = this;
diff --git a/src/tags/tag-history.tag b/src/tags/tag-history.tag
index 41f3d9b..fbcf813 100644
--- a/src/tags/tag-history.tag
+++ b/src/tags/tag-history.tag
@@ -15,7 +15,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <tag-history>
-  <material-card ref="tag-history-tag" class="tag-history">
+  <material-card ref="tag-history-tag" class="tag-history header">
     <div class="material-card-title-action">
       <material-button waves-center="true" rounded="true" waves-color="#ddd">
         <i class="material-icons">arrow_back</i>
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 06a46f7..90248c1 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -16,8 +16,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <taglist>
   <!-- Begin of tag -->
-  <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) }>
-    <div class="material-card-title-action">
+  <material-card class="header">
+    <div class="material-card-title-action ">
       <material-button waves-center="true" rounded="true" waves-color="#ddd" onclick="registryUI.home();">
         <i class="material-icons">arrow_back</i>
       </material-button>
@@ -26,9 +26,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <div class="item-count">{ registryUI.taglist.tags.length } tags</div>
       </h2>
     </div>
-    <div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
-      <material-spinner></material-spinner>
-    </div>
+  </material-card>
+  <div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
+    <material-spinner></material-spinner>
+  </div>
+  <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) } show="{ registryUI.taglist.loadend }" >
     <table show="{ registryUI.taglist.loadend }" style="border: none;">
       <thead>
       <tr>
@@ -125,8 +127,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     };
 
     this.on('mount', function() {
-      var toggle = this.tags['material-card'].refs['remove-tag-checkbox'].toggle;
-      this.tags['material-card'].refs['remove-tag-checkbox'].toggle = function(e) {
+      var toggle = this.refs['taglist-tag'].refs['remove-tag-checkbox'].toggle;
+      this.refs['taglist-tag'].refs['remove-tag-checkbox'].toggle = function(e) {
         if (e.altKey) {
           self._getRemoveImageTags()
             .filter(function(img) { return !img.tags['material-checkbox'].checked; })
@@ -136,7 +138,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         }
       };
 
-      this.tags['material-card'].refs['remove-tag-checkbox'].on('toggle', function() {
+      this.refs['taglist-tag'].refs['remove-tag-checkbox'].on('toggle', function() {
         registryUI.taglist.instance.multiDelete = this.checked;
         registryUI.taglist.instance.update();
       });

From 3399030e4e448da2fd9c1a95e964ef15fbf697cb Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Thu, 30 May 2019 00:11:05 +0200
Subject: [PATCH 03/11] feat(pagination): Add pagination component with its
 style

---
 src/index.html          |  1 +
 src/scripts/utils.js    | 24 ++++++++++++++++++++++++
 src/style.css           | 33 ++++++++++++++++++++++++---------
 src/tags/pagination.tag | 31 +++++++++++++++++++++++++++++++
 src/tags/taglist.tag    |  2 ++
 5 files changed, 82 insertions(+), 9 deletions(-)
 create mode 100644 src/tags/pagination.tag

diff --git a/src/index.html b/src/index.html
index d1549a0..0dc7c81 100644
--- a/src/index.html
+++ b/src/index.html
@@ -58,6 +58,7 @@
   <script src="tags/dialogs/menu.tag" type="riot/tag"></script>
   <script src="tags/image-size.tag" type="riot/tag"></script>
   <script src="tags/image-date.tag" type="riot/tag"></script>
+  <script src="tags/pagination.tag" type="riot/tag"></script>
   <script src="tags/app.tag" type="riot/tag"></script>
   <script src="scripts/http.js"></script>
   <script src="scripts/script.js"></script>
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 79056bb..2fcca52 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -71,4 +71,28 @@ registryUI.getPage = function(elts, page, limit) {
   if (!limit) { limit = 100; }
   if (!elts) { return []; }
   return elts.slice(page * limit, limit);
+}
+
+registryUI.getNumPages = function(elts, limit) {
+  if (!limit) { limit = 100; }
+  if (!elts) { return 0; }
+  return Math.trunc((elts.length / limit) % 10);
+}
+
+registryUI.getPageLabels = function(page, nPages) {
+  var pageLabels = [];
+  var maxItems = 10;
+  if (nPages === 0) { return pageLabels; }
+  if (page !== 0 && nPages >= maxItems) {
+    pageLabels.push({'icon': 'first_page', page: 0});
+    pageLabels.push({'icon': 'chevron_left', page: page - 1});
+  }
+  for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
+    pageLabels.push({page: i});
+  }
+  if (page !== nPages && nPages >= maxItems) {
+    pageLabels.push({'icon': 'chevron_right', page: nPages});
+    pageLabels.push({'icon': 'last_page', page: 0});
+  }
+  return pageLabels;
 }
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index 145b89c..3abe299 100644
--- a/src/style.css
+++ b/src/style.css
@@ -48,16 +48,22 @@ main {
   font-weight: inherit;
 }
 
-material-card {
-  min-height: 200px;
+material-card, pagination .conatianer {
   max-width: 75%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-material-card.header {
-  min-height: auto;
+pagination .conatianer {
+  display: flex;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+}
+
+pagination .conatianer .pagination-centered {
+  margin: auto;
 }
 
 @media screen and (max-width: 950px){
@@ -216,12 +222,14 @@ material-card table th {
 }
 
 material-card material-button:hover,
-material-card table tbody tr:hover {
+material-card table tbody tr:hover,
+pagination material-button:hover  {
   background-color: #eee;
 }
 
 material-card material-button,
-material-card table tbody tr {
+material-card table tbody tr,
+pagination material-button  {
   transition-duration: .28s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-property: background-color;
@@ -330,7 +338,8 @@ dropdown-item, #menu-control-dropdown p {
   background-color: #e0e0e0;
 }
 
-material-popup material-button {
+material-popup material-button,
+pagination material-button {
   background-color: #fff;
   color: #000;
 }
@@ -449,7 +458,8 @@ tag-history-button button {
   border: none;
 }
 
-material-card material-button {
+material-card material-button,
+pagination material-button {
   max-height: 30px;
   max-width: 30px;
 }
@@ -458,7 +468,8 @@ material-button:hover material-waves {
   background: none;
 }
 
-material-card material-button {
+material-card material-button,
+pagination material-button {
   background-color: inherit;
 }
 
@@ -510,4 +521,8 @@ material-checkbox .checkbox {
 
 material-checkbox .checkbox.checked {
   background-color: #777;
+}
+
+pagination material-button {
+  padding: 0.2em 0.75em;
 }
\ No newline at end of file
diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag
new file mode 100644
index 0000000..97c0a6d
--- /dev/null
+++ b/src/tags/pagination.tag
@@ -0,0 +1,31 @@
+<!--
+Copyright (C) 2016-2019 Jones Magloire @Joxit
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+<pagination>
+  <!-- Begin of tag -->
+  <div class="conatianer">
+    <div class="pagination-centered">
+      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}">
+        <i show="{ p.icon }" class="material-icons">{ p.icon }</i>
+        <div hide="{ p.icon }">{ p.page }</div>
+      </material-button>
+    </div>
+  <div>
+  <script>
+
+  </script>
+  <!-- End of tag -->
+</pagination>
\ No newline at end of file
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 90248c1..4208cc9 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -30,6 +30,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
     <material-spinner></material-spinner>
   </div>
+  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags))}"></pagination>
   <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) } show="{ registryUI.taglist.loadend }" >
     <table show="{ registryUI.taglist.loadend }" style="border: none;">
       <thead>
@@ -76,6 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </tbody>
     </table>
   </material-card>
+  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags))}"></pagination>
   <script>
     var self = registryUI.taglist.instance = this;
     self.page = 0;

From 0199f87087bc138ba39640b8405946ecb02e3f5a Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Fri, 31 May 2019 00:44:29 +0200
Subject: [PATCH 04/11] feat(pagination): Identify the current page

---
 src/scripts/utils.js    | 2 +-
 src/style.css           | 4 ++++
 src/tags/pagination.tag | 2 +-
 src/tags/taglist.tag    | 9 ++++++---
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 2fcca52..6d6e18a 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -88,7 +88,7 @@ registryUI.getPageLabels = function(page, nPages) {
     pageLabels.push({'icon': 'chevron_left', page: page - 1});
   }
   for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
-    pageLabels.push({page: i});
+    pageLabels.push({page: i, current: i === page + 1});
   }
   if (page !== nPages && nPages >= maxItems) {
     pageLabels.push({'icon': 'chevron_right', page: nPages});
diff --git a/src/style.css b/src/style.css
index 3abe299..3630f98 100644
--- a/src/style.css
+++ b/src/style.css
@@ -525,4 +525,8 @@ material-checkbox .checkbox.checked {
 
 pagination material-button {
   padding: 0.2em 0.75em;
+}
+
+pagination material-button.current {
+  border: 1px solid rgba(0, 0, 0, .12);
 }
\ No newline at end of file
diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag
index 97c0a6d..7ac292d 100644
--- a/src/tags/pagination.tag
+++ b/src/tags/pagination.tag
@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <!-- Begin of tag -->
   <div class="conatianer">
     <div class="pagination-centered">
-      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}">
+      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current }">
         <i show="{ p.icon }" class="material-icons">{ p.icon }</i>
         <div hide="{ p.icon }">{ p.page }</div>
       </material-button>
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 4208cc9..81d683d 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -30,8 +30,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <div hide="{ registryUI.taglist.loadend }" class="spinner-wrapper">
     <material-spinner></material-spinner>
   </div>
-  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags))}"></pagination>
-  <material-card ref="taglist-tag" class="taglist" multi-delete={ this.multiDelete } tags={ registryUI.getPage(registryUI.taglist.tags, this.page) } show="{ registryUI.taglist.loadend }" >
+  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags)) }"></pagination>
+  <material-card ref="taglist-tag" class="taglist"
+    multi-delete={ this.multiDelete }
+    tags={ registryUI.getPage(registryUI.taglist.tags, this.page) }
+    show="{ registryUI.taglist.loadend }">
     <table show="{ registryUI.taglist.loadend }" style="border: none;">
       <thead>
       <tr>
@@ -77,7 +80,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </tbody>
     </table>
   </material-card>
-  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags))}"></pagination>
+  <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags)) }"></pagination>
   <script>
     var self = registryUI.taglist.instance = this;
     self.page = 0;

From 02210e0943bd1dea377904a82253013a73d61457 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 3 Jun 2019 01:39:23 +0200
Subject: [PATCH 05/11] fix(pagination): getPage doesn't work for page 2 and
 now support query param

---
 src/scripts/utils.js | 12 ++++++------
 src/tags/app.tag     |  6 ++++++
 src/tags/taglist.tag |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 6d6e18a..4087294 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -70,7 +70,7 @@ registryUI.getHistoryIcon = function(attribute) {
 registryUI.getPage = function(elts, page, limit) {
   if (!limit) { limit = 100; }
   if (!elts) { return []; }
-  return elts.slice(page * limit, limit);
+  return elts.slice((page - 1) * limit, limit * page);
 }
 
 registryUI.getNumPages = function(elts, limit) {
@@ -82,17 +82,17 @@ registryUI.getNumPages = function(elts, limit) {
 registryUI.getPageLabels = function(page, nPages) {
   var pageLabels = [];
   var maxItems = 10;
-  if (nPages === 0) { return pageLabels; }
-  if (page !== 0 && nPages >= maxItems) {
+  if (nPages === 1) { return pageLabels; }
+  if (page !== 1 && nPages >= maxItems) {
     pageLabels.push({'icon': 'first_page', page: 0});
     pageLabels.push({'icon': 'chevron_left', page: page - 1});
   }
   for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
-    pageLabels.push({page: i, current: i === page + 1});
+    pageLabels.push({page: i, current: i === page});
   }
   if (page !== nPages && nPages >= maxItems) {
-    pageLabels.push({'icon': 'chevron_right', page: nPages});
-    pageLabels.push({'icon': 'last_page', page: 0});
+    pageLabels.push({'icon': 'chevron_right', page: page + 1});
+    pageLabels.push({'icon': 'last_page', page: nPages});
   }
   return pageLabels;
 }
\ No newline at end of file
diff --git a/src/tags/app.tag b/src/tags/app.tag
index 6fcf3c3..e9a6dd4 100644
--- a/src/tags/app.tag
+++ b/src/tags/app.tag
@@ -225,6 +225,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       route('taglist/' + image);
     };
 
+    registryUI.getPageQueryParam = function() {
+      var qs = route.query();
+      try {
+        return qs.page !== undefined ? parseInt(qs.page.replace(/#.*/, '')) : 1;
+      } catch(e) { return 1; }
+    }
     route.start(true);
   </script>
 </app>
\ No newline at end of file
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 81d683d..2514a2d 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -83,7 +83,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <pagination pages="{ registryUI.getPageLabels(this.page, registryUI.getNumPages(registryUI.taglist.tags)) }"></pagination>
   <script>
     var self = registryUI.taglist.instance = this;
-    self.page = 0;
+    self.page = registryUI.getPageQueryParam();
 
     this.multiDelete = false;
     this.toDelete = 0;

From 92fc37adb42fedfab67c030b19b75f36709455ce Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Tue, 4 Jun 2019 22:06:14 +0200
Subject: [PATCH 06/11] feat(pagination): Add handler to pagination buttons

---
 src/scripts/script.js   |  4 +++-
 src/scripts/utils.js    | 12 +++++++++++-
 src/tags/app.tag        | 18 ++++++++++++++++++
 src/tags/pagination.tag | 11 ++++++++++-
 src/tags/taglist.tag    |  5 +++++
 5 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/scripts/script.js b/src/scripts/script.js
index 5f08bdc..a48f4b2 100644
--- a/src/scripts/script.js
+++ b/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);
 };
 
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 4087294..878685e 100644
--- a/src/scripts/utils.js
+++ b/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);
 }
\ No newline at end of file
diff --git a/src/tags/app.tag b/src/tags/app.tag
index e9a6dd4..01c9175 100644
--- a/src/tags/app.tag
+++ b/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>
\ No newline at end of file
diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag
index 7ac292d..ee9df82 100644
--- a/src/tags/pagination.tag
+++ b/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>
\ No newline at end of file
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 2514a2d..a2008dd 100644
--- a/src/tags/taglist.tag
+++ b/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)) {

From dbb746981ab0a0d6ffec03e63ed51e05cc0fb1f5 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sat, 15 Jun 2019 22:37:24 +0200
Subject: [PATCH 07/11] fix(pagination): Improve spacing for page next and
 first page buttons

---
 src/scripts/utils.js    | 12 +++++++++---
 src/style.css           | 18 ++++++++++++++++++
 src/tags/pagination.tag |  2 +-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 878685e..4aece62 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -84,11 +84,17 @@ registryUI.getPageLabels = function(page, nPages) {
   var maxItems = 10;
   if (nPages === 1) { return pageLabels; }
   if (page !== 1 && nPages >= maxItems) {
-    pageLabels.push({'icon': 'first_page', page: 0});
+    pageLabels.push({'icon': 'first_page', page: 1});
     pageLabels.push({'icon': 'chevron_left', page: page - 1});
   }
-  for (var i = Math.max(1, page - maxItems); i <= Math.min(nPages, page + maxItems); i++) {
-    pageLabels.push({page: i, current: i === page});
+  var start = Math.round(Math.max(1, Math.min(page - maxItems / 2, nPages - maxItems + 1)));
+  for (var i = start; i < Math.min(nPages + 1, start + maxItems); i++) {
+    pageLabels.push({
+      page: i,
+      current: i === page,
+      'space-left': page === 1 && nPages > maxItems,
+      'space-right': page === nPages && nPages > maxItems
+    });
   }
   if (page !== nPages && nPages >= maxItems) {
     pageLabels.push({'icon': 'chevron_right', page: page + 1});
diff --git a/src/style.css b/src/style.css
index 3630f98..ca3b8ac 100644
--- a/src/style.css
+++ b/src/style.css
@@ -527,6 +527,24 @@ pagination material-button {
   padding: 0.2em 0.75em;
 }
 
+pagination material-button .content {
+  display: flex;
+  align-content: center;
+  line-height: 1.9em;
+}
+
 pagination material-button.current {
   border: 1px solid rgba(0, 0, 0, .12);
+}
+
+pagination material-button.current.space-left {
+  margin-left: 85px;
+}
+
+pagination material-button.current.space-right {
+  margin-right: 85px;
+}
+
+pagination material-button .content i.material-icons {
+  color: #000;
 }
\ No newline at end of file
diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag
index ee9df82..1263a9e 100644
--- a/src/tags/pagination.tag
+++ b/src/tags/pagination.tag
@@ -18,7 +18,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <!-- Begin of tag -->
   <div class="conatianer">
     <div class="pagination-centered">
-      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current }">
+      <material-button waves-color="rgba(158,158,158,.4)" each="{p in this.opts.pages}" class="{ current: p.current, space-left: p['space-left'], space-right: p['space-right']}">
         <i show="{ p.icon }" class="material-icons">{ p.icon }</i>
         <div hide="{ p.icon }">{ p.page }</div>
       </material-button>

From e5a406a6bae30f7f640ee7918f05a6512ef844a0 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sun, 16 Jun 2019 23:07:54 +0200
Subject: [PATCH 08/11] fix(pagination): Reset the number of selected tags to
 delete when the page is updated

---
 src/tags/taglist.tag | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index a2008dd..0370e24 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -115,6 +115,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
     this.on('page-update', function(page) {
       self.page = page;
+      this.toDelete = 0;
       this.update();
     });
 

From ef149bf1cc0c9471f4e11100bb95355c82a7ae1a Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 17 Jun 2019 00:46:46 +0200
Subject: [PATCH 09/11] chore: Memory optimization when delete is not activated

---
 src/tags/remove-image.tag | 17 +++++++++--------
 src/tags/taglist.tag      |  4 ++--
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag
index 15f4a9f..d3ed8c5 100644
--- a/src/tags/remove-image.tag
+++ b/src/tags/remove-image.tag
@@ -15,16 +15,21 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-image>
-  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." hide="{ opts.multiDelete }">
+  <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete the image." if="{ !opts.multiDelete }">
     <i class="material-icons">delete</i>
   </material-button>
-  <material-checkbox show="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
+  <material-checkbox if="{ opts.multiDelete }" title="Select this tag to delete it."></material-checkbox>
   <script type="text/javascript">
     const self = this;
 
     this.on('update', function() {
-      if (!this.opts.multiDelete && this.tags['material-checkbox'].checked) {
-        this.tags['material-checkbox'].toggle();
+      if (this.tags['material-checkbox']) {
+        if (!this.opts.multiDelete && this.tags['material-checkbox'].checked) {
+          this.tags['material-checkbox'].toggle();
+        }
+        this.tags['material-checkbox'].on('toggle', function() {
+          registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
+        });
       }
     });
 
@@ -68,10 +73,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
         oReq.send();
       };
-
-      this.tags['material-checkbox'].on('toggle', function() {
-        registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
-      });
     });
   </script>
 </remove-image>
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index 0370e24..c207d11 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -48,7 +48,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         onclick="registryUI.taglist.reverse();">Tag
         </th>
         <th class="show-tag-history">History</th>
-        <th class={ 'remove-tag': true, delete: this.parent.toDelete > 0 } show="{ registryUI.isImageRemoveActivated }">
+        <th class={ 'remove-tag': true, delete: this.parent.toDelete > 0 } if="{ registryUI.isImageRemoveActivated }">
           <material-checkbox ref="remove-tag-checkbox" class="indeterminate" show={ this.toDelete === 0} title="Toggle multi-delete. Alt+Click to select all tags."></material-checkbox>
           <material-button waves-center="true" rounded="true" waves-color="#ddd" title="This will delete selected images." onclick={ registryUI.taglist.bulkDelete } show={ this.toDelete > 0 }>
             <i class="material-icons">delete</i>
@@ -73,7 +73,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <td class="show-tag-history">
           <tag-history-button image={ image }/>
         </td>
-        <td show="{ registryUI.isImageRemoveActivated }">
+        <td if="{ registryUI.isImageRemoveActivated }">
           <remove-image multi-delete={ this.opts.multiDelete } image={ image }/>
         </td>
       </tr>

From 0ac7a151d9a044e7a5f35332174bb428718f7300 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sun, 23 Jun 2019 22:55:32 +0200
Subject: [PATCH 10/11] fix(pagination): Wrong calcul for num pages

---
 src/scripts/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 4aece62..877f4f5 100644
--- a/src/scripts/utils.js
+++ b/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) + 1;
+  return Math.trunc(elts.length / limit) + 1;
 }
 
 registryUI.getPageLabels = function(page, nPages) {

From 79960ea52df8ffb5193a04bd3a5e4f34410e4f25 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Thu, 27 Jun 2019 23:54:20 +0200
Subject: [PATCH 11/11] fix(pagination): page switch and regression on multi
 delete

---
 src/tags/pagination.tag   |  1 -
 src/tags/remove-image.tag | 93 +++++++++++++++++++++------------------
 src/tags/taglist.tag      |  4 +-
 3 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/src/tags/pagination.tag b/src/tags/pagination.tag
index 1263a9e..0607d1a 100644
--- a/src/tags/pagination.tag
+++ b/src/tags/pagination.tag
@@ -30,7 +30,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       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)
         }
       });
diff --git a/src/tags/remove-image.tag b/src/tags/remove-image.tag
index d3ed8c5..5e0212a 100644
--- a/src/tags/remove-image.tag
+++ b/src/tags/remove-image.tag
@@ -22,7 +22,55 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   <script type="text/javascript">
     const self = this;
 
-    this.on('update', function() {
+    this.on('updated', function() {
+    });
+
+    this.on('updated', function() {
+      if (self.multiDelete == self.opts.multiDelete) {
+        return;
+      }
+      if (this.tags['material-button']) {
+        this.delete = this.tags['material-button'].root.onclick = function(ignoreError) {
+          const name = self.opts.image.name;
+          const tag = self.opts.image.tag;
+          const oReq = new Http();
+          oReq.addEventListener('loadend', function() {
+            registryUI.taglist.go(name);
+            if (this.status == 200) {
+              if (!this.hasHeader('Docker-Content-Digest')) {
+                registryUI.errorSnackbar('You need to add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
+                return;
+              }
+              const digest = this.getResponseHeader('Docker-Content-Digest');
+              const oReq = new Http();
+              oReq.addEventListener('loadend', function() {
+                if (this.status == 200 || this.status == 202) {
+                  registryUI.taglist.display()
+                  registryUI.snackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
+                } else if (this.status == 404) {
+                  ignoreError || registryUI.errorSnackbar('Digest not found');
+                } else {
+                  registryUI.snackbar(this.responseText);
+                }
+              });
+              oReq.open('DELETE', registryUI.url() + '/v2/' + name + '/manifests/' + digest);
+              oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+              oReq.addEventListener('error', function() {
+                registryUI.errorSnackbar('An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].');
+              });
+              oReq.send();
+            } else if (this.status == 404) {
+              registryUI.errorSnackbar('Manifest for ' + name + ':' + tag + ' not found');
+            } else {
+              registryUI.snackbar(this.responseText);
+            }
+          });
+          oReq.open('HEAD', registryUI.url() + '/v2/' + name + '/manifests/' + tag);
+          oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
+          oReq.send();
+        };
+      }
+
       if (this.tags['material-checkbox']) {
         if (!this.opts.multiDelete && this.tags['material-checkbox'].checked) {
           this.tags['material-checkbox'].toggle();
@@ -31,48 +79,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           registryUI.taglist.instance.trigger('toggle-remove-image', this.checked);
         });
       }
-    });
-
-    this.on('mount', function() {
-      this.delete = this.tags['material-button'].root.onclick = function(ignoreError) {
-        const name = self.opts.image.name;
-        const tag = self.opts.image.tag;
-        const oReq = new Http();
-        oReq.addEventListener('loadend', function() {
-          registryUI.taglist.go(name);
-          if (this.status == 200) {
-            if (!this.hasHeader('Docker-Content-Digest')) {
-              registryUI.errorSnackbar('You need to add Access-Control-Expose-Headers: [\'Docker-Content-Digest\'] in your server configuration.');
-              return;
-            }
-            const digest = this.getResponseHeader('Docker-Content-Digest');
-            const oReq = new Http();
-            oReq.addEventListener('loadend', function() {
-              if (this.status == 200 || this.status == 202) {
-                registryUI.taglist.display()
-                registryUI.snackbar('Deleting ' + name + ':' + tag + ' image. Run `registry garbage-collect config.yml` on your registry');
-              } else if (this.status == 404) {
-                ignoreError || registryUI.errorSnackbar('Digest not found');
-              } else {
-                registryUI.snackbar(this.responseText);
-              }
-            });
-            oReq.open('DELETE', registryUI.url() + '/v2/' + name + '/manifests/' + digest);
-            oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
-            oReq.addEventListener('error', function() {
-              registryUI.errorSnackbar('An error occurred when deleting image. Check if your server accept DELETE methods Access-Control-Allow-Methods: [\'DELETE\'].');
-            });
-            oReq.send();
-          } else if (this.status == 404) {
-            registryUI.errorSnackbar('Manifest for ' + name + ':' + tag + ' not found');
-          } else {
-            registryUI.snackbar(this.responseText);
-          }
-        });
-        oReq.open('HEAD', registryUI.url() + '/v2/' + name + '/manifests/' + tag);
-        oReq.setRequestHeader('Accept', 'application/vnd.docker.distribution.manifest.v2+json');
-        oReq.send();
-      };
+      self.multiDelete = self.opts.multiDelete;
     });
   </script>
 </remove-image>
diff --git a/src/tags/taglist.tag b/src/tags/taglist.tag
index c207d11..f06bedf 100644
--- a/src/tags/taglist.tag
+++ b/src/tags/taglist.tag
@@ -114,7 +114,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     });
 
     this.on('page-update', function(page) {
-      self.page = page;
+      self.page = page < 1 ? 1 : page;
+      registryUI.updateQueryString(registryUI.getQueryParams({ page: self.page }) );
       this.toDelete = 0;
       this.update();
     });
@@ -167,6 +168,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             registryUI.taglist.tags = registryUI.taglist.tags.map(function(tag) {
               return new registryUI.DockerImage(registryUI.taglist.name, tag);
             }).sort(registryUI.DockerImage.compare);
+            self.trigger('page-update', Math.min(self.page, registryUI.getNumPages(registryUI.taglist.tags)))
           } else if (this.status == 404) {
             registryUI.snackbar('Server not found', true);
           } else {