Improve local datetime display

- Protect author's location privacy
- Reduce locale configuration parameters

_javascript/utils/locale-datetime.js

@@ -0,0 +1,20 @@
+/**
+ * Update month/day to locale datetime
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
+ */
+
+$(function() {
+  dayjs.locale(LocaleHelper.locale());
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
+
+  $(`[${LocaleHelper.attrTimestamp()}]`).each(function () {
+    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
+    const df = LocaleHelper.getDateFormat($(this));
+    const text = date.format(df);
+
+    $(this).text(text);
+    $(this).removeAttr(LocaleHelper.attrTimestamp());
+    $(this).removeAttr(LocaleHelper.attrDateFormat());
+  });
+});

_javascript/utils/timeago.js

@@ -1,77 +1,87 @@
-/*
+/**
  * Calculate the Timeago
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
  */
 
 $(function() {
-  const timeagoElem = $(".timeago");
-  let tasks = timeagoElem.length;
+  const attrTimestamp = LocaleHelper.attrTimestamp();
+  const attrCapitalize = 'data-capitalize';
+  const $timeago = $(".timeago");
+
+  let timeagoTasks = $timeago.length;
   let intervalId = void 0;
 
-  const dPrompt = $("meta[name=day-prompt]").attr("content");
-  const hrPrompt = $("meta[name=hour-prompt]").attr("content");
-  const minPrompt = $("meta[name=minute-prompt]").attr("content");
-  const justnowPrompt = $("meta[name=justnow-prompt]").attr("content");
+  dayjs.locale(LocaleHelper.locale());
+  dayjs.extend(window.dayjs_plugin_relativeTime);
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
 
-  function timeago(date, initDate) {
-    let now = new Date();
-    let past = new Date(date);
+  function relativetime($elem) {
+    const now = dayjs();
+    const past = dayjs.unix(LocaleHelper.getTimestamp($elem));
 
-    if (past.getFullYear() !== now.getFullYear()
-        || past.getMonth() !== now.getMonth()) {
-      return initDate;
+    let diffMonth = now.diff(past, 'month', true);
+    if (diffMonth > 10) { // year ago range: 11 months to 17months
+      $elem.removeAttr(attrTimestamp);
+      return past.format('ll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
     }
 
-    let seconds = Math.floor((now - past) / 1000);
-
-    let day = Math.floor(seconds / 86400);
-    if (day >= 1) {
-      return ` ${day} ${dPrompt}`;
+    let diffMinute = now.diff(past, 'minute', true);
+    if (diffMinute > 44) { // an hour ago range: 45 to 89 minutes
+      $elem.removeAttr(attrTimestamp);
     }
 
-    let hour = Math.floor(seconds / 3600);
-    if (hour >= 1) {
-      return ` ${hour} ${hrPrompt}`;
-    }
-
-    let minute = Math.floor(seconds / 60);
-    if (minute >= 1) {
-      return ` ${minute} ${minPrompt}`;
-    }
-
-    return justnowPrompt;
+    return past.fromNow();
   }
 
   function updateTimeago() {
-    $(".timeago").each(function() {
-      if ($(this)[0].hasAttribute("date") === false) {
-        tasks -= 1;
+    $timeago.each(function() {
+      if (typeof $(this).attr(attrTimestamp) === 'undefined') {
+        timeagoTasks -= 1;
         return;
       }
 
-      let date = $(this).attr("date");
-      let initDate = $(this).text();
-      let relativeDate = timeago(date, initDate);
-
-      if (relativeDate === initDate) {
-        $(this).removeAttr("date");
-      } else {
-        $(this).text(relativeDate);
+      let relativeTime = relativetime($(this));
+      const capitalize = $(this).attr(attrCapitalize);
+      if (typeof capitalize !== 'undefined' && capitalize === 'true') {
+        relativeTime = relativeTime.replace(/^\w/, (c) => c.toUpperCase());
       }
 
+      if ($(this).text() !== relativeTime) {
+        $(this).text(relativeTime);
+      }
     });
 
-    if (tasks === 0 && typeof intervalId !== "undefined") {
+    if (timeagoTasks === 0 && typeof intervalId !== "undefined") {
       clearInterval(intervalId); /* stop interval */
     }
-    return tasks;
+
+    return timeagoTasks;
   }
 
-  if (tasks === 0) {
+  function setupTooltips() {
+    $timeago.each(function() {
+      const tooltip = $(this).attr('data-toggle');
+      if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
+        return;
+      }
+
+      const df = $(this).attr('data-tooltip-df');
+      const ts = LocaleHelper.getTimestamp($(this));
+      const dateStr = dayjs.unix(ts).format(df);
+      $(this).attr('data-original-title', dateStr);
+      $(this).removeAttr('data-tooltip-df');
+    });
+  }
+
+  if (timeagoTasks === 0) {
     return;
   }
 
-  if (updateTimeago() > 0) { /* run immediately */
-    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
+  setupTooltips();
+
+  if (updateTimeago()) { /* run immediately */
+    intervalId = setInterval(updateTimeago, 60 * 1000); /* run every minute */
   }
 
 });