Remove{{ colorName }} Swatch From Favorites
\n{{ displayMessage }}
';\n\nconst templateVals = _.template(template);\nconst noItemsTemplateVals = _.template(noItemsTemplate);\nconst displayMessageTemplateVals = _.template(displayMessageTemplate);\n\nlet items = [];\n// let products = [];\n// let productParamIter = 0;\nlet swatchData = [];\n\nconst props = {\n removePageItemById: null,\n updateSwatchbook: null,\n enqueuePdfUtilsData: null,\n};\n\nconst hasItems = () => (\n items.length !== 0\n);\n\nconst update = () => {\n const { NoSwatchesContent } = window;\n const div = document.createElement('div');\n const selector = document.querySelector('.swatches-content');\n if (items.length === 0) {\n const compiled = noItemsTemplateVals({\n content: NoSwatchesContent,\n });\n div.innerHTML = compiled;\n selector.innerHTML = '';\n selector.appendChild(div.firstChild);\n }\n props.updateSwatchbook();\n};\n\nconst render = () => {\n // Map data\n items = swatchData.swatches.map(item => ({\n assetId: item['swatch-id'],\n imageUrl: `${window.WidenSwatchBaseUrl}${item['widen-url']}`,\n colorName: item['color-name'],\n colorNumber: item['color-number'],\n colorRange: item['color-range'],\n displayMessage: item['display-message'],\n displayMessageDiv: () => {\n if (item['display-message'] !== '') {\n return displayMessageTemplateVals({\n displayMessage: item['display-message'],\n });\n }\n return '';\n },\n newBadge: () => {\n if (item['new-swatch']) {\n const newLabelTemplateVals = _.template(newLabelTemplate);\n return newLabelTemplateVals();\n }\n return '';\n },\n newSwatch: item['new-swatch'],\n partNumber: item['part-number'],\n swatchKey: item['swatch-key'],\n tileName: item['tile-name'].replace(/\"/gi, '"'),\n type: 'swatch', // for pdfutils\n id: item['swatch-key'], // for pdfutils\n }));\n // Display saved content\n if (items.length > 0) {\n const selector = document.querySelector('.swatches-content');\n const div = document.createElement('div');\n div.classList = 'row row-cols-xs-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-lg-6';\n selector.innerHTML = '';\n items.forEach((item) => {\n const itemDiv = document.createElement('div');\n const compiled = templateVals(item);\n itemDiv.innerHTML = compiled;\n div.appendChild(itemDiv.firstChild);\n });\n selector.appendChild(div);\n // Add tooltips\n addNewTooltipsToButtonGroup({\n btns: selector.querySelectorAll('[data-tooltip-id]'),\n });\n }\n props.enqueuePdfUtilsData(items);\n update();\n};\n\nconst removeFromFavoritesEventHandlers = () => {\n const removeFromFavoritesBtns = document.querySelectorAll('.remove-from-favorites-btn.swatch-btn');\n if (removeFromFavoritesBtns.length === 0) {\n return;\n }\n const productSwatchDivs = document.querySelectorAll('.product-swatch');\n [].map.call(productSwatchDivs, (swatch) => {\n const btn = swatch.querySelector('.remove-from-favorites-btn');\n btn.addEventListener('click', (event) => {\n event.stopPropagation();\n btn.classList.add('btn-disabled');\n // Remove\n const assetId = btn.getAttribute('data-asset-id');\n removeItemFromAccount('swatch', assetId, () => {\n // Remove div\n swatch.parentNode.remove();\n props.removePageItemById(items, assetId);\n update();\n });\n });\n });\n};\n\nconst onLoaded = (data) => {\n swatchData = data;\n render();\n removeFromFavoritesEventHandlers();\n InitSwatchOrderingUtils();\n updateCartState();\n setupCartActions();\n};\n\nconst init = (options) => {\n const {\n enqueuePdfUtilsData,\n removePageItemById,\n updateSwatchbook,\n } = options;\n props.enqueuePdfUtilsData = enqueuePdfUtilsData;\n props.removePageItemById = removePageItemById;\n props.updateSwatchbook = updateSwatchbook;\n getItemsFromAccount('swatch', onLoaded);\n};\n\nexport {\n hasItems,\n init,\n onLoaded,\n};\n/* eslint-enable no-console */\n","var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n","const setTooltipPosition = (btn, tooltip) => {\n let x = (btn.offsetLeft + btn.offsetWidth) - tooltip.offsetWidth;\n const caret = tooltip.querySelector('.tooltip-caret');\n if (x < 0) {\n // Offset caret\n caret.style.right = `${Math.abs(x) + 5}px`;\n // Reset x to 0\n x = 0;\n } else {\n caret.removeAttribute('style');\n }\n const y = btn.offsetTop - (tooltip.offsetHeight + 12);\n tooltip.style.left = `${x}px`;\n tooltip.style.top = `${y}px`;\n};\n\nconst showTooltip = (event) => {\n const btn = event.target.closest('[data-tooltip-id]');\n if (btn === null) {\n return;\n }\n const id = btn.getAttribute('data-tooltip-id');\n const tooltip = document.getElementById(id);\n tooltip.classList.add('show');\n setTooltipPosition(btn, tooltip);\n};\n\nconst hideTooltip = (event) => {\n const btn = event.target.closest('[data-tooltip-id]');\n if (btn === null) {\n return;\n }\n const id = btn.getAttribute('data-tooltip-id');\n const tooltip = document.getElementById(id);\n tooltip.classList.remove('show');\n};\n\nconst toggleTooltip = (event) => {\n const btn = event.target.closest('[data-tooltip-id]');\n if (btn === null) {\n return;\n }\n const id = btn.getAttribute('data-tooltip-id');\n const tooltip = document.getElementById(id);\n if (tooltip.classList.contains('show')) {\n tooltip.classList.remove('show');\n } else {\n tooltip.classList.add('show');\n }\n};\n\nconst addTooltipEventHandlers = (btn) => {\n btn.addEventListener('click', toggleTooltip);\n btn.addEventListener('mouseover', showTooltip);\n btn.addEventListener('mouseout', hideTooltip);\n btn.addEventListener('focus', showTooltip);\n btn.addEventListener('blur', hideTooltip);\n};\n\nconst addTooltipsOnPageLoad = () => {\n const tooltipBtns = document.querySelectorAll('[data-tooltip-id]');\n if (tooltipBtns.length === 0) {\n return;\n }\n for (let i = 0; i < tooltipBtns.length; i++) { /* eslint-disable-line no-plusplus */\n addTooltipEventHandlers(tooltipBtns[i]);\n }\n};\n\nconst addNewTooltipsToButtonGroup = (options) => {\n const { btns } = options;\n if (btns.length === 0) {\n return;\n }\n for (let i = 0; i < btns.length; i++) { /* eslint-disable-line no-plusplus */\n addTooltipEventHandlers(btns[i]);\n }\n};\n\nconst addNewTooltipToButton = (options) => {\n const { btn } = options;\n addTooltipEventHandlers(btn);\n};\n\nexport {\n addNewTooltipToButton,\n addNewTooltipsToButtonGroup,\n addTooltipsOnPageLoad,\n};\n","/* eslint-disable no-console, no-useless-escape */\nconst getParameterByName = (name, url) => {\n let location = url;\n if (!location) {\n location = window.location.href;\n }\n const regex = new RegExp(`[?&]${name.replace(/[\\[\\]]/g, '\\\\$&')}(=([^&#]*)|&|#|$)`);\n const results = regex.exec(location);\n if (!results) {\n return '';\n }\n if (!results[2]) {\n return '';\n }\n return decodeURIComponent(results[2].replace(/\\+/g, ' '));\n};\n\nconst detectProduction = function() {\n if (\n window.location.href.indexOf('www.vitaleblinds.com') !== -1 ||\n window.location.href.indexOf('https://vitaleblinds.com') !== -1 ||\n window.location.href.indexOf('http://vitaleblinds.com') !== -1\n ) {\n return true;\n }\n return false;\n};\n\nexport {\n detectProduction,\n getParameterByName,\n};\n/* eslint-enable no-console, no-useless-escape */\n","import { announceMessage } from '../accessibility/status-messages';\nimport { validate, validateByType, positionWindowAtFormElement, removeAllErrors } from '../../utils/form-validation-utils';\nimport { createAccount } from './account-api';\nimport { checkLoginStatus } from './login';\n\nconst addCreateAccountCallbacks = (callbacks) => {\n window.onSubmitCallbacks = callbacks;\n};\n\nconst removereateAccountCallbacks = () => {\n window.onSubmitCallbacks = null;\n};\n\nconst passwordMatch = (passIpt, passConfirmIpt) => {\n // console.log(`${passIpt.value}/${passConfirmIpt.value}`);\n if (passIpt.value === passConfirmIpt.value) {\n return true;\n }\n return false;\n};\n\nconst passwordStrength = (passIpt, passConfirmIpt) => {\n // console.log(`${passIpt.value}/${passConfirmIpt.value}`);\n if (passIpt.value === '' && passConfirmIpt.value === '') {\n return true; // ignore\n }\n if (validateByType('password', passIpt.value) && validateByType('password', passConfirmIpt.value)) {\n return true;\n }\n return false;\n};\n\nconst resetCreateAccountForm = (options) => {\n const { form } = options;\n const errorMsg = form.querySelector('.password-mismatch-error-message');\n const existingErrorMsg = form.querySelector('.existing-account-error-message');\n const accountCreationErrorMsg = form.querySelector('.account-creation-error-message');\n const passwordStrengthErrorMsg = form.querySelector('.password-strength-error-message');\n const username = form.querySelector('[name=\"acctUsername\"]');\n const passIpt = form.querySelector('[name=\"acctPassword\"]');\n const passConfirmIpt = form.querySelector('[name=\"acctPasswordConfirm\"]');\n username.value = '';\n passIpt.value = '';\n passConfirmIpt.value = '';\n form.querySelector('[name=\"offer-opt-in\"]').checked = true;\n // Remove errors\n errorMsg.classList.add('hide');\n existingErrorMsg.classList.add('hide');\n accountCreationErrorMsg.classList.add('hide');\n passwordStrengthErrorMsg.classList.add('hide');\n removeAllErrors(form);\n};\n\nconst init = (options) => {\n const { form, disableScroll } = options;\n const errorMsg = form.querySelector('.password-mismatch-error-message');\n const existingErrorMsg = form.querySelector('.existing-account-error-message');\n const accountCreationErrorMsg = form.querySelector('.account-creation-error-message');\n const passwordStrengthErrorMsg = form.querySelector('.password-strength-error-message');\n const username = form.querySelector('[name=\"acctUsername\"]');\n const passIpt = form.querySelector('[name=\"acctPassword\"]');\n const passConfirmIpt = form.querySelector('[name=\"acctPasswordConfirm\"]');\n const submitBtn = form.querySelector('.submit-btn');\n\n const updateModalHeight = () => {\n const modalDiv = document.querySelector('#acct-login-modal');\n const contentHeight = modalDiv.querySelector('.modal-content').offsetHeight;\n modalDiv.querySelector('.modal-panel').style.height = `${contentHeight + 30}px`;\n };\n\n submitBtn.addEventListener('click', (event) => {\n event.preventDefault();\n const { onSubmitCallbacks } = window;\n passIpt.parentNode.classList.remove('ValidationFail');\n passConfirmIpt.parentNode.classList.remove('ValidationFail');\n errorMsg.classList.add('hide');\n existingErrorMsg.classList.add('hide');\n accountCreationErrorMsg.classList.add('hide');\n passwordStrengthErrorMsg.classList.add('hide');\n if (validate(form) && passwordMatch(passIpt, passConfirmIpt)) {\n // Unhecked/checked opt-in map to 0/1\n let optInVal = 0;\n if (form.querySelectorAll('[name=\"offer-opt-in\"]:checked').length === 1) {\n optInVal = 1;\n }\n createAccount(\n {\n username: username.value,\n password: passIpt.value,\n 'marketing-opt-in': optInVal,\n 'microsite-name': window.micrositeName,\n },\n {\n onSuccess: (data) => {\n // console.log(data);\n if (data['user-id'] === 0 || data['user-id'] === '0') {\n existingErrorMsg.classList.remove('hide');\n announceMessage(existingErrorMsg.innerHTML);\n } else if (data['user-id'] === -1) {\n accountCreationErrorMsg.classList.remove('hide');\n announceMessage(accountCreationErrorMsg.innerHTML);\n } else {\n window.isAuthenticated = true;\n window.userId = data['user-id'];\n checkLoginStatus(() => {\n if (onSubmitCallbacks) {\n onSubmitCallbacks.onLoginSuccess();\n } else {\n window.location = `${window.myAccountUrl}?newaccount=true`;\n }\n });\n }\n },\n onError: (data) => {\n console.log(data);\n accountCreationErrorMsg.classList.remove('hide');\n announceMessage(accountCreationErrorMsg.innerHTML);\n if (onSubmitCallbacks) {\n onSubmitCallbacks.onLoginFail();\n }\n },\n },\n );\n } else if (!passwordMatch(passIpt, passConfirmIpt)) {\n passIpt.parentNode.classList.add('ValidationFail');\n passConfirmIpt.parentNode.classList.add('ValidationFail');\n errorMsg.classList.remove('hide');\n announceMessage(errorMsg.innerHTML);\n // Don't run if in modal\n // console.log(`create-account.js, disableScroll: ${disableScroll}`);\n if (!disableScroll) {\n positionWindowAtFormElement({\n element: form.parentNode,\n offset: -75,\n });\n } else {\n updateModalHeight();\n }\n } else {\n // Don't run if in modal\n if (!disableScroll) {\n positionWindowAtFormElement({\n element: form.parentNode,\n offset: -75,\n });\n } else {\n updateModalHeight();\n }\n if (!passwordStrength(passIpt, passConfirmIpt)) {\n passwordStrengthErrorMsg.classList.remove('hide');\n announceMessage(passwordStrengthErrorMsg.innerHTML);\n }\n }\n });\n};\n\nexport {\n addCreateAccountCallbacks,\n removereateAccountCallbacks,\n init,\n resetCreateAccountForm,\n};\n/* eslint-enable no-console */\n","/* eslint-disable import/prefer-default-export */\nconst announceMessage = (message) => {\n let alertStatusMessage = document.getElementById('formStatusMessage');\n // Has screenreader alert message already been appended to the page?\n if (alertStatusMessage) {\n // Then remove\n alertStatusMessage.remove();\n }\n // And recreate so it's re-read\n const body = document.querySelector('body');\n const div = document.createElement('div');\n div.id = 'formStatusMessage';\n div.classList.add('sr-only');\n div.setAttribute('role', 'alert');\n body.appendChild(div);\n alertStatusMessage = document.getElementById('formStatusMessage');\n // Set message\n alertStatusMessage.innerHTML = message;\n};\n\nexport {\n announceMessage,\n};\n/* eslint-enable import/prefer-default-export */\n\n","/* eslint-disable no-console */\nimport addCartLimitModal from './cart-limit-modal';\nimport { addToCart, getCartItems, removeFromCart } from '../cart';\nimport InitMiniCart from '../mini-cart';\n\nconst ADD = 'add';\nconst REMOVE = 'remove';\n\nconst updateCartStatusMessage = (action) => {\n const msgDiv = document.querySelector('.main-nav .cart-status-message');\n if (!msgDiv) {\n return;\n }\n // Clear existing message\n msgDiv.innerHTML = '';\n setTimeout(() => {\n if (action === ADD) {\n msgDiv.innerHTML = 'An item has been added to your cart.';\n }\n if (action === REMOVE) {\n msgDiv.innerHTML = 'An Item has been removed from your cart.';\n }\n }, 100);\n};\n\nconst updateCartButtonLabel = (btn, action) => {\n const assetName = btn.getAttribute('data-colorName');\n if (action === REMOVE) {\n btn.innerHTML = `Remove ${assetName} SampleIn Cart`;\n } else {\n btn.innerHTML = `Add Free SampleOf ${assetName} To Cart`;\n }\n};\n\nconst updateCartState = () => {\n getCartItems()\n .then((cart) => {\n const btns = document.querySelectorAll('.swatch-cart-btn');\n btns.forEach((btn) => {\n btn.classList.remove('add-to-cart-btn');\n btn.classList.remove('remove-from-cart-btn');\n btn.innerHTML = '';\n\n const inCart = cart.items.includes(btn.getAttribute('data-swatchKey'));\n if (inCart) {\n btn.classList.add('remove-from-cart-btn');\n updateCartButtonLabel(btn, REMOVE);\n } else {\n btn.classList.add('add-to-cart-btn');\n updateCartButtonLabel(btn, ADD);\n }\n });\n })\n .catch(console.error);\n};\n\nconst updateMiniCart = () => {\n const url = `${window.location.protocol}//${window.location.hostname}/cart/MiniCartDetails`;\n fetch(url)\n .then(r => r.text())\n .then((html) => {\n const miniCartDiv = document.querySelector('.cart-content-wrap');\n if (!miniCartDiv) {\n return;\n }\n\n miniCartDiv.innerHTML = html;\n InitMiniCart();\n })\n .catch(console.error);\n};\n\nconst toggleAddToCartButton = (btn, action) => {\n if (action === REMOVE) {\n btn.classList.add('remove-from-cart-btn');\n btn.classList.remove('add-to-cart-btn');\n } else {\n btn.classList.remove('remove-from-cart-btn');\n btn.classList.add('add-to-cart-btn');\n }\n updateCartButtonLabel(btn, action);\n};\n\nconst updateSiteCartButtons = () => {\n getCartItems()\n .then((cart) => {\n const btns = document.querySelectorAll('.site-cart-btn');\n btns.forEach((btn) => {\n if (cart.items.length) {\n btn.classList.add('items-added-to-cart');\n } else {\n btn.classList.remove('items-added-to-cart');\n }\n });\n })\n .catch(console.error);\n};\n\nconst setupCartActions = () => {\n updateSiteCartButtons();\n const btns = document.querySelectorAll('.swatch-cart-btn');\n btns.forEach((btn) => {\n btn.onclick = (e) => {\n const code = e.target.getAttribute('data-swatchKey');\n if (e.target.classList.contains('add-to-cart-btn')) {\n addToCart(code)\n .then(() => {\n toggleAddToCartButton(e.target, REMOVE);\n updateMiniCart();\n updateCartStatusMessage('add');\n updateSiteCartButtons();\n })\n .catch((err) => {\n const p = document.createElement('p');\n p.innerHTML = `WE'RE SORRY: ${err.msg}`;\n\n const a = document.createElement('a');\n if (err.phone) {\n a.href = `tel:${err.phone}`;\n a.innerText = err.phone;\n p.innerHTML = `${p.innerHTML} If the problem persists, please contact support at `;\n } else {\n a.href = '/find-a-dealer';\n a.innerText = 'contact a dealer';\n p.innerHTML = `${p.innerHTML} If you need more assistance in choosing the right color, `;\n }\n\n p.appendChild(a);\n\n const wrap = document.createElement('div');\n wrap.appendChild(p);\n\n addCartLimitModal({\n message: wrap.innerHTML,\n });\n });\n } else if (e.target.classList.contains('remove-from-cart-btn')) {\n removeFromCart(code)\n .then(() => {\n toggleAddToCartButton(e.target, ADD);\n updateMiniCart();\n updateCartStatusMessage('remove');\n updateSiteCartButtons();\n })\n .catch(console.error);\n }\n };\n });\n};\n\nexport {\n setupCartActions,\n toggleAddToCartButton,\n updateCartButtonLabel,\n updateCartState,\n updateCartStatusMessage,\n updateMiniCart,\n};\n/* eslint-disable no-console */\n","import _ from 'underscore';\n\nimport SiteModal from './site-modal';\n\n_.templateSettings = {\n interpolate: /\\{\\{(.+?)\\}\\}/g,\n};\n\nconst modalId = 'cart-limit-modal';\n\nconst template =\n `\n My Dealer:\n {{ businessname }}\n \n \n
\n`;\n productData.options.forEach((option) => {\n s += `${option}
`;\n });\n div.innerHTML = `${s}