\" + message + \"
\";\n });\n }\n\n if (lineItem.availability.inStockDate) {\n messages += \"\"\n + lineItem.availability.inStockDate\n + \"
\";\n }\n }\n if (lineItem) {\n $(\".availability-\" + lineItem.UUID).html(messages);\n }\n}\n\n/**\n * Finds an element in the array that matches search parameter\n * @param {array} array - array of items to search\n * @param {function} match - function that takes an element and returns a boolean indicating if the match is made\n * @returns {Object|null} - returns an element of the array that matched the query.\n */\nfunction findItem(array, match) {\n for (var i = 0, l = array.length; i < l; i++) {\n if (match.call(this, array[i])) {\n return array[i];\n }\n }\n return null;\n}\n\n/**\n * Updates details of a product line item\n * @param {Object} data - AJAX response from the server\n * @param {string} uuid - The uuid of the product line item to update\n */\nfunction updateProductDetails(data, uuid) {\n var lineItem = findItem(data.cartModel.items, function (item) {\n return item.UUID === uuid;\n });\n\n if (lineItem.variationAttributes) {\n var attrSelector;\n var newAttribute;\n var attribute;\n for (var i = 0; i < lineItem.variationAttributes.length; i += 1) {\n attribute = lineItem.variationAttributes[i];\n attrSelector = \".\" + attribute.displayName.replace(/\\s/g, \"-\") + \"-\" + uuid;\n newAttribute = attribute.displayName + \": \" + attribute.displayValue;\n $(attrSelector).text(newAttribute);\n }\n\n var imageSelector = \".card.product-info.uuid-\" + uuid + \" .item-image > img\";\n $(imageSelector).attr(\"src\", lineItem.images.small[0].url);\n $(imageSelector).attr(\"alt\", lineItem.images.small[0].alt);\n $(imageSelector).attr(\"title\", lineItem.images.small[0].title);\n }\n\n if (lineItem.options && lineItem.options.length) {\n var option = lineItem.options[0];\n var optSelector = \".lineItem-options-values[data-option-id=\\\"\" + option.optionId + \"\\\"]\";\n $(optSelector).data(\"value-id\", option.selectedValueId);\n $(optSelector + \" .line-item-attributes\").text(option.displayName);\n }\n\n var qtySelector = \".quantity[data-uuid=\\\"\" + uuid + \"\\\"]\";\n $(qtySelector).val(lineItem.quantity);\n $(qtySelector).data(\"pid\", data.newProductId);\n\n $(\".remove-product[data-uuid=\\\"\" + uuid + \"\\\"]\").data(\"pid\", data.newProductId);\n\n var priceSelector = \".line-item-price-\" + uuid + \" .sales .value\";\n $(priceSelector).text(lineItem.price.sales.formatted);\n $(priceSelector).attr(\"content\", lineItem.price.sales.decimalPrice);\n\n if (lineItem.price.list) {\n var listPriceSelector = \".line-item-price-\" + uuid + \" .list .value\";\n $(listPriceSelector).text(lineItem.price.list.formatted);\n $(listPriceSelector).attr(\"content\", lineItem.price.list.decimalPrice);\n }\n}\n\n/**\n * replace content of modal\n * @param {string} actionUrl - url to be used to remove product\n * @param {string} productID - pid\n * @param {string} productName - product name\n * @param {string} uuid - uuid\n * @param {string} stringName - string product name\n * @param {string} stringServiceName - string-service product name\n */\nfunction confirmDelete(actionUrl, productID, productName, uuid, stringName, stringServiceName) {\n var $deleteConfirmBtn = $(\".cart-delete-confirmation-btn\");\n var $productToRemoveSpan = $(\".product-to-remove\");\n var $stringToRemoveSpan = $(\".string-to-remove\");\n var $stringServiceToRemoveSpan = $(\".string-service-to-remove\");\n var $deleteConfirmationTitle = $(\".modal-remove-product > .modal-title\");\n var singleProductTitle= $deleteConfirmationTitle.data(\"single-product\");\n var multipleProductTitle = $deleteConfirmationTitle.data(\"multiple-products\");\n var $deleteConfirmationMessage = $(\".delete-confirmation-message\");\n var singleProductMessage= $deleteConfirmationMessage.data(\"single-product\");\n var multipleProductsMessage = $deleteConfirmationMessage.data(\"multiple-products\");\n\n $deleteConfirmBtn.data(\"pid\", productID);\n $deleteConfirmBtn.data(\"action\", actionUrl);\n $deleteConfirmBtn.data(\"uuid\", uuid);\n\n $productToRemoveSpan.empty().append(productName);\n $stringToRemoveSpan.empty();\n $stringServiceToRemoveSpan.empty();\n $deleteConfirmationTitle.empty().append(singleProductTitle);\n $deleteConfirmationMessage.empty().append(singleProductMessage);\n\n if (stringName && stringServiceName) {\n $productToRemoveSpan.addClass(\"mb-1\");\n $stringToRemoveSpan.append(stringName);\n $stringServiceToRemoveSpan.append(stringServiceName);\n $deleteConfirmationTitle.empty().append(multipleProductTitle);\n $deleteConfirmationMessage.empty().append(multipleProductsMessage);\n }\n}\n\nfunction initAddToCart() {\n $(document).on(\"click\", \"button.add-to-cart-from-cart\", function (ev) {\n var $addButton = $(ev.currentTarget);\n var addToCartUrl = $addButton.parent().find(\".add-to-cart-url\").val();\n var $parentTile = $addButton.parents(\".c-product-slider__item\");\n let $cardContainerStringing = $(\".card-container-stringing\");\n\n var form = {\n pid: $parentTile.data(\"pid\"),\n pidsObj: [],\n childProducts: [],\n quantity: $parentTile.find(\".quantity-select\").val()\n };\n\n $.spinner().start();\n\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: \"POST\",\n data: form,\n success: function (data) {\n if (data.cart.items.length === 1) {\n $(\".m-cart__content\")\n .removeClass(\"m-cart__content-empty\")\n .empty();\n window.location.reload();\n }\n\n if (data.error) {\n if ($(\".add-to-cart-messages\").length === 0) {\n $(\"body\").append(\"\");\n }\n\n $addButton.prop(\"disabled\", true);\n $(\".add-to-cart-messages\").append(\"\" + payload.error + \"
\" + \"![\"${parsedAlt}](\"https://i.ytimg.com/vi/${parsedID}/sddefault.jpg\")
`);\n });\n};\n\nlet playVideoIframe = () => {\n let tag = document.createElement(\"script\");\n tag.src = \"https://www.youtube.com/iframe_api\";\n let firstScriptTag = document.getElementsByTagName(\"script\")[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n let playerConfig = {};\n\n let queue = {\n content: null,\n push(fn) {\n this.content = fn;\n },\n pop() {\n this.content.call();\n this.content = null;\n }\n };\n\n let player;\n\n window.onYouTubeIframeAPIReady = () => {\n player = new YT.Player(\"legacyFilm\", {\n videoId: \"legacyFilm\",\n playerVars: playerConfig,\n events: {\n onReady: onPlayerReady\n }\n });\n };\n\n // API event: when the player is ready, call the function in the queue\n let onPlayerReady = () => {\n if (queue.content) queue.pop();\n };\n\n // Helper function to check if the player is ready\n let isPlayerReady = (player) => {\n return player && typeof player.playVideo === \"function\";\n };\n\n let parseUrl = (url) => {\n const regExp = /^.*((youtu.be\\/)|(v\\/)|(\\/u\\/\\w\\/)|(embed\\/)|(watch\\?))\\??v?=?([^#\\&\\?]*).*/;\n if (url) {\n const match = url.match(regExp);\n return (match && match[7].length == 11) ? match[7] : false;\n }\n };\n\n let videoPlayButton = $(\"[data-video-play]\");\n\n videoPlayButton.each(function () {\n const $this = $(this);\n let $videoBlock = $this.parent().parent().parent().find(\".legacy-film\");\n let $elementAncestor = $this.parent().parent();\n\n $this.on(\"click\", (e) => {\n e.preventDefault();\n\n $elementAncestor.addClass(\"d-none\");\n $elementAncestor.find(\".overlay-legacy-film\").addClass(\"d-none\");\n $videoBlock[0].src += \"&autoplay=1&mute=1\";\n isPlayerReady(player) ? player.playVideo() : queue.push(() => {\n player.playVideo();\n });\n });\n });\n\n let legacyVideoWrapper = $(\".legacy-iframe-wrapper\");\n\n let setImageDimenstions = () => {\n legacyVideoWrapper.each(function () {\n const $this = $(this);\n let videoID = $this.find(\".legacy-film\").attr(\"src\");\n let parsedID = parseUrl(videoID);\n let parsedAlt = $this.find(\".legacy-film\").attr(\"alt\");\n let legacyBlockWidth = legacyVideoWrapper.width();\n let legacyBlockHeight = legacyVideoWrapper.height();\n let legacyFilmWrapper = $this.find(\".legacy-film-wrapper\");\n\n legacyFilmWrapper.empty();\n $this.find(\".overlay-legacy-film\").height(legacyBlockHeight);\n $this.find(\".overlay-legacy-film\").width(legacyBlockWidth);\n return legacyFilmWrapper.append(``);\n });\n };\n\n setImageDimenstions();\n\n $(window).resize(function () {\n setImageDimenstions();\n });\n};\n\n\n// init Masonry for Instagram gallery image\nlet initGalleryImage = () => {\n let gridElement = document.querySelector(\".grid-instagram-images\");\n var grid = new Masonry( gridElement, {\n itemSelector: \".instagram-image-wrapper\",\n percentPosition: true,\n columnWidth: \".grid-sizer\"\n });\n}\n\nlet playVideoLanding = () => {\n // get video element id\n let vidOriginalClip = $(\".media-container__video-landing\").get(0);\n let $modalOverlay = $(\".l-overlay\");\n let $modalVideo = $(\"[data-modal-video-landing]\").find(\".video-layer-content\");\n let $closeVideoBtn = $(\"[data-close-video-landing]\");\n let $playBtn = $(\"[data-video-landing-play]\");\n\n let showVideoLayer = () => {\n vidOriginalClip.pause();\n var $el = $(\".media-container__video-landing\").clone();\n $modalOverlay.removeClass(\"d-none\").addClass(\"full-height\");\n $modalVideo.append($el).addClass(\"show\");\n $modalVideo.find(\"video\").prop(\"controls\", true);\n $modalVideo.find(\"video\").get(0).play();\n };\n\n let hideVideoOverlay = () => {\n $modalOverlay.addClass(\"d-none\").removeClass(\"full-height\");\n if ($modalVideo.find(\"video\").get(0)) {\n $modalVideo.find(\"video\").get(0).pause();\n $modalVideo.find(\"video\").get(0).currentTime = 0;\n $modalVideo.find(\"video\").prop(\"controls\", false);\n $modalVideo.removeClass(\"show\").empty();\n }\n vidOriginalClip.play();\n };\n\n $playBtn.on(\"click\", function () {\n showVideoLayer();\n });\n\n $closeVideoBtn.on(\"click touchstart\", e => {\n e.preventDefault();\n hideVideoOverlay();\n });\n\n if ($modalOverlay) {\n $modalOverlay.on(\"click\", function (e) {\n e.preventDefault();\n hideVideoOverlay();\n });\n }\n};\n\n// Instagram Block Functionality\nlet productLaunchInstagramInit = () => {\n let instagramWrapper = document.querySelector(\".m-product-launch-section__social-wall-block\");\n\n if (instagramWrapper) {\n let instragramImages = instagramWrapper.querySelectorAll(\"img\");\n let showMoreButton = instagramWrapper.querySelector(\".js-show-more\");\n let showImagesLimit = 6;\n\n if (instragramImages.length < showImagesLimit) {\n instagramWrapper.classList.add(\"d-none\");\n }\n\n if (showMoreButton) {\n showMoreButton.addEventListener(\"click\", (e) => {\n e.preventDefault();\n\n let hideImages = instagramWrapper.querySelectorAll(\".hidden-image\");\n $(\"html, body\").animate({\n scrollTop: $(\".hidden-image:first\").offset().top - 80\n }, 200);\n\n if (instragramImages.length > showImagesLimit) {\n for (var i = 0; i < hideImages.length; i++) {\n if (i < showImagesLimit) {\n hideImages[i].classList.remove(\"hidden-image\");\n hideImages[i].classList.add(\"fade-in-image\");\n }\n }\n }\n\n initGalleryImage();\n\n let newHideImages = instagramWrapper.querySelectorAll(\".hidden-image\");\n\n if (newHideImages.length === 0) {\n showMoreButton.classList.add(\"d-none\");\n document.querySelector(\".shadow\").classList.add(\"d-none\");\n }\n });\n }\n\n $(window).resize(function () {\n initGalleryImage();\n });\n\n $(document).ready(function () {\n initGalleryImage();\n });\n }\n}\nmodule.exports = {\n checkInView: checkInView,\n playVideoIframeInPopup: playVideoIframeInPopup,\n playVideoIframe: playVideoIframe,\n playVideoLanding: playVideoLanding,\n benefitsBlockInit: benefitsBlockInit,\n productLaunchInstagramInit: productLaunchInstagramInit\n};\n","\"use strict\";\n\nvar outFocusMenu = require(\"../global/outFocusMenu\");\nvar lazyLoading = require(\"../global/lazyLoading\");\n\n/**\n * Updates the product tile image when hovering over a swatch color\n */\nfunction updateProductTileSwatchImagePlp() {\n $(\".js-swatch-update\").hover(function () {\n var $this = $(this);\n var $productTileImageElement = $($this.closest(\".product-tile\").find(\".tile-image\"));\n var defaultTileImage = $productTileImageElement.attr(\"srcset\");\n var swatchImageSrc = $this.data(\"js-product-image-source\");\n\n $productTileImageElement.attr(\"srcset\", swatchImageSrc);\n $this.mouseleave(function () {\n $productTileImageElement.attr(\"srcset\", defaultTileImage);\n });\n });\n}\n\n/**\n * @function\n * @description function to reinit the Sort Order Select (without any value) on Chromium Browsers (Chrome/ Microsoft Edge/ Brave/ Opera) after clicking the \"Back\" button in the browser\n */\nconst reinitSortOrder = () => {\n const $sortOrderElement = $(\".sort-order\");\n\n if (!$sortOrderElement.val()) {\n $sortOrderElement.trigger(\"change\");\n }\n};\n\n/**\n * @function\n * @description function to set the height of the Content Push\n */\nconst setContentPushHeight = () => {\n const $lastGridTile = $(\".m-grid-results-product-grid > .m-grid-results-product-tile\").last();\n const $productTile = $(\".m-grid-results-product-grid > .m-grid-results-product-tile .c-product-tile\");\n\n if ($productTile.length && $lastGridTile.hasClass(\"c-content-push\")) {\n setTimeout(() => {\n const $productTileHeight = $productTile.outerHeight();\n\n $lastGridTile.css(\"height\", $productTileHeight + \"px\");\n }, 500);\n }\n};\n\n/**\n * @function\n * @description adjust the height of the Content Push on window resize or load\n */\nconst adjustContentPushHeight = () => {\n $(window).on(\"load resize\", () => {\n setContentPushHeight();\n });\n};\n\n/**\n * Updates the DOM by deleting the last product in case we are on the first page\n * and the product push is configured, also it will change the pagination link\n *\n * @return {undefined}\n */\nfunction updatePlp() {\n var $resultsCount = $(\".results-count\");\n var $pagination = $(\".pagination\");\n\n //show pagination\n $pagination.removeClass(\"d-none\");\n\n updateProductTileSwatchImagePlp();\n\n $resultsCount.removeClass(\"invisible--lg\");\n}\n\n/**\n * Update DOM elements with Ajax results\n *\n * @param {Object} $results - jQuery DOM element\n * @param {string} selector - DOM element to look up in the $results\n * @return {undefined}\n */\nfunction updateDom($results, selector) {\n var $updates = $results.find(selector);\n $(selector).empty().html($updates.html());\n}\n\n/**\n * Keep refinement panes expanded/collapsed after Ajax refresh\n *\n * @param {Object} $results - jQuery DOM element\n * @return {undefined}\n */\nfunction handleRefinements($results) {\n $(\".refinement.active\").each(function () {\n var $this = $(this);\n\n $this.removeClass(\"active\");\n\n var activeDiv = $results.find(\".\" + $this[0].className.replace(/ /g, \".\").replace(/\\(/g, \"\").replace(/\\)/g, \"\"));\n\n activeDiv.addClass(\"active\");\n activeDiv.find(\"button.title\").attr(\"aria-expanded\", \"true\");\n });\n\n updateDom($results, \".refinements\");\n}\n\n/**\n * Update 0 results\n *\n * @param {Object} $results - jQuery DOM element\n * @return {undefined}\n */\nfunction handleNoResults($results) {\n updateDom($results, \".product-noresults\");\n $(\".product-noresults\").removeClass(\"d-none\");\n}\n\nfunction handleResultDescriptions($results) {\n updateDom($results, \".m-grid-results-description--top\");\n updateDom($results, \".m-grid-results-description--bottom\");\n\n $(\"body\").trigger(\"showMore:init\");\n}\n\n/**\n * Parse Ajax results and updated select DOM elements\n *\n * @param {string} response - Ajax response HTML code\n * @return {undefined}\n */\nfunction parseResults(response) {\n var $results = $(response);\n var specialHandlers = {\n \".refinements\": handleRefinements,\n \".product-noresults\" : handleNoResults,\n \".m-grid-results-description\": handleResultDescriptions\n };\n\n // Update DOM elements that do not require special handling\n [\n \".grid-header\",\n \".header-bar\",\n \".header.page-title\",\n \".product-grid\",\n \".content-pagination-wrapper\",\n \".show-more\",\n \".filter-bar\",\n \".product-breadcrumb\",\n \".order-section\",\n \".m-grid-results-header\",\n \".m-grid-results-description\",\n \".refinements-sticky-wrapper\"\n ].forEach(function (selector) {\n updateDom($results, selector);\n });\n\n Object.keys(specialHandlers).forEach(function (selector) {\n specialHandlers[selector]($results);\n });\n}\n\n/**\n * This function retrieves another page of content to display in the content search grid\n * @param {JQuery} $element - the jquery element that has the click event attached\n * @param {JQuery} $target - the jquery element that will receive the response\n * @return {undefined}\n */\nfunction getContent($element, $target) {\n var showMoreUrl = $element.data(\"url\");\n $.spinner().start();\n $.ajax({\n url: showMoreUrl,\n method: \"GET\",\n success: function (response) {\n $target.append(response);\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n}\n\n/**\n * Update sort option URLs from Ajax response\n *\n * @param {string} response - Ajax response HTML code\n * @return {undefined}\n */\nfunction updateSortOptions(response) {\n var $tempDom = $(\"