Merge pull request #8 from Joxit/rg-router

Rg router 

Add router navigation for taglist and catalog.

Route looks like http://mydomaine.com/#!/taglist// for a tag listing and http://mydomaine.com/#!/ for catalog

add.tag

@@ -47,6 +47,7 @@
         registryUI.addServer(registryUI.addTag.addServer.value);
       }
       registryUI.addTag.addServer.value = '';
+      rg.router.go('home');
       registryUI.addTag.dialog.close();
     };
     registryUI.addTag.close = function () {

app.tag

@@ -0,0 +1,41 @@
+<!--
+ Copyright (C) 2016  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/>.
+-->
+<app>
+  <catalog if="{!rg.router.current || rg.router.current.name == 'home'}"></catalog>
+  <taglist if="{rg.router.current.name == 'taglist'}"></taglist>
+  <script>
+
+    this.mixin('rg.router');
+    this.router.add({name: 'home', url: ''});
+    this.router.add({name: 'taglist', url: '/taglist/:repository/:image'});
+    this.router.on('go', state => {
+      switch (state.name) {
+        case 'taglist':
+          if (registryUI.taglist.display) {
+            registryUI.taglist.display();
+          }
+          break;
+        case 'home':
+          if (registryUI.catalog.display) {
+            registryUI.catalog.display();
+          }
+          break;
+      }
+    })
+    this.router.start();
+  </script>
+</app>

catalog.tag

@@ -16,14 +16,14 @@
 -->
 <catalog>
   <!-- Begin of tag -->
-  <div id="catalog-tag" class="catalog" if="{ registryUI.content == 'catalog' }">
+  <div id="catalog-tag" class="catalog">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
         <h2 class="mdl-card__title-text">Repositories of { registryUI.url() }</h2>
       </div>
-      <div id="catalog-spinner" style="{ catalog.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
+      <div id="catalog-spinner" style="{ registryUI.catalog.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
       <ul class="mdl-list">
-        <li class="mdl-list__item mdl-menu__item" style="opacity: 1;" each="{ item in catalog.repositories }" onclick="registryUI.taglist.display('{item}');">
+        <li class="mdl-list__item mdl-menu__item" style="opacity: 1;" each="{ item in registryUI.catalog.repositories }" onclick="registryUI.catalog.go('{item}');">
           <span class="mdl-list__item-primary-content">
             <i class="material-icons mdl-list__item-icon">send</i>
             { item }
@@ -38,15 +38,15 @@
   </div>
 
   <script>
-    catalog.instance = this;
+    registryUI.catalog.instance = this;
-    catalog.display = function () {
+    this.mixin('rg.router');
-      registryUI.content = 'catalog';
+    registryUI.catalog.display = function () {
       var oReq = new XMLHttpRequest();
-      catalog.createSnackbar = function (msg) {
+      registryUI.catalog.createSnackbar = function (msg) {
         var snackbar = document.querySelector('#error-snackbar');
-        catalog.error = msg;
+        registryUI.catalog.error = msg;
         var data = {
-          message: catalog.error,
+          message: registryUI.catalog.error,
           timeout: 100000,
           actionHandler: function () {
             snackbar.classList.remove('mdl-snackbar--active');
@@ -57,29 +57,34 @@
       };
       oReq.addEventListener('load', function () {
         if (this.status == 200) {
-          catalog.repositories = JSON.parse(this.responseText).repositories.sort();
+          registryUI.catalog.repositories = JSON.parse(this.responseText).repositories.sort();
         } else if (this.status == 404) {
-          catalog.createSnackbar('Server not found');
+          registryUI.catalog.createSnackbar('Server not found');
         } else {
-          catalog.createSnackbar(this.responseText);
+          registryUI.catalog.createSnackbar(this.responseText);
         }
       });
       oReq.addEventListener('error', function () {
-        catalog.createSnackbar('An error occured');
+        registryUI.catalog.createSnackbar('An error occured');
       });
       oReq.addEventListener('loadend', function () {
-        catalog.loadend = true;
+        registryUI.catalog.loadend = true;
-        catalog.instance.update();
+        registryUI.catalog.instance.update();
       });
       oReq.open('GET', registryUI.url() + '/v2/_catalog');
       oReq.withCredentials = false;
       oReq.send();
-      riot.update();
     };
     this.on('updated', function () {
       componentHandler.upgradeElements(this['catalog-tag']);
     });
-    catalog.display();
+    registryUI.catalog.go = function (image) {
+      rg.router.go('taglist', {
+        repository: image.split('/')[0],
+        image: image.split('/')[1]
+      });
+    };
+    registryUI.catalog.display();
   </script>
   <!-- End of tag -->
 </catalog>

change.tag

@@ -42,6 +42,7 @@
     });
     registryUI.changeTag.show = function () {
       registryUI.changeTag.update();
+      registryUI.changeTag.serverList.value = registryUI.url();;
       registryUI.changeTag.dialog.showModal();
     };
     registryUI.changeTag.change = function () {
@@ -49,6 +50,7 @@
         registryUI.changeServer(registryUI.changeTag.serverList.value);
       }
       registryUI.changeTag.serverList.value = '';
+      rg.router.go('home');
       registryUI.changeTag.dialog.close();
     };
     registryUI.changeTag.close = function () {

index.html

@@ -40,8 +40,7 @@
     </header>
     <main class="mdl-layout__content">
       <div class="page-content">
-        <catalog></catalog>
+        <app></app>
-        <taglist></taglist>
       </div>
     </main>
     <change></change>
@@ -61,7 +60,9 @@
   <script src="add.tag" type="riot/tag"></script>
   <script src="change.tag" type="riot/tag"></script>
   <script src="menu.tag" type="riot/tag"></script>
+  <script src="app.tag" type="riot/tag"></script>
   <script src="node_modules/riot/riot+compiler.min.js"></script>
+  <script src="node_modules/riotgear-router/dist/rg-router.min.js"></script>
   <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
   <script src="node_modules/material-design-lite/dist/material.min.js"></script>
   <script src="script.js"></script>

package.json

@@ -3,6 +3,7 @@
     "material-design-lite": "^1.1",
     "material-design-icons": "^2.2",
     "dialog-polyfill": "^0.4",
-    "riot": "^2.3"
+    "riot": "^2.3",
+    "riotgear-router": "^1.3.1"
   }
 }

script.js

@@ -48,10 +48,9 @@ registryUI.changeServer = function(url) {
   }
   registryServer.splice(index, 1);
   registryServer = [url].concat(registryServer);
-  registryUI.registryServer.servers = registryServer;
   localStorage.setItem('registryServer', JSON.stringify(registryServer));
 }
-var catalog = {};
+registryUI.catalog = {};
 registryUI.taglist = {};
 
 riot.mount('catalog');
@@ -59,3 +58,4 @@ riot.mount('taglist');
 riot.mount('add');
 riot.mount('change');
 riot.mount('menu');
+riot.mount('app');

taglist.tag

@@ -16,15 +16,15 @@
 -->
 <taglist>
   <!-- Begin of tag -->
-  <div id="taglist-tag" class="taglist" if="{ registryUI.content == 'taglist' }">
+  <div id="taglist-tag" class="taglist">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
-        <a href="#" onclick="catalog.display();">
+        <a href="#" onclick="registryUI.taglist.back();">
           <i class="material-icons mdl-list__item-icon">arrow_back</i>
         </a>
         <h2 class="mdl-card__title-text">Tags of { registryUI.url() + '/' + registryUI.taglist.name }</h2>
       </div>
-      <div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
+      <div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner section-centerd"></div>
       <table class="mdl-data-table mdl-js-data-table full-table" style="border: none;">
         <thead>
           <tr>
@@ -48,12 +48,11 @@
 
   <script>
     registryUI.taglist.instance = this;
-    registryUI.taglist.instance.update();
+    registryUI.taglist.display = function () {
-    this.on('updated', function () {
+      if (rg.router.current && rg.router.current.name == 'taglist') {
-      componentHandler.upgradeElements(this['taglist-tag']);
+        name = rg.router.current.params.repository + (rg.router.current.params.image
-    })
+          ? '/' + rg.router.current.params.image
-    registryUI.taglist.display = function (name) {
+          : '');
-      registryUI.content = 'taglist';
         var oReq = new XMLHttpRequest();
         registryUI.taglist.name = name;
         registryUI.taglist.createSnackbar = function (msg) {
@@ -88,8 +87,14 @@
         oReq.open('GET', registryUI.url() + '/v2/' + name + '/tags/list');
         oReq.withCredentials = false;
         oReq.send();
-      riot.update();
       }
+    };
+    registryUI.taglist.display();
+    registryUI.taglist.instance.update();
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['taglist-tag']);
+    });
+
     registryUI.taglist.reverse = function (th) {
       if (th.className == 'mdl-data-table__header--sorted-ascending') {
         th.className = 'mdl-data-table__header--sorted-descending';
@@ -99,6 +104,9 @@
       registryUI.taglist.tags.reverse();
       registryUI.taglist.instance.update();
     };
+    registryUI.taglist.back = function () {
+      rg.router.go('home');
+    };
   </script>
   <!-- End of tag -->
 </taglist>