Fix timezone bug (#59)

* fix #58 - time zone issue with showing full page widget

* clean up code around footer start date option

* refactor out magic number

* refactored calculation and formatting of date the day after strike

README.md

@@ -89,7 +89,7 @@ If you define an object called `DIGITAL_CLIMATE_STRIKE_OPTIONS` before including
     /**
      * The date when the sticky footer widget should start showing on your web site.
      * Note: the month is one integer less than the number of the month. E.g. 8 is September, not August.
-     * Defaults to new Date() (Today).
+     * Defaults to new Date(2019, 7, 1) (August 1st, 2019).
      */
     footerDisplayStartDate: new Date(), //@ type {Date object}
     

src/index.js

@@ -1,5 +1,6 @@
 import './main.css'
 
+const MS_PER_DAY = 86400000;
 const GOOGLE_ANALYTICS_DELAY_MS = 30
 const GLOBAL_CLIMATE_STRIKE_URLS = {
   en: 'https://globalclimatestrike.net/?source=digitalstrikebanner',
@@ -13,11 +14,6 @@ const LOCALE_CODE_MAPPING = {
   es: 'es-ES'
 }
 
-const LOCALE_DATE_STRING_CONFIG = {
-  day: 'numeric',
-  month: 'long'
-}
-
 let isMaximizing = false
 let language = 'en'
 
@@ -148,29 +144,21 @@ function trackEvent(category, action, label, value) {
   window.ga('send', params)
 }
 
-function todayIs(y, m, d) {
-  var date = new Date()
-  var offset = 4 // EDT
-  date.setHours(date.getHours() + date.getTimezoneOffset() / 60 - offset)
-  var year = date.getFullYear()
-  var month = date.getMonth() + 1
-  var day = date.getDate()
-
-  return (year === y && month === m && day === d)
-}
-
-function getFullscreenDisplayDate(fullPageDisplayStartDate, language) {
-  return fullPageDisplayStartDate.toLocaleDateString(LOCALE_CODE_MAPPING[language], LOCALE_DATE_STRING_CONFIG)
+function todayIs(date) {
+  var today = new Date()
+  return date.getFullYear() === today.getFullYear()
+    && date.getMonth() === today.getMonth()
+    && date.getDate() === today.getDate()
 }
 
-function getNextDayDisplayDate(fullPageDisplayStartDate, language) {
-  var nextDay = new Date(fullPageDisplayStartDate.getFullYear(), fullPageDisplayStartDate.getMonth(), fullPageDisplayStartDate.getDate() + 1)
-  return nextDay.toLocaleDateString(LOCALE_CODE_MAPPING[language], LOCALE_DATE_STRING_CONFIG)
+function getFormattedDate(date, language) {
+  return date.toLocaleDateString(LOCALE_CODE_MAPPING[language], { day: 'numeric', month: 'long' })
 }
 
 function initializeInterface() {
   const query = parseQuery(location.search)
   const fullPageDisplayStartDate = new Date(Date.parse(query.fullPageDisplayStartDate))
+  const fullPageDisplayStopDate = new Date(fullPageDisplayStartDate.getTime() + MS_PER_DAY)
 
   setGlobalClimateStrikeLinkUrl('.dcs-footer .dcs-button')
   setGlobalClimateStrikeLinkUrl('.dcs-footer__logo')
@@ -196,13 +184,13 @@ function initializeInterface() {
     addTrackingEvents(query.hostname, query.forceFullPageWidget)
   }
 
-  if (query.forceFullPageWidget || todayIs(fullPageDisplayStartDate.getFullYear(), fullPageDisplayStartDate.getMonth() + 1, fullPageDisplayStartDate.getDate())) {
+  if (query.forceFullPageWidget || todayIs(fullPageDisplayStartDate)) {
     maximize()
   }
 
   // Set display dates on full-size widget
-  var fullscreenDateString = getFullscreenDisplayDate(fullPageDisplayStartDate, language)
-  var nextDayDateString = getNextDayDisplayDate(fullPageDisplayStartDate, language)
+  var fullscreenDateString = getFormattedDate(fullPageDisplayStartDate, language)
+  var nextDayDateString = getFormattedDate(fullPageDisplayStopDate, language)
   document.getElementById('dcs-strike-date').innerText = fullscreenDateString
   document.getElementById('dcs-tomorrow-date').innerText = nextDayDateString
 }

static/widget.js

@@ -9,7 +9,7 @@
   var options = window.DIGITAL_CLIMATE_STRIKE_OPTIONS || {};
   var iframeHost = options.iframeHost !== undefined ? options.iframeHost : 'https://assets.digitalclimatestrike.net';
   var websiteName = options.websiteName || null;
-  var footerDisplayStartDate = options.footerDisplayStartDate || new Date();                 // Today
+  var footerDisplayStartDate = options.footerDisplayStartDate || new Date(2019, 7, 1);       // August 1st, 2019 - arbitrary date in the past
   var fullPageDisplayStartDate = options.fullPageDisplayStartDate || new Date(2019, 8, 20);  // September 20th, 2019
   var forceFullPageWidget = !!options.forceFullPageWidget;
   var cookieExpirationDays = parseFloat(options.cookieExpirationDays || 1);
@@ -24,7 +24,6 @@
 
     var urlParams = [
       ['hostname', window.location.host],
-      ['footerDisplayStartDate', footerDisplayStartDate.toISOString()],
       ['fullPageDisplayStartDate', fullPageDisplayStartDate.toISOString()],
       ['language', language]
     ];
@@ -99,7 +98,7 @@
 
   function setCookie(name, value, expirationDays) {
     var d = new Date();
-    d.setTime(d.getTime()+(expirationDays*24*60*60*1000));
+    d.setTime(d.getTime()+(expirationDays * MS_PER_DAY));
 
     var expires = 'expires='+d.toGMTString();
     document.cookie = name + '=' + value + '; ' + expires + '; path=/';