DEV: local-dates refactoring (#6692)

plugins/discourse-local-dates/assets/javascripts/discourse-local-dates.js.no-module.es6

@@ -1,9 +1,23 @@
 (function($) {
-  $.fn.applyLocalDates = function(repeat) {
-    const processElement = ($element, options = {}) => {
-      if (this.timeout) clearTimeout(this.timeout);
+  const DATE_TEMPLATE = `
+    <span>
+      <svg class="fa d-icon d-icon-globe-americas svg-icon" xmlns="http://www.w3.org/2000/svg">
+        <use xlink:href="#globe-americas"></use>
+      </svg>
+      <span class="relative-time"></span>
+    </span>
+  `;
+
+  const PREVIEW_TEMPLATE = `
+    <div class='preview'>
+      <span class='timezone'></span>
+      <span class='date-time'></span>
+    </div>
+  `;
+
+  function processElement($element, options = {}) {
+    clearTimeout(this.timeout);
 
-      repeat = repeat || true;
     const utc = moment().utc();
     const dateTime = options.time
       ? `${options.date} ${options.time}`
@@ -53,54 +67,37 @@
       options
     );
 
-      const $dateTemplate = `
-        <span>
-          <svg class="fa d-icon d-icon-globe-americas svg-icon" xmlns="http://www.w3.org/2000/svg">
-            <use xlink:href="#globe-americas"></use>
-          </svg>
-          <span class="relative-time"></span>
-        </span>
-      `;
-
     $element
-        .html($dateTemplate)
+      .html(DATE_TEMPLATE)
       .attr("title", textPreview)
       .attr("data-html-tooltip", `<div class="previews">${htmlPreview}</div>`)
       .addClass("cooked-date")
       .find(".relative-time")
       .text(formatedDateTime);
 
-      if (repeat) {
-        this.timeout = setTimeout(
-          () => processElement($element, options),
-          10000
-        );
+    this.timeout = setTimeout(() => processElement($element, options), 10000);
   }
-    };
 
-    const _formatTimezone = timezone =>
-      timezone
+  function _formatTimezone(timezone) {
+    return timezone
       .replace("_", " ")
       .replace("Etc/", "")
       .split("/");
+  }
 
-    const _zoneWithoutPrefix = timezone => {
+  function _zoneWithoutPrefix(timezone) {
     const parts = _formatTimezone(timezone);
     return parts[1] || parts[0];
-    };
-
-    const _applyZoneToDateTime = (dateTime, timezone) => {
-      return moment.tz(dateTime, timezone).utc();
-    };
-
-    const _calendarFormats = time => {
-      const _translate = key => {
-        const translated = I18n.t(
-          `discourse_local_dates.relative_dates.${key}`,
-          {
-            time: "LT"
   }
-        );
+
+  function _applyZoneToDateTime(dateTime, timezone) {
+    return moment.tz(dateTime, timezone).utc();
+  }
+
+  function _translateCalendarKey(time, key) {
+    const translated = I18n.t(`discourse_local_dates.relative_dates.${key}`, {
+      time: "LT"
+    });
 
     if (time) {
       return translated
@@ -110,24 +107,25 @@
     } else {
       return `[${translated.replace(" LT", "")}]`;
     }
-      };
+  }
 
+  function _calendarFormats(time) {
     return {
-        sameDay: _translate("today"),
-        nextDay: _translate("tomorrow"),
-        lastDay: _translate("yesterday"),
+      sameDay: _translateCalendarKey(time, "today"),
+      nextDay: _translateCalendarKey(time, "tomorrow"),
+      lastDay: _translateCalendarKey(time, "yesterday"),
       sameElse: "L"
     };
-    };
+  }
 
-    const compareZones = (timezoneA, timezoneB) => {
+  function _isEqualZones(timezoneA, timezoneB) {
     return (
       moment.tz(timezoneA).utcOffset() === moment.tz(timezoneB).utcOffset()
     );
-    };
+  }
 
-    const _applyFormatting = (dateTime, displayedTimezone, options) => {
-      const sameTimezone = compareZones(displayedTimezone, moment.tz.guess());
+  function _applyFormatting(dateTime, displayedTimezone, options) {
+    const sameTimezone = _isEqualZones(displayedTimezone, moment.tz.guess());
     const inCalendarRange = dateTime.isBetween(
       moment().subtract(2, "days"),
       moment().add(2, "days")
@@ -174,9 +172,9 @@
     }
 
     return dateTime;
-    };
+  }
 
-    const _applyRecurrence = (dateTime, recurring) => {
+  function _applyRecurrence(dateTime, recurring) {
     const parts = recurring.split(".");
     const count = parseInt(parts[0], 10);
     const type = parts[1];
@@ -184,9 +182,9 @@
     const add = Math.ceil(diff + count);
 
     return dateTime.add(add, type);
-    };
+  }
 
-    const createDateTimeRange = (dateTime, timezone) => {
+  function _createDateTimeRange(dateTime, timezone) {
     const startRange = dateTime.tz(timezone).format("LLL");
     const separator = "→";
     const endRange = dateTime
@@ -195,22 +193,22 @@
       .format("LLL");
 
     return `${startRange} ${separator} ${endRange}`;
-    };
+  }
 
-    const _generatePreviews = (dateTime, displayedTimezone, options) => {
+  function _generatePreviews(dateTime, displayedTimezone, options) {
     const previewedTimezones = [];
     const watchingUserTimezone = moment.tz.guess();
     const timezones = options.timezones.filter(
       timezone => timezone !== watchingUserTimezone
     );
 
-      if (!compareZones(displayedTimezone, watchingUserTimezone)) {
+    if (!_isEqualZones(displayedTimezone, watchingUserTimezone)) {
       previewedTimezones.push({
         timezone: watchingUserTimezone,
         current: true,
         dateTime: options.time
           ? dateTime.tz(watchingUserTimezone).format("LLL")
-            : createDateTimeRange(dateTime, watchingUserTimezone)
+          : _createDateTimeRange(dateTime, watchingUserTimezone)
       });
     }
 
@@ -218,17 +216,17 @@
       options.timezone &&
       displayedTimezone === watchingUserTimezone &&
       options.timezone !== displayedTimezone &&
-        !compareZones(displayedTimezone, options.timezone)
+      !_isEqualZones(displayedTimezone, options.timezone)
     ) {
       timezones.unshift(options.timezone);
     }
 
     timezones.filter(z => z).forEach(timezone => {
-        if (compareZones(timezone, displayedTimezone)) {
+      if (_isEqualZones(timezone, displayedTimezone)) {
         return;
       }
 
-        if (compareZones(timezone, watchingUserTimezone)) {
+      if (_isEqualZones(timezone, watchingUserTimezone)) {
         timezone = watchingUserTimezone;
       }
 
@@ -236,7 +234,7 @@
         timezone,
         dateTime: options.time
           ? dateTime.tz(timezone).format("LLL")
-            : createDateTimeRange(dateTime, timezone)
+          : _createDateTimeRange(dateTime, timezone)
       });
     });
 
@@ -245,14 +243,14 @@
         timezone: "Etc/UTC",
         dateTime: options.time
           ? dateTime.tz("Etc/UTC").format("LLL")
-            : createDateTimeRange(dateTime, "Etc/UTC")
+          : _createDateTimeRange(dateTime, "Etc/UTC")
       });
     }
 
     return _.uniq(previewedTimezones, "timezone");
-    };
+  }
 
-    const _generateTextPreview = previews => {
+  function _generateTextPreview(previews) {
     return previews
       .map(preview => {
         const formatedZone = _zoneWithoutPrefix(preview.timezone);
@@ -264,31 +262,23 @@
         }
       })
       .join(", ");
-    };
+  }
 
-    const _generateHtmlPreview = previews => {
-      const $htmlTooltip = $("<div></div>");
-
-      const $previewTemplate = $(`
-        <div class='preview'>
-          <span class='timezone'></span>
-          <span class='date-time'></span>
-        </div>
-      `);
-
-      previews.forEach(preview => {
-        const $template = $previewTemplate.clone();
+  function _generateHtmlPreview(previews) {
+    return previews
+      .map(preview => {
+        const $template = $(PREVIEW_TEMPLATE);
 
         if (preview.current) $template.addClass("current");
 
         $template.find(".timezone").text(_zoneWithoutPrefix(preview.timezone));
         $template.find(".date-time").text(preview.dateTime);
-        $htmlTooltip.append($template);
-      });
-
-      return $htmlTooltip.html();
-    };
+        return $template[0].outerHTML;
+      })
+      .join("");
+  }
 
+  $.fn.applyLocalDates = function() {
     return this.each(function() {
       const $element = $(this);