' +\r\n '' +\r\n '
';\r\n $('body').append(htmlString);\r\n $('.modal-body')\r\n .spinner()\r\n .start();\r\n\r\n $.ajax({\r\n url: bonusUrl,\r\n method: 'GET',\r\n dataType: 'json',\r\n success: function (response) {\r\n var parsedHtml = parseHtml(response.renderedTemplate);\r\n $('#chooseBonusProductModal .modal-body').empty();\r\n $('#chooseBonusProductModal .enter-message').text(response.enterDialogMessage);\r\n $('#chooseBonusProductModal .modal-header .close .sr-only').text(response.closeButtonText);\r\n $('#chooseBonusProductModal .modal-body').html(parsedHtml.body);\r\n $('#chooseBonusProductModal .modal-footer').html(parsedHtml.footer);\r\n $('#chooseBonusProductModal').modal('show');\r\n },\r\n complete: function () {\r\n $.spinner().stop();\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Updates the Mini-Cart quantity value after the customer has pressed the \"Add to Cart\" button\r\n * @param {string} response - ajax response from clicking the add to cart button\r\n */\r\nfunction handlePostCartAdd(response) {\r\n $('.minicart').trigger('count:update', response);\r\n // show add to cart toast\r\n if (response.newBonusDiscountLineItem && Object.keys(response.newBonusDiscountLineItem).length !== 0) {\r\n chooseBonusProducts(response.newBonusDiscountLineItem);\r\n }\r\n}\r\n\r\nmodule.exports = {\r\n initAddToBag: function () {\r\n var addtoBag = function (e) {\r\n if ($(this).closest('.plp-atc').length) {\r\n e.stopImmediatePropagation();\r\n }\r\n\r\n var addToCartUrl;\r\n var pid;\r\n var pidsObj;\r\n var $this = $(this);\r\n\r\n $this.addClass('focusable'); // Make this element the only item to accept :focus styling while this size is being added to cart to avoid confusion\r\n\r\n if ($(this).closest('.js-product-tile-pd').length === 0) {\r\n $this.closest('.product-tile').removeClass('active-hover');\r\n }\r\n $this\r\n .closest('.product-tile')\r\n .find('.row.add-to-cart[data-attr=\"size\"]')\r\n .not('.hidden')\r\n .removeClass('hover-active');\r\n\r\n pid = getPidValue($(this));\r\n\r\n addToCartUrl = $(this)\r\n .closest('.add-to-cart')\r\n .data('addtocartUrl');\r\n\r\n var form = {\r\n pid: pid,\r\n pidsObj: pidsObj,\r\n childProducts: [],\r\n quantity: 1\r\n };\r\n\r\n form.options = [];\r\n\r\n if (addToCartUrl) {\r\n $.ajax({\r\n url: addToCartUrl,\r\n method: 'POST',\r\n data: form,\r\n success: function (data) {\r\n // reload cart page if plp is on cart page\r\n if ($('.cart.cart-page').length > 0) {\r\n window.location.href = data.redirectUrl;\r\n } else {\r\n handlePostCartAdd(data);\r\n data.addedPid = pid;\r\n $('body').trigger('product:afterAddToCart', data);\r\n $this\r\n .closest('.product-tile')\r\n .find('.js-plp-add-to-bag.desktop')\r\n .addClass('hidden');\r\n $this.closest('.add-to-cart[data-attr=\"size\"]').addClass('hidden');\r\n $this\r\n .closest('.product-tile')\r\n .find('.add-to-cart-variation-group.plp-atc.collapsible-xs')\r\n .removeClass('active');\r\n $this\r\n .closest('.product-tile')\r\n .find('.row.add-to-cart[data-attr=\"size\"]')\r\n .addClass('hover-active');\r\n baseHelper.miniCartReportingUrl(data.reportingURL);\r\n }\r\n },\r\n error: function () {\r\n $this\r\n .closest('.product-tile')\r\n .find('.row.add-to-cart[data-attr=\"size\"]')\r\n .addClass('hover-active');\r\n },\r\n complete: function () {\r\n $this.removeClass('focusable'); // Make other elements focusable after size has been added to cart\r\n $('.js-size-select-show').removeClass('hidden');\r\n }\r\n });\r\n }\r\n };\r\n\r\n $('body')\r\n .on('click', '.plp-atc .size-selections .size-attribute', addtoBag)\r\n .on('mouseleave', '.add-to-cart-variation-group', function () {\r\n if (\r\n $(this)\r\n .closest('.product-tile')\r\n .find('.js-plp-add-to-bag')\r\n .css('position') === 'absolute' &&\r\n $(this).closest('.js-product-tile-pd').length === 0\r\n ) {\r\n $(this)\r\n .find('.add-to-cart[data-attr=\"size\"]')\r\n .addClass('hidden');\r\n $(this)\r\n .closest('.product-tile')\r\n .find('.image-container')\r\n .removeClass('hovered');\r\n }\r\n })\r\n .on('mouseleave', '.plp-search-results .product-tile, .products-container .product-tile, .product-page-bottom-section .product-tile', function () {\r\n $(this).addClass('active-hover');\r\n $(this)\r\n .find('.js-plp-add-to-bag')\r\n .removeClass('hidden');\r\n })\r\n .on('mouseleave', '.js-product-tile-pd .js-product-tile.active-hover', function(e) {\r\n $(this)\r\n .find('.add-to-cart[data-attr=\"size\"]')\r\n .addClass('hidden');\r\n $(this)\r\n .find('.image-container')\r\n .removeClass('hovered');\r\n })\r\n .on(\r\n 'mouseenter',\r\n '.container-fluid.search-results.plp-search-results .active-hover .js-plp-add-to-bag, .products-container .active-hover .js-plp-add-to-bag, .product-page-bottom-section .active-hover .js-plp-add-to-bag',\r\n function (e) {\r\n if ($(this).css('position') === 'absolute') {\r\n var vgroupid = $(e.target)\r\n .closest('.product-tile')\r\n .find('.color-swatches button.color-attribute.active')\r\n .data('id');\r\n $(e.target)\r\n .closest('.product')\r\n .find('.row.add-to-cart.hidden[data-group-pid=\"' + vgroupid + '\"]')\r\n .removeClass('hidden');\r\n $(e.target)\r\n .closest('.product')\r\n .find('.image-container')\r\n .addClass('hovered');\r\n }\r\n }\r\n )\r\n .on(\r\n 'mouseenter',\r\n '.js-product-tile-pd .js-product-tile.active-hover',\r\n function(e) {\r\n var vgroupid = $(e.currentTarget)\r\n .find('.color-swatches button.color-attribute.active')\r\n .data('id');\r\n $(e.currentTarget)\r\n .closest('.product')\r\n .find('.row.add-to-cart.hidden[data-group-pid=\"' + vgroupid + '\"]')\r\n .removeClass('hidden');\r\n }\r\n )\r\n .on(\r\n 'click',\r\n '.container-fluid.search-results.plp-search-results .js-plp-add-to-bag, .products-container .plp-atc .js-plp-add-to-bag, .product-page-bottom-section .plp-atc .js-plp-add-to-bag',\r\n function (e) {\r\n e.preventDefault();\r\n var vgroupid;\r\n if (\r\n $(this)\r\n .closest('.product-tile')\r\n .find('.js-plp-add-to-bag')\r\n .css('position') === 'relative'\r\n ) {\r\n vgroupid = $(e.target)\r\n .closest('.product-tile')\r\n .find('.color-swatches button.color-attribute.active')\r\n .data('id');\r\n if (vgroupid) {\r\n $(e.target)\r\n .closest('.product')\r\n .find('.row.add-to-cart[data-attr=\"size\"]')\r\n .not('[data-group-pid=\"' + vgroupid + '\"]')\r\n .addClass('hidden');\r\n $(e.target)\r\n .closest('.product')\r\n .find('.row.add-to-cart[data-attr=\"size\"][data-group-pid=\"' + vgroupid + '\"]')\r\n .toggleClass('hidden');\r\n $(e.target)\r\n .closest('.product')\r\n .find('.image-container')\r\n .removeClass('hovered');\r\n }\r\n }\r\n if (!vgroupid) {\r\n var $colorAlert = $(e.target)\r\n .closest('.add-to-cart-variation-group')\r\n .find('.color.alert');\r\n if ($colorAlert.length) {\r\n $colorAlert.remove();\r\n }\r\n $colorAlert = $('Please select color.');\r\n $(e.target)\r\n .closest('.add-to-cart-variation-group')\r\n .prepend($colorAlert);\r\n setTimeout(function () {\r\n $colorAlert.remove();\r\n }, 5000);\r\n $(e.target)\r\n .closest('.add-to-cart-variation-group')\r\n .removeClass('active');\r\n }\r\n }\r\n )\r\n .on(\r\n 'click',\r\n '.container-fluid.search-results.plp-search-results button.color-attribute, .products-container button.color-attribute, .product-recommendation-details button.color-attribute',\r\n function (e) {\r\n e.preventDefault();\r\n if (\r\n $(this)\r\n .closest('.product-tile')\r\n .find('.js-plp-add-to-bag')\r\n .css('position') === 'relative'\r\n ) {\r\n $(e.target)\r\n .closest('.product')\r\n .find('.row.add-to-cart[data-attr=\"size\"]')\r\n .addClass('hidden');\r\n $(e.target)\r\n .closest('.product')\r\n .find('.image-container')\r\n .removeClass('hovered');\r\n }\r\n $(this)\r\n .closest('.tile-body')\r\n .prev('.add-to-cart-variation-group')\r\n .removeClass('active');\r\n }\r\n )\r\n .off('click', '.js-product-tile-pd, js-product-tile-container')\r\n .on('click', '.js-size-select-show', function() {\r\n $('.js-size-select-show').removeClass('hidden');\r\n $(this).addClass('hidden');\r\n $(this).closest('.js-product-tile-container').find('.add-to-cart').removeClass('hidden');\r\n })\r\n .on('click', '.js-size-select-close', function() {\r\n $(this).closest('.js-product-tile-container').find('.js-size-select-show').removeClass('hidden');\r\n $(this).closest('.js-product-tile-container').find('.add-to-cart').addClass('hidden');\r\n })\r\n .on('click', function (e) {\r\n if (!$(e.target).hasClass('accordion-icon') && (!($(e.target).hasClass('js-size-select-show') ||\r\n $(e.target).parent().hasClass('js-size-select-show') ||\r\n $(e.target).hasClass('js-plp-add-to-bag')))\r\n ) {\r\n var variationGroup = $('.add-to-cart-variation-group');\r\n if (variationGroup && variationGroup.hasClass('active')) {\r\n variationGroup.removeClass('active');\r\n variationGroup.find('.js-plp-add-to-bag').attr('aria-expanded', 'false');\r\n variationGroup.find('.add-to-cart').addClass('hidden');\r\n }\r\n\r\n $('.js-size-select-show').removeClass('hidden');\r\n $('.add-to-cart').addClass('hidden');\r\n }\r\n });\r\n },\r\n changeColorSwatch: $(document).on('click', '.product-tile .color-swatches button', function () {\r\n var $this = $(this);\r\n var container = $this.closest('.product-tile');\r\n\r\n container.find('button').removeClass('active');\r\n container.find('button.color-attribute').each(function () {\r\n $(this).attr('aria-checked', false);\r\n });\r\n $this.addClass('active').attr('aria-checked', true);\r\n var listprice = $this.data('listprice');\r\n var salesprice = $this.data('salesprice');\r\n var salesBeforePromo = $this.data('salespricebeforepromo');\r\n var imgfront = $this.data('imgfront');\r\n var imgfrontalt = $this.data('imgfrontalt');\r\n var imgback = $this.data('imgback');\r\n var imgbackalt = $this.data('imgbackalt');\r\n var percentageoff = $this.data('percentageoff');\r\n var isNew = $this.data('isnew');\r\n var isBestSeller = $this.data('isbestseller');\r\n var exclusiveBadge = $this.data('exclusivebadge');\r\n var exclusiveBadgeID = $this.data('exclusivebadgeid');\r\n var salesBadge = $this.data('salesbadge');\r\n var id = $this.data('id');\r\n var defaultVariantId = $this.data('defaultvariantid');\r\n var hasSalePricebook = $this.data('hassalepricebook');\r\n var promotions = $this.data('promotions');\r\n var url = $this.data('url');\r\n var quickviewUrl = '/on/demandware.store/Sites-aando-Site/default/Product-ShowQuickView?pid=' + id;\r\n var name = $this.data('varname');\r\n container.find('.link').text(name);\r\n container.find('.front-card').attr({ src: imgfront, alt: imgfrontalt });\r\n container.find('.back-card').attr({ src: imgback, alt: imgbackalt });\r\n container.find('a').attr({ href: url });\r\n container.find('a.quickview').attr({ href: quickviewUrl });\r\n\r\n container.find('.bfx-sku').text(defaultVariantId);\r\n if (!listprice) {\r\n container.find('.strike-through').hide();\r\n container\r\n .find('.bfx-list-price')\r\n .attr({ content: salesprice.value })\r\n .text(salesprice.formatted);\r\n container.find('.percent-value').text('');\r\n } else {\r\n var isHidden = container.find('.strike-through').css('display');\r\n if (isHidden === 'none') {\r\n container.find('.strike-through').css('display', '');\r\n }\r\n\r\n if (container.find('.bfx-sale-price').length) {\r\n container\r\n .find('.bfx-list-price')\r\n .attr({ content: listprice.value })\r\n .text(listprice.formatted);\r\n container.find('.percent-value').text(percentageoff);\r\n } else {\r\n var listPriceText =\r\n '' +\r\n '' +\r\n '' +\r\n '
' +\r\n '' + exclusiveBadge + '
';\r\n container.find('.product-detail').append(badge);\r\n } else {\r\n badge = '' + exclusiveBadge + '';\r\n container.find('.badge-product').html(badge);\r\n }\r\n\r\n // hide the 'New to Sale' badge for international users\r\n var newToSale = window.Resources.NEW_TO_SALE.split(' ').join('');\r\n if (window.SitePreferences.IS_INTERNATIONAL && exclusiveBadgeID === newToSale.toLowerCase()) {\r\n container.find('.badge-product').hide();\r\n }\r\n }\r\n\r\n /* re-renders the applicable promotions if the product has active product-level promotions */\r\n var $targetEl = container.find('.applicable-promotions');\r\n if (promotions && promotions.length > 0) {\r\n baseHelper.updateProductPromotions($targetEl, promotions);\r\n } else {\r\n $targetEl.empty();\r\n }\r\n }),\r\n onSizeClick: $('body').on('click', '.product-page-bottom-section .size-value, .products-container .size-value', function () {\r\n if ($(this).hasClass('selected') === true) {\r\n $(this).removeClass('selected');\r\n } else {\r\n $(this).addClass('selected');\r\n }\r\n })\r\n};\r\n","'use strict';\r\nvar base = require('../product/base');\r\nvar baseDetails = require('base/product/detail');\r\nvar customUtil = require('../customUtil');\r\n\r\nmodule.exports = {\r\n availability: base.availability,\r\n addToCart: base.addToCart,\r\n // removed updateAddToCart for SI-38 requirment\r\n updateAttributesAndDetails: baseDetails.updateAttributesAndDetails,\r\n showSpinner: baseDetails.showSpinner,\r\n updateAttribute: function () {\r\n $('body').on('product:afterAttributeSelect', function (e, response) {\r\n response.container.data('video', response.data.product.pdpVideoID);\r\n if ($('.product-detail>.bundle-items').length) {\r\n response.container.data('pid', response.data.product.id);\r\n response.container.find('.product-id').text(response.data.product.id);\r\n } else if ($('.product-set-detail').eq(0).length) {\r\n response.container.data('pid', response.data.product.id);\r\n response.container.find('.product-id').text(response.data.product.id);\r\n } else {\r\n var productId = response.data.product.id;\r\n // BF might be using element text or data attribute which is also used by add to cart in PDP. Use different attribute for ATC.\r\n if ($('.product-detail.container:not(\".bundle-item\")').hasClass('bfx-price-product')) {\r\n $('.product-detail:not(\".bundle-item\")').data('addtocart-pid', productId);\r\n if (response.data.product.productType === 'variationGroup') {\r\n productId = response.data.product.defaultVariantId;\r\n }\r\n $('.product-id').text(productId);\r\n $('.product-detail:not(\".bundle-item\")').data('pid', productId);\r\n } else {\r\n $('.product-id').text(productId);\r\n $('.product-detail:not(\".bundle-item\")').data('pid', productId);\r\n }\r\n }\r\n });\r\n },\r\n updateAvailability: baseDetails.updateAvailability,\r\n selectAttribute: function() {\r\n $('body').on('click', '.product-description-container [data-attr=\"size\"] button', function(e) {\r\n e.preventDefault();\r\n\r\n\r\n // if ($('.plp-atc').length && $('[data-page=\"Search-ShowResult\"]').length == 0) {\r\n // return;\r\n // }\r\n\r\n var $productContainer = $(this).closest('.set-item');\r\n if (!$productContainer.length) {\r\n $productContainer = $(this).closest('.product-detail');\r\n }\r\n\r\n // Back in Stock Notification\r\n $('.notify-sign-up').addClass('hide');\r\n $('#waitListJoin').removeClass('is-invalid');\r\n $(this).closest('.product-detail').find('.btn-container').removeClass('hide');\r\n\r\n if ($(this).hasClass('show-backinstock-module')) {\r\n // Show Back In Stock Module\r\n var $currentSelectedSize = $(this).siblings('[aria-checked=\"true\"]');\r\n $(this).siblings('.size-attribute').attr('aria-checked', 'false');\r\n base.attributeSelect($(this).attr('data-url'), $productContainer, 'size');\r\n\r\n $(this).closest('.product-detail').find('.add-to-cart').addClass('hide');\r\n $(this).closest('.product-detail').find('.apple-pay-pdp').addClass('hide');\r\n $(this).closest('.product-detail').find('.backinstock-notify').removeClass('hide');\r\n } else {\r\n base.attributeSelect($(this).attr('data-url'), $productContainer, 'size');\r\n\r\n $(this).closest('.product-detail').find('.btn-container').removeClass('hide');\r\n $(this).closest('.product-detail').find('.add-to-cart').removeClass('hide');\r\n $(this).closest('.product-detail').find('.apple-pay-pdp').removeClass('hide');\r\n $(this).closest('.product-detail').find('.backinstock-notify').addClass('hide');\r\n }\r\n });\r\n\r\n $('button.add-to-cart-global').on('product:updateAddToCart', function (e, response) {\r\n if (response.product.readyToOrder) {\r\n $(this).attr('disabled', false);\r\n }\r\n });\r\n },\r\n sizeChart: function() {\r\n $(document).on('click', '.size-chart .sizeGuide-link', function(e) {\r\n e.preventDefault();\r\n var url = $(this).attr('href');\r\n var $prodSizeChart = $(this)\r\n .closest('.size-chart')\r\n .find('.size-chart-collapsible');\r\n var $productDescContainer = $(this)\r\n .closest('.product-description-container');\r\n if (!customUtil.isMobile()) {\r\n $productDescContainer.css({ top: '0rem' });\r\n }\r\n if ($prodSizeChart.is(':empty')) {\r\n $.ajax({\r\n url: url,\r\n type: 'get',\r\n dataType: 'json',\r\n success: function(data) {\r\n $prodSizeChart.append(data.content);\r\n\r\n var modalOptions = {\r\n keyboard: false,\r\n backdrop: false\r\n };\r\n\r\n if ($('.modal-backdrop').length === 0) {\r\n modalOptions.backdrop = 'static';\r\n }\r\n\r\n $('#pdp-sizeGuide').modal(modalOptions);\r\n\r\n }\r\n });\r\n }\r\n $prodSizeChart.toggleClass('active');\r\n });\r\n\r\n var $sizeChart = $('.size-chart-collapsible');\r\n $('body').on('click touchstart', function(e) {\r\n if ($('.size-chart').has(e.target).length <= 0) {\r\n $sizeChart.removeClass('active');\r\n }\r\n });\r\n },\r\n copyProductLink: baseDetails.copyProductLink,\r\n focusChooseBonusProductModal: base.focusChooseBonusProductModal(),\r\n pdpApplePay: function() {\r\n $('body').on('click', '.dw-apple-pay-button', function(e) {\r\n // Based on the product:beforeAddToCart event in pdpProductDetails.js\r\n var isPdpSet = $(this).closest('.product-set-detail').length;\r\n var selectedVal = $(this)\r\n .closest('.product-detail')\r\n .find('.select-size option:selected')\r\n .data('attr-value');\r\n if (!selectedVal && selectedVal !== 0 && !isPdpSet) {\r\n e.preventDefault();\r\n $('body').trigger('product:beforeAddToCart', this);\r\n $.spinner().stop();\r\n return false;\r\n }\r\n });\r\n\r\n $('body').on('product:updateAddToCart', function(e, response) {\r\n if (response.product.readyToOrder) {\r\n var applePayButton = $('.apple-pay-pdp', response.$productContainer);\r\n if (applePayButton.length !== 0) {\r\n applePayButton.attr('sku', response.product.id);\r\n }\r\n }\r\n });\r\n },\r\n showSpinner: function () {\r\n $('body').on('product:beforeAddToCart product:beforeAttributeSelect', function () {\r\n if (!$('.container.search-results').length) {\r\n $.spinner().start();\r\n }\r\n });\r\n },\r\n showPDPEDD: function () {\r\n var $eddText = $('.eddtext.productDetails');\r\n var $eddPidDiv = $eddText.find('.eddpid');\r\n var limit = 0;\r\n var timeInt;\r\n var unHideEdd = function () {\r\n if ($eddPidDiv.text().trim().length > 0 || limit > 100) {\r\n if ($eddText.hasClass('hide') && $eddPidDiv.text().trim().length > 0) {\r\n $eddText.removeClass('hide');\r\n }\r\n clearTimeout(timeInt);\r\n } else {\r\n limit++;\r\n timeInt = setTimeout(unHideEdd, 100);\r\n }\r\n };\r\n unHideEdd();\r\n },\r\n videoThumbnail: function () {\r\n var videoId = $('.product-detail').data('video');\r\n if (videoId) {\r\n $.ajax({\r\n type: 'GET',\r\n url: 'https://vimeo.com/api/v2/video/' + videoId + '.json',\r\n dataType: 'json',\r\n success: function (data) {\r\n var thumbnailUrl = data[0].thumbnail_large;\r\n $('.video-thumbnail').attr('src', thumbnailUrl);\r\n $('.pdp-main-video').attr('poster', thumbnailUrl);\r\n }\r\n });\r\n }\r\n },\r\n videoButton: function () {\r\n if ($('.pdp-main-video').length) {\r\n $(document).on('click', '.pdp-video-button', function () {\r\n var $videoButton = $('.pdp-video-button');\r\n var videoElement = $('.pdp-main-video')[0];\r\n if (videoElement.paused) {\r\n videoElement.play();\r\n $videoButton.addClass('pause-button');\r\n $videoButton.removeClass('play-button');\r\n } else {\r\n $videoButton.removeClass('pause-button');\r\n $videoButton.addClass('play-button');\r\n videoElement.pause();\r\n }\r\n });\r\n }\r\n }\r\n};\r\n","'use strict';\r\n\r\nmodule.exports = function (include) {\r\n if (typeof include === 'function') {\r\n include();\r\n } else if (typeof include === 'object') {\r\n Object.keys(include).forEach(function (key) {\r\n if (typeof include[key] === 'function') {\r\n include[key]();\r\n }\r\n });\r\n }\r\n};\r\n","'use strict';\r\nvar base = require('./base');\r\n\r\nmodule.exports = {\r\n availability: base.availability,\r\n\r\n addToCart: base.addToCart,\r\n\r\n updateAttributesAndDetails: function () {\r\n $('body').on('product:statusUpdate', function (e, data) {\r\n var $productContainer = $('.product-detail[data-pid=\"' + data.id + '\"]');\r\n\r\n $productContainer.find('.description-and-detail .product-attributes')\r\n .empty()\r\n .html(data.attributesHtml);\r\n\r\n if (data.shortDescription) {\r\n $productContainer.find('.description-and-detail .description')\r\n .removeClass('hidden-xl-down');\r\n $productContainer.find('.description-and-detail .description .content')\r\n .empty()\r\n .html(data.shortDescription);\r\n } else {\r\n $productContainer.find('.description-and-detail .description')\r\n .addClass('hidden-xl-down');\r\n }\r\n\r\n if (data.longDescription) {\r\n $productContainer.find('.description-and-detail .details')\r\n .removeClass('hidden-xl-down');\r\n $productContainer.find('.description-and-detail .details .content')\r\n .empty()\r\n .html(data.longDescription);\r\n } else {\r\n $productContainer.find('.description-and-detail .details')\r\n .addClass('hidden-xl-down');\r\n }\r\n });\r\n },\r\n\r\n showSpinner: function () {\r\n $('body').on('product:beforeAddToCart product:beforeAttributeSelect', function () {\r\n $.spinner().start();\r\n });\r\n },\r\n updateAttribute: function () {\r\n $('body').on('product:afterAttributeSelect', function (e, response) {\r\n if ($('.product-detail>.bundle-items').length) {\r\n response.container.data('pid', response.data.product.id);\r\n response.container.find('.product-id').text(response.data.product.id);\r\n } else if ($('.product-set-detail').eq(0).length) {\r\n response.container.data('pid', response.data.product.id);\r\n response.container.find('.product-id').text(response.data.product.id);\r\n } else {\r\n var productId = response.data.product.id;\r\n if (response.data.product.productType === 'variationGroup') {\r\n productId = response.data.product.defaultVariantId;\r\n }\r\n $('.product-id').text(productId);\r\n $('.product-detail:not(\".bundle-item\")').data('pid', productId);\r\n }\r\n });\r\n },\r\n updateAddToCart: function () {\r\n $('body').on('product:updateAddToCart', function (e, response) {\r\n // update local add to cart (for sets)\r\n $('button.add-to-cart', response.$productContainer).attr('disabled',\r\n (!response.product.readyToOrder || !response.product.available));\r\n\r\n var enable = $('.product-availability').toArray().every(function (item) {\r\n return $(item).data('available') && $(item).data('ready-to-order');\r\n });\r\n $('button.add-to-cart-global').attr('disabled', !enable);\r\n });\r\n },\r\n updateAvailability: function () {\r\n $('body').on('product:updateAvailability', function (e, response) {\r\n $('div.availability', response.$productContainer)\r\n .data('ready-to-order', response.product.readyToOrder)\r\n .data('available', response.product.available);\r\n\r\n $('.availability-msg', response.$productContainer)\r\n .empty().html(response.message);\r\n\r\n if ($('.global-availability').length) {\r\n var allAvailable = $('.product-availability').toArray()\r\n .every(function (item) { return $(item).data('available'); });\r\n\r\n var allReady = $('.product-availability').toArray()\r\n .every(function (item) { return $(item).data('ready-to-order'); });\r\n\r\n $('.global-availability')\r\n .data('ready-to-order', allReady)\r\n .data('available', allAvailable);\r\n\r\n $('.global-availability .availability-msg').empty()\r\n .html(allReady ? response.message : response.resources.info_selectforstock);\r\n }\r\n });\r\n },\r\n sizeChart: function () {\r\n $('.size-chart a').on('click', function (e) {\r\n e.preventDefault();\r\n var url = $(this).attr('href');\r\n var $prodSizeChart = $(this).closest('.size-chart').find('.size-chart-collapsible');\r\n if ($prodSizeChart.is(':empty')) {\r\n $.ajax({\r\n url: url,\r\n type: 'get',\r\n dataType: 'json',\r\n success: function (data) {\r\n $prodSizeChart.append(data.content);\r\n }\r\n });\r\n }\r\n $prodSizeChart.toggleClass('active');\r\n });\r\n\r\n var $sizeChart = $('.size-chart-collapsible');\r\n $('body').on('click touchstart', function (e) {\r\n if ($('.size-chart').has(e.target).length <= 0) {\r\n $sizeChart.removeClass('active');\r\n }\r\n });\r\n },\r\n copyProductLink: function () {\r\n $('body').on('click', '#fa-link', function () {\r\n event.preventDefault();\r\n var $temp = $('');\r\n $('body').append($temp);\r\n $temp.val($('#shareUrl').val()).select();\r\n document.execCommand('copy');\r\n $temp.remove();\r\n $('.copy-link-message').attr('role', 'alert');\r\n $('.copy-link-message').removeClass('d-none');\r\n setTimeout(function () {\r\n $('.copy-link-message').addClass('d-none');\r\n }, 3000);\r\n });\r\n },\r\n\r\n focusChooseBonusProductModal: base.focusChooseBonusProductModal()\r\n};\r\n","'use strict';\r\n\r\nvar domUtil = require('../domUtil');\r\nvar customUtil = require('../customUtil');\r\nvar slickHelper = require('../utils/slick');\r\nvar viewportUtil = require('../utils/viewport');\r\nvar baseHelper = require('./base');\r\nvar formValidation = require('../components/formValidation');\r\nvar csrf = require('../csrf');\r\nvar hiddenClass = 'd-none';\r\n\r\n/**\r\n * Process attribute values associated with an attribute that does not have image swatches\r\n *\r\n * @param {int} price - product sale price\r\n * @param {int} standardPrice - product standard price\r\n * @param {string} percentOffMark - string value\r\n * @param {Object} productContainer - DOM container for a given product\r\n * @param {boolean} hasSalePricebook - has sale pricebook\r\n */\r\nfunction updateProductPrice(price, standardPrice, percentOffMark, productContainer, hasSalePricebook, salesPriceBeforePromo) {\r\n var priceTemplate = $('.price-template')[0].cloneNode(true);\r\n var priceSection = domUtil.queryFirst('.prices .price', productContainer);\r\n var priceContainer = domUtil.queryFirst('.price-section', priceTemplate);\r\n var strikeThroughContainer = domUtil.queryFirst('.strike-through-section', priceContainer);\r\n var priceElement = domUtil.queryFirst('.strike-through-price', strikeThroughContainer);\r\n var salesContainer = domUtil.queryFirst('.sales', priceContainer);\r\n var salesPriceElement = domUtil.queryFirst('.price-value', salesContainer);\r\n var salesBeforPromoElement = domUtil.queryFirst('.sales-before-promo', priceContainer);\r\n var percentOffContainer = domUtil.queryFirst('.sales-percentage', priceContainer);\r\n var percentOffElement = domUtil.queryFirst('.percent-value', priceContainer);\r\n domUtil.removeClass(strikeThroughContainer, hiddenClass);\r\n\r\n if (!hasSalePricebook) {\r\n domUtil.addClass(strikeThroughContainer, hiddenClass);\r\n domUtil.addClass(percentOffContainer, hiddenClass);\r\n }\r\n\r\n if (salesBeforPromoElement && salesPriceBeforePromo) {\r\n salesBeforPromoElement.textContent = salesPriceBeforePromo;\r\n }\r\n\r\n if (priceElement) {\r\n priceElement.textContent = standardPrice;\r\n }\r\n if (salesPriceElement) {\r\n salesPriceElement.textContent = price;\r\n }\r\n if (price === standardPrice) {\r\n domUtil.addClass(strikeThroughContainer, hiddenClass);\r\n }\r\n if (price < standardPrice && percentOffElement && percentOffMark) {\r\n percentOffElement.textContent = percentOffMark;\r\n }\r\n priceSection.innerHTML = priceTemplate.innerHTML;\r\n}\r\n\r\n/**\r\n * This method used to get the pdp estimated delivery date via ajax call\r\n * @param {string} inStockDate - In Stoke date\r\n */\r\nfunction getPdpEDD(inStockDate) {\r\n var $eddText = $('.eddtext.productDetails');\r\n var $eddPidDiv = $eddText.find('.eddpid');\r\n\r\n if ($eddPidDiv.length) {\r\n var url = $eddPidDiv.data('url');\r\n\r\n if (url) {\r\n var eddObj = {\r\n zipcode: $eddPidDiv.data('narvar-dest-zip'),\r\n carrierCode: $eddPidDiv.data('narvar-carrier-code'),\r\n serviceCode: $eddPidDiv.data('narvar-service-code'),\r\n inStockDate: inStockDate\r\n };\r\n\r\n $eddText.addClass('d-none');\r\n\r\n $.ajax({\r\n url: url,\r\n type: 'get',\r\n dataType: 'json',\r\n data: { eddObj: JSON.stringify(eddObj) },\r\n success: function(data) {\r\n if (data.success) {\r\n $eddPidDiv.closest('.eddtext').attr('data-object', JSON.stringify(data.eddObject));\r\n if (eddObj.serviceCode && eddObj.serviceCode.length > 0 && eddObj.carrierCode && eddObj.carrierCode.length > 0) {\r\n $eddPidDiv.text('');\r\n if (window.narvar) {\r\n window.narvar('getEdd', {});\r\n }\r\n } else if (data.earliestEDD) {\r\n $eddPidDiv.text(data.earliestEDD);\r\n if (window.narvar) {\r\n window.narvar('getEdd', {});\r\n }\r\n } else if (window.narvar) {\r\n window.narvar('getEdd', {});\r\n }\r\n } else if (window.narvar) {\r\n window.narvar('getEdd', {});\r\n }\r\n var limit = 0;\r\n var timeInt;\r\n var unHideEdd = function() {\r\n if ($eddPidDiv.text().trim().length > 0 || limit > 100) {\r\n if ($eddPidDiv.text().trim().length > 0) {\r\n $eddText.removeClass('d-none');\r\n }\r\n clearTimeout(timeInt);\r\n } else {\r\n limit++;\r\n timeInt = setTimeout(unHideEdd, 100);\r\n }\r\n };\r\n unHideEdd();\r\n }\r\n });\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * This method handles the unavailability message in product set\r\n */\r\nfunction handleSetUnavailabilityMessage() {\r\n var unavailableItems = $('.availability-container .no-stock').length;\r\n var setUnavailableMessageOne = $('.set-unavailable-message-one');\r\n var setUnavailableMessageMany = $('.set-unavailable-message-many');\r\n if (unavailableItems > 1) {\r\n setUnavailableMessageOne.addClass('d-none');\r\n setUnavailableMessageMany.find('.no-of-items').text(unavailableItems);\r\n setUnavailableMessageMany.removeClass('d-none');\r\n } else if (unavailableItems === 1) {\r\n setUnavailableMessageMany.addClass('d-none');\r\n setUnavailableMessageOne.removeClass('d-none');\r\n } else {\r\n setUnavailableMessageOne.addClass('d-none');\r\n setUnavailableMessageMany.addClass('d-none');\r\n }\r\n}\r\n\r\n$('body').on('product:afterAttributeSelect', function(e, data) {\r\n if (data.attributeType && data.attributeType === 'color') {\r\n if (data.data.product.recommendationsHtml) {\r\n $('.recommendations-products').empty();\r\n $('.product-recommendation-details')\r\n .empty()\r\n .html(data.data.product.recommendationsHtml);\r\n $('body').trigger('search:updateProducts');\r\n }\r\n if (data.data.product.einsteinProductRecommendationsHtml) {\r\n $('.custom-recommender')\r\n .empty()\r\n .html(data.data.product.einsteinProductRecommendationsHtml);\r\n $('body').trigger('search:updateProducts');\r\n } else {\r\n $('.custom-recommender').empty();\r\n }\r\n }\r\n if ($('.product-detail.product-pdp .custom-select-wrapper .size-value.selected').length) {\r\n $('.qty-err').remove();\r\n }\r\n if (!data.data.product.price.type) {\r\n var standardPrice = data.data.product.price.list ? data.data.product.price.list.formatted : data.data.product.price.sales.formatted;\r\n var price = standardPrice;\r\n var percentOffMark;\r\n if (data.data.product.price.sales) {\r\n price = data.data.product.price.sales.formatted;\r\n }\r\n if (data.data.product.price.list) {\r\n percentOffMark = data.data.product.price.percentageOff;\r\n }\r\n\r\n var hasSalePricebook = data.data.hasSalePricebook;\r\n var salesPriceBeforePromo =\r\n 'salesBeforePromo' in data.data.product.price && data.data.product.price.salesBeforePromo ? data.data.product.price.salesBeforePromo.formatted : '';\r\n updateProductPrice(price, standardPrice, percentOffMark, data.container[0], hasSalePricebook, salesPriceBeforePromo);\r\n }\r\n var isPdpSet = $('.product-set-detail').length;\r\n if (isPdpSet) {\r\n handleSetUnavailabilityMessage();\r\n }\r\n\r\n var PdpVideoID = data.data.product.pdpVideoID;\r\n if (PdpVideoID !== null && PdpVideoID !== undefined) {\r\n var carousel = $('.product-detail .primary-images .carousel');\r\n if (isPdpSet) {\r\n var selectedProductID = data.data.product.id;\r\n if (selectedProductID !== null && selectedProductID !== undefined) {\r\n $('.product-detail').each(function() {\r\n var setItemID = $(this)\r\n .find('.product-id.bfx-sku')\r\n .text();\r\n if (setItemID === selectedProductID) {\r\n carousel = $(this).find('.carousel');\r\n }\r\n });\r\n }\r\n }\r\n\r\n if ($(carousel).length > 0) {\r\n var carouselId = $(carousel).attr('id');\r\n var imageLength = $(carousel).find('.carousel-inner .carousel-item ').length;\r\n $(\r\n ''\r\n ).appendTo($(carousel).find('.carousel-inner'));\r\n $('').appendTo(\r\n $(carousel).find('.carousel-indicators')\r\n );\r\n }\r\n }\r\n // update Narvar estimated date on PDP\r\n var $eddPidDiv = $('.eddpid');\r\n if (isPdpSet) {\r\n var selectedEddProductID = data.data.product.id;\r\n if (selectedEddProductID !== null && selectedEddProductID !== undefined) {\r\n $('.product-detail').each(function() {\r\n var setItemID = $(this)\r\n .find('.product-id.bfx-sku')\r\n .text();\r\n if (setItemID === selectedEddProductID) {\r\n $eddPidDiv = $(this).find('.eddpid');\r\n }\r\n });\r\n }\r\n }\r\n if ($eddPidDiv.length > 0) {\r\n if (data.data.product.availability.eddPreOrderDate) {\r\n $eddPidDiv.attr('data-narvar-instock-date', data.data.product.availability.eddPreOrderDate);\r\n $eddPidDiv.addClass('preorder-date');\r\n if ($('.pdp-edd.hide').length > 0) {\r\n $('.pdp-edd.hide').removeClass('hide');\r\n }\r\n } else {\r\n if ($eddPidDiv.hasClass('preorder-date')) {\r\n $eddPidDiv.removeClass('preorder-date');\r\n }\r\n if ($('.pdp-edd.hide').length > 0) {\r\n $('.pdp-edd.hide').removeClass('hide');\r\n }\r\n }\r\n\r\n getPdpEDD(data.data.product.availability.eddPreOrderDate);\r\n }\r\n\r\n /* re-renders the applicable promotions if the product has active product-level promotions */\r\n var $targetEl = $('.applicable-promotions');\r\n if (data.data.product.hasPromotions) {\r\n var promotions = data.data.product.promotions;\r\n baseHelper.updateProductPromotions($targetEl, promotions);\r\n } else {\r\n $targetEl.empty();\r\n }\r\n});\r\n\r\n// calculate the top offset of product details description container and lock it at the top once the 'Add to bag' button is in the viewport\r\nvar setProductDetailsDescTop = function(parentEl) {\r\n if (!parentEl) {\r\n return;\r\n }\r\n\r\n var $productDescContainer = parentEl.find('.product-description-container');\r\n var $btnContainer = parentEl.find('.prices-add-to-cart-actions');\r\n var woh = $(window).outerHeight(true);\r\n var bPadding = 50;\r\n var topOffset = 150;\r\n\r\n if ($btnContainer.length > 0 && !viewportUtil.isInViewport($btnContainer)) {\r\n topOffset = woh - ($btnContainer.position().top + $btnContainer.outerHeight(true) + bPadding);\r\n }\r\n\r\n $productDescContainer.css({ top: topOffset / 16 + 'rem' });\r\n};\r\n\r\n$('body').on('product:updateAvailability', function(e, data) {\r\n var className = data.product.availability.classType;\r\n var errMessage = data.product.availability.messages[0];\r\n var ele = $(e.target).find('.product-description');\r\n var isSetItem = data.$productContainer.hasClass('product-detail set-item');\r\n if (className === 'qty-err') {\r\n ele.find('.add-to-cart').prop('disabled', true);\r\n } else {\r\n ele.find('.add-to-cart').prop('disabled', false);\r\n }\r\n if (data.product.variationAttributes) {\r\n var output = [];\r\n $.each(data.product.variationAttributes, function(key, variationAttribute) {\r\n if (variationAttribute.id === 'color') {\r\n $.each(variationAttribute.values, function(key1, value) {\r\n var $colorSelector = $(\r\n '.product-detail [data-attr=\"' +\r\n variationAttribute.id +\r\n '\"] button.' +\r\n variationAttribute.id +\r\n '-attribute[data-variationgroupid=\"' +\r\n value.variationGroupID +\r\n '\"]'\r\n );\r\n if (!value.selectable && (!value.enableBackInStockNotification || isSetItem)) {\r\n $colorSelector.attr('disabled', 'disabled');\r\n } else {\r\n $colorSelector.removeAttr('disabled');\r\n }\r\n if (!value.enableBackInStockNotification || isSetItem) {\r\n $colorSelector.removeClass('back-in-stock-notification');\r\n } else {\r\n $colorSelector.addClass('back-in-stock-notification');\r\n }\r\n });\r\n }\r\n if (variationAttribute.id === 'size') {\r\n $.each(variationAttribute.values, function(key1, value) {\r\n var showBackInStockModule = value.enableBackInStockNotification;\r\n output.push(\r\n ''\r\n );\r\n\r\n if (value.selected && !value.selectable) {\r\n ele.find('button.add-to-cart').prop('disabled', true);\r\n }\r\n });\r\n ele.find('[data-attr=\"' + variationAttribute.id + '\"] .size-selections').html(output.join(''));\r\n }\r\n });\r\n }\r\n\r\n // Back in Stock Notification\r\n $('.notify-sign-up').addClass('hide');\r\n $('#waitListJoin').removeClass('is-invalid');\r\n $(this)\r\n .closest('.product-detail')\r\n .find('.btn-container')\r\n .removeClass('hide');\r\n\r\n if (\r\n ele\r\n .closest('.product-detail')\r\n .find('[data-attr=\"size\"] .size-attribute[aria-checked=\"true\"]')\r\n .hasClass('show-backinstock-module')\r\n ) {\r\n ele.closest('.product-detail')\r\n .find('.add-to-cart')\r\n .addClass('hide');\r\n ele.closest('.product-detail')\r\n .find('.backinstock-notify')\r\n .removeClass('hide');\r\n } else {\r\n ele.closest('.product-detail')\r\n .find('.btn-container')\r\n .removeClass('hide');\r\n ele.closest('.product-detail')\r\n .find('.add-to-cart')\r\n .removeClass('hide');\r\n ele.closest('.product-detail')\r\n .find('.backinstock-notify')\r\n .addClass('hide');\r\n }\r\n\r\n $(ele)\r\n .find('.color-value')\r\n .each(function(d, el) {\r\n if ($(el).hasClass('unselectable')) {\r\n if (\r\n !$(el)\r\n .parent()\r\n .hasClass('back-in-stock-notification')\r\n ) {\r\n $(el)\r\n .parent()\r\n .attr('disabled', true);\r\n } else {\r\n $(el)\r\n .parent()\r\n .attr('disabled', false);\r\n }\r\n } else {\r\n $(el)\r\n .parent()\r\n .attr('disabled', false);\r\n }\r\n });\r\n $(ele)\r\n .find('.color-value')\r\n .parent('.color-attribute')\r\n .attr('aria-checked', 'false');\r\n $(ele)\r\n .find('.color-value.selected')\r\n .parent('.color-attribute')\r\n .attr('aria-checked', 'true');\r\n var colorName = $(ele)\r\n .find('.color-value.selected')\r\n .data('attr-displayvalue');\r\n if (typeof colorName !== 'undefined') {\r\n $(ele)\r\n .find('.selected-color')\r\n .text(colorName.toLowerCase());\r\n }\r\n\r\n if (className !== 'no-stock') {\r\n $(ele)\r\n .find('.product-availability')\r\n .html('' + errMessage + '
');\r\n $(ele)\r\n .find('.cart-and-ipay')\r\n .removeClass('hide');\r\n } else {\r\n $(ele)\r\n .find('.product-availability')\r\n .empty();\r\n $(ele)\r\n .find('.notify-sign-up .form-group, .notify-sign-up .btn.stock-notify-signup-email, .notify-sign-up.title')\r\n .removeClass('hide');\r\n $(ele)\r\n .find('.notify-sign-up .btn.stock-notify-signup-success')\r\n .addClass('hide');\r\n }\r\n\r\n if (className !== 'no-err') {\r\n $('#footercontent').addClass('message');\r\n } else {\r\n $('#footercontent').removeClass('message');\r\n }\r\n\r\n var preOrderLabel = $('.add-to-cart-btn-labels').attr('data-value-preorder-text');\r\n var addToCartLabel = $('.add-to-cart-btn-labels').attr('data-value-cart-text');\r\n var hasPreorder = data.product.availability.messages[0].indexOf('pre-order-ship-msg') >= 0;\r\n\r\n if (hasPreorder) {\r\n $(ele)\r\n .find('.add-to-cart span')\r\n .text(preOrderLabel);\r\n $(ele)\r\n .find('.availability')\r\n .hide();\r\n $(ele)\r\n .find('.availability-container .availability-msg')\r\n .show();\r\n } else {\r\n $(ele)\r\n .find('.add-to-cart span')\r\n .text(addToCartLabel);\r\n $(ele)\r\n .find('.availability')\r\n .show();\r\n $(ele)\r\n .find('.availability-container .availability-msg')\r\n .hide();\r\n }\r\n $(ele)\r\n .find('.product-desc .content')\r\n .html(data.product.shortDescription);\r\n $(ele)\r\n .find('.description-and-detail')\r\n .empty()\r\n .html(data.product.descriptionAndDetailsHtml);\r\n $(ele)\r\n .find('.sales-bdg')\r\n .empty()\r\n .html(data.product.saleBadgingHtml);\r\n $(ele)\r\n .find('.ex-promotion')\r\n .empty()\r\n .html(data.product.exclusiveBadgingHtml);\r\n $(ele)\r\n .find('.product-name')\r\n .empty()\r\n .html(data.product.productName);\r\n\r\n // reset and re-calculate the top offset when color/size is changed\r\n var $productDescContainer = $('.product-detail .product-description-container');\r\n $productDescContainer.removeAttr('style');\r\n\r\n if (!customUtil.isMobile() && $('.product-detail').length > 0) {\r\n setProductDetailsDescTop($('.product-detail'));\r\n }\r\n});\r\n\r\n// adding error message when size not selected\r\n// eslint-disable-next-line consistent-return\r\n$('body').on('product:beforeAddToCart', function(data, ele) {\r\n var isPdpSet = $(ele).closest('.product-set-detail').length;\r\n if (isPdpSet) {\r\n var noSelectionCount = 0;\r\n var $setProducts = $(ele)\r\n .closest('.product-detail')\r\n .find('.set-item');\r\n if (!$setProducts.length) {\r\n $setProducts = $(ele).closest('.product-detail.set-item');\r\n }\r\n $setProducts.each(function() {\r\n var $setProduct = $(this);\r\n var labelText = $setProduct.find('.size-selections').attr('data-value-select-size-label');\r\n var errorMessage = '' + labelText + '
' + labelText + '
\" + data.message + '
');\r\n }\r\n $('form.stock-notify-sign-up').trigger('stock-notify-sign-up:error', data);\r\n } else if (!$form.find('#attentive-pdp').is(':checked')) {\r\n $form.spinner().stop();\r\n $('.notify-sign-up .form-group, .notify-sign-up .btn.stock-notify-signup-email, .notify-sign-up.title').addClass('hide');\r\n $('.notify-sign-up .btn.stock-notify-signup-success').removeClass('hide');\r\n }\r\n },\r\n error: function() {\r\n $form.spinner().stop();\r\n }\r\n });\r\n\r\n if ($form.find('#attentive-pdp').is(':checked')) {\r\n $.ajax({\r\n url: attentiveURL,\r\n type: 'get',\r\n dataType: 'json',\r\n data: $form.serialize(),\r\n success: function (data) {\r\n $form.spinner().stop();\r\n if (!data.success) {\r\n formValidation($form, data);\r\n $('.error-msg').remove();\r\n if ('message' in data) {\r\n $form.find('#smsJoin').addClass('is-invalid');\r\n $('#sms-signup-form-error').empty();\r\n $('#sms-signup-form-error').prepend(\"\" + data.message + '
');\r\n }\r\n $('form.stock-notify-sign-up').trigger('stock-notify-sign-up:error', data);\r\n } else {\r\n $('.notify-sign-up .form-group, .notify-sign-up .btn.stock-notify-signup-email, .notify-sign-up.title').addClass('hide');\r\n $('.notify-sign-up .btn.stock-notify-signup-success').removeClass('hide');\r\n }\r\n },\r\n error: function () {\r\n $form.spinner().stop();\r\n }\r\n });\r\n }\r\n});\r\n\r\n// remove isapplepay element on pdp for browsers that do not support it\r\nif ('ApplePaySession' in window === false) {\r\n $('isapplepay').remove();\r\n}\r\n\r\n// page load initialization on desktop only\r\nif (!customUtil.isMobile()) {\r\n setProductDetailsDescTop($('.product-detail'));\r\n\r\n $('body').on('click', '.product-pdp .size-attribute, .product-pdp .color-attribute', function() {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n });\r\n}\r\n\r\n","/* eslint-disable */\r\n\r\n/*\r\n * Zoomer v3.1.0 - 2015-12-39\r\n * A jQuery plugin for smooth image exploration. Part of the formstone library.\r\n * http://classic.formstone.it/components/zoomer/\r\n *\r\n * Copyright 2015 Ben Plum; MIT Licensed\r\n * Marc Brooks; MIT Licensed\r\n */\r\n\r\n(function($, window) {\r\n 'use strict';\r\n\r\n var $window = $(window),\r\n $instances,\r\n animating = false,\r\n animationFrameID,\r\n transformSupported = false;\r\n\r\n /**\r\n * @options\r\n * @param callback [function] <$.noop> \"\"\r\n * @param controls.postion [string] <\"bottom\"> \"Position of default controls\"\r\n * @param controls.zoomIn [string] <> \"Custom zoom control selector\"\r\n * @param controls.zoomOut [string] <> \"Custom zoom control selector\"\r\n * @param controls.next [string] <> \"Custom pagination control selector\"\r\n * @param controls.previous [string] <> \"Custom pagination control selector\"\r\n * @param customClass [string] <''> \"Class applied to instance\"\r\n * @param enertia [number] <0.2> \"Zoom smoothing (0.1 = butter, 0.9 = sandpaper)\"\r\n * @param increment [number] <0.01> \"Zoom speed (0.01 = tortoise, 0.1 = hare)\"\r\n * @param marginMin [] <> \"\"\r\n * @param marginMax [] <> \"\"\r\n * @param retina [boolean]';\r\n html += '
';\r\n\r\n data.$zoomer = $(html);\r\n data.$target.addClass('zoomer-element').html(data.$zoomer);\r\n\r\n if (data.controls.zoomIn || data.controls.zoomOut || data.controls.next || data.controls.previous) {\r\n data.controls.$zoomIn = $(data.controls.zoomIn, $targetParent);\r\n data.controls.$zoomOut = $(data.controls.zoomOut, $targetParent);\r\n data.controls.$next = $(data.controls.next, $targetParent);\r\n data.controls.$previous = $(data.controls.previous, $targetParent);\r\n }\r\n\r\n // Cache jquery objects\r\n data.$positioner = data.$zoomer.find('.zoomer-positioner');\r\n data.$holder = data.$zoomer.find('.zoomer-holder');\r\n\r\n // Kick it off\r\n data.$target.data('zoomer', data);\r\n pub.resize.apply(data.$target);\r\n\r\n if (data.images.length > 0) {\r\n _load.apply(data.$target, [data]);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _load\r\n * @description Delegates loading action\r\n * @param data [object] \"Instance data\"\r\n */\r\n function _load(data) {\r\n $('#modalZoomLoading').removeClass('d-none');\r\n\r\n //display the initial image after 1000ms\r\n setTimeout(function() {\r\n $('.zoomer-positioners').removeClass('d-none');\r\n }, 1000);\r\n\r\n // If gallery\r\n if (data.gallery) {\r\n data.$zoomer.addClass('zoomer-gallery');\r\n } else {\r\n data.$zoomer.removeClass('zoomer-gallery');\r\n }\r\n\r\n if (typeof data.$image !== 'undefined') {\r\n data.$holder.animate({ opacity: 0 }, 300, function() {\r\n pub.unload.apply(data.$target);\r\n _loadImage.apply(data.$target, [data, data.images[data.index]]);\r\n });\r\n } else {\r\n _loadImage.apply(data.$target, [data, data.images[data.index]]);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _loadImage\r\n * @description Handles loading an image or set of tiles\r\n * @param data [object] \"Instance data\"\r\n * @param source [string | object] \"Source URL or object\"\r\n */\r\n function _loadImage(data, source) {\r\n data.loading = true;\r\n\r\n // Cache current image\r\n data.$image = $('';\r\n html += '
';\r\n html += '';\r\n html += '
';\r\n html += '';\r\n html += '';\r\n html += '';\r\n html += '\");\r\n\r\n\t\t$div.css(_prefix(prop, val));\r\n\t\tvar check = $div[0].style.cssText.match(test);\r\n\r\n\t\treturn (check !== null && check.length > 0);\r\n\t\t*/\r\n\r\n /* http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support/12621264#12621264 */\r\n var el = document.createElement('p'),\r\n has3d,\r\n transforms = {\r\n webkitTransform: '-webkit-transform',\r\n OTransform: '-o-transform',\r\n msTransform: '-ms-transform',\r\n MozTransform: '-moz-transform',\r\n transform: 'transform'\r\n };\r\n\r\n document.body.insertBefore(el, null);\r\n for (var t in transforms) {\r\n if (el.style[t] !== undefined) {\r\n el.style[t] = 'translate3d(1px,1px,1px)';\r\n has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);\r\n }\r\n }\r\n document.body.removeChild(el);\r\n\r\n return has3d !== undefined && has3d.length > 0 && has3d !== 'none';\r\n }\r\n\r\n function isMobile () {\r\n var mobileAgentHash = ['mobile', 'tablet', 'phone', 'ipad', 'ipod', 'android', 'blackberry', 'windows ce', 'opera mini', 'palm'];\r\n var idx = 0;\r\n var isMobile = false;\r\n var userAgent = navigator.userAgent.toLowerCase();\r\n\r\n while (mobileAgentHash[idx] && !isMobile) {\r\n isMobile = userAgent.indexOf(mobileAgentHash[idx]) >= 0;\r\n idx++;\r\n }\r\n return isMobile;\r\n }\r\n\r\n $.fn.swiper = function(method) {\r\n if (pub[method]) {\r\n return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));\r\n } else if (typeof method === 'object' || !method) {\r\n return _init.apply(this, arguments);\r\n }\r\n return this;\r\n };\r\n\r\n $.swiper = function(method) {\r\n if (method === 'defaults') {\r\n pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));\r\n }\r\n };\r\n})(jQuery, window);\r\n","/* eslint-disable */\r\n\r\n/*\r\n * Zoomer v3.1.0 - 2015-12-39\r\n * A jQuery plugin for smooth image exploration. Part of the formstone library.\r\n * http://classic.formstone.it/components/zoomer/\r\n *\r\n * Copyright 2015 Ben Plum; MIT Licensed\r\n * Marc Brooks; MIT Licensed\r\n */\r\n\r\n(function($, window) {\r\n 'use strict';\r\n\r\n var $window = $(window),\r\n $instances,\r\n animating = false,\r\n transformSupported = false;\r\n\r\n /**\r\n * @options\r\n * @param callback [function] <$.noop> \"\"\r\n * @param controls.postion [string] <\"bottom\"> \"Position of default controls\"\r\n * @param controls.zoomIn [string] <> \"Custom zoom control selector\"\r\n * @param controls.zoomOut [string] <> \"Custom zoom control selector\"\r\n * @param controls.next [string] <> \"Custom pagination control selector\"\r\n * @param controls.previous [string] <> \"Custom pagination control selector\"\r\n * @param customClass [string] <''> \"Class applied to instance\"\r\n * @param enertia [number] <0.2> \"Zoom smoothing (0.1 = butter, 0.9 = sandpaper)\"\r\n * @param increment [number] <0.01> \"Zoom speed (0.01 = tortoise, 0.1 = hare)\"\r\n * @param marginMin [] <> \"\"\r\n * @param marginMax [] <> \"\"\r\n * @param retina [boolean] \"Flag for retina image support\"\r\n * @param source [string | object] \"Source image (string) or tiles (object)\"\r\n * @param imageList [array] \"Overriding image list through JSON\"\r\n */\r\n var options = {\r\n callback: $.noop,\r\n controls: {\r\n position: 'bottom',\r\n zoomIn: null,\r\n zoomOut: null,\r\n next: null,\r\n previous: null\r\n },\r\n customClass: '',\r\n enertia: 0.2,\r\n increment: 0.01,\r\n marginMin: 30, // Min bounds\r\n marginMax: 100, // Max bounds\r\n retina: false,\r\n source: null,\r\n imageList: [],\r\n altList: []\r\n };\r\n\r\n // Internal data\r\n var properties = {\r\n images: [],\r\n aspect: '',\r\n action: '',\r\n lastAction: '',\r\n keyDownTime: 0,\r\n marginReal: 0,\r\n originalDOM: '',\r\n\r\n // Gallery\r\n gallery: false,\r\n index: 0,\r\n\r\n // Tiles\r\n $tiles: null,\r\n tiled: false,\r\n tilesTotal: 0,\r\n tilesLoaded: 0,\r\n tiledColumns: 0,\r\n tiledRows: 0,\r\n tiledHeight: 0,\r\n tiledWidth: 0,\r\n tiledThumbnail: null,\r\n\r\n // Frame\r\n centerLeft: 0,\r\n centerTop: 0,\r\n frameHeight: 0,\r\n frameWidth: 0,\r\n\r\n // Original image\r\n naturalHeight: 0,\r\n naturalWidth: 0,\r\n imageRatioWide: 0,\r\n imageRatioTall: 0,\r\n\r\n // Dimensions\r\n minHeight: null,\r\n minWidth: null,\r\n maxHeight: 0,\r\n maxWidth: 0,\r\n\r\n // Bounds\r\n boundsTop: 0,\r\n boundsBottom: 0,\r\n boundsLeft: 0,\r\n boundsRight: 0,\r\n\r\n // Image\r\n imageWidth: 0,\r\n imageHeight: 0,\r\n imageLeft: 0,\r\n imageTop: 0,\r\n targetImageWidth: 0,\r\n targetImageHeight: 0,\r\n targetImageLeft: 0,\r\n targetImageTop: 0,\r\n oldImageWidth: 0,\r\n oldImageHeight: 0,\r\n\r\n // Positioner\r\n positionerLeft: 0,\r\n positionerTop: 0,\r\n targetPositionerLeft: 0,\r\n targetPositionerTop: 0,\r\n\r\n // Zoom\r\n zoomPositionLeft: 0,\r\n zoomPositionTop: 0,\r\n\r\n // Touch Support\r\n offset: null,\r\n touches: [],\r\n zoomPercentage: 1,\r\n\r\n pinchStartX0: 0,\r\n pinchStartX1: 0,\r\n pinchStartY0: 0,\r\n pinchStartY1: 0,\r\n\r\n pinchEndX0: 0,\r\n pinchEndX1: 0,\r\n pinchEndY0: 0,\r\n pinchEndY1: 0,\r\n\r\n lastPinchEndX0: 0,\r\n lastPinchEndY0: 0,\r\n lastPinchEndX1: 0,\r\n lastPinchEndY1: 0,\r\n\r\n pinchDeltaStart: 0,\r\n pinchDeltaEnd: 0\r\n };\r\n\r\n /**\r\n * @events\r\n * @event zoomer.loaded \"Source media loaded\"\r\n */\r\n\r\n var pub = {\r\n /**\r\n * @method\r\n * @name defaults\r\n * @description Sets default plugin options\r\n * @param opts [object] <{}> \"Options object\"\r\n * @example $.zoomer(\"defaults\", opts);\r\n */\r\n defaults: function(opts) {\r\n options = $.extend(options, opts || {});\r\n return typeof this === 'object' ? $(this) : true;\r\n },\r\n\r\n /**\r\n * @method\r\n * @name destroy\r\n * @description Removes instance of plugin\r\n * @example $(\".target\").zoomer(\"destroy\");\r\n */\r\n destroy: function() {\r\n var $targets = $(this).each(function(i, target) {\r\n var data = $(target).data('zoomer');\r\n\r\n if (data) {\r\n $window.off('.zoomer');\r\n data.$holder.off('.zoomer');\r\n data.$zoomer.off('.zoomer');\r\n data.controls.$zoomIn.off('.zoomer');\r\n data.controls.$zoomOut.off('.zoomer');\r\n data.controls.$next.off('.zoomer');\r\n data.controls.$previous.off('.zoomer');\r\n\r\n data.$target\r\n .removeClass('zoomer-element')\r\n .data('zoomer', null)\r\n .empty()\r\n .append(data.originalDOM);\r\n }\r\n });\r\n\r\n $instances = $('.zoomer-element');\r\n if ($instances.length < 1) {\r\n _clearAnimation();\r\n }\r\n\r\n return $targets;\r\n },\r\n\r\n /**\r\n * @method\r\n * @name load\r\n * @description Loads source media\r\n * @param source [string | object] \"Source image (string) or tiles (object)\"\r\n * @example $(\".target\").zoomer(\"load\", \"path/to/image.jpg\");\r\n */\r\n load: function(source) {\r\n return $(this).each(function(i, target) {\r\n var data = $(target).data('zoomer');\r\n\r\n if (data) {\r\n data.source = source;\r\n data.index = 0;\r\n data = _normalizeSource(data);\r\n\r\n _load(data);\r\n }\r\n });\r\n },\r\n\r\n /**\r\n * @method\r\n * @name pan\r\n * @description Pans plugin instances\r\n * @param left [int] \"Percentage to pan to (50 = half)\"\r\n * @param top [int] \"Percentage to pan to (50 = half)\"\r\n * @example $(\".target\").zoomer(\"pan\", 50, 50);\r\n */\r\n pan: function(left, top) {\r\n return $(this).each(function(i, target) {\r\n var data = $(target).data('zoomer');\r\n\r\n if (data) {\r\n left /= 100;\r\n top /= 100;\r\n\r\n data.targetPositionerLeft = Math.round(data.centerLeft - data.targetImageLeft - data.targetImageWidth * left);\r\n data.targetPositionerTop = Math.round(data.centerTop - data.targetImageTop - data.targetImageHeight * top);\r\n }\r\n });\r\n },\r\n\r\n /**\r\n * @method\r\n * @name resize\r\n * @description Resizes plugin instange\r\n * @example $(\".target\").zoomer(\"resize\");\r\n */\r\n resize: function() {\r\n return $(this).each(function(i, target) {\r\n var data = $(target).data('zoomer');\r\n\r\n if (data) {\r\n data.frameWidth = data.$target.outerWidth();\r\n data.frameHeight = data.$target.outerHeight();\r\n data.centerLeft = Math.round(data.frameWidth * 0.5);\r\n data.centerTop = Math.round(data.frameHeight * 0.5);\r\n\r\n // Set minHeight and minWidth to naturals sizes\r\n data.minHeight = data.naturalHeight;\r\n data.minWidth = data.naturalWidth;\r\n\r\n // Recalculate minimum sizes only when the natural size of the image is bigger than the frame size - marginalReal\r\n if (data.naturalHeight > data.frameHeight - data.marginReal || data.naturalWidth > data.frameWidth - data.marginReal) {\r\n data = _setMinimums(data);\r\n }\r\n }\r\n });\r\n },\r\n\r\n /**\r\n * @method\r\n * @name unload\r\n * @description Unload image from plugins instances\r\n * @example $(\".target\").zoomer(\"unload\");\r\n */\r\n unload: function() {\r\n return $(this).each(function() {\r\n var data = $(this).data('zoomer');\r\n\r\n if (data && typeof data.$image !== 'undefined') {\r\n data.$image.remove();\r\n }\r\n });\r\n }\r\n };\r\n\r\n /**\r\n * @method private\r\n * @name _init\r\n * @description Initializes plugin\r\n * @param opts [object] \"Initialization options\"\r\n */\r\n function _init(opts) {\r\n // Settings\r\n opts = $.extend({}, options, properties, opts);\r\n\r\n transformSupported = _getTransform3DSupport();\r\n\r\n // Apply to each element\r\n var $items = $(this);\r\n for (var i = 0, count = $items.length; i < count; i++) {\r\n _build($items.eq(i), opts);\r\n }\r\n\r\n // Start main animation loop\r\n $instances = $('.zoomer-element');\r\n _startAnimation();\r\n\r\n return $items;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _build\r\n * @description Builds each instance\r\n * @param $target [jQuery object] \"Target jQuery object\"\r\n * @param data [object] <{}> \"Options object\"\r\n */\r\n function _build($target, data) {\r\n if (!$target.data('zoomer')) {\r\n data = $.extend({}, data, $target.data('zoomer-options'));\r\n\r\n var $targetParent = $target.parent(); // have to get the parent before we empty the target below\r\n data.$target = $target;\r\n\r\n data.marginReal = data.marginMin * 2;\r\n data.originalDOM = data.$target.html();\r\n if (data.imageList.length > 1) {\r\n data.source = [];\r\n $.each(data.imageList, function(index, val) {\r\n data.source.push(val);\r\n });\r\n data.$target.empty();\r\n } else if (data.$target.find('img').length > 0) {\r\n data.source = [];\r\n data.$target.find('img').each(function() {\r\n data.source.push($(this).attr('src'));\r\n });\r\n data.$target.empty();\r\n }\r\n\r\n data = _normalizeSource(data);\r\n\r\n // Assemble HTML\r\n var html = '![]()
');\r\n data.$image\r\n .one('load.zoomer', data, _onImageLoad)\r\n .attr('src', source)\r\n .attr('alt', data.altList[0]);\r\n\r\n // If image has already loaded into cache, trigger load event\r\n if (data.$image[0].complete) {\r\n data.$image.trigger('load');\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onTileLoad\r\n * @description Handles tile load\r\n * @param e [object] \"Event data\"\r\n */\r\n function _onTileLoad(e) {\r\n var data = e.data;\r\n\r\n data.tilesLoaded++;\r\n if (data.tilesLoaded === data.tilesTotal) {\r\n data.tiledRows = data.images[0].length;\r\n data.tiledColumns = data.images[0][0].length;\r\n\r\n data.tiledHeight = data.$tiles.eq(0)[0].naturalHeight * data.tiledRows;\r\n data.tiledWidth = data.$tiles.eq(0)[0].naturalWidth * data.tiledColumns;\r\n\r\n _onImageLoad({ data: data });\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onImageLoad\r\n * @description Handles image load\r\n * @param e [object] \"Event data\"\r\n */\r\n function _onImageLoad(e) {\r\n var data = e.data;\r\n\r\n if (data.tiled) {\r\n data.naturalHeight = data.tiledHeight;\r\n data.naturalWidth = data.tiledWidth;\r\n } else {\r\n data.naturalHeight = data.$image[0].naturalHeight;\r\n data.naturalWidth = data.$image[0].naturalWidth;\r\n }\r\n\r\n if (data.retina) {\r\n data.naturalHeight /= 2;\r\n data.naturalWidth /= 2;\r\n }\r\n\r\n data.$holder.css({\r\n height: data.naturalHeight,\r\n width: data.naturalWidth\r\n });\r\n\r\n // Set target, min, max to naturals sizes\r\n data.targetImageHeight = data.minHeight = data.maxHeight = data.naturalHeight;\r\n data.targetImageWidth = data.minWidth = data.maxWidth = data.naturalWidth;\r\n\r\n data.imageRatioWide = data.naturalWidth / data.naturalHeight;\r\n data.imageRatioTall = data.naturalHeight / data.naturalWidth;\r\n\r\n // Initial sizing to fit screen\r\n if (data.naturalHeight > data.frameHeight - data.marginReal || data.naturalWidth > data.frameWidth - data.marginReal) {\r\n data = _setMinimums(data);\r\n data.targetImageHeight = data.minHeight;\r\n data.targetImageWidth = data.minWidth;\r\n }\r\n\r\n // SET INITIAL POSITIONS\r\n data.positionerLeft = data.targetPositionerLeft = data.centerLeft;\r\n data.positionerTop = data.targetPositionerTop = data.centerTop;\r\n\r\n data.imageLeft = data.targetImageLeft = Math.round(-data.targetImageWidth / 2);\r\n data.imageTop = data.targetImageTop = Math.round(-data.targetImageHeight / 2);\r\n data.imageHeight = data.targetImageHeight;\r\n data.imageWidth = data.targetImageWidth;\r\n\r\n if (transformSupported) {\r\n var scaleX = data.imageWidth / data.naturalWidth,\r\n scaleY = data.imageHeight / data.naturalHeight;\r\n\r\n data.$positioner.css(_prefix('transform', 'translate3d(' + data.positionerLeft + 'px, ' + data.positionerTop + 'px, 0)'));\r\n data.$holder.css(_prefix('transform', 'translate3d(-50%, -50%, 0) scale(' + scaleX + ',' + scaleY + ')'));\r\n } else {\r\n data.$positioner.css({\r\n left: data.positionerLeft,\r\n top: data.positionerTop\r\n });\r\n data.$holder.css({\r\n left: data.imageLeft,\r\n top: data.imageTop,\r\n height: data.imageHeight,\r\n width: data.imageWidth\r\n });\r\n }\r\n\r\n data.$holder.append(data.$image);\r\n\r\n if (data.tiled) {\r\n data.$holder.css({\r\n background: 'url(' + data.tiledThumbnail + ') no-repeat left top',\r\n backgroundSize: '100% 100%'\r\n });\r\n\r\n data.tileHeightPercentage = 100 / data.tiledRows;\r\n data.tileWidthPercentage = 100 / data.tiledColumns;\r\n\r\n data.$tiles.css({\r\n height: data.tileHeightPercentage + '%',\r\n width: data.tileWidthPercentage + '%'\r\n });\r\n\r\n data.$tiles.each(function(i, tile) {\r\n var $tile = $(tile),\r\n position = $tile.data('zoomer-tile').split('-');\r\n\r\n $tile.css({\r\n left: data.tileWidthPercentage * parseInt(position[1], 10) + '%',\r\n top: data.tileHeightPercentage * parseInt(position[0], 10) + '%'\r\n });\r\n });\r\n }\r\n\r\n data.$holder.animate({ opacity: 1 }, 300);\r\n data.loading = false;\r\n\r\n // Start preloading\r\n if (data.gallery) {\r\n _preloadGallery(data);\r\n }\r\n\r\n $('#modalZoomLoading').addClass('d-none');\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _preloadGallery\r\n * @description Preloads previous and next images in gallery for faster rendering\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _preloadGallery(data) {\r\n if (data.index > 0) {\r\n $('![\"'](\"')
');\r\n }\r\n if (data.index < data.images.length - 1) {\r\n $('');\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _setMinimums\r\n * @description Sets minimum dimensions\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _setMinimums(data) {\r\n if (data.naturalHeight > data.naturalWidth) {\r\n // Tall\r\n data.aspect = 'tall';\r\n\r\n data.minHeight = Math.round(data.frameHeight - data.marginReal);\r\n data.minWidth = Math.round(data.minHeight / data.imageRatioTall);\r\n\r\n if (data.minWidth > data.frameWidth - data.marginReal) {\r\n data.minWidth = Math.round(data.frameWidth - data.marginReal);\r\n data.minHeight = Math.round(data.minWidth / data.imageRatioWide);\r\n }\r\n } else {\r\n // Wide\r\n data.aspect = 'wide';\r\n\r\n data.minWidth = Math.round(data.frameWidth - data.marginReal);\r\n data.minHeight = Math.round(data.minWidth / data.imageRatioWide);\r\n\r\n if (data.minHeight > data.frameHeight - data.marginReal) {\r\n data.minHeight = Math.round(data.frameHeight - data.marginReal);\r\n data.minWidth = Math.round(data.minHeight / data.imageRatioTall);\r\n }\r\n }\r\n\r\n return data;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _render\r\n * @description Main animation loop\r\n */\r\n function _render() {\r\n for (var i = 0, count = $instances.length; i < count; i++) {\r\n var data = $instances.eq(i).data('zoomer');\r\n\r\n if (typeof data === 'object') {\r\n // Update image and position values\r\n data = _updateValues(data);\r\n data.lastAction = data.action;\r\n\r\n // Update DOM\r\n if (transformSupported) {\r\n var scaleX = data.imageWidth / data.naturalWidth,\r\n scaleY = data.imageHeight / data.naturalHeight;\r\n\r\n data.$positioner.css(_prefix('transform', 'translate3d(' + data.positionerLeft + 'px, ' + data.positionerTop + 'px, 0)'));\r\n data.$holder.css(_prefix('transform', 'translate3d(-50%, -50%, 0) scale(' + scaleX + ',' + scaleY + ')'));\r\n } else {\r\n data.$positioner.css({\r\n left: data.positionerLeft,\r\n top: data.positionerTop\r\n });\r\n data.$holder.css({\r\n left: data.imageLeft,\r\n top: data.imageTop,\r\n width: data.imageWidth,\r\n height: data.imageHeight\r\n });\r\n }\r\n\r\n // Run callback function\r\n if (data.callback) {\r\n data.callback.apply(data.$zoomer, [(data.imageWidth - data.minWidth) / (data.maxWidth - data.minWidth)]);\r\n }\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _updateValues\r\n * @description Updates current image values\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _updateValues(data) {\r\n // Update values based on current action\r\n if (data.action === 'zoom_in' || data.action === 'zoom_out') {\r\n // Calculate change\r\n data.keyDownTime += data.increment;\r\n var delta = (data.action === 'zoom_out' ? -1 : 1) * Math.round(data.imageWidth * data.keyDownTime - data.imageWidth);\r\n\r\n if (data.aspect === 'tall') {\r\n data.targetImageHeight += delta;\r\n data.targetImageWidth = Math.round(data.targetImageHeight / data.imageRatioTall);\r\n } else {\r\n data.targetImageWidth += delta;\r\n data.targetImageHeight = Math.round(data.targetImageWidth / data.imageRatioWide);\r\n }\r\n }\r\n\r\n // Check Max and Min image values; recenter if too small\r\n if (data.aspect === 'tall') {\r\n if (data.targetImageHeight < data.minHeight) {\r\n data.targetImageHeight = data.minHeight;\r\n data.targetImageWidth = Math.round(data.targetImageHeight / data.imageRatioTall);\r\n } else if (data.targetImageHeight > data.maxHeight) {\r\n data.targetImageHeight = data.maxHeight;\r\n data.targetImageWidth = Math.round(data.targetImageHeight / data.imageRatioTall);\r\n }\r\n } else {\r\n if (data.targetImageWidth < data.minWidth) {\r\n data.targetImageWidth = data.minWidth;\r\n data.targetImageHeight = Math.round(data.targetImageWidth / data.imageRatioWide);\r\n } else if (data.targetImageWidth > data.maxWidth) {\r\n data.targetImageWidth = data.maxWidth;\r\n data.targetImageHeight = Math.round(data.targetImageWidth / data.imageRatioWide);\r\n }\r\n }\r\n\r\n // Calculate new dimensions\r\n data.targetImageLeft = Math.round(-data.targetImageWidth * 0.5);\r\n data.targetImageTop = Math.round(-data.targetImageHeight * 0.5);\r\n\r\n if (data.action === 'drag' || data.action === 'pinch') {\r\n data.imageWidth = data.targetImageWidth;\r\n data.imageHeight = data.targetImageHeight;\r\n data.imageLeft = data.targetImageLeft;\r\n data.imageTop = data.targetImageTop;\r\n } else {\r\n data.imageWidth += Math.round((data.targetImageWidth - data.imageWidth) * data.enertia);\r\n data.imageHeight += Math.round((data.targetImageHeight - data.imageHeight) * data.enertia);\r\n data.imageLeft += Math.round((data.targetImageLeft - data.imageLeft) * data.enertia);\r\n data.imageTop += Math.round((data.targetImageTop - data.imageTop) * data.enertia);\r\n }\r\n\r\n // Check bounds of current position and if big enough to drag\r\n // Set bounds\r\n data.boundsLeft = Math.round(data.frameWidth - data.targetImageWidth * 0.5 - data.marginMax);\r\n data.boundsRight = Math.round(data.targetImageWidth * 0.5 + data.marginMax);\r\n data.boundsTop = Math.round(data.frameHeight - data.targetImageHeight * 0.5 - data.marginMax);\r\n data.boundsBottom = Math.round(data.targetImageHeight * 0.5 + data.marginMax);\r\n\r\n // Check dragging bounds\r\n if (data.targetPositionerLeft < data.boundsLeft) {\r\n data.targetPositionerLeft = data.boundsLeft;\r\n }\r\n if (data.targetPositionerLeft > data.boundsRight) {\r\n data.targetPositionerLeft = data.boundsRight;\r\n }\r\n if (data.targetPositionerTop < data.boundsTop) {\r\n data.targetPositionerTop = data.boundsTop;\r\n }\r\n if (data.targetPositionerTop > data.boundsBottom) {\r\n data.targetPositionerTop = data.boundsBottom;\r\n }\r\n\r\n // Zoom to visible area of image\r\n if (data.zoomPositionTop > 0 && data.zoomPositionLeft > 0) {\r\n data.targetPositionerLeft = data.centerLeft - data.targetImageLeft - data.targetImageWidth * data.zoomPositionLeft;\r\n data.targetPositionerTop = data.centerTop - data.targetImageTop - data.targetImageHeight * data.zoomPositionTop;\r\n }\r\n\r\n if (data.action !== 'pinch') {\r\n // Recenter when small enough\r\n if (data.targetImageWidth < data.frameWidth) {\r\n data.targetPositionerLeft = data.centerLeft;\r\n }\r\n if (data.targetImageHeight < data.frameHeight) {\r\n data.targetPositionerTop = data.centerTop;\r\n }\r\n }\r\n\r\n // Calculate new positions\r\n if (data.action === 'drag' || data.action === 'pinch') {\r\n data.positionerLeft = data.targetPositionerLeft;\r\n data.positionerTop = data.targetPositionerTop;\r\n } else {\r\n data.positionerLeft += Math.round((data.targetPositionerLeft - data.positionerLeft) * data.enertia);\r\n data.positionerTop += Math.round((data.targetPositionerTop - data.positionerTop) * data.enertia);\r\n }\r\n\r\n data.oldImageWidth = data.imageWidth;\r\n data.oldImageHeight = data.imageHeight;\r\n\r\n return data;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _nextImage\r\n * @description Handles next button click\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _nextImage(e) {\r\n var data = e.data;\r\n\r\n if (!data.loading && data.index + 1 < data.images.length) {\r\n data.index++;\r\n _load.apply(data.$target, [data]);\r\n } else {\r\n data.index = 0;\r\n _load.apply(data.$target, [data]);\r\n }\r\n\r\n // Run callback function\r\n if (data.zoomNextPrevCallback) {\r\n data.zoomNextPrevCallback.apply(data.$zoomer, [data]);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _previousImage\r\n * @description Handles previous button click\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _previousImage(e) {\r\n var data = e.data;\r\n\r\n if (!data.loading && data.index - 1 >= 0) {\r\n data.index--;\r\n _load.apply(data.$target, [data]);\r\n } else {\r\n data.index = data.images.length - 1;\r\n _load.apply(data.$target, [data]);\r\n }\r\n\r\n // Run callback function\r\n if (data.zoomNextPrevCallback) {\r\n data.zoomNextPrevCallback.apply(data.$zoomer, [data]);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _zoomIn\r\n * @description Handles zoom in button click\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _zoomIn(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n var data = e.data;\r\n\r\n data = _setZoomPosition(data);\r\n data.keyDownTime = 1;\r\n data.action = 'zoom_in';\r\n // Run callback function\r\n if (data.zoomInCallback) {\r\n data.zoomInCallback.apply(data.$zoomer, [data]);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _zoomOut\r\n * @description Handles zoom out button click\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _zoomOut(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n var data = e.data;\r\n\r\n data = _setZoomPosition(data);\r\n data.keyDownTime = 1;\r\n data.action = 'zoom_out';\r\n // Run callback function\r\n if (data.zoomOutCallback) {\r\n data.zoomOutCallback.apply(data.$zoomer, [data]);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _clearZoom\r\n * @description Clears current zoom action\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _clearZoom(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n var data = e.data;\r\n data = _clearZoomPosition(data);\r\n\r\n data.keyDownTime = 0;\r\n data.action = '';\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _setZoomPosition\r\n * @description Sets zoom position\r\n * @param data [object] \"Instance Data\"\r\n * @param left [number] \"Left position\"\r\n * @param top [number] \"Top position\"\r\n */\r\n function _setZoomPosition(data, left, top) {\r\n left = left || data.imageWidth * 0.5;\r\n top = top || data.imageHeight * 0.5;\r\n\r\n data.zoomPositionLeft = (left - (data.positionerLeft - data.centerLeft)) / data.imageWidth;\r\n data.zoomPositionTop = (top - (data.positionerTop - data.centerTop)) / data.imageHeight;\r\n\r\n return data;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _clearZoomPosition\r\n * @description Clears zoom position\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _clearZoomPosition(data) {\r\n data.zoomPositionTop = 0;\r\n data.zoomPositionLeft = 0;\r\n\r\n return data;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _dragStart\r\n * @description Handles drag start\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _dragStart(e) {\r\n if (e.preventDefault) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n var data = e.data;\r\n data.action = 'drag';\r\n\r\n data.mouseX = e.pageX;\r\n data.mouseY = e.pageY;\r\n\r\n data.targetPositionerLeft = data.positionerLeft;\r\n data.targetPositionerTop = data.positionerTop;\r\n\r\n $window.on('mousemove.zoomer', data, _onDrag).on('mouseup.zoomer', data, _dragStop);\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onDrag\r\n * @description Handles dragging\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _onDrag(e) {\r\n if (e.preventDefault) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n var data = e.data;\r\n\r\n if (e.pageX && e.pageY) {\r\n data.targetPositionerLeft -= Math.round(data.mouseX - e.pageX);\r\n data.targetPositionerTop -= Math.round(data.mouseY - e.pageY);\r\n\r\n data.mouseX = e.pageX;\r\n data.mouseY = e.pageY;\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _dragStop\r\n * @description Handles drag end\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _dragStop(e) {\r\n if (e.preventDefault) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n\r\n var data = e.data;\r\n data.action = '';\r\n\r\n $window.off('mousemove.zoomer mouseup.zoomer');\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onTouch\r\n * @description Delegates touch event\r\n * @param e [object] \"Event Data\"\r\n */\r\n function _onTouch(e) {\r\n if ($(e.target).parent('.zoomer-controls').length > 0) {\r\n return;\r\n }\r\n\r\n // Stop ms panning and zooming\r\n if (e.preventManipulation) {\r\n e.preventManipulation();\r\n }\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n var data = e.data,\r\n oe = e.originalEvent;\r\n\r\n if (oe.type.match(/(up|end)$/i)) {\r\n _onTouchEnd(data, oe);\r\n return;\r\n }\r\n\r\n if (oe.pointerId) {\r\n // Normalize MS pointer events back to standard touches\r\n var activeTouch = false;\r\n for (var i in data.touches) {\r\n if (data.touches[i].identifier === oe.pointerId) {\r\n activeTouch = true;\r\n data.touches[i].pageX = oe.clientX;\r\n data.touches[i].pageY = oe.clientY;\r\n }\r\n }\r\n if (!activeTouch) {\r\n data.touches.push({\r\n identifier: oe.pointerId,\r\n pageX: oe.clientX,\r\n pageY: oe.clientY\r\n });\r\n }\r\n } else {\r\n // Alias normal touches\r\n data.touches = oe.touches;\r\n }\r\n\r\n // Delegate touch actions\r\n if (oe.type.match(/(down|start)$/i)) {\r\n _onTouchStart(data);\r\n } else if (oe.type.match(/move$/i)) {\r\n _onTouchMove(data);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onTouchStart\r\n * @description Handles touch start\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _onTouchStart(data) {\r\n // Touch events\r\n if (!data.touchEventsBound) {\r\n data.touchEventsBound = true;\r\n $window.on('touchmove.zoomer MSPointerMove.zoomer', data, _onTouch).on('touchend.zoomer MSPointerUp.zoomer', data, _onTouch);\r\n }\r\n\r\n data.zoomPercentage = 1;\r\n\r\n if (data.touches.length >= 2) {\r\n data.offset = data.$zoomer.offset();\r\n\r\n // Double touch - zoom\r\n data.pinchStartX0 = data.touches[0].pageX - data.offset.left;\r\n data.pinchStartY0 = data.touches[0].pageY - data.offset.top;\r\n data.pinchStartX1 = data.touches[1].pageX - data.offset.left;\r\n data.pinchStartY1 = data.touches[1].pageY - data.offset.top;\r\n\r\n data.pinchStartX = (data.pinchStartX0 + data.pinchStartX1) / 2.0;\r\n data.pinchStartY = (data.pinchStartY0 + data.pinchStartY1) / 2.0;\r\n\r\n data.imageWidthStart = data.imageWidth;\r\n data.imageHeightStart = data.imageHeight;\r\n\r\n _setZoomPosition(data);\r\n\r\n data.pinchDeltaStart = Math.sqrt(Math.pow(data.pinchStartX1 - data.pinchStartX0, 2) + Math.pow(data.pinchStartY1 - data.pinchStartY0, 2));\r\n }\r\n\r\n data.mouseX = data.touches[0].pageX;\r\n data.mouseY = data.touches[0].pageY;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onTouchMove\r\n * @description Handles touch move\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _onTouchMove(data) {\r\n if (data.touches.length === 1) {\r\n data.action = 'drag';\r\n\r\n data.targetPositionerLeft -= data.mouseX - data.touches[0].pageX;\r\n data.targetPositionerTop -= data.mouseY - data.touches[0].pageY;\r\n } else if (data.touches.length >= 2) {\r\n data.action = 'pinch';\r\n\r\n data.pinchEndX0 = data.touches[0].pageX - data.offset.left;\r\n data.pinchEndY0 = data.touches[0].pageY - data.offset.top;\r\n data.pinchEndX1 = data.touches[1].pageX - data.offset.left;\r\n data.pinchEndY1 = data.touches[1].pageY - data.offset.top;\r\n\r\n // Double touch - zoom\r\n // Only if we've actually move our touches\r\n if (\r\n data.pinchEndX0 !== data.lastPinchEndX0 ||\r\n data.pinchEndY0 !== data.lastPinchEndY0 ||\r\n data.pinchEndX1 !== data.lastPinchEndX1 ||\r\n data.pinchEndY1 !== data.lastPinchEndY1\r\n ) {\r\n data.pinchDeltaEnd = Math.sqrt(Math.pow(data.pinchEndX1 - data.pinchEndX0, 2) + Math.pow(data.pinchEndY1 - data.pinchEndY0, 2));\r\n data.zoomPercentage = data.pinchDeltaEnd / data.pinchDeltaStart;\r\n\r\n data.targetImageWidth = Math.round(data.imageWidthStart * data.zoomPercentage);\r\n data.targetImageHeight = Math.round(data.imageHeightStart * data.zoomPercentage);\r\n\r\n data.pinchEndX = (data.pinchEndX0 + data.pinchEndX1) / 2.0;\r\n data.pinchEndY = (data.pinchEndY0 + data.pinchEndY1) / 2.0;\r\n\r\n data.lastPinchEndX0 = data.pinchEndX0;\r\n data.lastPinchEndY0 = data.pinchEndY0;\r\n data.lastPinchEndX1 = data.pinchEndX1;\r\n data.lastPinchEndY1 = data.pinchEndY1;\r\n }\r\n }\r\n\r\n data.mouseX = data.touches[0].pageX;\r\n data.mouseY = data.touches[0].pageY;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onTouchEnd\r\n * @description Handles touch end\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _onTouchEnd(data, oe) {\r\n data.action = '';\r\n\r\n data.lastPinchEndX0 = data.pinchEndX0 = data.pinchStartX0 = 0;\r\n data.lastPinchEndY0 = data.pinchEndY0 = data.pinchStartY0 = 0;\r\n data.lastPinchEndX1 = data.pinchEndX1 = data.pinchStartX1 = 0;\r\n data.lastPinchEndY1 = data.pinchEndY1 = data.pinchStartY1 = 0;\r\n\r\n data.pinchStartX = data.pinchEndX = 0;\r\n data.pinchStartY = data.pinchEndX = 0;\r\n\r\n _clearZoomPosition(data);\r\n\r\n if (oe.pointerId) {\r\n for (var i in data.touches) {\r\n if (data.touches[i].identifier === oe.pointerId) {\r\n data.touches.splice(i, 1);\r\n }\r\n }\r\n }\r\n\r\n // Clear touch events\r\n /* if (data.touches.length <= 1) { */\r\n $window.off('.zoomer');\r\n data.touchEventsBound = false;\r\n /*\r\n\t\t} else {\r\n\t\t\tdata.mouseX = data.touches[0].pageX;\r\n\t\t\tdata.mouseY = data.touches[0].pageY;\r\n\t\t}\r\n\t\t*/\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _normalizeSource\r\n * @description Normalizes source string or object\r\n * @param data [object] \"Instance Data\"\r\n */\r\n function _normalizeSource(data) {\r\n data.tiled = false;\r\n data.gallery = false;\r\n\r\n if (typeof data.source === 'string') {\r\n data.images = [data.source];\r\n } else {\r\n if (typeof data.source[0] === 'string') {\r\n data.images = data.source;\r\n if (data.images.length > 1) {\r\n data.gallery = true;\r\n }\r\n } else {\r\n data.tiledThumbnail = data.source.thumbnail;\r\n data.images = [data.source.tiles];\r\n data.tiled = true;\r\n }\r\n }\r\n\r\n return data;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _startAnimation\r\n * @description Starts main animation loop\r\n */\r\n function _startAnimation() {\r\n if (!animating) {\r\n animating = true;\r\n _onAnimate();\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _clearAnimation\r\n * @description End main animation loop\r\n */\r\n function _clearAnimation() {\r\n animating = false;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _onAnimate\r\n * @description Handles RAF\r\n */\r\n function _onAnimate() {\r\n if (animating) {\r\n window.requestAnimationFrame(_onAnimate);\r\n _render();\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _prefix\r\n * @description Builds vendor-prefixed styles\r\n * @param property [string] \"Property to prefix\"\r\n * @param value [string] \"Property value\"\r\n * @return [string] \"Vendor-prefixed style\"\r\n */\r\n function _prefix(property, value) {\r\n var r = {};\r\n\r\n r['-webkit-' + property] = value;\r\n r['-moz-' + property] = value;\r\n r['-ms-' + property] = value;\r\n r['-o-' + property] = value;\r\n r[property] = value;\r\n\r\n return r;\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _getTransform3DSupport\r\n * @description Determines if transforms are support\r\n * @return [boolean] \"True if transforms supported\"\r\n */\r\n function _getTransform3DSupport() {\r\n /* http://stackoverflow.com/questions/11628390/how-to-detect-css-translate3d-without-the-webkit-context */\r\n /*\r\n\t\tvar prop = \"transform\",\r\n\t\t\tval = \"translate3d(0px, 0px, 0px)\",\r\n\t\t\ttest = /translate3d\\(0px, 0px, 0px\\)/g,\r\n\t\t\t$div = $(\"
';\r\n html += '
';\r\n\r\n data.$zoomer = $(html);\r\n data.$target.addClass('zoomer-element').html(data.$zoomer);\r\n\r\n if (data.controls.zoomIn || data.controls.zoomOut || data.controls.next || data.controls.previous) {\r\n data.controls.$zoomIn = $(data.controls.zoomIn, $targetParent);\r\n data.controls.$zoomOut = $(data.controls.zoomOut, $targetParent);\r\n data.controls.$next = $(data.controls.next, $targetParent);\r\n data.controls.$previous = $(data.controls.previous, $targetParent);\r\n } else {\r\n html = '';\r\n html += '
';\r\n html += '';\r\n html += '
';\r\n html += '';\r\n html += '‹';\r\n html += '-';\r\n html += '+';\r\n html += '›';\r\n html += '
';\r\n\r\n data.$zoomer.append(html);\r\n\r\n data.controls.$default = data.$zoomer.find('.zoomer-controls');\r\n data.controls.$zoomIn = data.$zoomer.find('.zoomer-zoom-in');\r\n data.controls.$zoomOut = data.$zoomer.find('.zoomer-zoom-out');\r\n data.controls.$next = data.$zoomer.find('.zoomer-next');\r\n data.controls.$previous = data.$zoomer.find('.zoomer-previous');\r\n }\r\n\r\n // Cache jquery objects\r\n data.$positioner = data.$zoomer.find('.zoomer-positioner');\r\n data.$holder = data.$zoomer.find('.zoomer-holder');\r\n\r\n // Bind events\r\n data.controls.$zoomIn.on('touchstart.zoomer mousedown.zoomer', data, _zoomIn).on('touchend.zoomer mouseup.zoomer', data, _clearZoom);\r\n data.controls.$zoomOut.on('touchstart.zoomer mousedown.zoomer', data, _zoomOut).on('touchend.zoomer mouseup.zoomer', data, _clearZoom);\r\n data.controls.$next.on('click.zoomer', data, _nextImage);\r\n data.controls.$previous.on('click.zoomer', data, _previousImage);\r\n data.$zoomer.on('mousedown.zoomer', data, _dragStart).on('touchstart.zoomer MSPointerDown.zoomer', ':not(.zoomer-controls)', data, _onTouch);\r\n\r\n // Kick it off\r\n data.$target.data('zoomer', data);\r\n pub.resize.apply(data.$target);\r\n\r\n if (data.images.length > 0) {\r\n _load.apply(data.$target, [data]);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _load\r\n * @description Delegates loading action\r\n * @param data [object] \"Instance data\"\r\n */\r\n function _load(data) {\r\n $('#modalZoomLoading').removeClass('d-none');\r\n\r\n //display the initial image after 1000ms\r\n setTimeout(function() {\r\n $('.zoomer-positioner').removeClass('d-none');\r\n }, 1000);\r\n\r\n // If gallery\r\n if (data.gallery) {\r\n data.$zoomer.addClass('zoomer-gallery');\r\n } else {\r\n data.$zoomer.removeClass('zoomer-gallery');\r\n }\r\n\r\n if (typeof data.$image !== 'undefined') {\r\n data.$holder.animate({ opacity: 0 }, 300, function() {\r\n pub.unload.apply(data.$target);\r\n _loadImage.apply(data.$target, [data, data.images[data.index]]);\r\n });\r\n } else {\r\n _loadImage.apply(data.$target, [data, data.images[data.index]]);\r\n }\r\n }\r\n\r\n /**\r\n * @method private\r\n * @name _loadImage\r\n * @description Handles loading an image or set of tiles\r\n * @param data [object] \"Instance data\"\r\n * @param source [string | object] \"Source URL or object\"\r\n */\r\n function _loadImage(data, source) {\r\n data.loading = true;\r\n\r\n if (data.tiled) {\r\n data.tilesTotal = 0;\r\n data.tilesLoaded = 0;\r\n var html = '';\r\n for (var i in data.images[0]) {\r\n if (data.images[0].hasOwnProperty(i)) {\r\n for (var j in data.images[0][i]) {\r\n if (data.images[0][i].hasOwnProperty(j)) {\r\n html +=\r\n '';\r\n data.tilesTotal++;\r\n }\r\n }\r\n }\r\n }\r\n html += '
';\r\n\r\n data.$image = $(html);\r\n data.$tiles = data.$image.find('img');\r\n\r\n data.$tiles.each(function(i, img) {\r\n var $img = $(img);\r\n $img.one('load', data, _onTileLoad);\r\n\r\n if ($img[0].complete) {\r\n $img.trigger('load');\r\n }\r\n });\r\n } else {\r\n // Cache current image\r\n data.$image = $('\");\r\n\r\n\t\t$div.css(_prefix(prop, val));\r\n\t\tvar check = $div[0].style.cssText.match(test);\r\n\r\n\t\treturn (check !== null && check.length > 0);\r\n\t\t*/\r\n\r\n /* http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support/12621264#12621264 */\r\n var el = document.createElement('p'),\r\n has3d,\r\n transforms = {\r\n webkitTransform: '-webkit-transform',\r\n OTransform: '-o-transform',\r\n msTransform: '-ms-transform',\r\n MozTransform: '-moz-transform',\r\n transform: 'transform'\r\n };\r\n\r\n document.body.insertBefore(el, null);\r\n for (var t in transforms) {\r\n if (el.style[t] !== undefined) {\r\n el.style[t] = 'translate3d(1px,1px,1px)';\r\n has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);\r\n }\r\n }\r\n document.body.removeChild(el);\r\n\r\n return has3d !== undefined && has3d.length > 0 && has3d !== 'none';\r\n }\r\n\r\n $.fn.zoomer = function(method) {\r\n if (pub[method]) {\r\n return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));\r\n } else if (typeof method === 'object' || !method) {\r\n return _init.apply(this, arguments);\r\n }\r\n return this;\r\n };\r\n\r\n $.zoomer = function(method) {\r\n if (method === 'defaults') {\r\n pub.defaults.apply(this, Array.prototype.slice.call(arguments, 1));\r\n }\r\n };\r\n})(jQuery, window);\r\n","exports.isMobile = function () {\r\n var mobileAgentHash = ['mobile', 'tablet', 'phone', 'ipad', 'ipod', 'android', 'blackberry', 'windows ce', 'opera mini', 'palm'];\r\n var idx = 0;\r\n var isMobile = false;\r\n var userAgent = navigator.userAgent.toLowerCase();\r\n\r\n while (mobileAgentHash[idx] && !isMobile) {\r\n isMobile = userAgent.indexOf(mobileAgentHash[idx]) >= 0;\r\n idx++;\r\n }\r\n return isMobile;\r\n};\r\n\r\nexports.isSafari = function () {\r\n return navigator.userAgent.match(/Version\\/[\\d\\.]+.*Safari/);\r\n};\r\n\r\nexports.iosVersion = function () {\r\n if (/iP(hone|od|ad)/.test(navigator.platform)) {\r\n var v = (navigator.appVersion).match(/OS (\\d+)_(\\d+)_?(\\d+)?/);\r\n return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];\r\n }\r\n return null;\r\n};\r\n\r\nexports.getCookie = function (cookiename) {\r\n if (document.cookie.length > 0) {\r\n startC = document.cookie.indexOf(cookiename + '=');\r\n if (startC != -1) {\r\n startC += cookiename.length + 1;\r\n endC = document.cookie.indexOf(';', startC);\r\n if (endC == -1) endC = document.cookie.length;\r\n return decodeURI(document.cookie.substring(startC, endC));\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nexports.setCookie = function (cookieName, cookieValue, nDays) {\r\n var today = new Date();\r\n var expire = new Date();\r\n if (nDays == null || nDays == 0) nDays = 1;\r\n expire.setTime(today.getTime() + 3600000 * 24 * nDays);\r\n document.cookie = cookieName + '=' + escape(cookieValue) + '; expires=' + expire.toGMTString() + '; path=/';\r\n};\r\n\r\nexports.isEmpty = function (val) {\r\n // remove whitespaces\r\n if (typeof val === 'string') {\r\n val = $.trim(val);\r\n }\r\n\r\n return !val || val.length === 0;\r\n};\r\n\r\nexports.removeQueryParam = function (url) {\r\n var urlparts = String(url).split('?');\r\n if (urlparts.length >= 2) {\r\n return urlparts[0];\r\n }\r\n return url;\r\n};\r\n\r\nexports.getUrlQueryParameterValue = function (queryParamName, url) {\r\n var urlQueryVariables = url.split('&');\r\n var currentParameter;\r\n\r\n for (var i = 0; i < urlQueryVariables.length; i++) {\r\n currentParameter = urlQueryVariables[i].split('=');\r\n\r\n if (currentParameter[0] === queryParamName) {\r\n if (currentParameter[1] === undefined) {\r\n return true;\r\n }\r\n var decodedString = decodeURIComponent(currentParameter[1]);\r\n if (decodedString.split('|').length > 0) {\r\n return decodedString.split('|').join('+').replace(/\\s/g, '-').toLowerCase();\r\n }\r\n return decodedString.replace(/\\s/g, '-').toLowerCase();\r\n }\r\n }\r\n return false;\r\n};\r\n","/* eslint-env es6*/\r\n/* eslint-disable no-use-before-define */\r\n/* global _etmc */\r\n'use strict';\r\nvar base = require('base/product/base');\r\nvar focusHelper = require('../components/focus');\r\n\r\n/**\r\n * Parses JSON from Ajax call made whenever an attribute value is [de]selected\r\n * @param {Object} response - response from Ajax call\r\n * @param {Object} response.product - Product object\r\n * @param {string} response.product.id - Product ID\r\n * @param {jQuery} $productContainer - DOM element for a given product.\r\n * @param {string} attributeType - the attribute clicked (e.g size, color, quantity)\r\n * @param {Object[]} response.product.variationAttributes - Product attributes\r\n * @param {Object[]} response.product.images - Product images\r\n * @param {boolean} response.product.hasRequiredAttrsSelected - Flag as to whether all required\r\n * attributes have been selected. Used partially to\r\n * determine whether the Add to Cart button can be enabled\r\n */\r\nfunction handleVariantResponse(response, $productContainer, attributeType) {\r\n var isChoiceOfBonusProducts = $productContainer.parents('.choose-bonus-product-dialog').length > 0;\r\n var isVaraint;\r\n var videoObj = null;\r\n\r\n if (response.product.pdpVideoID) {\r\n videoObj = {\r\n pdpVideoID: response.product.pdpVideoID,\r\n pdpVideoLink: response.product.pdpVideoLink\r\n };\r\n }\r\n if (response.product.variationAttributes) {\r\n updateAttrs(response.product.variationAttributes, $productContainer, response.resources);\r\n isVaraint = response.product.productType === 'variant';\r\n if (isChoiceOfBonusProducts && isVaraint) {\r\n $productContainer.parent('.bonus-product-item').data('pid', response.product.id);\r\n\r\n $productContainer.parent('.bonus-product-item').data('ready-to-order', response.product.readyToOrder);\r\n }\r\n }\r\n\r\n if (attributeType === 'color') {\r\n // Update primary images\r\n var productImages = response.product.images;\r\n var primaryImageUrls = productImages.large;\r\n var hiResPrimaryImageUrls = productImages['hi-res'] !== 'undefined' ? productImages['hi-res'] : primaryImageUrls;\r\n createCarousel(primaryImageUrls, $productContainer, hiResPrimaryImageUrls, videoObj);\r\n createThumbnailCarousel(primaryImageUrls, $productContainer, videoObj);\r\n }\r\n\r\n // Update pricing\r\n if (!isChoiceOfBonusProducts) {\r\n var $priceSelector = $('.prices .price', $productContainer).length ? $('.prices .price', $productContainer) : $('.prices .price');\r\n $priceSelector.replaceWith(response.product.price.html);\r\n }\r\n\r\n // Update promotions\r\n $productContainer\r\n .find('.promotions')\r\n .empty()\r\n .html(response.product.promotionsHtml);\r\n\r\n updateAvailability(response, $productContainer);\r\n\r\n if (isChoiceOfBonusProducts) {\r\n var $selectButton = $productContainer.find('.select-bonus-product');\r\n $selectButton.trigger('bonusproduct:updateSelectButton', {\r\n product: response.product,\r\n $productContainer: $productContainer\r\n });\r\n } else {\r\n // Enable \"Add to Cart\" button if all required attributes have been selected\r\n $('button.add-to-cart, button.add-to-cart-global, button.update-cart-product-global')\r\n .trigger('product:updateAddToCart', {\r\n product: response.product,\r\n $productContainer: $productContainer\r\n })\r\n .trigger('product:statusUpdate', response.product);\r\n }\r\n\r\n // Update attributes\r\n $productContainer\r\n .find('.main-attributes')\r\n .empty()\r\n .html(getAttributesHtml(response.product.attributes));\r\n}\r\n\r\n/**\r\n * Retrieve contextual quantity selector\r\n * @param {jquery} $el - DOM container for the relevant quantity\r\n * @return {jquery} - quantity selector DOM container\r\n */\r\nfunction getQuantitySelector($el) {\r\n return $el && $('.set-items').length\r\n ? $($el)\r\n .closest('.product-detail')\r\n .find('.quantity-select')\r\n : $('.quantity-select');\r\n}\r\n\r\n/**\r\n * Retrieve contextual size selector\r\n * @param {jquery} $el - DOM container for the relevant sizes\r\n * @return {jquery} - sizes selector DOM container\r\n */\r\nfunction getSizesSelector($el) {\r\n return $($el)\r\n .closest('.product-detail')\r\n .find('.size-selections');\r\n}\r\n\r\n/**\r\n * Process the attribute values for an attribute that has image swatches\r\n *\r\n * @param {Object} attr - Attribute\r\n * @param {string} attr.id - Attribute ID\r\n * @param {Object[]} attr.values - Array of attribute value objects\r\n * @param {string} attr.values.value - Attribute coded value\r\n * @param {string} attr.values.url - URL to de/select an attribute value of the product\r\n * @param {boolean} attr.values.isSelectable - Flag as to whether an attribute value can be\r\n * selected. If there is no variant that corresponds to a specific combination of attribute\r\n * values, an attribute may be disabled in the Product Detail Page\r\n * @param {jQuery} $productContainer - DOM container for a given product\r\n * @param {Object} msgs - object containing resource messages\r\n */\r\nfunction processSwatchValues(attr, $productContainer, msgs) {\r\n attr.values.forEach(function(attrValue) {\r\n var $attrValue = $productContainer.find('[data-attr=\"' + attr.id + '\"] [data-attr-value=\"' + attrValue.value + '\"]');\r\n var $swatchButton = $attrValue.parent();\r\n\r\n if (attrValue.selected) {\r\n $attrValue.addClass('selected');\r\n $attrValue.siblings('.selected-assistive-text').text(msgs.assistiveSelectedText);\r\n } else {\r\n $attrValue.removeClass('selected');\r\n $attrValue.siblings('.selected-assistive-text').empty();\r\n }\r\n\r\n if (attrValue.url) {\r\n $swatchButton.attr('data-url', attrValue.url);\r\n } else {\r\n $swatchButton.removeAttr('data-url');\r\n }\r\n\r\n // Disable if not selectable\r\n $attrValue.removeClass('selectable unselectable');\r\n\r\n $attrValue.addClass(attrValue.selectable ? 'selectable' : 'unselectable');\r\n });\r\n}\r\n\r\n/**\r\n * Process attribute values associated with an attribute that does not have image swatches\r\n *\r\n * @param {Object} attr - Attribute\r\n * @param {string} attr.id - Attribute ID\r\n * @param {Object[]} attr.values - Array of attribute value objects\r\n * @param {string} attr.values.value - Attribute coded value\r\n * @param {string} attr.values.url - URL to de/select an attribute value of the product\r\n * @param {boolean} attr.values.isSelectable - Flag as to whether an attribute value can be\r\n * selected. If there is no variant that corresponds to a specific combination of attribute\r\n * values, an attribute may be disabled in the Product Detail Page\r\n * @param {jQuery} $productContainer - DOM container for a given product\r\n */\r\nfunction processNonSwatchValues(attr, $productContainer) {\r\n var $attr = '[data-attr=\"' + attr.id + '\"]';\r\n\r\n attr.values.forEach(function(attrValue) {\r\n var $attrValue = $productContainer.find($attr + ' [data-attr-value=\"' + attrValue.value + '\"]');\r\n $attrValue.data('url', attrValue.url).removeAttr('disabled');\r\n\r\n if (!attrValue.selectable && !attrValue.enableBackInStockNotification) {\r\n $attrValue.attr('disabled', true);\r\n }\r\n if (!attrValue.selectable && attrValue.enableBackInStockNotification) {\r\n if ($attrValue.hasClass('size-attribute')) {\r\n $attrValue.addClass('show-backinstock-module');\r\n }\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Dynamically creates Bootstrap carousel from response containing images\r\n * @param {Object[]} imgs - Array of large product images,along with related information\r\n * @param {jQuery} $productContainer - DOM element for a given product\r\n * @param {Array} hiResImags - array of images\r\n * @param {Object} videoObj - object containing product video\r\n */\r\nfunction createCarousel(imgs, $productContainer, hiResImags, videoObj) {\r\n var indexAdjustment = !!videoObj ? 0 : 1;\r\n var carousel = $productContainer.find('.carousel');\r\n $(carousel).carousel('dispose');\r\n var carouselId = $(carousel).attr('id');\r\n $(carousel)\r\n .empty()\r\n .append(\r\n ''\r\n ).appendTo($(carousel).find('.carousel-inner'));\r\n $('').appendTo($(carousel).find('.carousel-indicators'));\r\n if (!i && videoObj) {\r\n $(`
\r\n \r\n \r\n
`).appendTo($(carousel).find('.carousel-inner'));\r\n $('').appendTo($(carousel).find('.carousel-indicators'));\r\n }\r\n }\r\n $($(carousel).find('.carousel-item'))\r\n .first()\r\n .addClass('active');\r\n $($(carousel).find('.carousel-indicators > li'))\r\n .first()\r\n .addClass('active');\r\n if (imgs.length === 1) {\r\n $($(carousel).find('.carousel-indicators, a[class^=\"carousel-control-\"]')).detach();\r\n }\r\n $(carousel).carousel();\r\n $($(carousel).find('.carousel-indicators')).attr('aria-hidden', true);\r\n}\r\n\r\n/**\r\n * Dynamically creates thumbnail carousel from response containing images\r\n * @param {Object[]} imgs - Array of large product images,along with related information\r\n * @param {jQuery} $productContainer - DOM element for a given product\r\n * @param {Object} videoObj - object containing product video\r\n */\r\nfunction createThumbnailCarousel(imgs, $productContainer, videoObj) {\r\n var indexAdjustment = !!videoObj ? 0 : 1;\r\n var thumbnailCarousel = $productContainer.find('.thumbnail-carousel');\r\n\r\n // clear the active styling for the current selected thumbnail\r\n thumbnailCarousel.find('.thumbnail-carousel__item').removeClass('thumbnail-carousel__item--active');\r\n\r\n var template = '- ';\r\n\r\n for (var j = 0; j < imgs.length; j++) {\r\n var index = j ? j + indexAdjustment : j;\r\n template += `
- \r\n \r\n
\r\n \r\n \r\n
`;\r\n }\r\n }\r\n\r\n template += '
' + response.resources.info_selectforstock + '
Please select a lesser quantity to update
' + message + '
' + attribute.label + ': ' + attribute.value + '
';\r\n });\r\n }\r\n });\r\n\r\n return html;\r\n}\r\n\r\n/**\r\n * @typedef UpdatedOptionValue\r\n * @type Object\r\n * @property {string} id - Option value ID for look up\r\n * @property {string} url - Updated option value selection URL\r\n */\r\n\r\n/**\r\n * @typedef OptionSelectionResponse\r\n * @type Object\r\n * @property {string} priceHtml - Updated price HTML code\r\n * @property {Object} options - Updated Options\r\n * @property {string} options.id - Option ID\r\n * @property {UpdatedOptionValue[]} options.values - Option values\r\n */\r\n\r\n/**\r\n * Updates DOM using post-option selection Ajax response\r\n *\r\n * @param {OptionSelectionResponse} optionsHtml - Ajax response optionsHtml from selecting a product option\r\n * @param {jQuery} $productContainer - DOM element for current product\r\n */\r\nfunction updateOptions(optionsHtml, $productContainer) {\r\n // Update options\r\n $productContainer\r\n .find('.product-options')\r\n .empty()\r\n .html(optionsHtml);\r\n}\r\n\r\n/**\r\n * @typespec UpdatedQuantity\r\n * @type Object\r\n * @property {boolean} selected - Whether the quantity has been selected\r\n * @property {string} value - The number of products to purchase\r\n * @property {string} url - Compiled URL that specifies variation attributes, product ID, options,\r\n * etc.\r\n */\r\n\r\n/**\r\n * Updates the quantity DOM elements post Ajax call\r\n * @param {UpdatedQuantity[]} quantities -\r\n * @param {jQuery} $productContainer - DOM container for a given product\r\n */\r\nfunction updateQuantities(quantities, $productContainer) {\r\n if (!($productContainer.parent('.bonus-product-item').length > 0)) {\r\n var optionsHtml = quantities\r\n .map(function(quantity) {\r\n var selected = quantity.selected ? ' selected ' : '';\r\n return '';\r\n })\r\n .join('');\r\n getQuantitySelector($productContainer)\r\n .empty()\r\n .html(optionsHtml);\r\n }\r\n}\r\n\r\n/**\r\n * updates the product view when a product attribute is selected or deselected or when\r\n * changing quantity\r\n * @param {string} selectedValueUrl - the Url for the selected variation value\r\n * @param {jQuery} $productContainer - DOM element for current product\r\n * @param {string} attributeType - the attribute clicked (e.g size, color, quantity)\r\n */\r\nfunction attributeSelect(selectedValueUrl, $productContainer, attributeType) {\r\n if (selectedValueUrl) {\r\n $('body').trigger('product:beforeAttributeSelect', { url: selectedValueUrl, container: $productContainer });\r\n\r\n $.ajax({\r\n url: `${selectedValueUrl}&variationType=${attributeType}`,\r\n method: 'GET',\r\n success: function(data) {\r\n if (data.redirect) {\r\n window.location.href = data.redirect;\r\n return;\r\n }\r\n handleVariantResponse(data, $productContainer, attributeType);\r\n updateOptions(data.product.optionsHtml, $productContainer);\r\n updateQuantities(data.product.quantities, $productContainer);\r\n $('body').trigger('product:afterAttributeSelect', { data: data, container: $productContainer, attributeType });\r\n },\r\n complete: function() {\r\n $.spinner().stop();\r\n }\r\n });\r\n }\r\n}\r\n\r\n/**\r\n * Retrieves url to use when adding a product to the cart\r\n *\r\n * @return {string} - The provided URL to use when adding a product to the cart\r\n */\r\nfunction getAddToCartUrl() {\r\n return $('.add-to-cart-url').val();\r\n}\r\n\r\n/**\r\n * Parses the html for a modal window\r\n * @param {string} html - representing the body and footer of the modal window\r\n *\r\n * @return {Object} - Object with properties body and footer.\r\n */\r\nfunction parseHtml(html) {\r\n var $html = $('').append($.parseHTML(html));\r\n\r\n var body = $html.find('.choice-of-bonus-product');\r\n var footer = $html.find('.modal-footer').children();\r\n\r\n return { body: body, footer: footer };\r\n}\r\n\r\n/**\r\n * Retrieves url to use when adding a product to the cart\r\n *\r\n * @param {Object} data - data object used to fill in dynamic portions of the html\r\n */\r\nfunction chooseBonusProducts(data) {\r\n $('.modal-body')\r\n .spinner()\r\n .start();\r\n\r\n if ($('#chooseBonusProductModal').length !== 0) {\r\n $('#chooseBonusProductModal').remove();\r\n }\r\n var bonusUrl;\r\n if (data.bonusChoiceRuleBased) {\r\n bonusUrl = data.showProductsUrlRuleBased;\r\n } else {\r\n bonusUrl = data.showProductsUrlListBased;\r\n }\r\n\r\n var htmlString =\r\n '' +\r\n '
' +\r\n '' +\r\n '
';\r\n $('body').append(htmlString);\r\n $('.modal-body')\r\n .spinner()\r\n .start();\r\n\r\n $.ajax({\r\n url: bonusUrl,\r\n method: 'GET',\r\n dataType: 'json',\r\n success: function(response) {\r\n var parsedHtml = parseHtml(response.renderedTemplate);\r\n $('#chooseBonusProductModal .modal-body').empty();\r\n $('#chooseBonusProductModal .enter-message').text(response.enterDialogMessage);\r\n $('#chooseBonusProductModal .modal-header .close .sr-only').text(response.closeButtonText);\r\n $('#chooseBonusProductModal .modal-body').html(parsedHtml.body);\r\n $('#chooseBonusProductModal .modal-footer').html(parsedHtml.footer);\r\n $('#chooseBonusProductModal').modal('show');\r\n },\r\n complete: function() {\r\n $.spinner().stop();\r\n }\r\n });\r\n}\r\n\r\n/**\r\n * Updates the Mini-Cart quantity value after the customer has pressed the \"Add to Cart\" button\r\n * @param {string} response - ajax response from clicking the add to cart button\r\n * @param {jQuery} $addToCartBtn = add to cart button clicked\r\n */\r\nfunction handlePostCartAdd(response, $addToCartBtn) {\r\n $('.minicart').trigger('count:update', response);\r\n\r\n var $messageQtyError = $addToCartBtn.closest('.product-detail').find('.message.qty-err');\r\n var $messageNoStock = $addToCartBtn.closest('.product-detail').find('.message.no-stock');\r\n if ($messageQtyError.length || $messageNoStock.length) {\r\n $addToCartBtn.prop('disabled', true);\r\n return;\r\n }\r\n // show add to cart toast\r\n if (response.newBonusDiscountLineItem && Object.keys(response.newBonusDiscountLineItem).length !== 0) {\r\n chooseBonusProducts(response.newBonusDiscountLineItem);\r\n }\r\n}\r\n\r\n/**\r\n * Retrieves the bundle product item ID's for the Controller to replace bundle master product\r\n * items with their selected variants\r\n *\r\n * @return {string[]} - List of selected bundle product item ID's\r\n */\r\nfunction getChildProducts() {\r\n var childProducts = [];\r\n $('.bundle-item').each(function() {\r\n childProducts.push({\r\n pid: $(this)\r\n .find('.product-id')\r\n .text(),\r\n quantity: parseInt(\r\n $(this)\r\n .find('label.quantity')\r\n .data('quantity'),\r\n 10\r\n )\r\n });\r\n });\r\n\r\n return childProducts.length ? JSON.stringify(childProducts) : [];\r\n}\r\n\r\n/**\r\n * Retrieve product options\r\n *\r\n * @param {jQuery} $productContainer - DOM element for current product\r\n * @return {string} - Product options and their selected values\r\n */\r\nfunction getOptions($productContainer) {\r\n var options = $productContainer\r\n .find('.product-option')\r\n .map(function() {\r\n var $elOption = $(this).find('.options-select');\r\n var urlValue = $elOption.val();\r\n var selectedValueId = $elOption.find('option[value=\"' + urlValue + '\"]').data('value-id');\r\n return {\r\n optionId: $(this).data('option-id'),\r\n selectedValueId: selectedValueId\r\n };\r\n })\r\n .toArray();\r\n\r\n return JSON.stringify(options);\r\n}\r\n\r\nmodule.exports = {\r\n attributeSelect: attributeSelect,\r\n methods: {\r\n editBonusProducts: function(data) {\r\n chooseBonusProducts(data);\r\n }\r\n },\r\n\r\n focusChooseBonusProductModal: function() {\r\n $('body').on('shown.bs.modal', '#chooseBonusProductModal', function() {\r\n $('#chooseBonusProductModal')\r\n .siblings()\r\n .attr('aria-hidden', 'true');\r\n $('#chooseBonusProductModal .close').focus();\r\n });\r\n },\r\n\r\n onClosingChooseBonusProductModal: function() {\r\n $('body').on('hidden.bs.modal', '#chooseBonusProductModal', function() {\r\n $('#chooseBonusProductModal')\r\n .siblings()\r\n .attr('aria-hidden', 'false');\r\n });\r\n },\r\n\r\n trapChooseBonusProductModalFocus: function() {\r\n $('body').on('keydown', '#chooseBonusProductModal', function(e) {\r\n var focusParams = {\r\n event: e,\r\n containerSelector: '#chooseBonusProductModal',\r\n firstElementSelector: '.close',\r\n lastElementSelector: '.add-bonus-products'\r\n };\r\n focusHelper.setTabNextFocus(focusParams);\r\n });\r\n },\r\n\r\n colorAttribute: function() {\r\n $(document).on('click', '[data-attr=\"color\"] button', function(e) {\r\n e.preventDefault();\r\n\r\n if (\r\n $(this).attr('disabled') ||\r\n $(this)\r\n .find('.swatch-value')\r\n .hasClass('selected')\r\n ) {\r\n return;\r\n }\r\n var $productContainer = $(this).closest('.set-item');\r\n if (!$productContainer.length) {\r\n $productContainer = $(this).closest('.product-detail');\r\n }\r\n\r\n attributeSelect($(this).attr('data-url'), $productContainer, 'color');\r\n });\r\n },\r\n\r\n selectAttribute: function() {\r\n $(document).on('change', 'select[class*=\"select-\"], .options-select', function(e) {\r\n e.preventDefault();\r\n\r\n var $productContainer = $(this).closest('.set-item');\r\n if (!$productContainer.length) {\r\n $productContainer = $(this).closest('.product-detail');\r\n }\r\n attributeSelect(e.currentTarget.value, $productContainer, 'quantity');\r\n });\r\n },\r\n\r\n availability: function() {\r\n $(document).on('change', '.quantity-select', function(e) {\r\n e.preventDefault();\r\n\r\n var $productContainer = $(this).closest('.product-detail');\r\n if (!$productContainer.length) {\r\n $productContainer = $(this)\r\n .closest('.modal-content')\r\n .find('.product-quickview');\r\n }\r\n\r\n if ($('.bundle-items', $productContainer).length === 0) {\r\n attributeSelect(\r\n $(e.currentTarget)\r\n .find('option:selected')\r\n .data('url'),\r\n $productContainer,\r\n 'quantity'\r\n );\r\n }\r\n });\r\n },\r\n updateProductPromotions: function($el, promotions) {\r\n if ($el.length && promotions.length) {\r\n $el.empty();\r\n\r\n var template = '';\r\n\r\n promotions.forEach(promotion => {\r\n template += `' +\r\n '' +\r\n '' +\r\n '
' +\r\n '${promotion.calloutMsg}
`;\r\n });\r\n $el.html(template);\r\n }\r\n },\r\n addToCart: function() {\r\n $(document).on('click', 'button.add-to-cart, button.add-to-cart-global', function() {\r\n var addToCartUrl;\r\n var pid;\r\n var pidsObj;\r\n var setPids;\r\n var $thisBtnAdd = $(this);\r\n\r\n $('body').trigger('product:beforeAddToCart', this);\r\n\r\n if ($('.set-items').length && $(this).hasClass('add-to-cart-global')) {\r\n var $messageQtyError = $(this)\r\n .closest('.product-detail')\r\n .find('.message.qty-err');\r\n var $messageNoStock = $(this)\r\n .closest('.product-detail')\r\n .find('.message.no-stock');\r\n if ($messageQtyError.length || $messageNoStock.length) {\r\n $.spinner().stop();\r\n $(this).prop('disabled', true);\r\n return;\r\n }\r\n\r\n setPids = [];\r\n\r\n $('.product-detail').each(function() {\r\n if (\r\n !$(this).hasClass('product-set-detail') &&\r\n $(this).find('.size-selections .size-attribute .size-value.selected') &&\r\n $(this).find('.quantity-select').length\r\n ) {\r\n setPids.push({\r\n pid: $(this)\r\n .find('.product-id')\r\n .text(),\r\n qty: $(this)\r\n .find('.quantity-select')\r\n .val(),\r\n options: getOptions($(this))\r\n });\r\n }\r\n });\r\n pidsObj = JSON.stringify(setPids);\r\n }\r\n\r\n pid = base.getPidValue($(this));\r\n\r\n var $productContainer = $(this).closest('.product-detail');\r\n if (!$productContainer.length) {\r\n $productContainer = $(this)\r\n .closest('.quick-view-dialog')\r\n .find('.product-detail');\r\n }\r\n\r\n addToCartUrl = getAddToCartUrl();\r\n\r\n var form = {\r\n pid: pid,\r\n pidsObj: pidsObj,\r\n childProducts: getChildProducts(),\r\n quantity: base.getQuantitySelected($(this))\r\n };\r\n\r\n if (!$('.bundle-item').length) {\r\n form.options = getOptions($productContainer);\r\n }\r\n\r\n $(this).trigger('updateAddToCartFormData', form);\r\n if (addToCartUrl) {\r\n $.ajax({\r\n url: addToCartUrl,\r\n method: 'POST',\r\n data: form,\r\n success: function(data) {\r\n handlePostCartAdd(data, $thisBtnAdd);\r\n data.addedPid = pid;\r\n if (!data.error) {\r\n $('body').trigger('product:afterAddToCart', data);\r\n }\r\n base.miniCartReportingUrl(data.reportingURL);\r\n if (data.sfmcCartInfo && typeof _etmc !== 'undefined') {\r\n _etmc.push(data.sfmcCartInfo);\r\n }\r\n },\r\n complete: function() {\r\n $.spinner().stop();\r\n }\r\n });\r\n }\r\n });\r\n },\r\n selectBonusProduct: base.selectBonusProduct,\r\n removeBonusProduct: base.removeBonusProduct,\r\n enableBonusProductSelection: base.enableBonusProductSelection,\r\n showMoreBonusProducts: base.showMoreBonusProducts,\r\n addBonusProductsToCart: base.addBonusProductsToCart,\r\n getPidValue: base.getPidValue,\r\n getQuantitySelected: base.getQuantitySelected,\r\n miniCartReportingUrl: base.miniCartReportingUrl,\r\n backToTop: function() {\r\n const $el = $('.back-to-top');\r\n\r\n if ($el.length > 0) {\r\n $el.on('click', () => {\r\n $('html, body').animate({ scrollTop: 0 }, 500);\r\n });\r\n }\r\n }\r\n};\r\n","'use strict';\r\n\r\nvar processInclude = require('base/util');\r\nvar customUtil = require('./customUtil');\r\n\r\nvar swiper,\r\n maxRatioOriginal = 0,\r\n zoomInFrameID,\r\n zoomOutFrameID,\r\n previousTimeStamp,\r\n timeoutID, timeoutID2,\r\n transform, origZoomTransform, origImgTransform,\r\n touchMove = false,\r\n isMobile = false;\r\n\r\n/**\r\n * Init the zoom functionality\r\n */\r\nfunction initZoom() {\r\n var imageToOpen = 0;\r\n var imageList = [];\r\n var altList = [];\r\n\r\n $('#modalZoomLoading').removeClass('d-none');\r\n $('#zoomModal .modal-body').addClass('hide');\r\n\r\n $('body').on('click', '.primary-images .carousel-item:not(.pdp-video-container) img', function() {\r\n imageToOpen = $(event.target).data('image') ? $(event.target).data('image') : 0;\r\n var carouselImages = $(this)\r\n .parents('.primary-images')\r\n .find('img');\r\n\r\n $('.zoomer_basic').swiper('destroy');\r\n\r\n $('.zoomer_basic')\r\n .empty()\r\n .removeClass('zoomer-element')\r\n .addClass('swiper-element');\r\n\r\n imageList = [];\r\n altList = [];\r\n $.each(carouselImages, function(index, val) {\r\n imageList.push($(val).attr('data-zoom'));\r\n altList.push($(val).attr('alt'));\r\n });\r\n\r\n var html = `\r\n -\r\n +\r\n
`\r\n\r\n $('#zoomModal').find('.modal-content').prepend(html);\r\n\r\n var zoomerOpt = {\r\n index: imageToOpen,\r\n // increment: 0.01,\r\n // interval: 0.1,\r\n // marginMax: 100, //Left commented for any future changes\r\n imageList: imageList,\r\n altList: altList,\r\n onImageLoad: function(imageRatio, data) {\r\n data.swiper = new Swiper('.swiper', {\r\n // Optional parameters\r\n direction: 'horizontal',\r\n loop: true,\r\n grabCursor: true,\r\n speed: 900,\r\n threshold: 5,\r\n followFinger: false,\r\n preventInteractionOnTransition: true,\r\n centeredSlides: true,\r\n effect: 'slide',\r\n zoom: {\r\n maxRatio: 5,\r\n },\r\n // If we need pagination\r\n pagination: {\r\n el: '.swiper-pagination',\r\n clickable: true\r\n },\r\n // Navigation arrows\r\n navigation: {\r\n nextEl: '.swiper-button-next',\r\n prevEl: '.swiper-button-prev',\r\n },\r\n on: {\r\n afterInit: function (_swiper) {\r\n swiper = _swiper\r\n maxRatioOriginal = swiper.params.zoom.maxRatio;\r\n initZoomControls.apply(_swiper);\r\n isMobile = customUtil.isMobile();\r\n },\r\n slideChange: function (swiper) {\r\n },\r\n tap: function () {\r\n swiper.params.zoom.maxRatio = maxRatioOriginal;\r\n },\r\n doubleTap: function (swiper) {\r\n swiper.params.zoom.maxRatio = maxRatioOriginal;\r\n touchMove = false;\r\n },\r\n touchStart: function (swiper, event) {\r\n if(event.touches && event.touches.length > 1){\r\n event.preventDefault();\r\n event.stopPropagation();\r\n touchMove = false;\r\n }\r\n },\r\n touchEnd: function (swiper, event) {\r\n\r\n if(event.touches && event.touches.length > 1){\r\n return;\r\n }\r\n\r\n touchMove = false;\r\n },\r\n touchMove: function (swiper) {\r\n touchMove = true;\r\n },\r\n zoomChange: function (swiper, scale, imageEl, slideEl) {\r\n\r\n var $zoomContainer = $(slideEl).find('.swiper-zoom-container');\r\n\r\n // enable/disable zoom controls\r\n if (scale > swiper.params.zoom.minRatio) {\r\n swiper.allowSlidePrev = swiper.allowSlideNext = false;\r\n $(swiper.navigation.nextEl).css({opacity: 0});\r\n $(swiper.navigation.prevEl).css({opacity: 0});\r\n $(swiper.pagination.el).css({opacity: 0});\r\n } else {\r\n swiper.allowSlidePrev = swiper.allowSlideNext = true;\r\n $(swiper.navigation.nextEl).css({opacity: 1});\r\n $(swiper.navigation.prevEl).css({opacity: 1});\r\n $(swiper.pagination.el).css({opacity: 1});\r\n }\r\n\r\n $('.zoomer-zoom-in').css({opacity: 1});\r\n $('.zoomer-zoom-out').css({opacity: 1});\r\n\r\n if (scale >= maxRatioOriginal) {\r\n stopAnimationInit();\r\n $('.zoomer-zoom-in').css({opacity: 0.5});\r\n $('.zoomer-zoom-out').css({opacity: 1});\r\n zoomOutEnable.apply(swiper);\r\n } else if (scale <= swiper.params.zoom.minRatio) {\r\n stopAnimationInit();\r\n $('.zoomer-zoom-in').css({opacity: 1});\r\n $('.zoomer-zoom-out').css({opacity: 0.5});\r\n zoomInEnable.apply(swiper);\r\n }\r\n\r\n },\r\n slideChange: function (swiper) {\r\n $('#modalZoomLoading').addClass('d-none');\r\n }, slideChangeTransitionEnd: function (swiper) {\r\n if (isMobile) {\r\n window.requestAnimationFrame(function () {\r\n var $slide = $('.swiper-slide-active');\r\n var data = $slide.data('slider-zoomer-data') || $slide.closest('.swiper-element').data('zoomer');\r\n if (data) {\r\n var $clone = $slide.find('.clone');\r\n var cloneInt = setInterval(function () {\r\n if (!$clone.length) {\r\n clearInterval(cloneInt)\r\n } else {\r\n $clone.remove();\r\n }\r\n }, 100);\r\n }\r\n });\r\n }\r\n }, slideChangeTransitionStart: function (swiper) {\r\n if (isMobile) {\r\n data.toggleAnimation = false;\r\n }\r\n\r\n },\r\n slideNextTransitionStart: function (swiper) {\r\n if (isMobile) {\r\n window.requestAnimationFrame(function () {\r\n var $slideActive = $('.swiper-slide-active');\r\n var $slidePrev = $('.swiper-slide-prev, .swiper-slide-duplicate-prev');\r\n\r\n var $holder = $slideActive.find('.holder');\r\n\r\n if (!$holder.siblings('.clone').length) {\r\n var $clone = $holder.clone();\r\n $clone.addClass('clone').removeClass('holder');\r\n $holder.parent().append($clone);\r\n }\r\n\r\n var data = $slideActive.data('slider-zoomer-data') || $slideActive.closest('.swiper-element').data('zoomer');\r\n if (data) {\r\n var scaleX = data.minWidth / data.naturalWidth,\r\n scaleY = data.minHeight / data.naturalHeight,\r\n centerLeft = data.frameWidth / 2,\r\n centerTop = data.frameHeight / 2;\r\n\r\n var $holder = $slideActive.find('.holder');\r\n\r\n $holder.css(_prefix('transform', `translate3d(-50%, -50%, 0) scale(${scaleX}, ${scaleY})`))\r\n $holder.css({\r\n left: centerLeft + 'px',\r\n top: centerTop + 'px',\r\n height: data.naturalHeight,\r\n width: data.naturalWidth\r\n });\r\n\r\n }\r\n\r\n var prevData = $slidePrev.data('slider-zoomer-data') || $slidePrev.closest('.swiper-element').data('zoomer');\r\n if (prevData) {\r\n var prevCenterLeft = prevData.frameWidth / 2,\r\n prevCenterTop = prevData.frameHeight / 2;\r\n\r\n $slidePrev.find('.holder')\r\n .css(_prefix('transform', 'translate3d(-50%, -50%, 0) scale(1, 1)'))\r\n .css({left: prevCenterLeft+ 'px', top: prevCenterTop + 'px' , height: prevData.minHeight, width: prevData.minWidth});\r\n }\r\n });\r\n }\r\n },\r\n slidePrevTransitionStart: function (swiper) {\r\n if (isMobile) {\r\n window.requestAnimationFrame(function () {\r\n var $slideActive = $('.swiper-slide-active');\r\n var $slideNext = $('.swiper-slide-next, .swiper-slide-duplicate-next');\r\n\r\n var $holder = $slideActive.find('.holder');\r\n if (!$holder.siblings('.clone').length) {\r\n var $clone = $holder.clone();\r\n $clone.addClass('clone').removeClass('holder');\r\n $holder.parent().append($clone);\r\n }\r\n\r\n var data = $slideActive.data('slider-zoomer-data') || $slideActive.closest('.swiper-element').data('zoomer');\r\n if (data) {\r\n var scaleX = data.minWidth / data.naturalWidth,\r\n scaleY = data.minHeight / data.naturalHeight,\r\n centerLeft = data.frameWidth / 2,\r\n centerTop = data.frameHeight / 2;\r\n\r\n var $holder = $slideActive.find('.holder');\r\n\r\n $holder.css(_prefix('transform', `translate3d(-50%, -50%, 0) scale(${scaleX}, ${scaleY})`))\r\n $holder.css({\r\n left: centerLeft + 'px',\r\n top: centerTop + 'px',\r\n height: data.naturalHeight,\r\n width: data.naturalWidth\r\n });\r\n }\r\n\r\n var nextData = $slideNext.data('slider-zoomer-data') || $slideNext.closest('.swiper-element').data('zoomer');\r\n if (nextData) {\r\n var nextCenterLeft = nextData.frameWidth / 2,\r\n nextCenterTop = nextData.frameHeight / 2;\r\n\r\n $slideNext.find('.holder')\r\n .css(_prefix('transform', 'translate3d(-50%, -50%, 0) scale(1, 1)'))\r\n .css({\r\n left: nextCenterLeft + 'px',\r\n top: nextCenterTop + 'px',\r\n height: nextData.minHeight,\r\n width: nextData.minWidth\r\n });\r\n }\r\n });\r\n }\r\n }\r\n }\r\n });\r\n },\r\n prependImageCallback: function ($image) {\r\n var _swiper = this;\r\n window.requestAnimationFrame(function () {\r\n _swiper.prependSlide($image);\r\n });\r\n\r\n },\r\n appendImageCallback: function ($image) {\r\n var _swiper = this;\r\n window.requestAnimationFrame(function () {\r\n _swiper.appendSlide($image);\r\n });\r\n }\r\n };\r\n\r\n $('.zoomer_basic').swiper(zoomerOpt);\r\n\r\n $('#zoomModal').modal();\r\n });\r\n\r\n // $('body').on('click', '.pdp-video-container', function() {\r\n // $('.zoomer_basic').swiper('destroy');\r\n // $('.zoomer_basic')\r\n // .empty()\r\n // .removeClass('zoomer-element');\r\n\r\n // var iframeSrc = $(this)\r\n // .find('iframe')\r\n // .attr('src');\r\n // if (iframeSrc != null) {\r\n // var iframediv = '