Add countdown timer functionality

_includes/scripts.html

@@ -1,4 +1,5 @@
 <script type="text/javascript">
+  {% include scripts/countdown.js %}
   {% include scripts/icon_loader.js %}
   {% include scripts/time_localizer.js %}
   {% include scripts/smooth_anchor_scroller.js %}

_includes/scripts/countdown.js

@@ -0,0 +1,53 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+  let updateTimeFunctions = [];
+
+  document.querySelectorAll('.countdown').forEach(function(el) {
+
+    let html = "";
+    html += `<div class="part days"><div class="num">0</div><div class="unit">Days</div></div>`;
+    html += `<div class="part hours"><div class="num">0</div><div class="unit">Hours</div></div>`;
+    html += `<div class="part minutes"><div class="num">0</div><div class="unit">Minutes</div></div>`;
+    html += `<div class="part seconds"><div class="num">0</div><div class="unit">Seconds</div></div>`;
+    el.innerHTML = html;
+
+    var eventStart = parseFloat(el.getAttribute('totimestamp'));
+    if (isFinite(eventStart)) {
+      let updateTimeFunction = makeUpdateTimeFunction(eventStart, el);
+      updateTimeFunction();
+      updateTimeFunctions.push(updateTimeFunction);
+    }
+  });
+
+  if (updateTimeFunctions.length) {
+    // only set interval once regardless of how many functions there are
+    window.setInterval(function() {
+      updateTimeFunctions.forEach(updateTimeFunction => updateTimeFunction());
+    }, 1000);
+  }
+
+  function makeUpdateTimeFunction(eventStart, el) {
+    let daysEl = el.querySelector('.days .num');
+    let hoursEl = el.querySelector('.hours .num');
+    let minutesEl = el.querySelector('.minutes .num');
+    let secondsEl = el.querySelector('.seconds .num');
+    return function() {
+      var delta = Math.floor((eventStart - Date.now()) / 1000);
+      if (delta < 0) delta = 0;
+
+      let d = Math.floor(delta / 86400);
+      delta -= d * 86400;
+      let h = Math.floor(delta / 3600) % 24;
+      delta -= h * 3600;
+      let m = Math.floor(delta / 60) % 60;
+      delta -= m * 60;
+      let s = delta % 60;
+
+      if (daysEl.textContent !== d.toString()) daysEl.textContent = d;
+      if (hoursEl.textContent !== h.toString()) hoursEl.textContent = h;
+      if (minutesEl.textContent !== m.toString()) minutesEl.textContent = m;
+      secondsEl.textContent = s;
+    }
+  }
+});
+

_sass/dogwood/_layout.scss

@@ -369,6 +369,25 @@ button, a.button, input[type=submit] {
   }
 }
 
+.countdown {
+  display: inline-flex;
+  .part {
+    width: 25%;
+    padding: 8px 0;
+    width: 80px;
+    .num {
+      font-size: 1.2em;
+      line-height: 1;
+      font-weight: 600;
+    }
+    .unit {
+      font-style: italic;
+      font-size: 0.8em;
+      font-weight: bold;
+    }
+  }
+}
+
 
 /* Header
 ------------------------------------------------------- */