`;\r\n }\r\n\r\n if (cartItems) {\r\n const currentCartItem = document.querySelector(`.hof-cart-item__saved-for-later-order-line-id[value=\"${button.dataset.orderLine}\"]`);\r\n if(currentCartItem){\r\n currentCartItem.closest('ul').querySelector(\".hof-cart-item__save-for-later\").classList.remove('hidden');\r\n currentCartItem.closest('ul').querySelector(\".hof-cart-item__saved-for-later\").classList.add('hidden');\r\n }\r\n }\r\n \r\n }\r\n }\r\n );\r\n }\r\n\r\n function _handleEdit(e) {\r\n const button = e.currentTarget\r\n const item = button.closest(\".drawer-line-item\");\r\n \r\n const itemData = {\r\n description: \"\",\r\n image: item.dataset.image,\r\n orderLineId: item.dataset.orderlineid,\r\n price: item.dataset.price,\r\n productName: item.dataset.productname,\r\n sku: item.dataset.sku,\r\n url: item.dataset.url\r\n }\r\n \r\n that.editmodal = new CartItemModal(item, itemData, that.config);\r\n\r\n e.preventDefault();\r\n that.editmodal.open();\r\n }\r\n\r\n function _handleContinueShopping() {\r\n that.modal.close();\r\n }\r\n\r\n function _handleReserve(e) {\r\n let button = e.currentTarget;\r\n $('.hof-reserve__name').text(button.dataset.name);\r\n $('.hof-reserve__price').text(button.dataset.price);\r\n $('.hof-reserve__form input[name=\"name\"]').val(button.dataset.name);\r\n $('.hof-reserve__form input[name=\"sku\"]').val(button.dataset.sku);\r\n $('.hof-reserve__form input[name=\"price\"]').val(button.dataset.price);\r\n $('.hof-reserve__title').text($(button).text());\r\n \r\n\r\n $('.hof-reserve').removeClass('hidden');\r\n $('.hof-success').addClass('hidden');\r\n\r\n $('.hof-reserve__form').trigger(\"reset\");\r\n that.modal.open(\".hof-reserve-wrapper\");\r\n }\r\n\r\n function _handleReserveSubmit(e) {\r\n e.preventDefault();\r\n var form = e.currentTarget;\r\n var data = serializeform(form);\r\n\r\n getJSON(form.getAttribute(\"action\"), data);\r\n that.reserveFormContainer.classList.add(\"hidden\");\r\n that.reserveSuccess.classList.remove(\"hidden\");\r\n\r\n }\r\n\r\n function _handleClickOutsideDrawer(e) {\r\n let targetElement = e.target;\r\n if(!targetElement.closest(\".saved-for-later-drawer\") && !targetElement.closest(\".hof-modal\")){\r\n \r\n if(that.element.classList.contains(\"active\")){\r\n that.element.classList.remove(\"active\");\r\n window.dispatchEvent(window.callReloadPDPConfigurator);\r\n }\r\n \r\n }\r\n }\r\n },\r\n\r\n handleSaveItemUpdated() {\r\n window.dispatchEvent(window.callReLoadDrawerEvent);\r\n return true;\r\n },\r\n\r\n handleModalClose() {\r\n $(\".hof-item-configurator-modal\").hide();\r\n },\r\n\r\n handleModalOpen(config) {\r\n config.onOpen();\r\n },\r\n\r\n registerHelpers() {\r\n const hb = require('handlebars/runtime');\r\n\r\n hb.registerHelper({\r\n equal : function(lvalue, rvalue, options) {\r\n if( lvalue != rvalue ) {\r\n return options.inverse(this);\r\n } else {\r\n return options.fn(this);\r\n }\r\n },\r\n replace: function(string,replaced,replacement) {\r\n return(string || '').replace(replaced,replacement);\r\n }\r\n });\r\n},\r\n\r\n};\r\n\r\nexport default SavedForLaterDrawer;\r\n","import { EVENTS, SELECTORS } from '../../common/constants';\r\n\r\nvar HeroBanner = {\r\n init: function (element) {\r\n this.element = element;\r\n\r\n var video = element.querySelector(SELECTORS.HEROBANNER_VIDEO);\r\n var playButton = element.querySelector(SELECTORS.HEROBANNER_VIDEO_PLAY);\r\n var volumeButton = element.querySelector(SELECTORS.HEROBANNER_VIDEO_VOLUME);\r\n\r\n playButton.addEventListener(EVENTS.CLICK, function () {\r\n if (video.paused || video.ended) {\r\n video.play();\r\n $(playButton).addClass('playing');\r\n $(playButton).removeClass('paused');\r\n } else {\r\n video.pause();\r\n $(playButton).addClass('paused');\r\n $(playButton).removeClass('playing');\r\n }\r\n });\r\n\r\n volumeButton.addEventListener(EVENTS.CLICK, function () {\r\n if (video.muted) {\r\n video.muted = false;\r\n video.volume = 0.3;\r\n $(volumeButton).addClass('unmuted');\r\n $(volumeButton).removeClass('muted');\r\n } else {\r\n video.muted = true;\r\n $(volumeButton).addClass('muted');\r\n $(volumeButton).removeClass('unmuted');\r\n }\r\n });\r\n }\r\n};\r\n\r\nexport default HeroBanner;\r\n","import Swiper from 'swiper/dist/js/swiper.min.js';\r\n\r\nvar Slider = {\r\n\r\n init: function (element) {\r\n var _self = this;\r\n this.$element = element;\r\n\r\n this.dom = {\r\n $paginationContainer: this.$element.querySelector('.hof-slider-pagination__container'),\r\n $pagination: this.$element.querySelector('.hof-slider-pagination'),\r\n $slides: this.$element.querySelectorAll('.hof-slider-item'),\r\n $previousButton: this.$element.querySelector('.hof-slider-btn.left'),\r\n $nextButton: this.$element.querySelector('.hof-slider-btn.right')\r\n };\r\n\r\n if (this.$element) {\r\n const sliderFrame = this.$element.querySelectorAll('.hof-slider-frame')[0];\r\n\r\n //autoplay\r\n var autoplayAttribute = this.$element.getAttribute('data-autoplay-delay');\r\n var autoplayDelay = autoplayAttribute ? new Number(autoplayAttribute) * 1000 : 0;\r\n var autoplay = false;\r\n\r\n if (this.dom.$slides.length > 1 && autoplayDelay > 0) {\r\n autoplay = {\r\n delay: autoplayDelay,\r\n };\r\n }\r\n\r\n //slides per view\r\n var slidesPerViewAttribute = this.$element.getAttribute('data-slides-per-view');\r\n var slidesPerView = slidesPerViewAttribute ? (slidesPerViewAttribute) : 1;\r\n\r\n //generate breakpoints\r\n var breakpoints = {}\r\n\r\n if (slidesPerView > 1) {\r\n var minWidth = 480; //Anything below this should be 1 slide\r\n var maxWidth = 960; //Anything above this should be max slides (desktop)\r\n var numBreakpoints = slidesPerView - 1; //default value is slidesperview, create breakpoints for in between\r\n var incrementDivisor = numBreakpoints - 1;\r\n if (incrementDivisor <= 0)\r\n incrementDivisor = 1;\r\n var increment = (maxWidth - minWidth) / incrementDivisor; //we want to include max & min so determine increment to get those + middle points\r\n\r\n for (var i = 0; i < numBreakpoints; i++) {\r\n var width = minWidth + (increment * i);\r\n breakpoints[width] = { slidesPerView: (i + 1) };\r\n }\r\n }\r\n //pagination\r\n var pagination = {};\r\n if (this.dom.$pagination && this.dom.$slides.length > 1) {\r\n var paginationClass = `hof-slider-pagination--${Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)}`;\r\n this.dom.$pagination.classList.add(paginationClass);\r\n pagination = {\r\n el: `.${paginationClass}`,\r\n clickable: true\r\n };\r\n }\r\n\r\n //navigation\r\n var navigation = {};\r\n if (this.dom.$previousButton && this.dom.$nextButton) {\r\n navigation = {\r\n nextEl: this.dom.$nextButton,\r\n prevEl: this.dom.$previousButton\r\n };\r\n }\r\n\r\n //initialize hof-slider\r\n this.$slider = new Swiper(sliderFrame, {\r\n direction: 'horizontal',\r\n loop: this.dom.$slides.length > 1,\r\n slidesPerView: slidesPerView,\r\n breakpoints: breakpoints,\r\n watchOverflow: false,\r\n slideClass: 'hof-slider-item',\r\n wrapperClass: 'hof-slider-row',\r\n navigation: navigation,\r\n pagination: pagination,\r\n autoplay: autoplay,\r\n pauseOnMouseEnter: true,\r\n lazy: true\r\n });\r\n\r\n /*\r\n * Adjusting control positioning for certain 'slide' components\r\n */\r\n if (Array.from(this.dom.$slides).some(function (slide) { return slide.querySelectorAll('.hero-banner--overlay').length > 0 })) {\r\n adjustControlPosition(); //Call listener function at run time\r\n window.addEventListener('resize', adjustControlPosition);// Attach listener function on state changes\r\n }\r\n\r\n function adjustControlPosition() {\r\n var slides = Array.from(_self.dom.$slides);\r\n \r\n if (window.matchMedia(\"(min-width: 60em)\").matches) {\r\n $(_self.dom.$paginationContainer).css('top', 'unset');\r\n $(_self.dom.$paginationContainer).css('bottom', '5%');\r\n }\r\n //If we're on mobile, get the average height of the imagery on the hero banners\r\n // Move the pagination and nav arrows appropriately\r\n else {\r\n var contentWrappers = $.map(slides, function (slide) { return Array.from(slide.querySelectorAll('.hero-banner__content-wrapper')) }).flat();\r\n var heights = $.map(contentWrappers, function (wrapper) { return wrapper.previousElementSibling.offsetHeight; });\r\n\r\n var sumHeights = 0;\r\n $.each(heights, function () { sumHeights += this });\r\n\r\n var averageHeight = sumHeights / contentWrappers.length;\r\n var paginationOffset = (averageHeight * .95).toString() + 'px';\r\n var navigationHeight = averageHeight.toString() + 'px';\r\n\r\n if (_self.dom.$paginationContainer) {\r\n $(_self.dom.$paginationContainer).css('top', paginationOffset);\r\n $(_self.dom.$paginationContainer).css('bottom', 'unset');\r\n }\r\n if (_self.dom.$previousButton) {\r\n $(_self.dom.$previousButton).css('height', navigationHeight);\r\n }\r\n if (_self.dom.$nextButton) {\r\n $(_self.dom.$nextButton).css('height', navigationHeight);\r\n }\r\n }\r\n }\r\n\r\n return this.$slider;\r\n } \r\n }\r\n};\r\n\r\nexport default Slider;\r\n","import cookie from 'js-cookie';\r\nimport { EVENTS, MISC, SELECTORS } from '../../common/constants';\r\nimport { Services } from '../../common/services';\r\nimport { queryselectorparents } from '../../common/utils/queryselectorparents';\r\n\r\nconst COOKIE = 'hof-profile-tab';\r\n\r\nexport function tabs(element) {\r\n \r\n // Find the tablinks & tab panels\r\n\tvar tablinks = element.querySelectorAll(SELECTORS.TAB_LIST);\r\n\tvar tabpanels = element.querySelectorAll(SELECTORS.TABPANEL);\r\n\r\n\t// listen for click & show/hide tab\r\n\tfor (var i = 0; i < tablinks.length; i++) {\r\n\t\ttablinks[i].addEventListener(EVENTS.CLICK, tabTriggerHandler(tablinks[i]));\r\n\t}\r\n\t\r\n\t/**\r\n\t* event handler for showHidePanels\r\n\t*\r\n\t*/\r\n function tabTriggerHandler(tablink) {\r\n\t\treturn function(event) {\r\n\t\t\tshowHidePanels(event, tablink);\r\n\t\t};\r\n\t}\r\n\t\r\n\t/**\r\n\t* show/hide Panels\r\n\t*\r\n\t* @param {DOM element} the tablink that was clicked\r\n\t*\r\n\t*/\r\n function showHidePanels(event, tablink) {\r\n \tevent.preventDefault();\r\n \tvar id = tablink.querySelector(SELECTORS.ANCHOR).getAttribute(MISC.HREF);\r\n\t\tvar tabWrapper = queryselectorparents(tablink, '.tabs-container');\r\n\t\tvar ourTablinks = tabWrapper.querySelectorAll(SELECTORS.TAB_LIST);\r\n\t\tvar ourTabpanels = tabWrapper.querySelectorAll(SELECTORS.TABPANEL);\r\n\t\t\r\n\t\tcookie.set(COOKIE, id);\r\n\r\n \t// Hide every tab\r\n\t\tfor (var i = 0; i < ourTablinks.length; i++) {\r\n\t\t\tourTablinks[i].setAttribute(MISC.ARIA_SELECTED, MISC.FALSE);\r\n\t\t\tourTabpanels[i].setAttribute(MISC.ARIA_HIDDEN, MISC.TRUE);\r\n\t\t}\r\n\t\t// show only the one we chose\r\n\t\ttablink.setAttribute(MISC.ARIA_SELECTED, MISC.TRUE);\r\n\t\telement.querySelector(id).parentNode.setAttribute(MISC.ARIA_HIDDEN, MISC.FALSE);\r\n\r\n }\r\n\r\n return {\r\n \ttabTriggerHandler\r\n }\r\n}","import { EVENTS } from './../constants';\r\n\r\n/**\r\n * ID\r\n *\r\n * @type {Number}\r\n * @ignore\r\n */\r\nvar id = 0;\r\n\r\n/**\r\n * Get ID\r\n *\r\n * Because file is loaded only once, this function\r\n * can be used to generate a unique id every time\r\n * it is called.\r\n *\r\n * @return {Number} Unique ID value\r\n * @ignore\r\n */\r\nfunction getId() {\r\n return id++;\r\n}\r\n\r\n/**\r\n * KeyUp Service\r\n */\r\nvar KeyUpService = {};\r\n\r\n\r\n/**\r\n* An array to be populated with callback functions that will be triggered on KeyUp\r\n*\r\n* @property {Array} callbacks\r\n*/\r\nKeyUpService.callbacks = [];\r\n\r\n/**\r\n * @desc Initialize the singleton by attaching the event listener to the window\r\n * @listens {Event} listens to the window KeyUp event\r\n */\r\nKeyUpService.init = function() {\r\n\twindow.addEventListener(EVENTS.KEY_UP, KeyUpService.onKeyUp.bind(this));\r\n};\r\n\r\n/**\r\n* @desc The KeyUp event handler. Itertates through the `callback` array and invokes each callback in the Array\r\n*/\r\nKeyUpService.onKeyUp = function() {\r\n\tvar charCode = event.charCode || event.keyCode;\r\n\tfor (var i = 0; i < this.callbacks.length; i++) {\r\n\t\t\tthis.callbacks[i].callback(charCode);\r\n\t}\r\n};\r\n\r\n/**\r\n * @desc A hook for pushing a callback function\r\n * into the `callbacks` array. A unique\r\n * ID value for the callback is generated\r\n * and a function is returned for removing\r\n * the callback if need be.\r\n *\r\n * @param {Function} callback A function to invoke by the KeyUpService\r\n * @return {Function} `removeCallback` A function which will remove an entry from the `callbacks` array\r\n */\r\nKeyUpService.addCallback = function (callback) {\r\n\t// Generate an id for the callback\r\n\tvar id = getId();\r\n\r\n\t// Push function into array with a unique id\r\n\tthis.callbacks.push({\r\n\t\tid,\r\n\t\tcallback\r\n\t});\r\n\r\n\t// Return the remove function\r\n\treturn this.removeCallback.bind(this, id);\r\n};\r\n\r\n/**\r\n * Filters through the `callback` array and removes\r\n * the entry that corresponds to the id passed\r\n * in as an argument\r\n *\r\n * @param {Number} id An id value to filter by\r\n */\r\nKeyUpService.removeCallback = function (id) {\r\n\tthis.callbacks = this.callbacks.filter((item) => {\r\n\t\treturn item.id !== id;\r\n\t});\r\n};\r\n\r\n\r\nexport {KeyUpService};","import { debounce } from './../utils';\r\nimport { EVENTS } from './../constants';\r\n\r\n/**\r\n * ID\r\n *\r\n * @type {Number}\r\n * @ignore\r\n */\r\nvar id = 0;\r\n\r\n/**\r\n * Get ID\r\n *\r\n * Because file is loaded only once, this function\r\n * can be used to generate a unique id every time\r\n * it is called.\r\n *\r\n * @return {Number} Unique ID value\r\n * @ignore\r\n */\r\nfunction getId() {\r\n return id++;\r\n}\r\n\r\n/**\r\n * Resize Service\r\n */\r\nvar ResizeService = {};\r\n\r\n\r\n/**\r\n* An array to be populated with callback functions that will be triggered on resize\r\n*\r\n* @property {Array} callbacks\r\n*/\r\nResizeService.callbacks = [];\r\n\r\n/**\r\n * @desc Initialize the singleton by attaching the event listener to the window\r\n * @listens {Event} listens to the window resize event\r\n */\r\nResizeService.init = function() {\r\n\twindow.addEventListener(EVENTS.RESIZE, debounce(ResizeService.onResize.bind(this), 10));\r\n};\r\n\r\n/**\r\n* @desc The resize event handler. Itertates through the `callback` array and invokes each callback in the Array\r\n*/\r\nResizeService.onResize = function() {\r\n\tfor (var i = 0; i < this.callbacks.length; i++) {\r\n\t\t\tthis.callbacks[i].callback();\r\n\t}\r\n};\r\n\r\n/**\r\n * @desc A hook for pushing a callback function\r\n * into the `callbacks` array. A unique\r\n * ID value for the callback is generated\r\n * and a function is returned for removing\r\n * the callback if need be.\r\n *\r\n * @param {Function} callback A function to invoke by the ResizeService\r\n * @return {Function} `removeCallback` A function which will remove an entry from the `callbacks` array\r\n */\r\nResizeService.addCallback = function (callback) {\r\n\t// Generate an id for the callback\r\n\tvar id = getId();\r\n\r\n\t// Push function into array with a unique id\r\n\tthis.callbacks.push({\r\n\t\tid,\r\n\t\tcallback\r\n\t});\r\n\r\n\t// Return the remove function\r\n\treturn this.removeCallback.bind(this, id);\r\n};\r\n\r\n/**\r\n * Filters through the `callback` array and removes\r\n * the entry that corresponds to the id passed\r\n * in as an argument\r\n *\r\n * @param {Number} id An id value to filter by\r\n */\r\nResizeService.removeCallback = function (id) {\r\n\tthis.callbacks = this.callbacks.filter((item) => {\r\n\t\treturn item.id !== id;\r\n\t});\r\n};\r\n\r\n\r\nexport {ResizeService};","import { debounce } from './../utils';\r\nimport { EVENTS } from './../constants';\r\n\r\n/**\r\n * ID\r\n *\r\n * @type {Number}\r\n * @ignore\r\n */\r\nvar id = 0;\r\n\r\n/**\r\n * Get ID\r\n *\r\n * Because file is loaded only once, this function\r\n * can be used to generate a unique id every time\r\n * it is called.\r\n *\r\n * @return {Number} Unique ID value\r\n * @ignore\r\n */\r\nfunction getId() {\r\n return id++;\r\n}\r\n\r\n/**\r\n * Scroll Service\r\n */\r\nvar ScrollService = {};\r\n\r\n\r\n/**\r\n* An array to be populated with callback functions that will be triggered on scroll\r\n*\r\n* @property {Array} callbacks\r\n*/\r\nScrollService.callbacks = [];\r\n\r\n/**\r\n * @desc Initialize the singleton by attaching the event listener to the window\r\n * @listens {Event} listens to the window scroll event\r\n */\r\nScrollService.init = function() {\r\n\twindow.addEventListener(EVENTS.SCROLL, debounce(ScrollService.onScroll.bind(this), 10));\r\n};\r\n\r\n/**\r\n* @desc The scroll event handler. Itertates through the `callback` array and invokes each callback in the Array\r\n*/\r\nScrollService.onScroll = function() {\r\n\tfor (var i = 0; i < this.callbacks.length; i++) {\r\n\t\t\tthis.callbacks[i].callback();\r\n\t}\r\n};\r\n\r\n/**\r\n * @desc A hook for pushing a callback function\r\n * into the `callbacks` array. A unique\r\n * ID value for the callback is generated\r\n * and a function is returned for removing\r\n * the callback if need be.\r\n *\r\n * @param {Function} callback A function to invoke by the ScrollService\r\n * @return {Function} `removeCallback` A function which will remove an entry from the `callbacks` array\r\n */\r\nScrollService.addCallback = function (callback) {\r\n\t// Generate an id for the callback\r\n\tvar id = getId();\r\n\r\n\t// Push function into array with a unique id\r\n\tthis.callbacks.push({\r\n\t\tid,\r\n\t\tcallback\r\n\t});\r\n\r\n\t// Return the remove function\r\n\treturn this.removeCallback.bind(this, id);\r\n};\r\n\r\n/**\r\n * Filters through the `callback` array and removes\r\n * the entry that corresponds to the id passed\r\n * in as an argument\r\n *\r\n * @param {Number} id An id value to filter by\r\n */\r\nScrollService.removeCallback = function (id) {\r\n\tthis.callbacks = this.callbacks.filter((item) => {\r\n\t\treturn item.id !== id;\r\n\t});\r\n};\r\n\r\n\r\nexport {ScrollService};","var CustomButtonService = {};\r\n\r\nfunction isHexColor(color) {\r\n return /^#([0-9A-F]{3}){1,2}$/i.test(color);\r\n}\r\n\r\nfunction colorToRGB(color) {\r\n if (isHexColor(color)) {\r\n // If it's a hex color, convert directly to RGB\r\n let r, g, b;\r\n if (color.length === 4) { // #RGB\r\n r = parseInt(color[1] + color[1], 16);\r\n g = parseInt(color[2] + color[2], 16);\r\n b = parseInt(color[3] + color[3], 16);\r\n } else if (color.length === 7) { // #RRGGBB\r\n r = parseInt(color[1] + color[2], 16);\r\n g = parseInt(color[3] + color[4], 16);\r\n b = parseInt(color[5] + color[6], 16);\r\n }\r\n return `rgb(${r}, ${g}, ${b})`;\r\n } else {\r\n // If it's a color name, use the colorNameToRGB function\r\n return colorNameToRGB(color);\r\n }\r\n}\r\n\r\nfunction colorNameToRGB(colorName) {\r\n // Create a temporary element\r\n const div = document.createElement(\"div\");\r\n // Set the color\r\n div.style.color = colorName;\r\n // Attach to the DOM to ensure styles are applied\r\n document.body.appendChild(div);\r\n // Use getComputedStyle to get the color value\r\n const rgb = getComputedStyle(div).color;\r\n // Clean up by removing the element\r\n document.body.removeChild(div);\r\n return rgb;\r\n}\r\n\r\nfunction getIsDark(color) {\r\n const rgb = colorToRGB(color).match(/\\d+/g); // Extract RGB components\r\n const [r, g, b] = rgb.map(Number); // Convert to numbers\r\n // Calculate luminance\r\n const luminance = 0.299 * r + 0.587 * g + 0.114 * b;\r\n console.log(luminance)\r\n var isDark = luminance < 220; // Threshold of luminance, might need adjusting\r\n\r\n return isDark;\r\n}\r\n\r\nCustomButtonService.init = function () {\r\n document.addEventListener('DOMContentLoaded', function () {\r\n document.querySelectorAll('[class*=\"button--custom-\"]').forEach(function (element) {\r\n const classRegex = /button--custom-(?[^\\-]+)(?:-(?.+))?/i;\r\n var match = classRegex.exec(element.className);\r\n var textColor, bgColor, borderColor;\r\n var isDark = true;\r\n\r\n if (match) {\r\n if (match.groups[\"bgColor\"]) {\r\n bgColor = match.groups[\"bgColor\"]\r\n }\r\n\r\n isDark = getIsDark(bgColor)\r\n if (match.groups[\"textColor\"]) {\r\n textColor = match.groups[\"textColor\"]\r\n } else if (isDark) {\r\n textColor = \"#ffffff\";\r\n } else {\r\n textColor = \"#000000\";\r\n }\r\n\r\n if (isDark) {\r\n borderColor = bgColor\r\n } else {\r\n borderColor = textColor\r\n }\r\n } else {\r\n var textColor = element.getAttribute('data-text-color');\r\n var bgColor = element.getAttribute('data-bg-color');\r\n var borderColor = element.getAttribute('data-border-color');\r\n }\r\n\r\n //Default\r\n element.style.setProperty('--text-color', textColor);\r\n element.style.setProperty('--bg-color', bgColor);\r\n element.style.setProperty('--border-color', borderColor);\r\n\r\n //Active\r\n var activeTextColor = element.getAttribute('data-active-text-color');\r\n if (!activeTextColor) {\r\n activeTextColor = bgColor;\r\n }\r\n element.style.setProperty('--active-text-color', activeTextColor);\r\n\r\n var activeBgColor = element.getAttribute('data-active-bg-color');\r\n if (!activeBgColor) {\r\n activeBgColor = textColor\r\n }\r\n element.style.setProperty('--active-bg-color', activeBgColor);\r\n\r\n var activeBorderColor = element.getAttribute('data-active-border-color');\r\n if (!activeBorderColor) {\r\n if (isDark) {\r\n activeBorderColor = bgColor\r\n } else {\r\n activeBorderColor = textColor\r\n }\r\n }\r\n element.style.setProperty('--active-border-color', activeBorderColor);\r\n });\r\n });\r\n}\r\n\r\n\r\nexport { CustomButtonService };","import { KeyUpService } from './keyupservice';\r\nimport { ResizeService } from './resizeservice';\r\nimport { ScrollService } from './scrollservice';\r\n\r\n//SHARED\r\nimport { CustomButtonService } from '../../../../../_shared/src/js/common/services/custombuttonservice';\r\n\r\n/**\r\n * Services\r\n */\r\nvar Services = {\r\n\t\r\n\t/**\r\n\t * @desc Initialize the services\r\n\t*/\r\n init: function () {\r\n this.CustomButtonService.init();\r\n\t\tthis.KeyUpService.init();\r\n\t\tthis.ResizeService.init();\r\n\t\tthis.ScrollService.init();\r\n\t},\r\n\r\n /**\r\n * @desc Assign KeyUpService to an object in Services\r\n */\r\n CustomButtonService: CustomButtonService,\r\n\r\n\t/**\r\n\t * @desc Assign KeyUpService to an object in Services\r\n\t*/\r\n\tKeyUpService : KeyUpService,\r\n\t\r\n\t/**\r\n\t * @desc Assign ResizeService to an object in Services\r\n\t*/\r\n\tResizeService : ResizeService,\r\n\t\r\n\t/**\r\n\t * @desc Assign ScrollService to an object in Services\r\n\t*/\r\n\tScrollService : ScrollService\r\n\r\n};\r\n\r\nexport {Services};\r\n","var Handlebars = require(\"../../../../node_modules/handlebars/runtime.js\");\nfunction __default(obj) { return obj && (obj.__esModule ? obj[\"default\"] : obj); }\nmodule.exports = (Handlebars[\"default\"] || Handlebars).template({\"1\":function(container,depth0,helpers,partials,data) {\n var stack1, alias1=container.lambda, alias2=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {\n if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {\n return parent[propertyName];\n }\n return undefined\n };\n\n return \"
\\r\\n\\r\\n\\r\\n\"\n + ((stack1 = lookupProperty(helpers,\"each\").call(alias1,(depth0 != null ? lookupProperty(depth0,\"Items\") : depth0),{\"name\":\"each\",\"hash\":{},\"fn\":container.program(3, data, 0, blockParams, depths),\"inverse\":container.noop,\"data\":data,\"loc\":{\"start\":{\"line\":10,\"column\":2},\"end\":{\"line\":42,\"column\":11}}})) != null ? stack1 : \"\")\n + \"\\r\\n\";\n},\"useData\":true,\"useDepths\":true});","import { EVENTS, SELECTORS, CLASS_NAMES, MISC } from '../../common/constants';\r\nimport { queryselectorparents } from '../../common/utils/queryselectorparents';\r\n\r\nvar Flipper = {\r\n // initialize variables\r\n\r\n anchor : SELECTORS.ANCHOR,\r\n flipper : SELECTORS.FLIPPER,\r\n flippercontainer : SELECTORS.FLIPPER_CONTAINER,\r\n\r\n click : EVENTS.CLICK,\r\n\r\n init : function(element) {\r\n var flippers = element.querySelectorAll(this.flipper);\r\n\r\n // Saving this so it can be accessed inside the event handler\r\n var that = this;\r\n\r\n for (var i = 0; i < flippers.length; i++) {\r\n flippers[i].addEventListener(this.click, _flipItems);\r\n }\r\n\r\n // Set up event handlers\r\n\r\n function _setupFlipItems() {\r\n return function() {\r\n _flipItems();\r\n };\r\n }\r\n\r\n function _flipItems(event) {\r\n event.preventDefault();\r\n\r\n var flipperscontainer = queryselectorparents(event.target, that.flippercontainer);\r\n var flipperscount = flipperscontainer.querySelectorAll(that.flipper).length;\r\n\r\n var turnOn = document.querySelector(event.target.hash);\r\n var turnOff = document.querySelector(\"#\" + event.target.getAttribute('data-flip-off'));\r\n turnOff.setAttribute(MISC.ARIA_HIDDEN, true);\r\n turnOn.setAttribute(MISC.ARIA_HIDDEN, false);\r\n\r\n // If the flipper goes back and forth and the link changes, flip the link, otherwise don't\r\n if(flipperscount > 1) {\r\n var triggerOn = flipperscontainer.querySelector('[aria-hidden=true]');\r\n var triggerOff = this;\r\n triggerOff.setAttribute(MISC.ARIA_HIDDEN, true);\r\n triggerOn.setAttribute(MISC.ARIA_HIDDEN, false);\r\n }\r\n }\r\n }\r\n\r\n};\r\n\r\nexport default Flipper;","import { EVENTS, SELECTORS, CLASS_NAMES, MISC } from '../../common/constants';\r\nimport { queryselectorparents } from '../../common/utils/queryselectorparents';\r\n\r\nvar Accordion = {\r\n\r\n init: function(element) {\r\n this.element = element;\r\n\r\n this.accordionHeads = element.querySelectorAll(SELECTORS.ACCORDION_HEAD);\r\n\r\n for (var i = 0; i < this.accordionHeads.length; i++) {\r\n this.accordionHeads[i].addEventListener(EVENTS.CLICK, _toggleAccordion);\r\n }\r\n\r\n var tab = document.querySelector(`${window.location.hash} ${SELECTORS.ACCORDION_HEAD}`);\r\n if(tab && tab.id != \"\") {\r\n if (tab.onclick) {\r\n tab.onclick();\r\n } else if (tab.click) {\r\n tab.click();\r\n }\r\n }\r\n\r\n function _toggleAccordion() {\r\n event.preventDefault();\r\n\r\n var container = queryselectorparents(event.target, SELECTORS.LIST_ITEM);\r\n var copy = container.querySelector(SELECTORS.ACCORDION_COPY);\r\n\r\n container.classList.toggle(CLASS_NAMES.OPEN);\r\n if(copy.getAttribute(MISC.ARIA_HIDDEN)) {\r\n copy.setAttribute(MISC.ARIA_HIDDEN, false);\r\n } else {\r\n copy.setAttribute(MISC.ARIA_HIDDEN, true);\r\n }\r\n\r\n if(container.classList.contains(CLASS_NAMES.OPEN)) {\r\n history.pushState({}, '', `#${container.id}`);\r\n }\r\n }\r\n\r\n }\r\n};\r\n\r\nexport default Accordion;\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport { tabs } from '../../common/utils/tabs';\r\nimport { serializeform } from '../../common/utils/serializeform';\r\nimport { getJSON } from '../../common/utils/getjson';\r\n\r\n\r\nvar ArticleTiles = {\r\n // Initialize the module\r\n init : function(element) {\r\n\r\n var _self = this;\r\n\r\n this.element = element;\r\n this.articlesTemplate = require(\"../../templates/partials/articletilesitems.hbs\");\r\n\r\n this.moreForms = this.element.querySelectorAll('form.hof-more-article-tiles');\r\n\r\n for (var i = 0; i < this.moreForms.length; i++) {\r\n this.moreForms[i].addEventListener(EVENTS.SUBMIT, _moreArticles);\r\n }\r\n\r\n tabs(this.element);\r\n\r\n function _moreArticles() {\r\n event.preventDefault();\r\n \r\n event.target.querySelector('input[name=\"pageNum\"]').value = parseInt(event.target.querySelector('input[name=\"pageNum\"]').value) + 1;\r\n var configOptions = serializeform(event.target);\r\n var config = JSON.parse(configOptions);\r\n _self.section = config.formtype;\r\n _self.form = event.target;\r\n\r\n var productServiceURL = this.getAttribute('action');\r\n\r\n var result = getJSON(productServiceURL, configOptions).then(function(data) {\r\n // Update the page using Handlebars template\r\n var newArticlesList = _self.articlesTemplate(data);\r\n var target = _self.element.querySelector('#' + _self.section);\r\n var button = _self.form.querySelector('button');\r\n\r\n var more = data.more;\r\n\r\n if(!more) {\r\n button.disabled = true;\r\n button.setAttribute(MISC.ARIA_HIDDEN, true);\r\n }\r\n\r\n target.insertAdjacentHTML('beforeend', newArticlesList);\r\n });\r\n\r\n }\r\n }\r\n};\r\n\r\nexport default ArticleTiles;","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport videojs from 'video.js';\r\nimport 'videojs-youtube';\r\n\r\nvar BackgroundVideo = {\r\n\t\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.video = this.element.querySelector(SELECTORS.VIDEO_PLAYER);\r\n\t\t\r\n\t\tthis.initVideo();\r\n\t\t\r\n\t},\r\n\t\r\n\t/**\r\n\t* Initializes video\r\n\t*\r\n\t*/\r\n\tinitVideo: function() {\r\n\t\tvar _self = this;\r\n\t\tvar video = videojs(this.video).ready(function(){\r\n\t\t var player = this;\r\n\t\t \r\n\t\t\tplayer.muted(true);\r\n\t\t\tplayer.play();\r\n\t\t \r\n\t\t // super-hacky but Safari 9 freaks out when videos play \r\n\t\t // behind other elements & this forces a repaint to correct that\r\n\t\t player.on(EVENTS.PLAYING, function() {\r\n\t\t \t// hack won't work unless there's a delay\r\n\t\t \t// making this a hack of the hack\r\n\t\t \tsetTimeout(function() {\r\n\t\t\t\tdocument.body.removeChild(document.body.appendChild(document.createElement('style')));\r\n\t\t\t}, 500);\r\n\t\t });\r\n\r\n\t\t});\r\n\r\n\t}\r\n\r\n\r\n\r\n};\r\n\r\nexport default BackgroundVideo;","import SlimSelect from \"slim-select\";\r\n\r\nvar CheckoutMultiDoor = {\r\n init: function (element) {\r\n this.$element = element;\r\n\r\n this.bindElements();\r\n this.createSlimSelects();\r\n }, //init\r\n\r\n bindElements() {\r\n this.dom = {\r\n $selects: this.$element.querySelectorAll(\r\n \".checkout-account__selector-select\"\r\n ),\r\n };\r\n }, //bindElements\r\n\r\n createSlimSelects() {\r\n const { $selects } = this.dom || {};\r\n\r\n for (const $select of $selects) {\r\n const searchPlaceholder = $select?.dataset?.searchPlaceholder || null;\r\n const searchText = $select?.dataset?.searchNoResultsLabel || null;\r\n const showSearch = ($select.length || 0) > 1 ? true : false;\r\n\r\n new SlimSelect({\r\n select: $select,\r\n allowDeselect: false,\r\n allowDeselectOption: false,\r\n searchFocus: true,\r\n searchHighlight: false,\r\n closeOnSelect: true,\r\n hideSelectedOption: false,\r\n showContent: \"down\",\r\n searchPlaceholder,\r\n searchText,\r\n showSearch,\r\n });\r\n }\r\n }, //createSlimSelects\r\n};\r\n\r\nexport default CheckoutMultiDoor;\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport { serializeform } from '../../common/utils/serializeform';\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { setErrors } from '../atoms/Forms';\r\n\r\n\r\nvar CreateAccount = {\r\n // Initialize the module\r\n init: function (element) {\r\n\r\n var _self = this;\r\n\r\n this.element = element;\r\n\r\n this.creator = element.querySelector('.hof-create-account');\r\n this.confirmation = element.querySelector('.hof-created-account');\r\n\r\n this.creatorForm = element.querySelector(SELECTORS.FORM);\r\n\r\n if(this.creatorForm) {\r\n this.creatorForm.addEventListener(EVENTS.SUBMIT, _createTheAccount);\r\n }\r\n\r\n function _createTheAccount() {\r\n event.preventDefault();\r\n\r\n var configOptions = serializeform(event.target);\r\n var config = JSON.parse(configOptions);\r\n _self.form = event.target;\r\n\r\n var productServiceURL = this.getAttribute('action');\r\n\r\n var result = getJSON(productServiceURL, configOptions).then(function(data) {\r\n\r\n if(data.accountcreated) {\r\n _self.creator.setAttribute(MISC.ARIA_HIDDEN, true);\r\n _self.confirmation.setAttribute(MISC.ARIA_HIDDEN, false);\r\n }\r\n else {\r\n setErrors(_self.form, data.FieldErrors);\r\n }\r\n\r\n });\r\n\r\n }\r\n\r\n }\r\n\r\n};\r\n\r\nexport default CreateAccount;\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { serializeform } from '../../common/utils/serializeform';\r\nimport { queryselectorparents } from '../../common/utils/queryselectorparents';\r\nimport { setErrors } from '../atoms/Forms';\r\n\r\nvar Footer = {\r\n // Initialize the module\r\n init : function(element) {\r\n\r\n var _self = this;\r\n\r\n this.element = element;\r\n this.newsletterForm = this.element.querySelector('#hof-footer-newsletter-form');\r\n this.countrySelect = this.element.querySelector('select[name=hof-country]');\r\n\r\n if(this.newsletterForm != null) {\r\n this.newsletterForm.addEventListener(EVENTS.SUBMIT, this.sendForm.bind(this));\r\n }\r\n\r\n if(this.countrySelect != null) {\r\n this.countrySelect.addEventListener(EVENTS.CHANGE, this.countryRedirect);\r\n }\r\n },\r\n\r\n sendForm : function() {\r\n event.preventDefault();\r\n var _self = this;\r\n\r\n this.theForm = event.target;\r\n var configOptions = serializeform(this.theForm);\r\n var configObject = JSON.parse(configOptions);\r\n\r\n var serviceURL = this.theForm.getAttribute('action');\r\n\r\n var result = getJSON(serviceURL, configOptions)\r\n .then(r => {\r\n if (!r.Success) {\r\n this.theForm.querySelector('.hof-form-error').classList.remove('success');\r\n }\r\n if (r.FieldErrors) {\r\n setErrors(this.theForm, r.FieldErrors);\r\n }\r\n if (r.Message) {\r\n this.theForm.querySelector('.hof-form-error').innerHTML = r.Message;\r\n }\r\n });\r\n\r\n },\r\n\r\n countryRedirect : function() {\r\n var url = this.value;\r\n\r\n window.location = url;\r\n\r\n }\r\n\r\n};\r\n\r\nexport default Footer;\r\n","const specialCharsRegex = /[.*+?^${}()|[\\]\\\\]/g;\r\nconst whitespacesRegexG = /\\s+/g;\r\nconst plusRegexG = /\\+/g;\r\n\r\nexport function encodeSpecialCharacters(str) {\r\n return str.replace(specialCharsRegex, '');\r\n}\r\n\r\nexport function encodeSpaces(term) {\r\n const escapedTerm = encodeSpecialCharacters(term);\r\n return escapedTerm.replace(whitespacesRegexG, '+');\r\n}\r\n\r\nexport function decodeSpaces(term) {\r\n return term.replace(plusRegexG, ' ');\r\n}","import cookie from 'js-cookie';\r\n\r\nconst COOKIE = 'hof-recent-searches';\r\n\r\nexport function updateRecentSearches(q) {\r\n let arr = getRecentSearches();\r\n const index = arr.indexOf(q);\r\n if (index >= 0) {\r\n arr = [q, ...arr.splice(0, index), ...arr.splice(index + 1)];\r\n } else {\r\n arr = [q, ...arr];\r\n }\r\n cookie.set(COOKIE, arr.splice(0, 2).join(','));\r\n}\r\n\r\nexport function getRecentSearches() {\r\n let recentSearches = cookie.get(COOKIE);\r\n let arr = [];\r\n if (recentSearches) {\r\n arr = recentSearches.split(',');\r\n }\r\n return arr;\r\n}","/*jshint loopfunc: true */\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { encodeSpaces, encodeSpecialCharacters } from '../../common/utils/encode';\r\nimport { getRecentSearches } from '../../common/utils/search';\r\nimport { decodeSpaces } from '../../common/utils/encode';\r\n\r\nconst whitespacesRegex = /\\s+/;\r\n\r\nconst SearchModal = {\r\n\t\r\n\t// Initialize the module\r\n\tinit(element) {\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n this.$element = element;\r\n\r\n // bind lements\r\n this.$container = this.$element.parentNode;\r\n this.$form = this.$element.querySelector('form');\r\n this.$input = this.$element.querySelector('input');\r\n this.$loading = this.$container.querySelector('.hof-autocomplete-loading');\r\n this.$results = this.$container.querySelector('.hof-search-results__predictive');\r\n this.$recentSearches = this.$container.querySelector('.hof-search-results__recent');\r\n this.$recentSuggestions = this.$recentSearches.querySelector('.hof-search-suggestions');\r\n this.$popularSearches = this.$container.querySelector('.hof-search-results__popular');\r\n this.$popularSuggestions = this.$popularSearches.querySelector('.hof-search-suggestions');\r\n\r\n\t\t// templates to populate returned results\r\n\t\tthis.resultsTemplate = require (\"../../templates/partials/predictiveresults.hbs\");\r\n\t\tthis.recentTemplate = require (\"../../templates/partials/recentsearches.hbs\");\r\n \r\n // bind events\r\n this.$input.addEventListener('keyup', ::this.predictiveSearch);\r\n this.$form.addEventListener('submit', ::this.handleSubmit);\r\n \r\n // Get data attribute value\r\n this.frequentQueriesUrl = this.$container.dataset.frequentQueriesUrl;\r\n\r\n // Search page URL\r\n this.searchPageUrl = this.$form.getAttribute('action');\r\n\r\n this.updatePopularSearches();\r\n },\r\n \r\n open() {\r\n this.updateRecentSearches();\r\n\t\tthis.$input.focus();\r\n },\r\n\r\n updateRecentSearches() {\r\n let list = getRecentSearches();\r\n if (!list.length) {\r\n return;\r\n }\r\n list = list.map(item => decodeSpaces(item));\r\n const html = this.recentTemplate({ recentSearches: list });\r\n this.$recentSuggestions.innerHTML = html;\r\n const elements = this.$recentSuggestions.querySelectorAll('.hof-search-suggestion');\r\n this.bindClickSearchSuggestions(elements);\r\n this.$recentSearches.classList.add('active');\r\n },\r\n\r\n /**\r\n * Update popular searches section. The values should be defined as \r\n * data attribute (data-popular-searches), and they are comma-separated values\r\n */\r\n updatePopularSearches() {\r\n const elements = this.$popularSuggestions.querySelectorAll('.hof-search-suggestion');\r\n\r\n if (!elements.length) {\r\n return;\r\n }\r\n\r\n this.bindClickSearchSuggestions(elements);\r\n this.$popularSearches.classList.add('active');\r\n },\r\n\r\n\t/**\r\n * Sends value of search input to BE and gets suggested terms.\r\n * Up to 10 predictive results will be displayed as the user is typing.\r\n\t* \r\n\t*/\r\n\tpredictiveSearch(e) {\r\n const charCode = e.charCode || e.keyCode;\r\n let query = this.$input.value.trim();\r\n\r\n if (charCode === 27 || charCode === 13) {\r\n return;\r\n }\r\n \r\n this.$results.classList.remove('active');\r\n this.$results.innerHTML = '';\r\n\r\n if (this.frequentQueries && this.frequentQueries.length && query.length >= 3) {\r\n const suggestedTerms = this.getSuggestedTerms(this.frequentQueries);\r\n this.updateResults(suggestedTerms);\r\n\r\n } else if (query.length >= 3) {\r\n this.$loading.classList.add('visible');\r\n this.getFequentQueries()\r\n .then(::this.getSuggestedTerms)\r\n .then(::this.updateResults)\r\n .then(::this.hideLoading)\r\n .catch(::this.hideLoading);\r\n }\r\n },\r\n\r\n hideLoading() {\r\n this.$loading.classList.remove('visible');\r\n },\r\n \r\n getFequentQueries() {\r\n return getJSON(this.frequentQueriesUrl).then(data => {\r\n this.frequentQueries = data;\r\n return data;\r\n });\r\n },\r\n\r\n getSuggestedTerms(data) {\r\n let query = this.$input.value;\r\n\r\n if (!query || query.trim().length === 0) {\r\n return null;\r\n }\r\n\r\n return data\r\n .map((term, index) => ({ term, occurrences: this.match(query, term), index }))\r\n .sort((match1, match2) => {\r\n const r = match2.occurrences.length - match1.occurrences.length;\r\n if (r === 0) {\r\n return match1.index - match2.index\r\n }\r\n return r;\r\n })\r\n .slice(0, 10)\r\n .filter(match => match.occurrences.length)\r\n .map(match => ({ term: match.term, suggestion: this.highlight(match)}));\r\n },\r\n\r\n highlight({ term, occurrences }) {\r\n return occurrences.reduce((acc, pos, index, self) => {\r\n\r\n acc.result = acc.result +\r\n term.slice(acc.prevIndex, pos[0]) +\r\n `${term.slice(pos[0], pos[1])}`;\r\n\r\n if (self.length === index + 1) {\r\n acc.result = acc.result + term.slice(pos[1]);\r\n }\r\n\r\n acc.prevIndex = pos[1];\r\n\r\n return acc;\r\n\r\n }, {prevIndex: 0, result: ''}).result;\r\n },\r\n\r\n match(query, term) {\r\n let text = term;\r\n let regex;\r\n let array;\r\n let index;\r\n let lastIndex;\r\n let len;\r\n let escapedWord;\r\n \r\n return query\r\n .trim()\r\n .split(whitespacesRegex)\r\n .filter(word => word.length)\r\n .reduce(function(result, word) {\r\n escapedWord = encodeSpecialCharacters(word);\r\n\r\n if (!escapedWord) {\r\n return result;\r\n }\r\n\r\n regex = new RegExp(escapedWord, 'ig');\r\n\r\n while ((array = regex.exec(text)) !== null) {\r\n index = array.index;\r\n lastIndex = regex.lastIndex;\r\n len = lastIndex - index;\r\n\r\n if (index > -1) {\r\n result.push([index, lastIndex]);\r\n\r\n text = text.slice(0, index) +\r\n new Array(len + 1).join(' ') +\r\n text.slice(lastIndex);\r\n }\r\n }\r\n\r\n return result;\r\n }, [])\r\n .sort((match1, match2) => match1[0] - match2[0]);\r\n },\r\n\r\n updateResults(data) {\r\n if (data && data.length) {\r\n const html = this.resultsTemplate({ results: data });\r\n this.$results.innerHTML = html;\r\n const elements = this.$results.querySelectorAll('.hof-search-suggestion');\r\n this.bindClickSearchSuggestions(elements);\r\n this.$results.classList.add('active');\r\n }\r\n },\r\n\r\n bindClickSearchSuggestions(elements) {\r\n\t\tfor (var j = 0; j < elements.length; j++) {\r\n\t\t\telements[j].addEventListener('click', ::this.handleSuggestionClick);\r\n\t\t}\r\n },\r\n\r\n handleSuggestionClick(e) {\r\n const term = e.currentTarget.dataset.term;\r\n this.redirectToSearchPage(term);\r\n },\r\n\r\n handleSubmit(e) {\r\n e.preventDefault();\r\n const query = this.$input.value;\r\n this.redirectToSearchPage(query);\r\n },\r\n\r\n redirectToSearchPage(query) {\r\n const term = encodeSpaces(query);\r\n if (!term) {\r\n return;\r\n }\r\n const url = `${this.searchPageUrl}?q=${term}`;\r\n window.location.href = url;\r\n }\r\n};\r\n\r\nexport default SearchModal;","const SearchModalCoveo = {\r\n init(element) {\r\n /**\r\n * DOM node that is passed into the module\r\n *\r\n * @property {Object} element DOM node that is passed into the module\r\n */\r\n this.$element = element;\r\n\r\n // bind lements\r\n this.$container = this.$element.parentNode;\r\n\r\n this.$popularSearches = this.$container.querySelector(\r\n \".hof-search-results__popular\"\r\n );\r\n\r\n this.bindClickSearchSuggestions(this.$popularSearches);\r\n },\r\n\r\n bindClickSearchSuggestions(elements) {\r\n elements\r\n .querySelectorAll(\"li\")\r\n .forEach(item =>\r\n item.addEventListener(\"click\", () => this.handleSuggestionClick(item))\r\n );\r\n },\r\n handleSuggestionClick(item) {\r\n const term = item.dataset.term;\r\n this.redirectToSearchPage(term);\r\n },\r\n\r\n redirectToSearchPage(query) {\r\n // const term = encodeSpaces(query);\r\n if (!query) {\r\n return;\r\n }\r\n const url = `//${window.location.host}/search#q=${query}`;\r\n window.location.href = url;\r\n }\r\n};\r\n\r\nexport default SearchModalCoveo;\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from \"../../common/constants\";\r\nimport { Services } from \"../../common/services\";\r\nimport SearchModal from \"./SearchModal\";\r\nimport SearchModalCoveo from \"./SearchModalCoveo\";\r\nimport VanillaModal from \"vanilla-modal\";\r\n\r\nvar GlobalNavigation = {\r\n // Variable with class name of hamburger link for mobile\r\n closing: CLASS_NAMES.CLOSING,\r\n hamburger: CLASS_NAMES.HAMBURGERLINK,\r\n open: CLASS_NAMES.OPEN,\r\n scrollblock: CLASS_NAMES.MODALSCROLLBLOCK,\r\n searchcontainer: CLASS_NAMES.SEARCHCONTAINER,\r\n bodyNavOpenClass: \"navOpen\",\r\n\r\n anchor: SELECTORS.ANCHOR,\r\n viewport: SELECTORS.HTML,\r\n header: SELECTORS.HEADER,\r\n\r\n // Initialize the module\r\n init: function(element) {\r\n /**\r\n * DOM node that is passed into the module\r\n *\r\n * @property {Object} element DOM node that is passed into the module\r\n */\r\n this.element = element;\r\n this.brandSelect = this.element.querySelector('select[name=hof-brand]');\r\n \r\n if(this.brandSelect != null) {\r\n this.brandSelect.addEventListener(EVENTS.CHANGE, brandRedirect);\r\n }\r\n\r\n // Saving this so it can be accessed inside the event handler\r\n var that = this;\r\n\r\n // Find the hamburger\r\n var hamburgerlink = document.getElementsByClassName(this.hamburger);\r\n\r\n for (var i = 0; i < hamburgerlink.length; i++) {\r\n hamburgerlink[i].addEventListener(EVENTS.CLICK, _makeHamburger());\r\n }\r\n\r\n // Find the search containers\r\n var searchanchor = document.querySelector(\r\n \".\" + this.searchcontainer + \" \" + this.anchor\r\n );\r\n\r\n if (searchanchor === null) {\r\n // There's no search, so this is a Secure Checkout page with reduced header\r\n return;\r\n }\r\n\r\n searchanchor.addEventListener(EVENTS.CLICK, _launchSearchModal.bind(this));\r\n\r\n var modalContent = document.querySelector(\".\" + CLASS_NAMES.MODAL_CONTENT);\r\n\r\n //init search autocomplete\r\n var hofSiteSearch = document.querySelector(\".hof-site-search\");\r\n this.isCoveoSearch = hofSiteSearch.classList.contains(\r\n \"hof-site-search__coveo\"\r\n );\r\n\r\n if (!this.isCoveoSearch) {\r\n SearchModal.init(hofSiteSearch);\r\n } else {\r\n SearchModalCoveo.init(hofSiteSearch);\r\n }\r\n\r\n /**\r\n * event handler for search anchor\r\n *\r\n */\r\n function searchAnchorHandler() {\r\n return function(event) {\r\n _launchSearchModal(event);\r\n };\r\n }\r\n\r\n // Find the body\r\n var thebody = document.querySelector(this.viewport);\r\n\r\n // Add callback to get input value on keyup\r\n Services.KeyUpService.addCallback(function() {\r\n _onKeyUp.apply(that, arguments);\r\n });\r\n\r\n // Set up event handlers for Hamburger\r\n function _makeHamburger() {\r\n return function() {\r\n _toggleHamburger();\r\n };\r\n }\r\n\r\n function _toggleHamburger() {\r\n event.preventDefault();\r\n\r\n var header = document.getElementsByTagName(that.header)[0];\r\n var top;\r\n\r\n if (header.classList.contains(that.open)) {\r\n document.body.classList.remove(that.bodyNavOpenClass);\r\n header.classList.add(that.closing);\r\n window.setTimeout(function() {\r\n header.classList.remove(that.closing);\r\n header.classList.remove(that.open);\r\n }, 600);\r\n } else {\r\n document.body.classList.add(that.bodyNavOpenClass);\r\n header.classList.add(that.open);\r\n }\r\n\r\n _toggleLockBody();\r\n }\r\n\r\n function _toggleLockBody() {\r\n var viewport = document.querySelector(that.viewport);\r\n viewport.classList.toggle(that.scrollblock);\r\n }\r\n\r\n /**\r\n * Launches VanillaModal\r\n *\r\n */\r\n function _launchSearchModal(event) {\r\n var that = this;\r\n event.preventDefault();\r\n document.body.classList.add(CLASS_NAMES.MODAL_BG_WHITE);\r\n var modal = new VanillaModal({\r\n modal: \".\" + CLASS_NAMES.MODAL,\r\n modalInner: \".\" + CLASS_NAMES.MODAL_INNER,\r\n modalContent: \".\" + CLASS_NAMES.MODAL_CONTENT,\r\n class: CLASS_NAMES.MODAL_VISIBLE,\r\n onOpen: function() {\r\n modalContent.classList.add(CLASS_NAMES.OPEN);\r\n document.body.classList.add(CLASS_NAMES.SEARCH_MODAL);\r\n // have to force a redraw for Safari 9\r\n thebody.style.display = \"none\";\r\n thebody.offsetHeight; // jshint ignore:line\r\n thebody.style.display = \"block\";\r\n\r\n if (!that.isCoveoSearch) {\r\n SearchModal.open();\r\n } else {\r\n var CoveoBoxes = document.querySelectorAll(\".CoveoOmnibox\");\r\n // This is because on the coveo search page there are 2 inputs, we need the modal input\r\n var inputModal =\r\n CoveoBoxes.length > 1 ? CoveoBoxes[1] : CoveoBoxes[0];\r\n\r\n inputModal.querySelector(\"input\").focus();\r\n inputModal.setAttribute(\"aria-expanded\", \"true\");\r\n inputModal.classList.add(\"magic-box-hasFocus\");\r\n }\r\n },\r\n onClose: function() {\r\n modalContent.classList.remove(CLASS_NAMES.OPEN);\r\n document.body.classList.remove(CLASS_NAMES.SEARCH_MODAL);\r\n }\r\n });\r\n\r\n modal.open(SELECTORS.SEARCH);\r\n }\r\n\r\n /**\r\n * Closes modal or hamburger overlay on ESC key\r\n *\r\n */\r\n function _onKeyUp(charCode) {\r\n if (charCode === 27) {\r\n var opens = document.querySelectorAll(\".\" + that.open);\r\n for (var l = 0; l < opens.length; l++) {\r\n opens[l].classList.remove(that.open);\r\n }\r\n if (\r\n document\r\n .querySelector(that.viewport)\r\n .classList.contains(that.scrollblock)\r\n ) {\r\n _toggleLockBody();\r\n }\r\n }\r\n }\r\n\r\n function brandRedirect() {\r\n var url = this.value;\r\n window.location = url;\r\n }\r\n }\r\n};\r\n\r\nexport default GlobalNavigation;\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport videojs from 'video.js';\r\nimport 'videojs-youtube';\r\n\r\nvar InlineVideo = {\r\n\t\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.videos = this.element.querySelectorAll(SELECTORS.VIDEO_PLAYER);\r\n\r\n\t\t\r\n\t\tthis.initVideo();\r\n\t\t\r\n\t},\r\n\t\r\n\t/**\r\n\t* Loops through all videos in module and initializes them with videojs\r\n\t*\r\n\t*/\r\n\tinitVideo: function() {\r\n\t\tfor (var i = 0; i < this.videos; i++) {\r\n\t\t\tvideojs(this.videos[i]);\r\n\t\t}\r\n\t}\r\n\r\n\r\n\r\n};\r\n\r\nexport default InlineVideo;","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport videojs from 'video.js';\r\nimport 'videojs-youtube';\r\nimport VanillaModal from 'vanilla-modal';\r\n\r\nvar ModalVideo = {\r\n\t\r\n\t// some variables to store data about the currently-playing video\r\n\tposter: null,\r\n\tsetup: null,\r\n\tvideo: null,\r\n\tvideocontainer: null,\r\n\tplayer: null,\r\n\t\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.videobuttons = this.element.querySelectorAll(SELECTORS.VIDEO_PLAY);\r\n\t\tthis.modalContent = document.querySelector('#'+CLASS_NAMES.MODAL + ' .'+CLASS_NAMES.MODAL_CONTENT);\r\n\t\t\r\n\t\t\r\n\t\tthis.bindEvents();\r\n\t\tthis.videoContainer();\r\n\t},\r\n\t\r\n\tbindEvents: function() {\r\n\t\tvar _self = this;\r\n\t\t\r\n\t\tfor (var i = 0; i < this.videobuttons.length; i++) {\r\n\t\t\t/*jshint loopfunc: true */\r\n\t\t\tthis.videobuttons[i].addEventListener(EVENTS.CLICK, function () {_self.launchModal();});\r\n\t\t}\r\n\t\r\n\t},\r\n\t\r\n\t/**\r\n\t* creates container to hold video is one isn't present\r\n\t*\r\n\t*/\r\n\tvideoContainer: function() {\r\n\t\tvar videoHide = document.querySelectorAll('.'+CLASS_NAMES.VIDEO_HIDE);\r\n\t\tif(videoHide.length === 0) {\r\n\t\t\tthis.videocontainer = document.createElement('div');\r\n\t\t\tthis.videocontainer.classList.add(CLASS_NAMES.HIDDEN,CLASS_NAMES.VIDEO_HIDE);\r\n\t\t\tthis.videocontainer.innerHTML = \"
\";\r\n\t\t\tdocument.body.appendChild(this.videocontainer);\r\n\t\t}\r\n\t},\r\n\t\r\n\t/**\r\n\t* Launches VanillaModal\r\n\t*\r\n\t*/\r\n\tlaunchModal : function() {\r\n\t\tvar _self = this;\r\n\t\tvar thisButton = event.target;\r\n\t\tthis.poster = thisButton.dataset.poster;\r\n\t\tthis.setup = thisButton.dataset.setup;\r\n\t\tthis.buildVideo();\r\n\t\tdocument.body.classList.add(CLASS_NAMES.MODAL_BG_BLACK);\r\n\t\t\r\n\t\tvar modal = new VanillaModal({\r\n\t\t\tmodal : \".\" + CLASS_NAMES.MODAL,\r\n modalInner : \".\" + CLASS_NAMES.MODAL_INNER,\r\n modalContent : \".\" + CLASS_NAMES.MODAL_CONTENT,\r\n class : CLASS_NAMES.MODAL_VISIBLE,\r\n onBeforeOpen: function() { document.body.classList.add('video-modal'); },\r\n onOpen : function() { _self.startVideo(); },\r\n onClose : function() {_self.destroyVideo();}\r\n\t\t});\r\n\t\t\r\n\t\tmodal.open(\"#\"+_self.video);\r\n\t},\r\n\t\r\n\t/**\r\n\t* Builds Video for use with videojs\r\n\t*\r\n\t*/\r\n\tbuildVideo : function() {\r\n\t\tvar _self = this;\r\n\t\tvar thisVideo = document.createElement('video');\r\n\t\t_self.video = \"hof-video-\" + new Date().getUTCMilliseconds();\r\n\t\tthisVideo.className += CLASS_NAMES.VIDEO_JS + ' vjs-default-skin vjs-big-play-centered vjs-16-9';\r\n\t\tthisVideo.setAttribute('poster',_self.poster);\r\n\t\tthisVideo.setAttribute('data-setup',_self.setup);\r\n\t\tthisVideo.setAttribute('controls','');\r\n\t\t_self.videocontainer.setAttribute(MISC.ID,_self.video);\r\n\t\t_self.videocontainer.querySelector('.'+CLASS_NAMES.VIDEO_CONTAINER).appendChild(thisVideo);\r\n\t\t\r\n\t},\r\n\t\r\n\t/**\r\n\t* starts videojs\r\n\t*\r\n\t*/\r\n\tstartVideo : function() {\r\n\t\tvar query = \".\" + CLASS_NAMES.MODAL_CONTENT + ' .'+CLASS_NAMES.VIDEO_JS;\r\n\t\tvar videoPlayer = document.querySelector(query);\r\n\t\tthis.player = videojs(videoPlayer);\r\n\t\tthis.player.play();\r\n\t},\r\n\t\r\n\t/**\r\n\t* destroys videojs & deletes video\r\n\t*\r\n\t*/\r\n\tdestroyVideo : function() {\r\n\t\tif(this.player) {\r\n\t\t\tthis.player.dispose();\r\n\t\t\tthis.player = null;\r\n\t\t}\r\n\t\tdocument.body.classList.remove('video-modal');\r\n\t}\r\n\r\n\r\n\r\n};\r\n\r\nexport default ModalVideo;","import { Services } from '../../common/services';\r\nimport { notification } from '../../common/utils';\r\nimport { EVENTS } from '../../common/constants';\r\n\r\nvar ModuleExample = {\r\n\t\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\t\t\r\n\t\t/**\r\n * DOM node that is passed into the module\r\n *\r\n * @property {Object} element DOM node that is passed into the module\r\n */\r\n\t\tthis.element = element;\r\n\t\t\r\n\t\tthis.notification = notification;\r\n\t\t\r\n\t\tvar _self = this;\r\n\t\t\r\n\t\tthis.element.addEventListener(EVENTS.CLICK, function(event) {_self.notification(\"Added To Wishlist\",\"\");});\r\n\t}\r\n\r\n\r\n};\r\n\r\nexport default ModuleExample;","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { tooltips } from '../../common/utils/tooltips';\r\n\r\nvar RetailList = {\r\n\t\r\n\t//variable to store retailer data\r\n\tretailerData : null,\r\n\t\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\r\n\t\tvar that = this;\r\n\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.retailerslist = element.querySelector(SELECTORS.RETAILERS_LIST);\r\n\t\tthis.retailerMessage = element.querySelector(SELECTORS.RETAILER_MESSAGE);\r\n\t\tthis.pickupStore = element.querySelector('#hof-pickup-store');\r\n\t\tthis.zipStore = element.querySelector('#hof-store-zip');\r\n\t\tthis.searchform = this.element.querySelector(SELECTORS.RETAILER_SEARCH);\r\n\t\tthis.searchUrl = this.searchform.getAttribute('action');\r\n\t\tthis.searchinput = this.searchform.querySelector(SELECTORS.GOOGLE_PLACES);\r\n\r\n\t\tthis.giftboolean = element.querySelector(SELECTORS.RETAILER_GIFT);\r\n\t\tthis.giftmessage = element.querySelector(SELECTORS.RETAILER_GIFT_MESSAGE);\r\n\r\n\t\tthis.loader = element.querySelector('.hof-loading');\r\n\t\t\r\n\t\t/* call to temp function for prototype ONLY */\r\n\t\tthis.initSearchBox();\r\n\t\t\r\n\t\t/* for if you want to use Google Places Autocomplete */\r\n\t\t/* \r\n\t\tthis.loadPlaces();\r\n\t\t*/\r\n\r\n\t\tthis.giftmessage.addEventListener(EVENTS.BLUR, _syncGiftFields);\r\n\r\n\t\tfunction _syncGiftFields() {\r\n\t\t\tvar bool = that.giftboolean.value;\r\n\t\t\tvar msg = that.giftmessage.value;\r\n\t\t\tvar boolTgt = that.element.querySelector(SELECTORS.RETAILER_GIFT_TGT);\r\n\t\t\tvar msgTgt = that.element.querySelector(SELECTORS.RETAILER_GIFT_MESSAGE_TGT);\r\n\t\t\tboolTgt.value = bool;\r\n\t\t\tmsgTgt.value = msg;\r\n\t\t}\r\n\t\t\r\n\t},\r\n\t\r\n\tinitSearchBox : function() {\r\n\t\tvar _self = this;\r\n\t\t\r\n\t\t_self.searchform.addEventListener(EVENTS.SUBMIT, function(event) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tvar ziptest = new RegExp(MISC.ZIP_REGEX);\r\n\t\t\tvar zip = _self.searchinput.value;\r\n\t\t\tvar isValidZip = ziptest.test(zip);\r\n \tif(isValidZip) {\r\n\t\t\t\t_self.getRetailerData(zip);\r\n\t\t\t}\r\n\t\t});\r\n\t\t\r\n\t\t\r\n\t},\r\n\t\r\n\t/**\r\n\t* build Retailer list\r\n\t*\r\n\t*/\r\n\tbuildRetailerList : function() {\r\n\t\tvar _self = this;\r\n\t\tvar retailers = _self.retailerData.Retailers;\r\n\t\tvar message = _self.retailerData.Message;\r\n\t\tvar hasCSC = false;\r\n\t\tvar list = '';\r\n\t\tif(typeof(retailers) !== 'undefined') {\r\n\t\t\tvar numRetailers = retailers.length;\r\n\t\t\t// Add new markers\r\n\t\t\tif(numRetailers > 0) {\r\n\t\t\t\t// the below line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\t//retailers[0].csc = true;\r\n\t\t\t\t// the above line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\tfor (var i = 0; i < numRetailers; i++) {\r\n\t\t\t\t var retailer = retailers[i];\r\n\t\t\t\t\t// FOR CSC ICON: you will need to add the classname that gets created in scss/base/icons when you run gulp compile-icons after adding the SVG for the CSC icon to the assets/icons folder. Add that class to .hof-tooltip-link\r\n\t\t\t\t\tvar CSC = typeof(retailer.csc) !== 'undefined' && retailer.csc === true ? ''+MISC.CSC+''+MISC.CSC_MESSAGE+'' : '';\r\n\t\t\t\t\tlist += '
';\r\n\t\t\t\t\tif(!hasCSC && CSC !== '') {\r\n\t\t\t\t\t\thasCSC = true;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t/* regrettable hack but display:flex collapses margins/paddings/:after at the end of the list */\r\n\t\t\t\tlist += '
';\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t_self.retailerMessage.innerHTML = message;\r\n\t\tthis.retailerslist.innerHTML = list;\r\n\t\t\t\t\r\n\t\t//create event listener for newly-created CTA\r\n\t\tvar possibleStores = this.retailerslist.querySelectorAll(SELECTORS.STORE_DETAILS);\r\n\t\t\r\n\t\tfor (var j = 0; j < possibleStores.length; j++) {\r\n\t\t\tvar storeID = possibleStores[j].getAttribute('id');\r\n\t\t\tvar zip = possibleStores[j].dataset.zip;\r\n\t\t\tpossibleStores[j].addEventListener(EVENTS.CLICK, _storeSelectorSetter(storeID, zip));\r\n\t\t}\r\n\r\n\t\tfunction _storeSelectorSetter(storeID, zip) {\r\n\t\t\treturn function() {\r\n\t\t\t\t_storeSelector(storeID, zip);\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tfunction _storeSelector(storeID, zip) {\r\n\t\t\t_self.selectStore(storeID, zip);\r\n\t\t}\r\n\t\t//init tooltip\r\n\t\tif(hasCSC) {\r\n\t\t\ttooltips(this.retailerslist);\r\n\t\t}\r\n\t},\r\n\t\r\n\t/**\r\n\t* store Retailer data\r\n\t*\r\n\t* @param {JSON} retailerData stores retailerData in object for use across the module\r\n\t*\r\n\t*/\r\n\tstoreRetailerData : function(retailerData) {\r\n\t\tthis.retailerData = retailerData;\r\n\t},\r\n\t\r\n\t/**\r\n\t* get Retailer data\r\n\t*\r\n\t* @param {JSON} zip zipcode\r\n\t*\r\n\t*/\r\n\tgetRetailerData : function(zip) {\r\n\t\tvar _self = this;\r\n\t\t_self.retailerData = null;\r\n\r\n\t\t_self.loader.classList.add('show');\r\n\t\tvar getURL = this.searchUrl + '?zip=' + zip;\r\n\t\tgetJSON(getURL).then(function(data) {\r\n\t\t\t_self.loader.classList.remove('show');\r\n\t\t\t_self.storeRetailerData(data);\r\n\t\t\t_self.buildRetailerList();\r\n\t\t}, function(status) {\r\n\t\t\t_self.loader.classList.remove('show');\r\n\t\t\t_self.storeRetailerData(status);\r\n\t\t});\r\n\t},\r\n\t\r\n\t/**\r\n\t* selects chosen store \r\n\t*\r\n\t* @param {String} Retailer ID\r\n\t*\r\n\t*/\r\n\tselectStore(rID, zip) {\r\n\t\tthis.pickupStore.value = rID;\r\n\t\tthis.zipStore.value = zip;\r\n\t\tvar allStores = this.retailerslist.querySelectorAll(SELECTORS.STORE_DETAILS);\r\n\t\t\r\n\t\tfor (var j = 0; j < allStores.length; j++) {\r\n\t\t\tallStores[j].classList.remove(CLASS_NAMES.SELECTED);\r\n\t\t}\r\n\t\tdocument.getElementById(rID).classList.add(CLASS_NAMES.SELECTED);\r\n\t}\r\n\r\n};\r\n\r\nexport default RetailList;","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport loadGoogleMapsAPI from 'load-google-maps-api';\r\nimport { Services } from '../../common/services';\r\n\r\nvar RetailLocation = {\r\n\r\n\t// variable to store latitude and longitude\r\n\tuserPosition : {\r\n\t\tlat: 42.3525575,\r\n\t\tlng : -71.0573034,\r\n\t\terr: false\r\n\t},\r\n\r\n\t//variable to store map\r\n\tmap : {},\r\n\r\n\t//variable to store markers\r\n\tmarkers : {\r\n\t\tretailLocations : {}\r\n\t},\r\n\r\n\t//variable to store infoWindow\r\n\tinfoWin : null,\r\n\r\n\t// variable to store map bounds\r\n\tbounds: null,\r\n\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\r\n\t\t// get lat/lng for retailer\r\n\t\tthis.userPosition.lat = parseFloat(this.element.getAttribute('data-lat'));\r\n\t\tthis.userPosition.lng = parseFloat(this.element.getAttribute('data-lng'));\r\n\r\n\t\t// Load Google Maps API\r\n\t\tthis.loadMap();\r\n\r\n\r\n\t},\r\n\r\n\t/**\r\n\t* Loads Google Maps API via npm-included function\r\n\t* writes a script tag to the document that calls Google API\r\n\t*\r\n\t*/\r\n\tloadMap : function() {\r\n\t\tvar gmapKey = this.element.dataset.key;\r\n\t\tloadGoogleMapsAPI({key: gmapKey}).then((googleMaps) => {\r\n\t\t\tthis.initMap();\r\n\t\t}).catch((err) => {\r\n\t\t\tconsole.error(err);\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* inits Google Map\r\n\t*\r\n\t*/\r\n\tinitMap: function() {\r\n\t\tvar _self = this;\r\n\t\t// set latitude, longitude and DOM element where map will be loaded\r\n\t\tvar mapcenter = _self.userPosition;\r\n\t\tvar mapcontainer = this.element.querySelector(SELECTORS.GOOGLE_MAP);\r\n\r\n\t\t// Create a new StyledMapType object, passing it an array of styles,\r\n\t\t// and the name to be displayed on the map type control.\r\n\t\tvar styledMapType = new google.maps.StyledMapType(\r\n\t\t[\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#6c8490\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"1.16\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"4.11\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative\",\r\n\t\t\t\t\"elementType\": \"labels.text.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"0.00\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#4c4c4c\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative.country\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#00ff42\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-55\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#f2f2f2\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape\",\r\n\t\t\t\t\"elementType\": \"geometry\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.landcover\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-100\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-27\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#6c8490\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"4.55\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"6.79\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.terrain\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#6c8490\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"48\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"7.59\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.terrain\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#6c8490\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-2\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-14\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"poi\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"5.20\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": -100\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": 45\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"39\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"38\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#6c8490\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"simplified\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.arterial\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#cccccc\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"0\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.arterial\",\r\n\t\t\t\t\"elementType\": \"labels.icon\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.local\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#738790\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"39\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"38\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit.line\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#6c8490\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-20\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-17\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"5.25\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit.line\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"23\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"water\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#46bcec\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"27\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"water\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eaf5fb\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t}\r\n\t\t],\r\n\t\t{name: 'Styled Map'});\r\n\r\n\t\t// Create map\r\n\t\tthis.map = new google.maps.Map(mapcontainer, {\r\n\t\t\tzoom: 12,\r\n\t\t\tcenter: mapcenter,\r\n\t\t\tmapTypeControl: false,\r\n\t\t\tscaleControl: false,\r\n\t\t\tstreetViewControl: false,\r\n\t\t\trotateControl: false,\r\n\t\t\tfullscreenControl: false,\r\n\t\t\tmapTypeControlOptions: {\r\n\t\t\t\tmapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// variable to store map object locally\r\n\t\tvar map = this.map;\r\n\r\n\t\t//Associate the styled map with the MapTypeId and set it to display.\r\n map.mapTypes.set('styled_map', styledMapType);\r\n map.setMapTypeId('styled_map');\r\n\r\n\t\t// Create variable to hold map center on load\r\n\t\tvar center = map.getCenter();\r\n\r\n\t\t// Listen for Google Map custom \"idle\" event and update center\r\n\t\tmap.addListener(EVENTS.GMAPS_IDLE, function() {\r\n\t\t\tcenter = map.getCenter();\r\n\t\t});\r\n\r\n\t\t// Add callback to resize service to center the map\r\n\t\tServices.ResizeService.addCallback(function(){\r\n\t\t\tmap.setCenter(center);\r\n\t\t});\r\n\r\n\t\t// set retailer marker\r\n\t\t_self.setRetailerMarker();\r\n\t},\r\n\r\n\t/**\r\n\t* set Retailer marker\r\n\t*\r\n\t*/\r\n\tsetRetailerMarker : function() {\r\n\t\tvar _self = this;\r\n\t\tvar retailerImg = MISC.MAP_MARKER;\r\n\t\tvar retailerPlace = new google.maps.LatLng(_self.userPosition);\r\n\r\n\t\t// Create marker for retailer location\r\n\t\t_self.markers.retailLocations[0] = new google.maps.Marker({\r\n\t\t\ticon: {\r\n\t\t\t\turl: retailerImg,\r\n\t\t\t\tsize: new google.maps.Size(64,64),\r\n\t\t\t\tanchor: new google.maps.Point(0, 32),\r\n\t\t\t\tscaledSize: new google.maps.Size(32,32)\r\n\t\t\t},\r\n\t\t\tposition: retailerPlace,\r\n\t\t\tmap: _self.map\r\n\t\t});\r\n\t}\r\n\r\n};\r\n\r\nexport default RetailLocation;\r\n","/**\r\n * checks for presence of protocol in URL string, returns new string with protocol\r\n * @param {String} url the url to check\r\n * @return {String} the checked/converted url\r\n */\r\nexport function urlProtocol(url) {\r\n if (!/^(f|ht)tps?:\\/\\//i.test(url)) {\r\n url = \"http://\" + url;\r\n }\r\n return url;\r\n}\r\n","import { EVENTS, MISC, SELECTORS, CLASS_NAMES } from '../../common/constants';\r\nimport loadGoogleMapsAPI from 'load-google-maps-api';\r\nimport { Services } from '../../common/services';\r\nimport { getJSON } from '../../common/utils/getjson';\r\nimport { tabs } from '../../common/utils/tabs';\r\nimport { urlProtocol } from '../../common/utils/urlprotocol';\r\nimport { tooltips } from '../../common/utils/tooltips';\r\n\r\nvar RetailLocator = {\r\n\r\n\t// variable to store latitude and longitude\r\n\tuserPosition : {\r\n\t\tlat: 42.3525575,\r\n\t\tlng : -71.0573034,\r\n\t\terr: false\r\n\t},\r\n\r\n\t//variable to store map\r\n\tmap : {},\r\n\r\n\t//variable to store markers\r\n\tmarkers : {\r\n\t\tretailLocations : {}\r\n\t},\r\n\r\n\t//variable to store infoWindow\r\n\tinfoWin : null,\r\n\r\n\t//variable to store retailer data\r\n\tretailerData : null,\r\n\r\n\t// number of stores to load in each batch\r\n\tstoresBatch: 5,\r\n\r\n\t//variable to track stores loaded offset factor\r\n\tstoresMultiple: 1,\r\n\r\n\t// variable to set to enable listening for map drag\r\n\tlistenForDrag: false,\r\n\r\n\t// variable to store HTML string used in populating retailer list\r\n\tHTMLString: '',\r\n\r\n\t// variable to store map bounds\r\n\tbounds: null,\r\n\r\n\t// fallback content for example of closest retailer\r\n\tfbretailer : {\r\n\t\t\t\"__type\": \"Retailer\",\r\n\t\t\t\"Name\": \"Armstrong/Rockwell\",\r\n\t\t\t\"Address1\": \"150 Trumbull Street\",\r\n\t\t\t\"Address2\": \"Hartford, CT 06103\",\r\n\t\t\t\"City\": \"Hartford\",\r\n\t\t\t\"State\": \"CT\",\r\n\t\t\t\"Postal\": \"06103\",\r\n\t\t\t\"Country\": \"USA\",\r\n\t\t\t\"Phone\": \"(860) 246-9858\",\r\n\t\t\t\"Email\": \"info@Email.com\",\r\n\t\t\t\"Url\": \"www.Email.com\",\r\n\t\t\t\"ID\": \"00001239\",\r\n\t\t\t\"Latitude\": 41.77,\r\n\t\t\t\"Longitude\": -72.68,\r\n\t\t\t\"Distance\": 2,\r\n\t\t\t\"SSC\": false,\r\n\t\t\t\"HOFStore\": false,\r\n\t\t\t\"DetailUrl\": \"/locations/armstrongrockwell.aspx?brel=00001239\",\r\n\t\t\t\"IsPreferredStore\": false\r\n\t},\r\n\r\n\t// object to store user's preferred retailer\r\n\tpretailer : null,\r\n\r\n\t// Initialize the module\r\n\tinit : function(element) {\r\n\r\n\t\t/**\r\n\t\t* DOM node that is passed into the module\r\n\t\t*\r\n\t\t* @property {Object} element DOM node that is passed into the module\r\n\t\t*/\r\n\t\tthis.element = element;\r\n\t\tthis.retailerslist = element.querySelector(SELECTORS.RETAILERS_LIST);\r\n\t\tthis.refreshMap = element.querySelector(SELECTORS.REFRESH_MAP);\r\n\t\tthis.refreshButton = this.refreshMap.querySelector(SELECTORS.BUTTON);\r\n\t\tthis.retailerMessage = element.querySelector(SELECTORS.RETAILER_MESSAGE);\r\n\r\n\t\t// set up tabs functionality\r\n\t\ttabs(this.element);\r\n\t\t// Load Google Maps API\r\n\t\tthis.userPosition.lat = (this.element.dataset.lat) ? Number(this.element.dataset.lat) : this.userPosition.lat\r\n\t\tthis.userPosition.lng = (this.element.dataset.lng) ? Number(this.element.dataset.lng) : this.userPosition.lng\r\n\t\tthis.radius = this.element.dataset.radius;\r\n\t\tthis.csc = {\r\n\t\t\t\"cta\": this.element.dataset.csccta,\r\n\t\t\t\"message\": this.element.dataset.cscmessage\r\n\t\t}\r\n\t\tthis.labels = {\r\n\t\t\t\"callRetailer\": this.element.dataset.callRetailerText,\r\n\t\t\t\"emailRetailer\": this.element.dataset.emailRetailerText,\r\n\t\t\t\"getDirections\": this.element.dataset.getDirectionsText,\r\n\t\t\t\"setPreferredStore\": this.element.dataset.setPreferredStoreText,\r\n\t\t\t\"visitWebsite\": this.element.dataset.visitWebsiteText\r\n\t\t}\r\n\t\tthis.isLoggedIn = this.element.dataset.isLoggedIn === 'true';\r\n\t\tthis.setPreferredStoreUrl = this.element.dataset.setPreferredStoreUrl;\r\n\t\tthis.loadMap();\r\n\t},\r\n\r\n\t/**\r\n\t* Loads Google Maps API via npm-included function\r\n\t* writes a script tag to the document that calls Google API\r\n\t*\r\n\t*/\r\n\tloadMap : function() {\r\n\t\tvar gmapKey = this.element.dataset.key;\r\n\t\tloadGoogleMapsAPI({key: gmapKey, libraries: 'places'}).then((googleMaps) => {\r\n\t\t\tthis.initMap();\r\n\t\t}).catch((err) => {\r\n\t\t\tconsole.error(err);\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* inits Google Map\r\n\t*\r\n\t*/\r\n\tinitMap: function() {\r\n\t\t// set latitude, longitude and DOM element where map will be loaded\r\n\t\tvar mapcenter = {lat: this.userPosition.lat, lng: this.userPosition.lng};\r\n\t\tvar mapcontainer = this.element.querySelector(SELECTORS.GOOGLE_MAP);\r\n\t\tvar _self = this;\r\n\r\n\t\t// Create a new StyledMapType object, passing it an array of styles,\r\n\t\t// and the name to be displayed on the map type control.\r\n\t\tvar styledMapType = new google.maps.StyledMapType(\r\n\t\t[\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"1.16\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"4.11\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative\",\r\n\t\t\t\t\"elementType\": \"labels.text.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"0.00\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#4c4c4c\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"administrative.country\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#00ff42\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-55\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#f2f2f2\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape\",\r\n\t\t\t\t\"elementType\": \"geometry\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.landcover\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-100\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-27\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"4.55\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"6.79\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.terrain\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"48\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"7.59\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"landscape.natural.terrain\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n \"color\": \"#CA3004\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-2\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-14\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"poi\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"weight\": \"5.20\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": -100\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": 45\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"39\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"38\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eed5cd\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.highway\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"simplified\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.arterial\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eed5cd\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-1\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"43\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.arterial\",\r\n\t\t\t\t\"elementType\": \"labels.icon\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"road.local\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eed5cd\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"0\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"3\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"off\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit.line\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#fab89b\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"-20\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"-17\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"gamma\": \"5.25\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"transit.line\",\r\n\t\t\t\t\"elementType\": \"geometry.stroke\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"lightness\": \"23\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"water\",\r\n\t\t\t\t\"elementType\": \"all\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#46bcec\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"saturation\": \"27\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\t\"featureType\": \"water\",\r\n\t\t\t\t\"elementType\": \"geometry.fill\",\r\n\t\t\t\t\"stylers\": [\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"visibility\": \"on\"\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t\"color\": \"#eaf5fb\"\r\n\t\t\t\t\t}\r\n\t\t\t\t]\r\n\t\t\t}\r\n\t\t],\r\n\t\t{name: 'Styled Map'});\r\n\r\n\t\t// Create map\r\n\t\tthis.map = new google.maps.Map(mapcontainer, {\r\n\t\t\tzoom: 10,\r\n\t\t\tcenter: mapcenter,\r\n\t\t\tmapTypeControl: false,\r\n\t\t\tscaleControl: true,\r\n\t\t\tstreetViewControl: false,\r\n\t\t\trotateControl: false,\r\n\t\t\tfullscreenControl: false,\r\n\t\t\tmapTypeControlOptions: {\r\n\t\t\t\tmapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// variable to store map object locally\r\n\t\tvar map = this.map;\r\n\r\n\t\t//Associate the styled map with the MapTypeId and set it to display.\r\n map.mapTypes.set('styled_map', styledMapType);\r\n map.setMapTypeId('styled_map');\r\n\r\n\t\t//attempt geolocation\r\n\t\tthis.geolocate();\r\n\r\n\t\t// Create variable to hold map center on load\r\n\t\tvar center = map.getCenter();\r\n\r\n\t\t// Listen for Google Map custom \"idle\" event and update center\r\n\t\tmap.addListener(EVENTS.GMAPS_IDLE, function() {\r\n\t\t\tcenter = map.getCenter();\r\n\t\t});\r\n\r\n\t\t// Listen for Google Map custom \"dragend\" event and display refresh button\r\n\t\tmap.addListener(EVENTS.GMAPS_DRAGEND, function() {\r\n\t\t\tif(_self.listenForDrag) {\r\n\t\t\t\t_self.toggleRefreshOption();\r\n\t\t\t\t_self.listenForDrag = false;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\t// Add callback to resize service to center the map\r\n\t\tServices.ResizeService.addCallback(function(){\r\n\t\t\tmap.setCenter(center);\r\n\t\t});\r\n\r\n\t\t//create info window\r\n\t\tthis.createInfoWindow();\r\n\r\n\t\t//build search box\r\n\t\tthis.buildSearchBox();\r\n\r\n\t\t// create custom event to call when user clicks on link in map infowindow\r\n\t\twindow.callDealerPreference = new Event(EVENTS.INFOTRIGGER);\r\n\r\n\t\t// Add listener for our custom event\r\n\t\twindow.addEventListener(EVENTS.INFOTRIGGER, function() { _self.onInfoTrigger(_self);}, false);\r\n\r\n\t\t// Add listener for map refresh button\r\n\t\tthis.refreshButton.addEventListener(EVENTS.CLICK, function() { _self.resetAndReload();}, false);\r\n\t},\r\n\r\n\t/**\r\n\t* HTML5 Geolocation\r\n\t* tries to use HTML5 Geolocation, stores lat/long if so\r\n\t*\r\n\t*/\r\n\tgeolocate : function() {\r\n\t\tvar _self = this;\r\n\t\tif (navigator.geolocation) {\r\n\t\t\tnavigator.geolocation.getCurrentPosition(function(position) {\r\n\t\t\t\t_self.userPosition.lat = position.coords.latitude;\r\n\t\t\t\t_self.userPosition.lng = position.coords.longitude;\r\n\r\n\t\t\t\t// set center based on geolocated coordinates\r\n\t\t\t\t_self.map.setCenter({lat: _self.userPosition.lat, lng: _self.userPosition.lng});\r\n\r\n\r\n\r\n\t\t\t\t_self.markers.user.setPosition({lat: _self.userPosition.lat, lng: _self.userPosition.lng});\r\n\r\n\t\t\t\t// having moved map center, get retailers\r\n\t\t\t\t_self.getRetailerData({lat: _self.userPosition.lat, lng: _self.userPosition.lng});\r\n\r\n\t\t\t}, function() {\r\n\t\t\t\t// Geolocation failed for some other reason\r\n\r\n\t\t\t});\r\n\t\t} else {\r\n\t\t\t// Browser doesn't support Geolocation\r\n\r\n\t\t}\r\n\r\n\t\t// having determined map center, set geo marker, get retailers\r\n\t\t_self.createGeoMarker();\r\n\t\t_self.getRetailerData({lat: _self.map.getCenter().lat(), lng: _self.map.getCenter().lng()});\r\n\t},\r\n\r\n\t/**\r\n\t* create geolocation marker\r\n\t*\r\n\t*/\r\n\tcreateGeoMarker : function() {\r\n\t\tvar _self = this;\r\n\t\t// Create marker for user location\r\n\t\t_self.markers.user = new google.maps.Marker({\r\n\t\t\ticon: {\r\n\t\t\t\tpath: google.maps.SymbolPath.CIRCLE,\r\n\t\t\t\tscale: 5,\r\n\t\t\t\tfillColor: 'blue',\r\n\t\t\t\tfillOpacity: 0.8,\r\n\t\t\t\tstrokeColor: 'blue',\r\n\t\t\t\tstrokeOpacity: 0.8\r\n\t\t\t},\r\n\t\t\tposition: _self.map.getCenter(),\r\n\t\t\tmap: _self.map\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* create info window in Google map\r\n\t*\r\n\t*/\r\n\tcreateInfoWindow : function() {\r\n\t\tthis.infoWin = new google.maps.InfoWindow({map: this.map});\r\n\t\tthis.infoWin.close();\r\n\t},\r\n\r\n\t/**\r\n\t* populate Info Window\r\n\t*\r\n\t*/\r\n\tpopulateInfoWindow : function(retailer) {\r\n\t\tvar _self = this;\r\n\t\tgoogle.maps.event.addListener(_self.markers.retailLocations[retailer.ID],'click', function() {\r\n\t\t\t_self.infoWin.close();\r\n\t\t\t// as you update the CSS for retail list, you'll need to update this CSS otherwise the designs won't match\r\n\t\t\tvar CSSString = \"\";\r\n\t\t\tvar urlString = (retailer.Url && retailer.Url.length > 0) ? ''+_self.labels.visitWebsite+'' : '';\r\n\t\t\tvar emailString = (retailer.Email && retailer.Email.length > 0) ? ''+_self.labels.emailRetailer+'' : '';\r\n\t\t\tvar isPreferredStore = _self.pretailer && _self.pretailer.ID === retailer.ID;\r\n\t\t\tvar setPreferredStore = _self.isLoggedIn && !isPreferredStore ? ''+_self.labels.setPreferredStore+'' : '';\r\n\r\n\t\t\tvar hoursTempate = retailer.hours.reduce((acc, cur) => {\r\n\t\t\t\treturn acc += `${cur}`;\r\n\t\t\t}, '');\r\n\r\n\t\t\tvar HTMLString = '
';\r\n\t\t\t_self.infoWin.setContent(CSSString + HTMLString);\r\n\t\t\t_self.infoWin.open(_self.map, _self.markers.retailLocations[retailer.ID]);\r\n\t\t\twindow.openRetailer = retailer.ID;\r\n\t\t});\r\n\t},\r\n\r\n\t/**\r\n\t* link search input to Google map\r\n\t*\r\n\t*/\r\n\tbuildSearchBox : function() {\r\n\t\tvar _self = this;\r\n\t\tvar input = this.element.querySelector(SELECTORS.GOOGLE_PLACES);\r\n var autocomplete = new google.maps.places.Autocomplete(input);\r\n\r\n _self.enableEnterKey(input);\r\n\r\n // Bias the autocomplete results towards current map's viewport.\r\n\t\t_self.map.addListener(EVENTS.GMAPS_BOUNDSCHANGED, function() {\r\n\t\t\tautocomplete.setBounds(_self.map.getBounds());\r\n\t\t});\r\n\r\n autocomplete.addListener(EVENTS.GMAPS_PLACECHANGED, function() {\r\n\t\t\tvar place = autocomplete.getPlace();\r\n\r\n\t\t\tif (!place.geometry) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\t// recenter map at user's chosen coordinates\r\n\t\t\t_self.map.setCenter(place.geometry.location);\r\n\t\t\t_self.markers.user.setPosition(place.geometry.location);\r\n\r\n\t\t\t// having moved map center, get retailers\r\n\t\t\t_self.getRetailerData({lat: place.geometry.location.lat(), lng: place.geometry.location.lng()});\r\n\t\t});\r\n\t},\r\n\r\n\tenableEnterKey: function(input) {\r\n\r\n\t /* Store original event listener */\r\n\t const _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent\r\n\r\n\t const addEventListenerWrapper = (type, listener) => {\r\n\t if (type === \"keydown\") {\r\n\t /* Store existing listener function */\r\n\t const _listener = listener\r\n\t listener = (event) => {\r\n\t /* Simulate a 'down arrow' keypress if no address has been selected */\r\n\t const suggestion_selected = document.getElementsByClassName('pac-item-selected').length > 0\r\n\t if (event.which === 13 && !suggestion_selected) {\r\n\t const e = JSON.parse(JSON.stringify(event))\r\n\t e.which = 40\r\n\t e.keyCode = 40\r\n\t _listener.apply(input, [e])\r\n\t }\r\n\t _listener.apply(input, [event])\r\n\t }\r\n\t }\r\n\t _addEventListener.apply(input, [type, listener])\r\n\t }\r\n\r\n\t input.addEventListener = addEventListenerWrapper\r\n\t input.attachEvent = addEventListenerWrapper\r\n\t },\r\n\r\n\t/**\r\n\t* build Retailer list\r\n\t*\r\n\t*/\r\n\tbuildRetailerList: function() {\r\n\t\tvar _self = this;\r\n\t\tvar retailers = _self.retailerData;\r\n\t\tvar prID = null;\r\n\t\tvar hasCSC = false;\r\n\t\tvar retailerRadius = this.radius;\r\n\t\tif(typeof(retailers) !== 'undefined') {\r\n\t\t\tvar numRetailers = retailers.length;\r\n\t\t\t// Add new markers\r\n\t\t\tif(numRetailers > 0) {\r\n\t\t\t\t_self.HTMLString = '
';\r\n\t\t\t\tif(_self.pretailer !== null && _self.pretailer !== 'undefined') {\r\n\t\t\t\t\tthis.buildRetailerItem(_self.pretailer, true);\r\n\t\t\t\t\tprID = _self.pretailer.ID;\r\n\t\t\t\t}\r\n\t\t\t\t// the below line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\t// retailers[0].csc = true;\r\n\t\t\t\t// the above line is to fake Certified Service Center data in the JSON so as to demonstrate in prototype and should be removed\r\n\t\t\t\tfor (var i = 0; i < numRetailers; i++) {\r\n\t\t\t\t var retailer = retailers[i];\r\n\t\t\t\t\tif(retailer.ID !== prID) {\r\n\t\t\t\t\t\tthis.buildRetailerItem(retailer, false);\r\n\t\t\t\t\t\tif(!hasCSC && retailer.csc === true) {\r\n\t\t\t\t\t\t\thasCSC = true;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\tnumRetailers = Object.keys(retailers).length;\r\n\t\t\t\tretailerRadius = Math.ceil(parseInt(retailers[numRetailers - 1].Distance) / 100) * 100;\r\n\t\t\t\tif(retailerRadius <= this.radius) {\r\n\t\t\t\t\t_self.retailerMessage.innerHTML = 'Displaying '+numRetailers+' stores within ' + this.radius + ' miles.';\r\n\t\t\t\t} else {\r\n\t\t\t\t\t_self.retailerMessage.innerHTML = 'No stores found within ' + this.radius + ' miles. ' + 'Displaying closest stores.'\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t_self.fallbackRetailer();\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\t_self.fallbackRetailer();\r\n\t\t}\r\n\r\n\t\t_self.HTMLString += '
';\r\n\t\tthis.retailerslist.innerHTML = _self.HTMLString;\r\n\r\n\t\t//create event listener for newly-created CTA\r\n\t\tvar preferredLinks = this.retailerslist.querySelectorAll(SELECTORS.SET_PREFERRED);\r\n\r\n\t\tfor (var j = 0; j < preferredLinks.length; j++) {\r\n\t\t\tpreferredLinks[j].addEventListener(EVENTS.CLICK, _self.infoTriggerHandler());\r\n\t\t}\r\n\r\n\t\t//init tooltip\r\n\t\tif(hasCSC) {\r\n\t\t\ttooltips(this.retailerslist);\r\n\t\t}\r\n\t},\r\n\r\n\t/**\r\n\t* build Retailer item\r\n\t*\r\n\t*/\r\n\tbuildRetailerItem: function(retailer, preferred) {\r\n\t\t// FOR CSC ICON: you will need to add the classname that gets created in scss/base/icons when you run gulp compile-icons after adding the SVG for the CSC icon to the assets/icons folder. Add that class to .hof-tooltip-link\r\n\t\tvar CSC = typeof(retailer.csc) !== 'undefined' && retailer.csc === true ? '\\\r\n\t\t\t' + this.csc.cta + '\\\r\n\t\t\t' + this.csc.message + '\\\r\n\t\t\t' : '';\r\n\t\tvar retailerClass = preferred ? 'class=\"preferred-retailer\"' : '';\r\n\t\tvar urlString = (retailer.Url && retailer.Url.length > 0) ? ''+this.labels.visitWebsite+'' : '';\r\n\t\tvar phoneString = (retailer.Phone && retailer.Phone.length > 0) ?''+retailer.Phone+'': '';\r\n\t\tvar emailString = (retailer.Email && retailer.Email.length > 0) ? ''+this.labels.emailRetailer+'' : '';\r\n\t\tvar setPreferred = (this.isLoggedIn && !preferred) ? ''+this.labels.setPreferredStore+'': '';\r\n\r\n\t\tvar hourOpen = retailer.hoursopen ? ''+ retailer.hoursopen+'' : '';\r\n\t\tvar hours = (retailer.hours && retailer.hours.length) ?\r\n\t\t\tretailer.hours.reduce((acc, cur) => {\r\n\t\t\t\treturn acc += `${cur}`;\r\n\t\t\t}, '')\r\n\t\t\t:\r\n\t\t\t'';\r\n\t\tvar hoursTemplate = ''+ hourOpen + hours + '';\r\n\r\n\t\tthis.HTMLString += '
![](\"/assets/images/ajax-loader.gif\")
![](\\\"/assets/images/icon-coin.png\\\"){kind=icon}
\"\n + container.escapeExpression(container.lambda(((stack1 = (depth0 != null ? lookupProperty(depth0,\"redeemPoints\") : depth0)) != null ? lookupProperty(stack1,\"buttonText\") : stack1), depth0))\n + \"![](\\\"/assets/images/icon-dollar-pin.png\\\"){kind=icon}
\"\n + alias2(alias1(((stack1 = (depth0 != null ? lookupProperty(depth0,\"submitSale\") : depth0)) != null ? lookupProperty(stack1,\"buttonText\") : stack1), depth0))\n + \"