bye jquery.timeago, hello es6

public/js/jquery.timeago.js

@@ -1,211 +0,0 @@
-/**
- * Timeago is a jQuery plugin that makes it easy to support automatically
- * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
- *
- * @name timeago
- * @version 1.5.4
- * @requires jQuery v1.2.3+
- * @author Ryan McGeary
- * @license MIT License - http://www.opensource.org/licenses/mit-license.php
- *
- * For usage and examples, visit:
- * http://timeago.yarp.com/
- *
- * Copyright (c) 2008-2017, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org)
- */ (function (factory) {
-  if (typeof define === 'function' && define.amd) {
-    // AMD. Register as an anonymous module.
-    define(['jquery'], factory);
-  } else if (typeof module === 'object' && typeof module.exports === 'object') {
-    factory(require('jquery'));
-  } else {
-    // Browser globals
-    factory(jQuery);
-  }
-}(function ($) {
-  $.timeago = function(timestamp) {
-    if (timestamp instanceof Date) {
-      return inWords(timestamp);
-    } else if (typeof timestamp === "string") {
-      return inWords($.timeago.parse(timestamp));
-    } else if (typeof timestamp === "number") {
-      return inWords(new Date(timestamp));
-    } else {
-      return inWords($.timeago.datetime(timestamp));
-    }
-  };
-  var $t = $.timeago;
-  $.extend($.timeago, {
-    settings: {
-      refreshMillis: 60000,
-      allowPast: true,
-      allowFuture: false,
-      localeTitle: false,
-      cutoff: 0,
-      autoDispose: true,
-      strings: {
-        prefixAgo: null,
-        prefixFromNow: null,
-        suffixAgo: "ago",
-        suffixFromNow: "from now",
-        inPast: 'any moment now',
-        seconds: "less than a minute",
-        minute: "about a minute",
-        minutes: "%d minutes",
-        hour: "about an hour",
-        hours: "about %d hours",
-        day: "a day",
-        days: "%d days",
-        month: "about a month",
-        months: "%d months",
-        year: "about a year",
-        years: "%d years",
-        wordSeparator: " ",
-        numbers: []
-      }
-    },
-    inWords: function(distanceMillis) {
-      if (!this.settings.allowPast && ! this.settings.allowFuture) {
-          throw 'timeago allowPast and allowFuture settings can not both be set to false.';
-      }
-      var $l = this.settings.strings;
-      var prefix = $l.prefixAgo;
-      var suffix = $l.suffixAgo;
-      if (this.settings.allowFuture) {
-        if (distanceMillis < 0) {
-          prefix = $l.prefixFromNow;
-          suffix = $l.suffixFromNow;
-        }
-      }
-      if (!this.settings.allowPast && distanceMillis >= 0) {
-        return this.settings.strings.inPast;
-      }
-      var seconds = Math.abs(distanceMillis) / 1000;
-      var minutes = seconds / 60;
-      var hours = minutes / 60;
-      var days = hours / 24;
-      var years = days / 365;
-      function substitute(stringOrFunction, number) {
-        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
-        var value = ($l.numbers && $l.numbers[number]) || number;
-        return string.replace(/%d/i, value);
-      }
-      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
-        seconds < 90 && substitute($l.minute, 1) ||
-        minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
-        minutes < 90 && substitute($l.hour, 1) ||
-        hours < 24 && substitute($l.hours, Math.round(hours)) ||
-        hours < 42 && substitute($l.day, 1) ||
-        days < 30 && substitute($l.days, Math.round(days)) ||
-        days < 45 && substitute($l.month, 1) ||
-        days < 365 && substitute($l.months, Math.round(days / 30)) ||
-        years < 1.5 && substitute($l.year, 1) ||
-        substitute($l.years, Math.round(years));
-      var separator = $l.wordSeparator || "";
-      if ($l.wordSeparator === undefined) { separator = " "; }
-      return $.trim([prefix, words, suffix].join(separator));
-    },
-    parse: function(iso8601) {
-      var s = $.trim(iso8601);
-      s = s.replace(/\.\d+/,""); // remove milliseconds
-      s = s.replace(/-/,"/").replace(/-/,"/");
-      s = s.replace(/T/," ").replace(/Z/," UTC");
-      s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
-      s = s.replace(/([\+\-]\d\d)$/," $100"); // +09 -> +0900
-      return new Date(s);
-    },
-    datetime: function(elem) {
-      var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
-      return $t.parse(iso8601);
-    },
-    isTime: function(elem) {
-      // jQuery's `is()` doesn't play well with HTML5 in IE
-      return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
-    }
-  });
-  // functions that can be called via $(el).timeago('action')
-  // init is default when no action is given
-  // functions are called with context of a single element
-  var functions = {
-    init: function() {
-      functions.dispose.call(this);
-      var refresh_el = $.proxy(refresh, this);
-      refresh_el();
-      var $s = $t.settings;
-      if ($s.refreshMillis > 0) {
-        this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
-      }
-    },
-    update: function(timestamp) {
-      var date = (timestamp instanceof Date) ? timestamp : $t.parse(timestamp);
-      $(this).data('timeago', { datetime: date });
-      if ($t.settings.localeTitle) {
-        $(this).attr("title", date.toLocaleString());
-      }
-      refresh.apply(this);
-    },
-    updateFromDOM: function() {
-      $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) });
-      refresh.apply(this);
-    },
-    dispose: function () {
-      if (this._timeagoInterval) {
-        window.clearInterval(this._timeagoInterval);
-        this._timeagoInterval = null;
-      }
-    }
-  };
-  $.fn.timeago = function(action, options) {
-    var fn = action ? functions[action] : functions.init;
-    if (!fn) {
-      throw new Error("Unknown function name '"+ action +"' for timeago");
-    }
-    // each over objects here and call the requested function
-    this.each(function() {
-      fn.call(this, options);
-    });
-    return this;
-  };
-  function refresh() {
-    var $s = $t.settings;
-    //check if it's still visible
-    if ($s.autoDispose && !$.contains(document.documentElement,this)) {
-      //stop if it has been removed
-      $(this).timeago("dispose");
-      return this;
-    }
-    var data = prepareData(this);
-    if (!isNaN(data.datetime)) {
-      if ( $s.cutoff === 0 || Math.abs(distance(data.datetime)) < $s.cutoff) {
-        $(this).text(inWords(data.datetime));
-      } else {
-        if ($(this).attr('title').length > 0) {
-            $(this).text($(this).attr('title'));
-        }
-      }
-    }
-    return this;
-  }
-  function prepareData(element) {
-    element = $(element);
-    if (!element.data("timeago")) {
-      element.data("timeago", { datetime: $t.datetime(element) });
-      var text = $.trim(element.text());
-      if ($t.settings.localeTitle) {
-        element.attr("title", element.data('timeago').datetime.toLocaleString());
-      } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {
-        element.attr("title", text);
-      }
-    }
-    return element.data("timeago");
-  }
-  function inWords(date) {
-    return $t.inWords(distance(date));
-  }
-  function distance(date) {
-    return (new Date().getTime() - date.getTime());
-  }
-  // fix for IE6 suckage
-  document.createElement("abbr");
-  document.createElement("time");
-}));

public/js/main.js

@@ -1,16 +1,152 @@
 $(document).ready(() => {
+  const menu = document.querySelector("menu");
   switch(window.location.pathname.split(/\//)[1]) {
-    case "v": $("menu > li:eq(1)").addClass("active"); break;
+    case "v": menu.querySelector("li:nth-child(2)").classList.add("active"); break;
     case "u":
-      $("menu > li:eq(3)").addClass("active");
+      menu.querySelector("li:nth-child(4)").classList.add("active");
-      $("menu > li:eq(3) > ul").removeClass("hidden");
+      menu.querySelector("li:nth-child(4) > ul").classList.remove("hidden");
     break;
     case "a":
-      $("menu > li:eq(5)").addClass("active");
+      menu.querySelector("li:nth-child(6)").classList.add("active");
-      $("menu > li:eq(5) > ul").removeClass("hidden");
+      menu.querySelector("li:nth-child(6) > ul").classList.remove("hidden");
     break;
     default:
-      $("menu > li:eq(0)").addClass("active");
+      menu.querySelector("li:nth-child(1)").classList.add("active");
     break;
   }
+
+  // timeago
+  const epochs = [
+    ["year", 31536000],
+    ["month", 2592000],
+    ["day", 86400],
+    ["hour", 3600],
+    ["minute", 60],
+    ["second", 1]
+  ];
+  const getDuration = timeAgoInSeconds => {
+    for (let [name, seconds] of epochs) {
+      const interval = ~~(timeAgoInSeconds / seconds);
+      if (interval >= 1) {
+        return {
+          interval: interval,
+          epoch: name
+        };
+      }
+    }
+  };
+  const timeAgo = date => {
+    const timeAgoInSeconds = ~~((new Date() - new Date(date)) / 1000);
+    const {interval, epoch} = getDuration(timeAgoInSeconds);
+    const suffix = interval === 1 ? "" : "s";
+    return `${interval} ${epoch}${suffix} ago`;
+  };
+
+  document.querySelectorAll("time").forEach(e => e.innerHTML = timeAgo(e.title));
+
+  $.widget("custom.combobox", {
+    _create: function() {
+      this.wrapper = $("<span>")
+        .addClass("custom-combobox")
+        .insertAfter(this.element);
+      this.element.hide();
+      this._createAutocomplete();
+      this._createShowAllButton();
+    },
+    _createAutocomplete: function() {
+      var selected = this.element.children(":selected"),
+          value = selected.val() ? selected.text() : "";
+      this.input = $("<input>")
+        .appendTo(this.wrapper)
+        .val(value)
+        .attr("title", "")
+        .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
+        .autocomplete({
+          delay: 0,
+          minLength: 0,
+          source: $.proxy(this, "_source")
+        })
+        .tooltip({
+          classes: {
+            "ui-tooltip": "ui-state-highlight"
+          }
+        });
+      this._on(this.input, {
+        autocompleteselect: function(event, ui) {
+          ui.item.option.selected = true;
+          this._trigger("select", event, {
+            item: ui.item.option
+          });
+        },
+        autocompletechange: "_removeIfInvalid"
+      });
+    },
+    _createShowAllButton: function() {
+      var input = this.input,
+        wasOpen = false;
+      $("<a>")
+        .attr("tabIndex", -1)
+        .attr("title", "Show All Items")
+        .tooltip()
+        .appendTo(this.wrapper)
+        .button({
+          icons: {
+            primary: "ui-icon-triangle-1-s"
+          },
+          text: false
+        })
+        .removeClass("ui-corner-all")
+        .addClass("custom-combobox-toggle ui-corner-right")
+        .on("mousedown", function() {
+          wasOpen = input.autocomplete("widget").is(":visible");
+        })
+        .on("click", function() {
+          input.trigger("focus");
+          if (wasOpen) return;
+          input.autocomplete("search", "");
+        });
+    },
+    _source: function(request, response) {
+      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
+      response(this.element.children("option").map(function() {
+        var text = $(this).text();
+        if (this.value && (!request.term || matcher.test(text)))
+          return {
+            label: text,
+            value: text,
+            option: this
+          };
+      }));
+    },
+    _removeIfInvalid: function(event, ui) {
+      if (ui.item) return;
+      var value = this.input.val(),
+        valueLowerCase = value.toLowerCase(),
+        valid = false;
+      this.element.children("option").each(function() {
+        if ($(this).text().toLowerCase() === valueLowerCase) {
+          this.selected = valid = true;
+          return false;
+        }
+      });
+      if (valid) return;
+      this.input
+        .val("")
+        .attr("title", value + " didn't match any item")
+        .tooltip("open");
+      this.element.val("");
+      this._delay(function() {
+        this.input.tooltip("close").attr("title", "");
+      }, 2500);
+      this.input.autocomplete("instance").term = "";
+    },
+    _destroy: function() {
+      this.wrapper.remove();
+      this.element.show();
+    }
+  });
+  $("#lang").combobox();
+  $("#toggle").on("click", function() {
+    $("#lang").toggle();
+  });
 });

src/routes/r/view.mjs

@@ -25,7 +25,7 @@ export default express.Router()
             uuid: r.uuid,
             paste: highlight.highlightAuto(paste).value,
             language: r.language,
-            stamp: new Date(r.stamp).toISOString(),
+            stamp: r.stamp,
             desc: r.reply ? `Reply to <a href="/${r.reply}/" class="descID">/${r.reply}/</a>` : r.desc || "No description.",
             rows: paste.split(/\r?\n/).length
           };
@@ -43,7 +43,7 @@ export default express.Router()
           uuid: r.uuid,
           paste: highlight.highlightAuto(paste).value,
           language: r.language,
-          stamp: new Date(r.stamp).toISOString(),
+          stamp: r.stamp,
           desc: r.reply ? `Reply to <a href="/${r.reply}/" class="descID">/${r.reply}/</a>` : r.desc || "No description.",
           rows: paste.split(/\r?\n/).length
         }});

views/layouts/main.handlebars

@@ -41,132 +41,7 @@
 </section>
 
 <script type="text/javascript" src="/js/jquery-3.1.0.min.js"></script>
-<script type="text/javascript" src="/js/jquery.timeago.js"></script>
 <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="/js/main.js"></script>
-<script>
-  $(document).ready(() => {
-    let s = $.timeago.settings;
-    let str = s.strings;
-    s.refreshMillis = 1000;
-    s.allowFuture = true;
-    s.localeTitle = true;
-    str.seconds = "%d seconds";
-    str.minute = "1 minute";
-    str.hour = "1 hour";
-    str.hours = "%d hours";
-    str.day = "1 day";
-    str.month = "1 month";
-    str.year = "1 year";
-    str.suffixFromNow = null;
-    $("time.timeago").timeago();
-
-    $.widget("custom.combobox", {
-      _create: function() {
-        this.wrapper = $("<span>")
-          .addClass("custom-combobox")
-          .insertAfter(this.element);
-        this.element.hide();
-        this._createAutocomplete();
-        this._createShowAllButton();
-      },
-      _createAutocomplete: function() {
-        var selected = this.element.children(":selected"),
-            value = selected.val() ? selected.text() : "";
-        this.input = $("<input>")
-          .appendTo(this.wrapper)
-          .val(value)
-          .attr("title", "")
-          .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
-          .autocomplete({
-            delay: 0,
-            minLength: 0,
-            source: $.proxy(this, "_source")
-          })
-          .tooltip({
-            classes: {
-              "ui-tooltip": "ui-state-highlight"
-            }
-          });
-        this._on(this.input, {
-          autocompleteselect: function(event, ui) {
-            ui.item.option.selected = true;
-            this._trigger("select", event, {
-              item: ui.item.option
-            });
-          },
-          autocompletechange: "_removeIfInvalid"
-        });
-      },
-      _createShowAllButton: function() {
-        var input = this.input,
-          wasOpen = false;
-        $("<a>")
-          .attr("tabIndex", -1)
-          .attr("title", "Show All Items")
-          .tooltip()
-          .appendTo(this.wrapper)
-          .button({
-            icons: {
-              primary: "ui-icon-triangle-1-s"
-            },
-            text: false
-          })
-          .removeClass("ui-corner-all")
-          .addClass("custom-combobox-toggle ui-corner-right")
-          .on("mousedown", function() {
-            wasOpen = input.autocomplete("widget").is(":visible");
-          })
-          .on("click", function() {
-            input.trigger("focus");
-            if (wasOpen) return;
-            input.autocomplete("search", "");
-          });
-      },
-      _source: function(request, response) {
-        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
-        response(this.element.children("option").map(function() {
-          var text = $(this).text();
-          if (this.value && (!request.term || matcher.test(text)))
-            return {
-              label: text,
-              value: text,
-              option: this
-            };
-        }));
-      },
-      _removeIfInvalid: function(event, ui) {
-        if (ui.item) return;
-        var value = this.input.val(),
-          valueLowerCase = value.toLowerCase(),
-          valid = false;
-        this.element.children("option").each(function() {
-          if ($(this).text().toLowerCase() === valueLowerCase) {
-            this.selected = valid = true;
-            return false;
-          }
-        });
-        if (valid) return;
-        this.input
-          .val("")
-          .attr("title", value + " didn't match any item")
-          .tooltip("open");
-        this.element.val("");
-        this._delay(function() {
-          this.input.tooltip("close").attr("title", "");
-        }, 2500);
-        this.input.autocomplete("instance").term = "";
-      },
-      _destroy: function() {
-        this.wrapper.remove();
-        this.element.show();
-      }
-    });
-    $("#lang").combobox();
-    $("#toggle").on("click", function() {
-      $("#lang").toggle();
-    });
-  });
-  </script>
 </body>
 </html>

views/partials/pasteview.handlebars

@@ -1,6 +1,6 @@
 {{#each this}}
 <div class="pasteInfo">
-  <p class="timestamp"><time class="timeago" title="{{stamp}}" datetime="{{stamp}}"></time></p>
+  <p class="timestamp"><time title="{{stamp}}"></time></p>
   <p class="language"><a href="/v/lang/{{language}}">{{language}}</a></p>
   <p>Paste: <a href="/{{uuid}}/">/{{uuid}}/</a><a href="/v/id/{{uuid}}">Show related</a></p>
   <p class="desc">{{{desc}}}</p>

views/viewsingle.handlebars

@@ -1,5 +1,5 @@
 <div class="pasteInfo">
-  <p class="timestamp"><time class="timeago" title="{{paste.stamp}}" datetime="{{paste.stamp}}"></time></p>
+  <p class="timestamp"><time title="{{paste.stamp}}"></time></p>
   <p class="language"><a href="/v/lang/{{paste.language}}">{{paste.language}}</a></p>
   <p>Paste: <a href="/{{paste.uuid}}/">/{{paste.uuid}}/</a><a href="/v/id/{{paste.uuid}}">Show related</a></p>
   <p class="desc">{{{paste.desc}}}</p>