diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js index 346d2cc9e..615bbd625 100644 --- a/cards/financial-professional-location/component.js +++ b/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(); } diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js index 981641ed1..78a2e1be9 100644 --- a/cards/location-standard/component.js +++ b/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(); } diff --git a/cards/multilang-financial-professional-location/component.js b/cards/multilang-financial-professional-location/component.js index 92c987044..3d74dd043 100644 --- a/cards/multilang-financial-professional-location/component.js +++ b/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(); } diff --git a/cards/multilang-location-standard/component.js b/cards/multilang-location-standard/component.js index 1c7f4b980..e9bc609bd 100644 --- a/cards/multilang-location-standard/component.js +++ b/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(); } diff --git a/cards/multilang-professional-location/component.js b/cards/multilang-professional-location/component.js index 30423828c..d908db1cb 100644 --- a/cards/multilang-professional-location/component.js +++ b/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(); } diff --git a/cards/professional-location/component.js b/cards/professional-location/component.js index 951242742..e3eeac732 100644 --- a/cards/professional-location/component.js +++ b/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(); } diff --git a/package-lock.json b/package-lock.json index 9dcde13f6..c93769d57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.20.1", + "version": "1.20.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 8669794cc..95c866104 100644 --- a/package.json +++ b/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", diff --git a/static/js/theme-map/Util/helpers.js b/static/js/theme-map/Util/helpers.js index bdd8d5098..dc4ff5a75 100644 --- a/static/js/theme-map/Util/helpers.js +++ b/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 } + diff --git a/static/js/theme-map/VerticalFullPageMapOrchestrator.js b/static/js/theme-map/VerticalFullPageMapOrchestrator.js index 39c83d2b1..b5099e95a 100644 --- a/static/js/theme-map/VerticalFullPageMapOrchestrator.js +++ b/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'); }); }); } diff --git a/static/package-lock.json b/static/package-lock.json index 453a75a64..e509842ae 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.20.1", + "version": "1.20.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/static/package.json b/static/package.json index 58fdadfea..d67b2a53c 100644 --- a/static/package.json +++ b/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": { diff --git a/static/scss/answers/interactive-map/VerticalFullPageMap.scss b/static/scss/answers/interactive-map/VerticalFullPageMap.scss index d4483b610..087209bfe 100644 --- a/static/scss/answers/interactive-map/VerticalFullPageMap.scss +++ b/static/scss/answers/interactive-map/VerticalFullPageMap.scss @@ -218,7 +218,6 @@ &-mobileToggle { - flex: 1; padding: 16px; } diff --git a/templates/vertical-full-page-map/page-setup.js b/templates/vertical-full-page-map/page-setup.js index 28bc1482e..f856c2b10 100644 --- a/templates/vertical-full-page-map/page-setup.js +++ b/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(); + }); +} \ No newline at end of file