FEATURE: adds countdown attribute to [date] (#8037)

When used, dates will be displayed as a countdown in a human friendly way.

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

@@ -128,6 +128,15 @@
   }
 
   function _applyFormatting(dateTime, displayedTimezone, options) {
+    if (options.countdown) {
+      const diffTime = dateTime.diff(moment());
+      if (diffTime < 0) {
+        return I18n.t("discourse_local_dates.relative_dates.countdown.passed");
+      } else {
+        return moment.duration(diffTime).humanize();
+      }
+    }
+
     const sameTimezone = _isEqualZones(displayedTimezone, moment.tz.guess());
     const inCalendarRange = dateTime.isBetween(
       moment().subtract(2, "days"),
@@ -313,6 +322,7 @@
       options.displayedTimezone = $element.attr("data-displayed-timezone");
       options.format =
         $element.attr("data-format") || (options.time ? "LLL" : "LL");
+      options.countdown = $element.attr("data-countdown");
 
       processElement($element, options);
     });

plugins/discourse-local-dates/assets/javascripts/lib/discourse-markdown/discourse-local-dates.js.es6

@@ -9,7 +9,8 @@ function addLocalDate(buffer, matches, state) {
     timezone: null,
     format: null,
     timezones: null,
-    displayedTimezone: null
+    displayedTimezone: null,
+    countdown: null
   };
 
   let parsed = parseBBCodeTag(
@@ -26,6 +27,7 @@ function addLocalDate(buffer, matches, state) {
   config.recurring = parsed.attrs.recurring;
   config.timezones = parsed.attrs.timezones;
   config.displayedTimezone = parsed.attrs.displayedTimezone;
+  config.countdown = parsed.attrs.countdown;
 
   token = new state.Token("span_open", "span", 1);
   token.attrs = [["data-date", state.md.utils.escapeHtml(config.date)]];
@@ -57,6 +59,13 @@ function addLocalDate(buffer, matches, state) {
     token.attrs.push(["data-format", state.md.utils.escapeHtml(config.format)]);
   }
 
+  if (config.countdown) {
+    token.attrs.push([
+      "data-countdown",
+      state.md.utils.escapeHtml(config.countdown)
+    ]);
+  }
+
   if (config.calendar) {
     token.attrs.push([
       "data-calendar",

plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss

@@ -12,6 +12,10 @@
     &.past {
       border-bottom-color: $primary-low-mid;
     }
+
+    &.past[data-countdown] {
+      color: $primary-medium;
+    }
   }
 }
 

plugins/discourse-local-dates/config/locales/client.en.yml

@@ -5,6 +5,8 @@ en:
         today: Today %{time}
         tomorrow: Tomorrow %{time}
         yesterday: Yesterday %{time}
+        countdown:
+          passed: date has passed
       title: Insert date / time
       create:
         form:

plugins/discourse-local-dates/spec/integration/local_dates_spec.rb

@@ -79,4 +79,11 @@ RSpec.describe "Local Dates" do
 
     expect(cooked).not_to include("data-timezone=")
   end
+
+  it 'supports countdowns' do
+    raw = "[date=2018-11-01 time=12:00 countdown=true]"
+    cooked = Fabricate(:post, raw: raw).cooked
+
+    expect(cooked).to include("data-countdown=")
+  end
 end