New script `utils` for global static functions

gulpfile.js

@@ -20,14 +20,16 @@ const allTags = ['src/tags/*.tag', 'src/tags/dialogs/*.tag'];
 
 const allScripts = [
   'src/scripts/http.js',
-  'src/scripts/script.js'
+  'src/scripts/script.js',
+  'src/scripts/utils.js'
 ];
 
 const staticTags = ['src/tags/*.tag'];
 
 const staticScripts = [
   'src/scripts/http.js',
-  'src/scripts/static.js'
+  'src/scripts/static.js',
+  'src/scripts/utils.js'
 ];
 
 function html() {

src/index.html

@@ -61,6 +61,7 @@
   <script src="tags/app.tag" type="riot/tag"></script>
   <script src="scripts/http.js"></script>
   <script src="scripts/script.js"></script>
+  <script src="scripts/utils.js"></script>
   <!-- endbuild -->
 </body>
 

src/scripts/utils.js

@@ -0,0 +1,68 @@
+
+registryUI.bytesToSize = function (bytes) {
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes == undefined || isNaN(bytes)) {
+    return '?';
+  } else if (bytes == 0) {
+    return '0 Byte';
+  }
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+  return Math.ceil(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
+};
+
+registryUI.dateFormat = function(date) {
+  if (date === undefined) {
+    return '';
+  }
+  const labels = ['a second', 'seconds', 'a minute', 'minutes', 'an hour', 'hours', 'a day', 'days', 'a month', 'months', 'a year', 'years'];
+  const maxSeconds = [1, 60, 3600, 86400, 2592000, 31104000, Infinity];
+  const diff = (new Date() - date) / 1000;
+  for (var i = 0; i < maxSeconds.length - 1; i++) {
+    if (maxSeconds[i] * 2 >= diff) {
+      return labels[i * 2];
+    } else if (maxSeconds[i + 1] > diff) {
+      return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1];
+    }
+  }
+};
+
+
+registryUI.getHistoryIcon = function(attribute) {
+  switch (attribute) {
+    case 'architecture':
+      return 'memory';
+    case 'created':
+      return 'event';
+    case 'docker_version':
+      return '';
+    case 'os':
+      return 'developer_board';
+    case 'Cmd':
+      return 'launch';
+    case 'Entrypoint':
+      return 'input';
+    case 'Env':
+      return 'notes';
+    case 'Labels':
+      return 'label';
+    case 'User':
+      return 'face';
+    case 'Volumes':
+      return 'storage';
+    case 'WorkingDir':
+      return 'home';
+    case 'author':
+      return 'account_circle';
+    case 'id':
+    case 'digest':
+      return 'settings_ethernet';
+    case 'created_by':
+      return 'build';
+    case 'size':
+      return 'get_app';
+    case 'ExposedPorts':
+      return 'router';
+    default:
+      ''
+  }
+}

src/tags/app.tag

@@ -221,17 +221,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       oReq.send();
     };
 
-    registryUI.bytesToSize = function (bytes) {
-      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-      if (bytes == undefined || isNaN(bytes)) {
-        return '?';
-      } else if (bytes == 0) {
-        return '0 Byte';
-      }
-      const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-      return Math.ceil(bytes / Math.pow(1024, i)) + ' ' + sizes[i];
-    };
-
     registryUI.taglist.go = function(image) {
       route('taglist/' + image);
     };

src/tags/image-date.tag

@@ -15,29 +15,14 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <image-date>
-  <div title="Creation date { this.localDate }">{ this.dateFormat(this.date) } ago</div>
+  <div title="Creation date { this.localDate }">{ registryUI.dateFormat(this.date) } ago</div>
   <script type="text/javascript">
     const self = this;
-    this.dateFormat = function(date) {
-      if (date === undefined) {
-        return '';
-      }
-      const labels = ['a second', 'seconds', 'a minute', 'minutes', 'an hour', 'hours', 'a day', 'days', 'a month', 'months', 'a year', 'years'];
-      const maxSeconds = [1, 60, 3600, 86400, 2592000, 31104000, Infinity];
-      const diff = (new Date() - date) / 1000;
-      for (var i = 0; i < maxSeconds.length - 1; i++) {
-        if (maxSeconds[i] * 2 >= diff) {
-          return labels[i * 2];
-        } else if (maxSeconds[i + 1] > diff) {
-          return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1];
-        }
-      }
-    };
+
     opts.image.on('creation-date', function(date) {
       self.date = date;
       self.localDate = date.toLocaleString()
       self.update();
     });
-    opts.image.trigger('get-date');
   </script>
 </image-date>

src/tags/tag-history-element.tag

@@ -15,50 +15,9 @@ 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-element class="{entry.key}">
-  <div class="headline"><i class="material-icons">{ this.getIcon(entry.key) }</i>
+  <div class="headline"><i class="material-icons">{ registryUI.getHistoryIcon(entry.key) }</i>
     <p>{ entry.key.replace('_', ' ') }</p>
   </div>
   <div class="value" if={!(entry.value instanceof Array)}> { entry.value }</div>
   <div class="value" each={ e in entry.value } if={entry.value instanceof Array}> { e }</div>
-  <script type="text/javascript">
-    this.getIcon = function(attribute) {
-      switch (attribute) {
-        case 'architecture':
-          return 'memory';
-        case 'created':
-          return 'event';
-        case 'docker_version':
-          return '';
-        case 'os':
-          return 'developer_board';
-        case 'Cmd':
-          return 'launch';
-        case 'Entrypoint':
-          return 'input';
-        case 'Env':
-          return 'notes';
-        case 'Labels':
-          return 'label';
-        case 'User':
-          return 'face';
-        case 'Volumes':
-          return 'storage';
-        case 'WorkingDir':
-          return 'home';
-        case 'author':
-          return 'account_circle';
-        case 'id':
-        case 'digest':
-          return 'settings_ethernet';
-        case 'created_by':
-          return 'build';
-        case 'size':
-          return 'get_app';
-        case 'ExposedPorts':
-          return 'router';
-        default:
-          ''
-      }
-    }
-  </script>
 </tag-history-element>