From 27db0da65fadf238617ed4f784c081ed6aecc6de Mon Sep 17 00:00:00 2001
From: Joxit <Joxit972@gmail.com>
Date: Sun, 8 May 2016 01:02:40 +0200
Subject: [PATCH 1/4] [menu] remplace layout drawer with menu dots

---
 index.html | 16 ++--------------
 menu.tag   | 36 ++++++++++++++++++++++++++++++++++++
 script.js  |  2 +-
 3 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 menu.tag

diff --git a/index.html b/index.html
index 660f360..6c5ca7d 100644
--- a/index.html
+++ b/index.html
@@ -32,22 +32,9 @@
    <div class="mdl-layout__header-row">
     <!-- Title -->
     <span class="mdl-layout-title">Docker Registry UI</span>
-    <!-- Add spacer, to align navigation to the right -->
-    <div class="mdl-layout-spacer"></div>
-    <!-- Navigation. We hide it in small screens. -->
-    <nav class="mdl-navigation mdl-layout--large-screen-only">
-     <a class="mdl-navigation__link" href="">Name spaces</a><a class="mdl-navigation__link" href="index.html">Home</a>
-    </nav>
+    <menu></menu>
    </div>
   </header>
-  <div class="mdl-layout__drawer">
-   <span class="mdl-layout-title">Docker Registry UI</span>
-   <nav class="mdl-navigation">
-    <a class="mdl-navigation__link" href="">Home</a>
-    <a class="mdl-navigation__link" href="">Name spaces</a>
-    <a class="mdl-navigation__link" href="">Change URL</a>
-   </nav>
-  </div>
   <main class="mdl-layout__content">
   <div class="page-content">
    <catalog></catalog>
@@ -66,6 +53,7 @@
  </div>
  <script src="catalog.tag" type="riot/tag"></script>
  <script src="taglist.tag" type="riot/tag"></script>
+ <script src="menu.tag" type="riot/tag"></script>
  <script src="node_modules/riot/riot+compiler.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>
diff --git a/menu.tag b/menu.tag
new file mode 100644
index 0000000..928caf3
--- /dev/null
+++ b/menu.tag
@@ -0,0 +1,36 @@
+<!--
+ 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/>.
+-->
+<menu>
+<div id="card-menu" class="mdl-card__menu">
+ <button id="registry-menu" name="registry-menu" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+  <i class="material-icons">more_vert</i>
+ </button>
+ <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu">
+  <li class="mdl-menu__item">Add URL</li>
+  <li class="mdl-menu__item">Change URL</li>
+ </ul>
+</div>
+
+ <script type="text/javascript">
+registryUI.menuTag = registryUI.menuTag || {};
+registryUI.menuTag.update = this.update;
+this.on('updated', function () {
+  componentHandler.upgradeElements(this['card-menu']);
+});
+registryUI.menuTag.update();
+</script>
+</menu>
diff --git a/script.js b/script.js
index ce095cd..bd08afa 100644
--- a/script.js
+++ b/script.js
@@ -22,4 +22,4 @@ var catalog = {};
 registryUI.taglist = {};
 riot.mount('catalog');
 riot.mount('taglist');
-
+riot.mount('menu');

From 3589a7e3690cfa09b675bcd84c6d819ca4081ec0 Mon Sep 17 00:00:00 2001
From: Joxit <Joxit972@gmail.com>
Date: Thu, 12 May 2016 22:24:35 +0200
Subject: [PATCH 2/4] [change] Add change dialog and tag for menu

---
 change.tag | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  2 ++
 menu.tag   |  2 +-
 script.js  |  1 +
 4 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 change.tag

diff --git a/change.tag b/change.tag
new file mode 100644
index 0000000..3aa99b0
--- /dev/null
+++ b/change.tag
@@ -0,0 +1,54 @@
+<!--
+ 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/>.
+-->
+<change>
+<dialog id="change-server-dialog" class="mdl-dialog">
+<h4 class="mdl-dialog__title">Change your Server ?</h4>
+<div class="mdl-dialog__content">
+ <div class="mdl-textfield mdl-js-textfield">
+  <select class="mdl-textfield__input mdl-textfield__select" name="server-list" id="server-list">
+   <option each="{ url in registryUI.url() }" value={url}>{url}</option>
+  </select>
+ </div>
+</div>
+<div class="mdl-dialog__actions">
+ <button type="button" class="mdl-button change" onClick="registryUI.changeTag.change();">Change</button>
+ <button type="button" class="mdl-button close" onClick="registryUI.changeTag.close();">Cancel</button>
+</div>
+</dialog> <script type="text/javascript">
+registryUI.changeTag = registryUI.changeTag || {};
+registryUI.changeTag.update = this.update;
+this.on('updated', function () {
+  componentHandler.upgradeElements(this['change-server-dialog']);
+  registryUI.changeTag.dialog = registryUI.changeTag.dialog
+      || document.querySelector('#change-server-dialog');
+  registryUI.changeTag.tileServerList = registryUI.changeTag.tileServerList
+      || registryUI.changeTag.dialog.querySelector('#server-list');
+  if (!registryUI.changeTag.dialog.showModal) {
+    dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
+  }
+});
+registryUI.changeTag.show = function() {
+  registryUI.changeTag.dialog.showModal();
+};
+registryUI.changeTag.change = function() {
+  registryUI.changeTag.dialog.close();
+};
+registryUI.changeTag.close = function() {
+  registryUI.changeTag.dialog.close();
+};
+</script>
+</change>
diff --git a/index.html b/index.html
index 6c5ca7d..b2d8fce 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,7 @@
    <taglist></taglist>
   </div>
   </main>
+  <change></change>
   <footer class="mdl-mini-footer">
    <div class="mdl-mini-footer__left-section">
     <div class="mdl-logo">Docker Registry UI</div>
@@ -53,6 +54,7 @@
  </div>
  <script src="catalog.tag" type="riot/tag"></script>
  <script src="taglist.tag" type="riot/tag"></script>
+ <script src="change.tag" type="riot/tag"></script>
  <script src="menu.tag" type="riot/tag"></script>
  <script src="node_modules/riot/riot+compiler.min.js"></script>
  <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
diff --git a/menu.tag b/menu.tag
index 928caf3..ee6ba3f 100644
--- a/menu.tag
+++ b/menu.tag
@@ -21,7 +21,7 @@
  </button>
  <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu">
   <li class="mdl-menu__item">Add URL</li>
-  <li class="mdl-menu__item">Change URL</li>
+  <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">Change URL</li>
  </ul>
 </div>
 
diff --git a/script.js b/script.js
index bd08afa..e05f753 100644
--- a/script.js
+++ b/script.js
@@ -22,4 +22,5 @@ var catalog = {};
 registryUI.taglist = {};
 riot.mount('catalog');
 riot.mount('taglist');
+riot.mount('change');
 riot.mount('menu');

From b13a8ab206124c65356d7df9db2bd66ecf7a8195 Mon Sep 17 00:00:00 2001
From: Joxit <Joxit972@gmail.com>
Date: Thu, 12 May 2016 22:51:34 +0200
Subject: [PATCH 3/4] [change] Add listener on change dialog button

---
 change.tag |  9 +++++++--
 script.js  | 24 +++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/change.tag b/change.tag
index 3aa99b0..0650ef5 100644
--- a/change.tag
+++ b/change.tag
@@ -20,7 +20,7 @@
 <div class="mdl-dialog__content">
  <div class="mdl-textfield mdl-js-textfield">
   <select class="mdl-textfield__input mdl-textfield__select" name="server-list" id="server-list">
-   <option each="{ url in registryUI.url() }" value={url}>{url}</option>
+   <option each="{ url in registryUI.getRegistryServer() }" value={url}>{url}</option>
   </select>
  </div>
 </div>
@@ -35,16 +35,21 @@ this.on('updated', function () {
   componentHandler.upgradeElements(this['change-server-dialog']);
   registryUI.changeTag.dialog = registryUI.changeTag.dialog
       || document.querySelector('#change-server-dialog');
-  registryUI.changeTag.tileServerList = registryUI.changeTag.tileServerList
+  registryUI.changeTag.serverList = registryUI.changeTag.serverList
       || registryUI.changeTag.dialog.querySelector('#server-list');
   if (!registryUI.changeTag.dialog.showModal) {
     dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
   }
 });
 registryUI.changeTag.show = function() {
+  registryUI.changeTag.update();
   registryUI.changeTag.dialog.showModal();
 };
 registryUI.changeTag.change = function() {
+  if (registryUI.changeTag.serverList.value && registryUI.changeTag.serverList.value.length > 0) {
+    registryUI.changeServer(registryUI.changeTag.serverList.value);
+  }
+  registryUI.changeTag.serverList.value = '';
   registryUI.changeTag.dialog.close();
 };
 registryUI.changeTag.close = function() {
diff --git a/script.js b/script.js
index e05f753..0969f20 100644
--- a/script.js
+++ b/script.js
@@ -16,10 +16,32 @@
  */
 var registryUI = {}
 registryUI.url = function () {
-  return localStorage.getItem('registryServer');
+  return registryUI.getRegistryServer(0);
+}
+registryUI.getRegistryServer = function (i) {
+  try {
+    var res = JSON.parse(localStorage.getItem('registryServer'));
+    if (res instanceof Array) {
+      return i ? res[i] : res;
+    }
+  } catch (e) {}
+  return i ? '' : [];
+}
+registryUI.changeServer = function (url) {
+  var registryServer = registryUI.getRegistryServer();
+  url = url.trim();
+  var index = registryServer.indexOf(url);
+  if (index == -1) {
+    return;
+  }
+  registryServer.splice(index, 1);
+  registryServer = [ url ].concat(registryServer);
+  registryUI.registryServer.servers = registryServer;
+  localStorage.setItem('registryServer', JSON.stringify(registryServer));
 }
 var catalog = {};
 registryUI.taglist = {};
+
 riot.mount('catalog');
 riot.mount('taglist');
 riot.mount('change');

From b3d8989d9733e3e8741d11a3f9c94c605199a9bd Mon Sep 17 00:00:00 2001
From: Joxit <Joxit972@gmail.com>
Date: Fri, 13 May 2016 00:01:47 +0200
Subject: [PATCH 4/4] [add] Add add dialog and tag for menu

---
 add.tag    | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  2 ++
 menu.tag   |  2 +-
 script.js  | 15 ++++++++++++--
 4 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 add.tag

diff --git a/add.tag b/add.tag
new file mode 100644
index 0000000..3fdc896
--- /dev/null
+++ b/add.tag
@@ -0,0 +1,58 @@
+<!--
+ 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/>.
+-->
+<add>
+<dialog id="add-server-dialog" class="mdl-dialog">
+ <h4 class="mdl-dialog__title">Add your Server ?</h4>
+ <div class="mdl-dialog__content">
+  <div class="mdl-textfield mdl-js-textfield">
+    <input class="mdl-textfield__input" type="text" id="add-server-input">
+    <label class="mdl-textfield__label" for="add-server-input">Server url</label>
+  </div>
+ </div>
+ <div class="mdl-dialog__actions">
+ <button type="button" class="mdl-button change" onClick="registryUI.addTag.add();">Add</button>
+ <button type="button" class="mdl-button close" onClick="registryUI.addTag.close();">Cancel</button>
+</div>
+</dialog> <script type="text/javascript">
+registryUI.addTag = registryUI.addTag || {};
+registryUI.addTag.update = this.update;
+this.on('updated', function () {
+  componentHandler.upgradeElements(this['add-server-dialog']);
+  registryUI.addTag.dialog = registryUI.addTag.dialog
+      || document.querySelector('#add-server-dialog');
+  registryUI.addTag.addServer = registryUI.addTag.tileServerList
+      || registryUI.addTag.dialog.querySelector('#add-server-input');
+  if (!registryUI.addTag.dialog.showModal) {
+    dialogPolyfill.registerDialog(registryUI.addTag.dialog);
+  }
+});
+registryUI.addTag.show = function() {
+  registryUI.addTag.dialog.showModal();
+};
+registryUI.addTag.add = function() {
+  if (registryUI.addTag.addServer.value && registryUI.addTag.addServer.value.length > 0) {
+    registryUI.addServer(registryUI.addTag.addServer.value);
+  }
+  registryUI.addTag.addServer.value = '';
+  registryUI.addTag.dialog.close();
+};
+registryUI.addTag.close = function() {
+  registryUI.addTag.dialog.close();
+};
+registryUI.addTag.update();
+</script>
+</add>
diff --git a/index.html b/index.html
index b2d8fce..842b37d 100644
--- a/index.html
+++ b/index.html
@@ -42,6 +42,7 @@
   </div>
   </main>
   <change></change>
+  <add></add>
   <footer class="mdl-mini-footer">
    <div class="mdl-mini-footer__left-section">
     <div class="mdl-logo">Docker Registry UI</div>
@@ -54,6 +55,7 @@
  </div>
  <script src="catalog.tag" type="riot/tag"></script>
  <script src="taglist.tag" type="riot/tag"></script>
+ <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="node_modules/riot/riot+compiler.min.js"></script>
diff --git a/menu.tag b/menu.tag
index ee6ba3f..bde5f07 100644
--- a/menu.tag
+++ b/menu.tag
@@ -20,7 +20,7 @@
   <i class="material-icons">more_vert</i>
  </button>
  <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="registry-menu">
-  <li class="mdl-menu__item">Add URL</li>
+  <li class="mdl-menu__item" onclick="registryUI.addTag.show();">Add URL</li>
   <li class="mdl-menu__item" onclick="registryUI.changeTag.show();">Change URL</li>
  </ul>
 </div>
diff --git a/script.js b/script.js
index 0969f20..726e3d8 100644
--- a/script.js
+++ b/script.js
@@ -22,10 +22,20 @@ registryUI.getRegistryServer = function (i) {
   try {
     var res = JSON.parse(localStorage.getItem('registryServer'));
     if (res instanceof Array) {
-      return i ? res[i] : res;
+      return (!isNaN(i)) ? res[i] : res;
     }
   } catch (e) {}
-  return i ? '' : [];
+  return (!isNaN(i)) ? '' : [];
+}
+registryUI.addServer = function (url) {
+  var registryServer = registryUI.getRegistryServer();
+  url = url.trim();
+  var index = registryServer.indexOf(url);
+  if (index != -1) {
+    return;
+  }
+  registryServer.push(url);
+  localStorage.setItem('registryServer', JSON.stringify(registryServer));
 }
 registryUI.changeServer = function (url) {
   var registryServer = registryUI.getRegistryServer();
@@ -44,5 +54,6 @@ registryUI.taglist = {};
 
 riot.mount('catalog');
 riot.mount('taglist');
+riot.mount('add');
 riot.mount('change');
 riot.mount('menu');