[refactoring] clean all files

add.tag

@@ -27,15 +27,14 @@
       <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">
+  </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
+      registryUI.addTag.dialog = registryUI.addTag.dialog || document.querySelector('#add-server-dialog');
-      || document.querySelector('#add-server-dialog');
+      registryUI.addTag.addServer = registryUI.addTag.tileServerList || registryUI.addTag.dialog.querySelector('#add-server-input');
-  registryUI.addTag.addServer = registryUI.addTag.tileServerList
-      || registryUI.addTag.dialog.querySelector('#add-server-input');
       if (!registryUI.addTag.dialog.showModal) {
         dialogPolyfill.registerDialog(registryUI.addTag.dialog);
       }

catalog.tag

@@ -16,17 +16,17 @@
 -->
 <catalog>
   <!-- Begin of tag -->
-<div class="catalog" if="{ registryUI.content == 'catalog' }">
+  <div id="catalog-tag" class="catalog" if="{ registryUI.content == '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;': '' }"
+      <div id="catalog-spinner" style="{ catalog.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
-       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}');">
           <span class="mdl-list__item-primary-content">
-     <i class="material-icons mdl-list__item-icon">send</i> { item }
+            <i class="material-icons mdl-list__item-icon">send</i>
+            { item }
           </span>
         </li>
       </ul>
@@ -57,7 +57,7 @@
       };
       oReq.addEventListener('load', function () {
         if (this.status == 200) {
-        catalog.repositories = JSON.parse(this.responseText).repositories;
+          catalog.repositories = JSON.parse(this.responseText).repositories.sort();
         } else if (this.status == 404) {
           catalog.createSnackbar('Server not found');
         } else {
@@ -76,6 +76,9 @@
       oReq.send();
       riot.update();
     };
+    this.on('updated', function () {
+      componentHandler.upgradeElements(this['catalog-tag']);
+    });
     catalog.display();
   </script>
   <!-- End of tag -->

change.tag

@@ -28,15 +28,14 @@
       <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">
+  </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
+      registryUI.changeTag.dialog = registryUI.changeTag.dialog || document.querySelector('#change-server-dialog');
-      || document.querySelector('#change-server-dialog');
+      registryUI.changeTag.serverList = registryUI.changeTag.serverList || registryUI.changeTag.dialog.querySelector('#server-list');
-  registryUI.changeTag.serverList = registryUI.changeTag.serverList
-      || registryUI.changeTag.dialog.querySelector('#server-list');
       if (!registryUI.changeTag.dialog.showModal) {
         dialogPolyfill.registerDialog(registryUI.changeTag.dialog);
       }

index.html

@@ -16,6 +16,7 @@
 -->
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="UTF-8">
   <LINK href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css">
@@ -26,6 +27,7 @@
   <LINK href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet" type="text/css">
   <title>Docker Registry UI</title>
 </head>
+
 <body>
   <!-- Always shows a header, even in smaller screens. -->
   <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
@@ -64,4 +66,5 @@
   <script src="node_modules/material-design-lite/dist/material.min.js"></script>
   <script src="script.js"></script>
 </body>
+
 </html>

style.css

@@ -31,6 +31,7 @@ html > body {
 .section-centerd {
   margin: auto;
 }
+
 .mdl-data-table th {
   font-size: 18px;
 }

taglist.tag

@@ -19,11 +19,12 @@
   <div id="taglist-tag" class="taglist" if="{ registryUI.content == 'taglist' }">
     <div class="section-centerd mdl-card mdl-shadow--2dp mdl-cell--6-col">
       <div class="mdl-card__title">
-   <a href="#" onclick="catalog.display();"><i class="material-icons mdl-list__item-icon">arrow_back</i></a>
+        <a href="#" onclick="catalog.display();">
+          <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;': '' }"
+      <div id="taglist-spinner" style="{ registryUI.taglist.loadend ? 'display:none;': '' }" class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
-       class="mdl-spinner mdl-js-spinner is-active section-centerd"></div>
       <table class="mdl-data-table mdl-js-data-table full-table" style="border: none;">
         <thead>
           <tr>