Version 1.20.2 (#745)

## Bugfixes
- Fixed a race condition on the vertical-full-page-map template (#739)
- Fixed compatibility issues on IE11 (#742)

cards/financial-professional-location/component.js

@@ -7,7 +7,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
 
   onMount() {
     const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
-    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    onVerticalFullPageMap && registerVerticalFullPageMapCardListeners(this);
     super.onMount();
   }
 

cards/location-standard/component.js

@@ -7,7 +7,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
 
   onMount() {
     const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
-    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    onVerticalFullPageMap && registerVerticalFullPageMapCardListeners(this);
     super.onMount();
   }
 

cards/multilang-financial-professional-location/component.js

@@ -7,7 +7,7 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
 
   onMount() {
     const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
-    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    onVerticalFullPageMap && registerVerticalFullPageMapCardListeners(this);
     super.onMount();
   }
 

cards/multilang-location-standard/component.js

@@ -7,7 +7,7 @@ class multilang_location_standardCardComponent extends BaseCard['multilang-locat
 
   onMount() {
     const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
-    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    onVerticalFullPageMap && registerVerticalFullPageMapCardListeners(this);
     super.onMount();
   }
 

cards/multilang-professional-location/component.js

@@ -7,7 +7,7 @@ class multilang_professional_locationCardComponent extends BaseCard['multilang-p
 
   onMount() {
     const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
-    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    onVerticalFullPageMap && registerVerticalFullPageMapCardListeners(this);
     super.onMount();
   }
 

cards/professional-location/component.js

@@ -7,7 +7,7 @@ class professional_locationCardComponent extends BaseCard['professional-location
 
   onMount() {
     const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
-    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    onVerticalFullPageMap && registerVerticalFullPageMapCardListeners(this);
     super.onMount();
   }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "answers-hitchhiker-theme",
-  "version": "1.20.1",
+  "version": "1.20.2",
   "description": "A starter answers theme for hitchhikers",
   "scripts": {
     "test": "cross-env NODE_ICU_DATA=node_modules/full-icu jest --verbose",

static/js/theme-map/Util/helpers.js

@@ -106,10 +106,28 @@ const debounce = (func, wait) => {
   };
 };
 
+/**
+ * Removes an element from the DOM, with support for IE11
+ * 
+ * @param {Element} element
+ */
+const removeElement = (element) => {
+  if (!element) {
+    return;
+  }
+  if (element.remove) {
+    element.remove();
+  } else {
+    element.parentNode && element.parentNode.removeChild(element); // For IE11
+  }
+}
+
 export {
   getLanguageForProvider,
   getEncodedSvg,
   getNormalizedLongitude,
   isViewableWithinContainer,
-  debounce
+  debounce,
+  removeElement
 }
+

static/js/theme-map/VerticalFullPageMapOrchestrator.js

@@ -1,6 +1,6 @@
 import { Coordinate } from './Geo/Coordinate.js';
 import { smoothScroll } from './Util/SmoothScroll.js';
-import { getLanguageForProvider, isViewableWithinContainer } from './Util/helpers.js';
+import { getLanguageForProvider, isViewableWithinContainer, removeElement } from './Util/helpers.js';
 import { SearchDebouncer } from './SearchDebouncer';
 import { defaultCenterCoordinate } from './constants.js';
 
@@ -113,7 +113,7 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
 
     /**
      * Provides information about whether or not the window is within the mobile breakpoint
-     * @ytype {MediaQueryList}
+     * @type {MediaQueryList}
      */
     this.mobileBreakpointMediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpointMax}px)`);
 
@@ -189,13 +189,19 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
       this.updateCssForDesktop();
     }
 
-    this.mobileBreakpointMediaQuery.addEventListener('change', () => {
+    const breakpointChangeHandler = () => {
       if (this.isMobile()) {
         this.updateCssForMobile();
       } else {
         this.updateCssForDesktop();
       }
-    }, { passive: true });
+    };
+    if (this.mobileBreakpointMediaQuery.addEventListener) {
+      this.mobileBreakpointMediaQuery
+        .addEventListener('change', breakpointChangeHandler, { passive: true });
+    } else {
+      this.mobileBreakpointMediaQuery.addListener(breakpointChangeHandler); // For IE11
+    }
   }
 
   /**
@@ -443,7 +449,7 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
       el.classList.remove('yxt-Card--pinFocused');
     });
 
-    this._detailCard && this._detailCard.remove();
+    removeElement(this._detailCard);
 
     this.core.storage.set(StorageKeys.LOCATOR_SELECTED_RESULT, null);
   }
@@ -465,7 +471,7 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
     card.classList.add('yxt-Card--pinFocused');
 
     if (this.isMobile()) {
-      document.querySelectorAll('.yxt-Card--isVisibleOnMobileMap').forEach((el) => el.remove());
+      document.querySelectorAll('.yxt-Card--isVisibleOnMobileMap').forEach((el) => removeElement(el));
       const isDetailCardOpened = document.querySelectorAll('.yxt-Card--isVisibleOnMobileMap').length;
 
       this._detailCard = card.cloneNode(true);
@@ -474,9 +480,9 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
 
       if (!isDetailCardOpened) {
         window.requestAnimationFrame(() => {
-          this._detailCard.style = 'height: 0;';
+          this._detailCard.setAttribute('style', 'height: 0;');
           window.requestAnimationFrame(() => {
-            this._detailCard.style = '';
+            this._detailCard.removeAttribute('style');
           });
         });
       }

static/package.json

@@ -1,6 +1,6 @@
 {
   "name": "answers-hitchhiker-theme",
-  "version": "1.20.1",
+  "version": "1.20.2",
   "description": "Toolchain for use with the HH Theme",
   "main": "Gruntfile.js",
   "scripts": {

static/scss/answers/interactive-map/VerticalFullPageMap.scss

@@ -218,7 +218,6 @@
 
     &-mobileToggle
     {
-      flex: 1;
       padding: 16px;
     }
 

templates/vertical-full-page-map/page-setup.js

@@ -7,5 +7,25 @@ if (window.locatorBundleLoaded) {
   loadFullPageMap();
 } else {
   const locatorBundleScript = document.querySelector('script#js-answersLocatorBundleScript');
-  locatorBundleScript.onload = loadFullPageMap;
+  locatorBundleScript.onload = () => {
+    window.locatorBundleLoaded = true;
+    locatorBundleScript.dispatchEvent(new Event('locator-bundle-loaded'));
+    loadFullPageMap();
+  }
 }
+
+/**
+ * Registers listeners on the card once the locator bundle is loaded
+ *
+ * @param {ANSWERS.Component} card A location card
+ */
+function registerVerticalFullPageMapCardListeners(card) {
+  if (window.locatorBundleLoaded) {
+    new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
+    return;
+  }
+  const locatorBundleScript = document.querySelector('script#js-answersLocatorBundleScript');
+  locatorBundleScript.addEventListener('locator-bundle-loaded', () => {
+    new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
+  });
+}