Add .relative-time class and JS logic

3 files changed, 59 insertions, 56 deletions

diff --git a/layouts/issues/small.html b/layouts/issues/small.html
index 6ed2cce..6112e46 100644
--- a/layouts/issues/small.html
+++ b/layouts/issues/small.html
@@ -7,8 +7,8 @@
 
 <a href="{{ .Permalink }}" class="issue no-underline">
   {{ if .Params.informational }}
-    
-    <small class="date float-right">
+
+  <small class="date float-right relative-time" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}">
       {{ if .Site.Params.dateFormat }}
         {{ .Date.Format .Site.Params.dateFormat }}
       {{ else }}
@@ -21,9 +21,9 @@
     </h3>
     <span class="faded">{{ .Summary | truncate 200 }}
     </span>
-  
+
   {{ else if .Params.Resolved }}
-    <small class="date float-right">
+    <small class="date float-right relative-time" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}">
       {{ if .Site.Params.dateFormat }}
         {{ .Date.Format .Site.Params.dateFormat }}
       {{ else }}
@@ -67,7 +67,7 @@
     {{ end }}
   {{ else }}
 
-    <small class="date float-right">
+    <small class="date float-right relative-time" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}">
       {{ if .Site.Params.dateFormat }}
         {{ .Date.Format .Site.Params.dateFormat }}
       {{ else }}
@@ -82,17 +82,17 @@
     <!-- Marker -->
     {{ if eq .Params.severity "notice" }}
       <strong class="warning">
-        ◆ 
+        ◆
         {{ T "downtimeOngoing" }}
       </strong>
     {{ else }}
       <strong class="error">
         {{ if eq .Params.severity "down" }}
-        ■ 
+        ■
         {{ else if eq .Params.severity "disrupted" }}
-        ▲ 
+        ▲
         {{ else }}
-        ◆ 
+        ◆
         {{ end }}
         {{ T "downtimeOngoing" }}
       </strong>
diff --git a/layouts/partials/index/summary.html b/layouts/partials/index/summary.html
index de6bceb..dcf753c 100644
--- a/layouts/partials/index/summary.html
+++ b/layouts/partials/index/summary.html
@@ -20,5 +20,5 @@
     {{ end }}{{ end }}{{ end }}
   </strong>
 
-  <div class="summary__date clicky float-right" onclick="location.reload()"></div>
-</div>
\ No newline at end of file
+  <div class="summary__date clicky float-right relative-time" onclick="location.reload()" data-prefix="{{ T "lastChecked" }} "></div>
+</div>
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index fbe102c..7971bc5 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -41,58 +41,61 @@
   }
 
   /**
-   * Timer
+   * Returns a relative date string for the given date.
    */
+  function timeSince(date) {
+    var seconds = Math.floor((new Date() - date) / 1000);
 
-  function hasClass(element, className) {
-    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
-  }
-
-  if (hasClass(document.querySelector('body'), 'status-homepage')) {
-    var lastUpdated = document.querySelector('.summary__date');
-    lastUpdated.innerHTML = '{{ T "lastChecked" }} {{ T "justNow" }}';
-
-    var lastUpdate = new Date();
-
-    function timeSince(date) {
-      var seconds = Math.floor((new Date() - date) / 1000);
+    var interval = Math.floor(seconds / 31536000);
 
-      var interval = Math.floor(seconds / 31536000);
-
-      if (interval > 1) {
-        return interval + ' {{ T "yearsAgo" }}';
-      }
-      interval = Math.floor(seconds / 2592000);
-      if (interval > 1) {
-        return interval + ' {{ T "monthsAgo" }}';
-      }
-      interval = Math.floor(seconds / 86400);
-      if (interval > 1) {
-        return interval + '{{ T "daysAgo" }}';
-      }
-      interval = Math.floor(seconds / 3600);
-      if (interval > 1) {
-        return interval + '{{ T "hoursAgo" }}';
-      }
-      interval = Math.floor(seconds / 60);
-      if (interval > 1) {
-        return interval + ' {{ T "minsAgo" }}';
-      }
-      return Math.floor(seconds) + '{{ T "secondsAgo" }}';
+    if (interval > 1) {
+      return interval + ' {{ T "yearsAgo" }}';
+    }
+    interval = Math.floor(seconds / 2592000);
+    if (interval > 1) {
+      return interval + ' {{ T "monthsAgo" }}';
+    }
+    interval = Math.floor(seconds / 86400);
+    if (interval > 1) {
+      return interval + '{{ T "daysAgo" }}';
     }
-    var aDay = 24*60*60*1000;
+    interval = Math.floor(seconds / 3600);
+    if (interval > 1) {
+      return interval + '{{ T "hoursAgo" }}';
+    }
+    interval = Math.floor(seconds / 60);
+    if (interval > 1) {
+      return interval + ' {{ T "minsAgo" }}';
+    }
+    return Math.floor(seconds) + '{{ T "secondsAgo" }}';
   }
 
-  window.setInterval(function() {
-    if (hasClass(document.querySelector('body'), 'status-homepage')) {
-      lastUpdated.innerHTML = '{{ T "lastChecked" }} ' + timeSince(lastUpdate) + ' {{ T "someTimeAgo" }}';
+  /**
+   * Changes elements with the class 'relative-time' into relative times and
+   * moves the timestamp to a title attribute tooltip.
+   */
+  function updateRelativeTimes() {
+    document.querySelectorAll('.relative-time')
+      .forEach(function(element) {
+        var time = Date.parse(element.getAttribute('title'));
+        var html = element.getAttribute('data-prefix') || '';
+        if (!time) {
+          time = element.innerText;
+          element.setAttribute('title', time || new Date);
+          html += '{{ T "justNow" }}';
+        } else {
+          html += timeSince(time) + ' {{ T "someTimeAgo" }}';
+        }
+        element.innerHTML = html.trim();
+      })
+  }
+  updateRelativeTimes();
+  setInterval(updateRelativeTimes, 5000);
 
-      // Refresh almost every 5m
-      if (Math.floor(new Date() - lastUpdate) > 290000) {
-        location.reload();
-      }
-    }
-  }, 5000)
+  // Reload homepage eevery 290 seconds
+  if (document.querySelector('body.status-homepage')) {
+    setInterval(location.reload, 290000)
+  }
 </script>