\r\n function replaceTags(target) {\r\n const $target = $selectedContainer.find(target);\r\n const targetClass = $target.attr('class');\r\n const targetText = $target.html();\r\n const $div = $('
').addClass(targetClass);\r\n\r\n $div.append(targetText);\r\n $target.replaceWith($div);\r\n }\r\n\r\n /**\r\n * Clone item selected function\r\n */\r\n function itemCopy($currentCopy) {\r\n $currentCopy.removeAttr('id aria-selected role')\r\n .toggleClass(itemActive)\r\n .prependTo($selectedContainer)\r\n .find('input')\r\n .remove();\r\n\r\n // clean label copy\r\n $currentCopy.find('label')\r\n .removeAttr('for');\r\n\r\n // replace label with div\r\n replaceTags('label');\r\n }\r\n\r\n\r\n /**\r\n * Init first item\r\n */\r\n function setFirstItem($itemCopy) {\r\n itemCopy($itemCopy);\r\n $itemCopy.addClass(itemActive);\r\n }\r\n\r\n /**\r\n * Init first container\r\n */\r\n function initSelectedContainer() {\r\n const $firstItem = $selectList.find(`.${itemActive}`);\r\n const $itemCopy = $firstItem.clone();\r\n $selectedContainer.prependTo($container);\r\n\r\n // Set width to the selectlist\r\n listWidth();\r\n\r\n // Clone first item in the list\r\n setFirstItem($itemCopy);\r\n\r\n // Checked first item input\r\n $firstItem.attr('aria-selected', true)\r\n .find('input')\r\n .prop('checked', true);\r\n\r\n // Disabled dropdown if only one item\r\n disabledDropdown();\r\n }\r\n\r\n /**\r\n * Events\r\n */\r\n function setActive($currentItem) {\r\n const $currentCopy = $currentItem.not(`.${itemActive}`).clone(true);\r\n\r\n // copy current element\r\n itemCopy($currentCopy);\r\n\r\n // remove last item selected\r\n $currentCopy.next().remove();\r\n\r\n if (!$currentItem.is(`.${itemActive}`)) {\r\n const $unselectedItems = $selectItem.not($currentItem);\r\n\r\n // unselect last item selected\r\n $unselectedItems\r\n .removeClass(itemActive)\r\n .attr('aria-selected', false);\r\n\r\n if ($select.hasClass(qtySelectClass)) {\r\n $unselectedItems.find('input')\r\n .removeAttr(qtySelectOGAttr);\r\n }\r\n\r\n // select current item\r\n $currentItem\r\n .addClass(itemActive)\r\n .attr('aria-selected', true);\r\n\r\n if ($select.hasClass(qtySelectClass)) {\r\n $currentItem.find('input')\r\n .attr(qtySelectOGAttr, 'qty')\r\n .prop('checked', true);\r\n }\r\n\r\n if ($select.hasClass(shadeSelectClass)) {\r\n $selectList.attr({ 'aria-activedescendant': $currentItem.attr('id') });\r\n }\r\n }\r\n }\r\n\r\n function resetSelect() {\r\n if (typeof defaultSelectedId !== 'undefined') {\r\n setActive($(`#${defaultSelectedId}`));\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n function clickHandler() {\r\n const $currentItem = $(this).parent();\r\n\r\n if ($selectItem.length) {\r\n setActive($currentItem);\r\n $container.trigger('select-close');\r\n\r\n defaultSelectedId = $selectList.find(`.${itemActive}`).attr('id');\r\n\r\n if (typeof params.change === 'function') {\r\n params.change.call(this, event);\r\n event.preventDefault();\r\n return false;\r\n }\r\n }\r\n return true;\r\n }\r\n\r\n function keyboardNavTo($item) {\r\n const ui = setActive($item);\r\n\r\n $item.focus();\r\n $item.find('input')\r\n .prop('checked', true);\r\n\r\n if (typeof params.change === 'function') {\r\n params.change.call(this, event, ui);\r\n }\r\n }\r\n\r\n function keydownHandler(event) {\r\n const key = event.which || event.keyCode;\r\n const isOpen = $selectedContainer.is('[aria-expanded]');\r\n const $item = $selectList.find(`.${itemActive}`);\r\n\r\n if (event.altKey) {\r\n // do nothing\r\n return true;\r\n }\r\n\r\n switch (key) {\r\n case KeyCodes.esc: {\r\n if (isOpen) {\r\n resetSelect();\r\n $container.trigger('select-close');\r\n }\r\n event.stopPropagation();\r\n return false;\r\n }\r\n case KeyCodes.enter: {\r\n const $innerLabel = $item.find(`.${labelJSClassName}`);\r\n\r\n if ($innerLabel.is('a[href]')) {\r\n window.document.location = $innerLabel.attr('href');\r\n } else if (isOpen) {\r\n $container.trigger('select-close');\r\n } else {\r\n $container.trigger('select-open');\r\n defaultSelectedId = $selectList.find(`.${itemActive}`).attr('id');\r\n }\r\n event.stopPropagation();\r\n return false;\r\n }\r\n case KeyCodes.up: {\r\n if (isOpen) {\r\n const $prev = $item.prev();\r\n\r\n if ($prev.length) {\r\n keyboardNavTo($prev);\r\n }\r\n }\r\n\r\n event.stopPropagation();\r\n return false;\r\n }\r\n case KeyCodes.down: {\r\n if (isOpen) {\r\n const $next = $item.next();\r\n\r\n if ($next.length) {\r\n keyboardNavTo($next);\r\n }\r\n } else {\r\n $container.trigger('select-open');\r\n }\r\n\r\n event.stopPropagation();\r\n return false;\r\n }\r\n case KeyCodes.home: {\r\n if (isOpen) {\r\n const $first = $selectList.find(`.${itemJSClassName}`).first();\r\n\r\n if ($first.length && $first.hasClass(itemActive) === false) {\r\n keyboardNavTo($first);\r\n }\r\n }\r\n\r\n event.stopPropagation();\r\n return false;\r\n }\r\n case KeyCodes.end: {\r\n if (isOpen) {\r\n const $last = $selectList.find(`.${itemJSClassName}`).last();\r\n\r\n if ($last.length && $last.hasClass(itemActive) === false) {\r\n keyboardNavTo($last);\r\n }\r\n }\r\n\r\n event.stopPropagation();\r\n return false;\r\n }\r\n default: {\r\n return true;\r\n }\r\n }\r\n }\r\n\r\n\r\n /**\r\n * Init ARIA attribute by default\r\n */\r\n function initAria() {\r\n // Button containers ARIA\r\n $selectedContainer.attr({ role: 'button', 'aria-controls': $selectList.attr('id'), 'aria-haspopup': 'listbox' });\r\n\r\n if (labelBy) {\r\n $selectedContainer.attr('aria-labelledby', labelBy);\r\n }\r\n\r\n // Wrapper containers ARIA\r\n $selectList.attr({ role: 'listbox', 'aria-hidden': true, 'aria-multiselectable': false, 'aria-activedescendant': $selectList.find(`.${itemActive}`).attr('id') });\r\n\r\n // Items ARIA\r\n $selectItem.attr({ role: 'option', 'aria-selected': false });\r\n }\r\n\r\n /**\r\n * Bind events\r\n */\r\n function initBinds() {\r\n const $itemLabel = $selectList.find(`.${labelJSClassName}`);\r\n const numberLabelNotHide = $selectList.find('.js-select__item').length - $selectList.find('.u-no-display').length;\r\n // Only active with many items\r\n if ($itemLabel.length > 1 && numberLabelNotHide > 1) {\r\n $container.on('select-open select-close', (event) => {\r\n event.stopImmediatePropagation();\r\n\r\n if (event.type === 'select-open') {\r\n $(`.${rootJSClassName}.${selectActive}`).trigger('select-close');\r\n }\r\n\r\n toggleContainer();\r\n });\r\n\r\n $container.on('mousedown', `.${selectedContainerJSClassName}, .${labelJSClassName}`, (event) => {\r\n event.stopImmediatePropagation();\r\n isMouseCtrl = true;\r\n });\r\n\r\n $(document).on('click', () => {\r\n if (isMouseCtrl === false && $selectedContainer.is('[aria-expanded]')) {\r\n resetSelect();\r\n $container.trigger('select-close');\r\n }\r\n });\r\n\r\n $selectedContainer.on('click', (event) => {\r\n event.stopImmediatePropagation();\r\n\r\n if ($container.hasClass(offClassName) === false) {\r\n if ($selectedContainer.is('[aria-expanded]')) {\r\n $container.trigger('select-close');\r\n } else {\r\n $container.trigger('select-open');\r\n }\r\n }\r\n });\r\n\r\n $itemLabel.on('click', clickHandler);\r\n\r\n $selectList.on('blur', () => {\r\n if (!isMouseCtrl && $selectedContainer.is('[aria-expanded]')) {\r\n resetSelect();\r\n $container.trigger('select-close');\r\n }\r\n });\r\n\r\n if ($container.hasClass(shadeSelectClass)) {\r\n const customKey = `${$select.attr('id')}`;\r\n\r\n penddingQueryList[customKey] = '';\r\n\r\n $container.on('keypress', (event) => {\r\n if ($selectedContainer.is('[aria-expanded]') && typeof event.key !== 'undefined') {\r\n penddingQueryList[customKey] += event.key.toLowerCase();\r\n\r\n delayedCapture(customKey, (q) => {\r\n const $searched = $selectList.find(`.${itemClassName}[data-txt^=${penddingQueryList[q]}]:not(.${itemActive})`);\r\n const ui = setActive($searched);\r\n\r\n penddingQueryList[q] = '';\r\n\r\n if (typeof params.change === 'function') {\r\n params.change.call(this, event, ui);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n }\r\n\r\n // Keydown nav\r\n $container.on('keydown', keydownHandler);\r\n }\r\n\r\n setIconList();\r\n initAria();\r\n initSelectedContainer();\r\n initBinds();\r\n}\r\n\r\nfunction updateAvailableQuantities(availableQuantity) {\r\n const quantityComponent = $(`.${qtySelectClass}`);\r\n const quantityWrapper = quantityComponent.find(`.${wrapperJSClassName}`);\r\n const dropDownList = quantityWrapper.find(`.${itemJSClassName}`);\r\n const displaySelecter = quantityComponent.find(`.${selectedContainerJSClassName}`).find(`.${labelJSClassName}`).find('.js-select__data');\r\n\r\n dropDownList\r\n .removeClass('u-no-display')\r\n .removeClass('selected')\r\n .attr('aria-selected', false);\r\n\r\n quantityWrapper.find(`.js-select__item:nth-child(n+${availableQuantity + 1})`).addClass('u-no-display');\r\n dropDownList.find('input').removeAttr('data-og-id');\r\n dropDownList.first().addClass('selected').attr('aria-selected', true);\r\n dropDownList.first().find('input').attr(qtySelectOGAttr, 'qty').prop('checked', true);\r\n\r\n if (dropDownList.length === quantityWrapper.find('.u-no-display').length) {\r\n quantityComponent.addClass('m-select-list-disable');\r\n quantityComponent.addClass('off');\r\n }\r\n\r\n displaySelecter.text('1');\r\n}\r\n\r\n/**\r\n* Init\r\n*/\r\nfunction init() {\r\n $select.each(containerInitHandler);\r\n}\r\n\r\nfunction create(container, params) {\r\n let $container = container;\r\n if (typeof container === 'string') {\r\n $container = $(container);\r\n }\r\n function eachInit() {\r\n containerInitHandler.call(this, params);\r\n }\r\n\r\n $container.each(eachInit);\r\n}\r\n\r\nexport {\r\n create,\r\n init,\r\n updateAvailableQuantities,\r\n};\r\n\r\nexport default init;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/common/molecule/select-list.js","/**\r\n * Common - Module - Product Zoom\r\n */\r\nimport GlobalVars from '../GlobalVars';\r\n\r\nfunction disableProductZoom() {\r\n $('#productZoom').hide();\r\n}\r\n\r\nfunction getProductZoomIndex(imgList) {\r\n const numberOfImageCloned = $(imgList).find('.slick-cloned').length;\r\n const slickCurrent = $('.slick-current');\r\n const index = Number(slickCurrent.attr('data-slick-index'));\r\n if (numberOfImageCloned === 0) {\r\n return index;\r\n }\r\n // Add +1 because carousel create an offset in the index of product image\r\n return index + 1;\r\n}\r\n\r\n// Define Data-Zoom attribute\r\nfunction setZoomSrc($img) {\r\n let id = $img.attr('src').split('id=');\r\n id = id[1].split('&');\r\n id = id[0];\r\n id = `${GlobalVars.CDN_url}/img/P.aspx?l=${GlobalVars.Culture}&s=1200&e=jpg&id=${id}&v=2&resize=false&nodef=true`;\r\n\r\n $img.attr('data-zoom', id);\r\n}\r\n\r\n// Get img response\r\nfunction imgExists(url, imgObj) {\r\n const img = new Image();\r\n // success\r\n img.onload = () => {\r\n // If success set data-zoom\r\n setZoomSrc(imgObj);\r\n };\r\n\r\n // 404 not found\r\n img.onerror = false;\r\n\r\n img.src = url;\r\n}\r\n\r\n// Check if image exists\r\nfunction setImgURL(img) {\r\n $.each($(img), (i, value) => {\r\n const $img = $(value);\r\n let url = $img.attr('src').split('id=');\r\n if (typeof url !== 'undefined' && url.length > 1) {\r\n url = url[1].split('&');\r\n url = url[0];\r\n url = `${GlobalVars.CDN_url}/img/P.aspx?l=${GlobalVars.Culture}&s=1200&e=jpg&id=${url}&v=2&nodef=true`;\r\n imgExists(url, $img);\r\n }\r\n });\r\n}\r\n\r\nexport {\r\n setZoomSrc,\r\n setImgURL,\r\n getProductZoomIndex,\r\n disableProductZoom,\r\n};\r\n\r\nexport default setImgURL;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/common/modules/Product-zoom.js","/**\r\n * Common - Components - c09 - Transactional\r\n */\r\n\r\n// Imports\r\nimport GlobalVars from '../GlobalVars';\r\nimport {\r\n init as initReminderPopin,\r\n createReminderPopin,\r\n} from '../organism/popin.checkstock';\r\nimport {\r\n addProductToCart,\r\n cartProductsQuantityLimiter,\r\n isProductAllowedToAddInCart,\r\n goToCart\r\n} from '../modules/add-to-cart';\r\nimport {\r\n getDataLayerPush,\r\n} from '../Utils';\r\nimport {\r\n addItem as addToWishlist,\r\n getAddToWishListJSClassName,\r\n getLoginUrlAttr\r\n} from '../../common/Wishlist';\r\nimport {\r\n wishlistItemAddedEventName,\r\n triggerCartItemAddedEvent,\r\n cartItemRemovedEventName,\r\n cartItemQtyReachLimitEventName,\r\n cartItemQtyBelowLimitEventName,\r\n} from '../../common/Events';\r\nimport { updateAvailableQuantities } from '../molecule/select-list';\r\n\r\n// Constants (classes)\r\nconst activeClass = 'active';\r\nconst jsAddToCartClass = 'js-addtocart';\r\n// const jsWishlistClass = 'js-wishlist';\r\nconst jsPriceSelectClass = 'js-select--price';\r\nconst jsQtySelectClass = 'js-select--qty';\r\nconst selectedClass = '[role=\"listbox\"] [aria-selected=\"true\"]';\r\nconst selectedDataClass = 'input';\r\nconst inBagClass = 'inBag';\r\nconst socialSharingBlockClass = 'js-productSocial';\r\nconst socialSharingButtonClass = 'js-productSocialBtn';\r\nconst socialSharingContentClass = 'js-productSocialContent';\r\nconst socialSharingIconClass = 'm-product-cart__actions-icon';\r\nconst cartQuantityCheckEventName = 'cartQuantityCheckEvent';\r\n\r\n// Constants (selectors)\r\nconst addToCartButtonSelector = `button.${jsAddToCartClass}`;\r\nconst addToWishlistBtnSelector = `.${getAddToWishListJSClassName()}`;\r\nconst addToWishlistBtn = `button${addToWishlistBtnSelector}`;\r\n\r\nlet qtyLimit;\r\n\r\n/**\r\n * Current SKU.\r\n * @type {String}\r\n */\r\nlet currentSKU = '';\r\n\r\nconst addToCartText = window.dicoKeys.ecomAddToBag;\r\nconst goToCartText = window.dicoKeys.ecomMyBag;\r\n\r\n/**\r\n * Reference to the \"add to cart\" CTA button.\r\n * @type {Object}\r\n */\r\nlet addToCartButton = {};\r\n\r\n/**\r\n * Reference to the \"price\" select element.\r\n * @type {Object}\r\n */\r\nlet priceSelect = {};\r\n\r\n/**\r\n * Reference to the \"quantity\" select element.\r\n * @type {Object}\r\n */\r\nlet qtySelect = {};\r\n\r\n/**\r\n * Reference to the social share block.\r\n * @type {Object}\r\n */\r\nlet socialShareBlock = {};\r\n\r\n/**\r\n * Reference to the social share button.\r\n * @type {Object}\r\n */\r\nlet socialShareButton = {};\r\n\r\n/**\r\n * Reference to the social share content.\r\n * @type {Object}\r\n */\r\nlet socialShareContent = {};\r\n\r\n/**\r\n * Reference to the social share icon.\r\n * @type {Object}\r\n */\r\nlet socialShareIcon = {};\r\n\r\nfunction saveReferences() {\r\n // Save reference to the \"add to cart\" CTA button\r\n addToCartButton = $(addToCartButtonSelector);\r\n\r\n // Save reference to the \"price\" select element.\r\n priceSelect = $(`.${jsPriceSelectClass}`);\r\n\r\n // Save reference to the \"quantity\" select element.\r\n qtySelect = $(`.${jsQtySelectClass}`);\r\n\r\n if (typeof OCMS.productpage !== 'undefined') {\r\n qtyLimit = OCMS.productpage.dicoKeys.maximumAuthorizedQuantity;\r\n } else {\r\n throw new Error('OCMS.productpage is not defined');\r\n }\r\n\r\n // Save reference to the social share block/button/content\r\n socialShareBlock = $(`.${socialSharingBlockClass}`);\r\n socialShareButton = socialShareBlock.find(`.${socialSharingButtonClass}`);\r\n socialShareContent = socialShareBlock.find(`.${socialSharingContentClass}`);\r\n socialShareIcon = socialShareBlock.find(`.${socialSharingIconClass}`);\r\n}\r\n\r\nfunction saveCurrentSKU() {\r\n const sku = (OCMS.productpage && OCMS.productpage.sku) ? OCMS.productpage.sku : '';\r\n\r\n if (sku !== '') {\r\n currentSKU = sku;\r\n }\r\n}\r\n\r\nfunction getCurrentSKU() {\r\n return currentSKU;\r\n}\r\n\r\nfunction getAddToCartButton() {\r\n return addToCartButton;\r\n}\r\n\r\nfunction getProductQty() {\r\n const $qtyData = qtySelect.find(`${selectedClass} ${selectedDataClass}`);\r\n const qtyText = ($qtyData.length) ? parseInt($qtyData.val(), 10) : 1; // always defaults to 1\r\n\r\n return (!isNaN(qtyText)) ? qtyText : 1;\r\n}\r\n\r\n/**\r\n * Updates the \"add to cart\" CTA button.\r\n * @return {Boolean} true if the status has changed.\r\n */\r\nfunction handleAddToCartButtonClick() {\r\n const productSku = getCurrentSKU();\r\n const productQuantity = getProductQty();\r\n\r\n const addToCartOptions = {\r\n productSku: productSku,\r\n productId: GlobalVars.A,\r\n maximumAuthorizedQuantity: qtyLimit,\r\n quantityToAdd: productQuantity,\r\n onCartUpdated: ([productId, updatedQuantity]) => $(addToCartButtonSelector).trigger(cartQuantityCheckEventName, [productId, updatedQuantity, qtyLimit]),\r\n triggerAddItemToCartEvent: false\r\n };\r\n\r\n if (addProductToCart(addToCartOptions)) {\r\n addToCartButton.addClass(inBagClass);\r\n\r\n const productDatas = getDataLayerPush({ eeAction: 'eeProductDetail' });\r\n if (productDatas.products.length > 0) {\r\n $.extend(productDatas.products[0], {\r\n quantity: productQuantity,\r\n addToCartType: 'Product Page',\r\n });\r\n\r\n triggerCartItemAddedEvent(productDatas.products);\r\n }\r\n\r\n return true;\r\n }\r\n\r\n goToCart();\r\n\r\n return false;\r\n}\r\n\r\nfunction handleDirectAddToCartPreOrder(buttonToUpdate) {\r\n const preOrderClass = 'js-preorder';\r\n const addToCartClass = 'js-addtocart';\r\n const preOrderButtonClass = 'a-btn--primary-2';\r\n\r\n if (buttonToUpdate.hasClass(preOrderClass)) {\r\n buttonToUpdate.removeClass(preOrderButtonClass);\r\n buttonToUpdate.removeClass(addToCartClass);\r\n buttonToUpdate.removeClass(preOrderClass);\r\n buttonToUpdate.off('click').click(() => {\r\n goToCart();\r\n });\r\n }\r\n}\r\n\r\n/**\r\n * Toggle CTA state from \"Go to bag\" to \"add to cart\" and vice versa.\r\n */\r\nfunction updateCTA(event) {\r\n switch (event.type) {\r\n case cartItemQtyReachLimitEventName:\r\n addToCartButton\r\n .text(goToCartText)\r\n .addClass(inBagClass);\r\n handleDirectAddToCartPreOrder(addToCartButton);\r\n break;\r\n case cartItemQtyBelowLimitEventName:\r\n addToCartButton\r\n .text(addToCartText)\r\n .addClass(inBagClass);\r\n break;\r\n case cartItemRemovedEventName:\r\n addToCartButton\r\n .text(addToCartText)\r\n .removeClass(inBagClass);\r\n break;\r\n default:\r\n console.log('Event do not matching any cases.');\r\n }\r\n}\r\n\r\nfunction handleProductSizesList() {\r\n const dSlash = '//';\r\n const defaultPage = '/default.aspx?';\r\n const country = 'c=';\r\n const lang = '&l=';\r\n const id = '&a=';\r\n const currentProductId = priceSelect.find('.js-select__wrapper .selected').data('id');\r\n\r\n if (!window.location.origin) {\r\n window.location.origin = window.location.protocol + dSlash + window.location.host;\r\n }\r\n\r\n let href = window.location.origin + defaultPage;\r\n href += country + GlobalVars.C;\r\n href += lang + GlobalVars.L;\r\n href += id + currentProductId;\r\n\r\n window.location.href = href;\r\n}\r\n\r\nfunction handleProductSocialShare() {\r\n if (!socialShareBlock.length) {\r\n return;\r\n }\r\n\r\n const slideAnimDuration = 300;\r\n\r\n if (!socialShareContent.hasClass(activeClass)) {\r\n socialShareContent.addClass(activeClass);\r\n\r\n socialShareContent.slideDown(slideAnimDuration);\r\n socialShareContent.attr('aria-hidden', false);\r\n socialShareIcon.hide();\r\n socialShareButton.hide();\r\n } else {\r\n socialShareContent.slideUp(slideAnimDuration, () => {\r\n socialShareContent.removeClass(activeClass);\r\n socialShareContent.attr('aria-hidden', true);\r\n });\r\n }\r\n}\r\n\r\nfunction updateWishlistCTA() {\r\n const addToWishlistContainer = $(addToWishlistBtn).parents('li');\r\n\r\n // Hide BTN Add to wishlist\r\n addToWishlistContainer.hide()\r\n .attr('aria-hidden', true);\r\n // Show link with URL Go to wishlist\r\n addToWishlistContainer.next()\r\n .removeClass('m-product-cart__actions-item--hidden')\r\n .attr('aria-hidden', false);\r\n}\r\n\r\nfunction handleAddToWishlist() {\r\n const loginUrl = $(addToWishlistBtn).data(getLoginUrlAttr());\r\n\r\n if (typeof loginUrl !== 'undefined') {\r\n document.location.assign(loginUrl);\r\n } else {\r\n addToWishlist({\r\n sku: getCurrentSKU(),\r\n });\r\n }\r\n}\r\n\r\nfunction handleReminderPopin() {\r\n createReminderPopin();\r\n}\r\n\r\nfunction handleQuantityUpdate(event, productId, itemQuantity, maximumAuthorizedQuantity) {\r\n cartProductsQuantityLimiter(event, productId, itemQuantity, maximumAuthorizedQuantity);\r\n\r\n const quantityAvailable = maximumAuthorizedQuantity - itemQuantity;\r\n updateAvailableQuantities(quantityAvailable);\r\n}\r\n\r\nfunction setEventHandlers() {\r\n // Select Price redirection\r\n priceSelect.on('click', '.js-select__wrapper .js-select__label', handleProductSizesList);\r\n\r\n // Social Btn toggle block\r\n socialShareButton.on('click', handleProductSocialShare);\r\n\r\n // Add to Wishlist actions\r\n $(document).on('click', `.m-product-cart ${addToWishlistBtnSelector}`, handleAddToWishlist);\r\n $(document).on(wishlistItemAddedEventName, updateWishlistCTA);\r\n\r\n // Out of Stock - REMINDER\r\n $('[data-popin-reminder]').on('click', (aoEvent) => {\r\n aoEvent.preventDefault();\r\n handleReminderPopin();\r\n });\r\n\r\n $(document)\r\n .on('click', addToCartButtonSelector, handleAddToCartButtonClick)\r\n .on(cartQuantityCheckEventName, addToCartButtonSelector, handleQuantityUpdate)\r\n .on(`${cartItemQtyReachLimitEventName} ${cartItemQtyBelowLimitEventName}`, addToCartButtonSelector, updateCTA)\r\n .on(cartItemRemovedEventName, (e, ...args) => {\r\n // Reset current CTA state\r\n if (args[0][0].sku === getCurrentSKU()) {\r\n addToCartButton.trigger(cartQuantityCheckEventName, [GlobalVars.A, 0, qtyLimit]);\r\n }\r\n });\r\n}\r\n\r\nfunction init() {\r\n try {\r\n // Save references to DOM elements\r\n saveReferences();\r\n\r\n // Save current SKU\r\n saveCurrentSKU();\r\n\r\n // Set event handlers\r\n setEventHandlers();\r\n\r\n // Trigger CTA state check\r\n if (isProductAllowedToAddInCart(getCurrentSKU(), qtyLimit) === false) {\r\n addToCartButton.trigger(cartQuantityCheckEventName, [GlobalVars.A, qtyLimit, qtyLimit]);\r\n }\r\n\r\n // Out of stock popin reminder\r\n initReminderPopin();\r\n } catch (error) {\r\n console.error('===== Error on c09 init =====', error);\r\n }\r\n}\r\n\r\n// Named exports - Constants\r\nexport {\r\n addToCartButtonSelector,\r\n};\r\n\r\n// Named exports - Functions\r\nexport {\r\n init,\r\n updateWishlistCTA,\r\n getAddToCartButton,\r\n getProductQty,\r\n getCurrentSKU,\r\n};\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/common/components/c09.js","/**\r\n * Product page\r\n */\r\n\r\nimport GlobalVars from '../../GlobalVars';\r\nimport {\r\n getUrlParameter,\r\n} from '../../Utils';\r\n\r\nimport AjaxURL from '../../AjaxURL';\r\n\r\nimport {\r\n init as productTransacInit\r\n} from '../../components/c09';\r\n\r\nimport {\r\n init as initCheckStock,\r\n} from '../../organism/checkstock';\r\n\r\nimport {\r\n init as initCallMeBack,\r\n} from '../../organism/popin.callmeback';\r\n\r\nimport {\r\n triggerCheckStockInStoreClickEvent,\r\n triggerProductSocialViralityEvent,\r\n} from '../../Events';\r\n\r\nimport { handleFbFollow } from '../../molecule/social-share';\r\n\r\nconst afterpayInfoBlock = 'js-afterpay-infos';\r\nconst outOfStockBlock = 'a-alert-stock--out';\r\n\r\nlet isCheckStockInitialized = false;\r\nlet isCallMeBackInitialized = false;\r\n\r\n// FACEBOOK Events binds\r\nfunction fbActionShareEvents() {\r\n $('.m-social-share__social--fb-share').on('click', () => {\r\n window.fbShare();\r\n });\r\n\r\n $(document).on('fb-share.success', () => {\r\n triggerProductSocialViralityEvent({\r\n name: 'facebook',\r\n product: OCMS.productpage.pageArticleTitle,\r\n sku: OCMS.productpage.sku,\r\n });\r\n });\r\n}\r\n\r\n// FACEBOOK Share - CALLBACK handler\r\nfunction handleFBShare() {\r\n const oldFbAsyncInit = window.fbAsyncInit;\r\n window.fbAsyncInit = () => {\r\n const FB = window.FB;\r\n if (oldFbAsyncInit != null) {\r\n oldFbAsyncInit.call();\r\n } else {\r\n FB.init({\r\n appId: '384812148242929',\r\n xfbml: true,\r\n status: true,\r\n version: 'v2.10'\r\n });\r\n }\r\n window.fbShare = (callback) => {\r\n // const URL = OCMS.GlobalVars.IsProd === true ? window.location.href : 'loccitane.com';\r\n const options = ({\r\n method: 'share',\r\n // href: URL,\r\n });\r\n let status;\r\n\r\n FB.ui(options, (response) => {\r\n if (response && !response.error_code) {\r\n status = 'success';\r\n $.event.trigger('fb-share.success');\r\n } else {\r\n status = 'error';\r\n $.event.trigger('fb-share.error');\r\n }\r\n\r\n if (callback && typeof callback === 'function') {\r\n callback.call(this, status);\r\n } else {\r\n return response;\r\n }\r\n\r\n return true;\r\n });\r\n };\r\n };\r\n\r\n // Events handler\r\n fbActionShareEvents();\r\n}\r\n\r\n// TWITTER\r\nfunction handleTwitterAction() {\r\n const twttr = window.twttr;\r\n\r\n twttr.ready(() => {\r\n twttr.events.bind('tweet', () => {\r\n triggerProductSocialViralityEvent({\r\n name: 'twitter',\r\n product: OCMS.productpage.ProductTitle,\r\n sku: OCMS.productpage.sku,\r\n });\r\n });\r\n });\r\n}\r\n\r\n// Social Network Tagging initialization\r\nfunction initSocialNetworkDataLayer() {\r\n $(window).on('load', () => {\r\n handleTwitterAction();\r\n });\r\n\r\n handleFbFollow();\r\n\r\n handleFBShare();\r\n}\r\n\r\n// METAPACK Get Delivery estimate date\r\n/**\r\n * Get shipping methods and delivery date\r\n * @return Object\r\n */\r\nfunction getDeliveryDate() {\r\n const $deliveryBlock = $('.m-product-cart__actions-item--shipping');\r\n\r\n $.getJSON(\r\n AjaxURL.getProductPageShippingMethod,\r\n {\r\n task: 'getProductPageShippingMethod',\r\n c: GlobalVars.C,\r\n l: GlobalVars.L,\r\n }\r\n )\r\n .done((shippingMethod) => {\r\n if (shippingMethod !== null && shippingMethod.EstimatedDate !== null) {\r\n if (!OCMS.GlobalVars.IsMobile) {\r\n $(`
${shippingMethod.EstimatedDate}
`)\r\n .insertBefore($deliveryBlock.find('a'));\r\n } else {\r\n $deliveryBlock.find('p').css('width', '90%');\r\n $deliveryBlock.find('p').prepend(`${shippingMethod.EstimatedDate}
`);\r\n }\r\n }\r\n });\r\n}\r\n\r\n// Afterpay handle when out of stock\r\nfunction hideAfterpayIfOutOfStock() {\r\n if ($(`.${outOfStockBlock}`).length && $(`.${outOfStockBlock}`).text() !== '') {\r\n $(`.${afterpayInfoBlock}`).addClass('m-afterpay-infos--hidden');\r\n } else {\r\n $(`.${afterpayInfoBlock}`).removeClass('m-afterpay-infos--hidden');\r\n }\r\n}\r\n\r\n\r\nfunction init() {\r\n productTransacInit();\r\n\r\n $(window).on('load', () => {\r\n const pageAnchor = getUrlParameter('anchor');\r\n if (pageAnchor === 'anchorWriteReview') {\r\n $('.js-write-review-btn').first().trigger('click');\r\n }\r\n });\r\n\r\n $('.js-open-checkstock-btn').on('click', () => {\r\n if (!isCheckStockInitialized) {\r\n initCheckStock();\r\n isCheckStockInitialized = true;\r\n\r\n // Datalayer when clicking on Check Stock in Store\r\n triggerCheckStockInStoreClickEvent({\r\n name: OCMS.productpage.pageArticleTitle,\r\n id: OCMS.productpage.sku,\r\n });\r\n }\r\n });\r\n\r\n $('.js-open-callmeback-btn').on('click', () => {\r\n if (!isCallMeBackInitialized) {\r\n initCallMeBack();\r\n isCallMeBackInitialized = true;\r\n }\r\n });\r\n\r\n // Estimated Date if isn't out of stock\r\n if (!$('.m-product-cart__box .a-alert-stock--out').length && OCMS.productpage.isMetapackEnabled) {\r\n getDeliveryDate();\r\n }\r\n\r\n // DataLayer Product Social Virality\r\n initSocialNetworkDataLayer();\r\n\r\n if (OCMS.GlobalVars.Brand === 'occ' && OCMS.GlobalVars.C === 23) {\r\n // Hide Afterpay if the product is out of stock\r\n hideAfterpayIfOutOfStock();\r\n }\r\n}\r\n\r\nexport {\r\n init,\r\n};\r\n\r\nexport default init;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/common/entries/product-page/init.js","/**\r\n * POPIN Out of stock - Reminder\r\n *\r\n * @overview File used to handle the \"out of stock\" popin.\r\n *\r\n*/\r\nimport GlobalVars from '../GlobalVars';\r\nimport AjaxURL from '../AjaxURL';\r\nimport * as Popin from './popin';\r\nimport { GetDefaultValidationResult } from '../formValid';\r\nimport { btnLoader } from '../Utils';\r\nimport KeyCodes from '../KeyCodes';\r\nimport {\r\n triggerBackInStockNotificationClickEvent\r\n} from '../Events';\r\n\r\nOCMS.stockReminder = window.OCMS.stockReminder;\r\n\r\nconst stockReminderOpt = {\r\n id: 'outOfStockPopin',\r\n title: '',\r\n content: '',\r\n buttons: '',\r\n sku: ''\r\n};\r\n\r\nfunction newsletterVal() {\r\n const $newsletterInput = $('#outOfStockNewsletter');\r\n if ($newsletterInput.length && $newsletterInput.prop('checked')) {\r\n $newsletterInput.val('true');\r\n } else {\r\n $newsletterInput.val('false');\r\n }\r\n\r\n return $newsletterInput.val();\r\n}\r\n\r\nfunction handleSubmit(aoEvent, asSku) {\r\n aoEvent.preventDefault();\r\n const btnLoad = btnLoader($('#outOfStockSubmit'));\r\n\r\n if (GetDefaultValidationResult($('#outOfStockPopinEmail')) === true) {\r\n btnLoad.wait();\r\n $.ajax({\r\n type: 'POST',\r\n url: AjaxURL.reminderPopin,\r\n data: {\r\n task: 'reminder',\r\n country: GlobalVars.C,\r\n email: $('#outOfStockEmail').val(),\r\n sku: asSku,\r\n newsletter: newsletterVal(),\r\n l: GlobalVars.L\r\n },\r\n success: (msg) => {\r\n btnLoad.resume();\r\n\r\n if ((msg === '1') || (msg === '0')) {\r\n $('#outOfStockContainer').html(OCMS.stockReminder.backInStockMessage);\r\n $('#textReminderEmail').val('');\r\n\r\n // Datalayer when clicking on the popin's backInStockNotification btn\r\n triggerBackInStockNotificationClickEvent({\r\n name: OCMS.productpage.productsData.current.length > 0 ? OCMS.productpage.productsData.current[0].ShortTitle : 'None',\r\n id: OCMS.productpage.sku,\r\n });\r\n } else {\r\n $('#outOfStockContainer').html(OCMS.stockReminder.pwdRemindErrorMessage);\r\n }\r\n }\r\n });\r\n }\r\n}\r\n\r\n/**\r\n * Create Popin\r\n*/\r\nfunction createReminderPopin() {\r\n const $popinReminder = Popin.create(stockReminderOpt.content, 'eco-reminder', {\r\n replace: false,\r\n });\r\n Popin.open($popinReminder);\r\n}\r\n\r\n/**\r\n * Init function called before all others.\r\n*/\r\nfunction init() {\r\n if (!$('[data-popin-reminder]').length) {\r\n return false;\r\n }\r\n\r\n stockReminderOpt.title = OCMS.stockReminder.titleLabel;\r\n\r\n let contentHTML = [\r\n '
',\r\n '
',\r\n stockReminderOpt.title,\r\n '
',\r\n '
',\r\n '',\r\n '',\r\n '
'\r\n ].join('');\r\n\r\n // if (OCMS.stockReminder.displayNewsletterOptin) {\r\n // contentHTML += [\r\n // '
',\r\n // '',\r\n // '',\r\n // '
'\r\n // ].join('');\r\n // }\r\n\r\n stockReminderOpt.buttons = [\r\n '
'\r\n ].join('');\r\n\r\n contentHTML += stockReminderOpt.buttons;\r\n contentHTML += '
';\r\n\r\n stockReminderOpt.content = contentHTML;\r\n stockReminderOpt.sku = OCMS.stockReminder.sku;\r\n\r\n // Handler for a click on the submit button\r\n $(document).on('click', '#outOfStockSubmit', (aoEvent) => {\r\n handleSubmit(aoEvent, stockReminderOpt.sku);\r\n\r\n return false;\r\n });\r\n\r\n // Handler for an enter press key\r\n $(document).on('keydown', '#outOfStockEmail', (aoEvent) => {\r\n if (aoEvent.keyCode === KeyCodes.enter) {\r\n handleSubmit(aoEvent, stockReminderOpt.sku);\r\n }\r\n });\r\n\r\n return true;\r\n}\r\n\r\nexport {\r\n stockReminderOpt,\r\n createReminderPopin,\r\n init,\r\n};\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/common/organism/popin.checkstock.js","/**\r\n * Call me Back popin management.\r\n */\r\n\r\n// Imports\r\n\r\nimport GlobalVars from '../GlobalVars';\r\nimport AjaxURL from '../AjaxURL';\r\nimport {\r\n getProductQty,\r\n} from '../components/c09';\r\nimport {\r\n GetDefaultValidationResult\r\n} from '../formValid';\r\n\r\nconst popinID = 'callmebackPopin';\r\n\r\nlet requestSent = false;\r\n\r\nfunction validate(aoEvent) {\r\n aoEvent.preventDefault();\r\n\r\n if (requestSent) {\r\n return false;\r\n }\r\n\r\n // Check form validation\r\n if (GetDefaultValidationResult($(`#${popinID} .js-popinBody`)) === false) {\r\n return false;\r\n }\r\n\r\n // Send the AJAX request\r\n\r\n requestSent = true;\r\n\r\n $.ajax({\r\n type: 'POST',\r\n dataType: 'json',\r\n url: AjaxURL.callMeBack,\r\n data: {\r\n task: 'callMeBack',\r\n firstName: $(`#${popinID} [data-id=\"firstName\"]`).val(),\r\n lastName: $(`#${popinID} [data-id=\"lastName\"]`).val(),\r\n email: $(`#${popinID} [data-id=\"email\"]`).val(),\r\n phoneNumber: $(`#${popinID} [data-id=\"tel\"]`).val(),\r\n a: GlobalVars.A,\r\n quantity: getProductQty(),\r\n },\r\n }).done((aoData) => {\r\n if (aoData && aoData.success && (typeof aoData.success === 'boolean')) {\r\n // Change title + subtitle\r\n const $popinTitle = $('#callmebackPopinTitle');\r\n $popinTitle.html($popinTitle.attr('data-alt-title'));\r\n const $popinSubTitle = $('#callmebackPopinSubTitle');\r\n $popinSubTitle.html($popinSubTitle.attr('data-alt-title'));\r\n\r\n // Empty the popin body\r\n $(`#${popinID} .js-popinBody`).empty();\r\n\r\n // Swap button\r\n $(`#${popinID} .o-popin__footer .js-popin-soft-valid`)\r\n .remove();\r\n $(`#${popinID} .o-popin__footer .js-popin-close`)\r\n .removeClass('u-no-display')\r\n .attr('aria-hidden', false);\r\n } else {\r\n // Err response\r\n console.error('callMeBack', ((typeof aoData !== 'undefined') && aoData.error) ? aoData.error : 'Err response');\r\n }\r\n }).fail((xhr, textStatus, error) => {\r\n // Err ajax\r\n console.error('callMeBack', 'Err ajax', textStatus, error);\r\n });\r\n\r\n return true;\r\n}\r\n\r\nfunction init() {\r\n $(`#${popinID} .js-popin-soft-valid`).on('click', (aoEvent) => {\r\n validate(aoEvent);\r\n });\r\n}\r\n\r\nexport {\r\n init,\r\n};\r\n\r\nexport default init;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/common/organism/popin.callmeback.js","function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n// This is not really a perfect check, but works fine.\n// From http://stackoverflow.com/questions/384286\nvar HAS_DOM_2 = (typeof HTMLElement === \"undefined\" ? \"undefined\" : _typeof(HTMLElement)) === \"object\";\nexport function isDOMElement(obj) {\n return HAS_DOM_2 ? obj instanceof HTMLElement : obj && _typeof(obj) === \"object\" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === \"string\";\n}\nexport function addClasses(el, classNames) {\n classNames.forEach(function (className) {\n el.classList.add(className);\n });\n}\nexport function removeClasses(el, classNames) {\n classNames.forEach(function (className) {\n el.classList.remove(className);\n });\n}\n//# sourceMappingURL=dom.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/util/dom.js\n// module id = 1407\n// module chunks = 2","export default function throwIfMissing() {\n throw new Error(\"Missing parameter\");\n}\n//# sourceMappingURL=throwIfMissing.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/util/throwIfMissing.js\n// module id = 1408\n// module chunks = 2","// Imports (Generic)\r\nimport {\r\n init,\r\n} from './init';\r\n\r\n// Initialization\r\ninit();\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/desktop/entries/product-page/index.js","// Imports (Parent)\r\nimport {\r\n init as initialInit,\r\n} from '../../../common/entries/product-page/init';\r\nimport {\r\n init as ProductZoom,\r\n} from '../../modules/Product-zoom';\r\nimport {\r\n init as productReassuranceInit,\r\n} from '../../organism/product-reassurance';\r\n\r\n/**\r\n * Initialization of the product page.\r\n */\r\nfunction init() {\r\n initialInit();\r\n ProductZoom();\r\n productReassuranceInit();\r\n}\r\n\r\n// Named exports - Functions\r\nexport {\r\n init,\r\n};\r\n\r\nexport default init;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/desktop/entries/product-page/init.js","/**\r\n * Desktop - Module - Product Zoom\r\n */\r\nimport Drift from 'drift-zoom';\r\nimport { setImgURL } from '../../common/modules/Product-zoom';\r\n\r\nconst imgClass = '.a-img--product-carousel';\r\nlet Zoom;\r\n\r\n// Create instances for each img\r\nfunction handleImages() {\r\n $(imgClass).each((i, el) => {\r\n Zoom = new Drift(el, {\r\n inlinePane: true,\r\n containInline: true,\r\n hoverBoundingBox: true,\r\n zoomFactor: 1.5\r\n });\r\n\r\n if ($(el).data('zoom') === undefined) {\r\n Zoom.disable();\r\n }\r\n });\r\n}\r\n\r\nfunction init() {\r\n window.addEventListener('load', () => {\r\n setImgURL(imgClass);\r\n });\r\n\r\n $(imgClass).on('mouseover', handleImages);\r\n}\r\n\r\nexport {\r\n init,\r\n};\r\n\r\nexport default init;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/desktop/modules/Product-zoom.js","function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nimport { isDOMElement } from \"./util/dom\";\nimport injectBaseStylesheet from \"./injectBaseStylesheet\";\nimport Trigger from \"./Trigger\";\nimport ZoomPane from \"./ZoomPane\";\n\nvar Drift =\n/*#__PURE__*/\nfunction () {\n function Drift(triggerEl) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n _classCallCheck(this, Drift);\n\n this.VERSION = \"1.4.0\";\n this.triggerEl = triggerEl;\n this.destroy = this.destroy.bind(this);\n\n if (!isDOMElement(this.triggerEl)) {\n throw new TypeError(\"`new Drift` requires a DOM element as its first argument.\");\n } // Prefix for generated element class names (e.g. `my-ns` will\n // result in classes such as `my-ns-pane`. Default `drift-`\n // prefixed classes will always be added as well.\n\n\n var namespace = options[\"namespace\"] || null; // Whether the ZoomPane should show whitespace when near the edges.\n\n var showWhitespaceAtEdges = options[\"showWhitespaceAtEdges\"] || false; // Whether the inline ZoomPane should stay inside\n // the bounds of its image.\n\n var containInline = options[\"containInline\"] || false; // How much to offset the ZoomPane from the\n // interaction point when inline.\n\n var inlineOffsetX = options[\"inlineOffsetX\"] || 0;\n var inlineOffsetY = options[\"inlineOffsetY\"] || 0; // A DOM element to append the inline ZoomPane to\n\n var inlineContainer = options[\"inlineContainer\"] || document.body; // Which trigger attribute to pull the ZoomPane image source from.\n\n var sourceAttribute = options[\"sourceAttribute\"] || \"data-zoom\"; // How much to magnify the trigger by in the ZoomPane.\n // (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane imag\n // if the trigger is displayed at 300 px wide)\n\n var zoomFactor = options[\"zoomFactor\"] || 3; // A DOM element to append the non-inline ZoomPane to.\n // Required if `inlinePane !== true`.\n\n var paneContainer = options[\"paneContainer\"] === undefined ? document.body : options[\"paneContainer\"]; // When to switch to an inline ZoomPane. This can be a boolean or\n // an integer. If `true`, the ZoomPane will always be inline,\n // if `false`, it will switch to inline when `windowWidth <= inlinePane`\n\n var inlinePane = options[\"inlinePane\"] || 375; // If `true`, touch events will trigger the zoom, like mouse events.\n\n var handleTouch = \"handleTouch\" in options ? !!options[\"handleTouch\"] : true; // If present (and a function), this will be called\n // whenever the ZoomPane is shown.\n\n var onShow = options[\"onShow\"] || null; // If present (and a function), this will be called\n // whenever the ZoomPane is hidden.\n\n var onHide = options[\"onHide\"] || null; // Add base styles to the page. See the \"Theming\"\n // section of README.md for more information.\n\n var injectBaseStyles = \"injectBaseStyles\" in options ? !!options[\"injectBaseStyles\"] : true; // An optional number that determines how long to wait before\n // showing the ZoomPane because of a `mouseenter` event.\n\n var hoverDelay = options[\"hoverDelay\"] || 0; // An optional number that determines how long to wait before\n // showing the ZoomPane because of a `touchstart` event.\n // It's unlikely that you would want to use this option, since\n // \"tap and hold\" is much more intentional than a hover event.\n\n var touchDelay = options[\"touchDelay\"] || 0; // If true, a bounding box will show the area currently being previewed\n // during mouse hover\n\n var hoverBoundingBox = options[\"hoverBoundingBox\"] || false; // If true, a bounding box will show the area currently being previewed\n // during touch events\n\n var touchBoundingBox = options[\"touchBoundingBox\"] || false; // A DOM element to append the bounding box to.\n\n var boundingBoxContainer = options[\"boundingBoxContainer\"] || document.body;\n\n if (inlinePane !== true && !isDOMElement(paneContainer)) {\n throw new TypeError(\"`paneContainer` must be a DOM element when `inlinePane !== true`\");\n }\n\n if (!isDOMElement(inlineContainer)) {\n throw new TypeError(\"`inlineContainer` must be a DOM element\");\n }\n\n this.settings = {\n namespace: namespace,\n showWhitespaceAtEdges: showWhitespaceAtEdges,\n containInline: containInline,\n inlineOffsetX: inlineOffsetX,\n inlineOffsetY: inlineOffsetY,\n inlineContainer: inlineContainer,\n sourceAttribute: sourceAttribute,\n zoomFactor: zoomFactor,\n paneContainer: paneContainer,\n inlinePane: inlinePane,\n handleTouch: handleTouch,\n onShow: onShow,\n onHide: onHide,\n injectBaseStyles: injectBaseStyles,\n hoverDelay: hoverDelay,\n touchDelay: touchDelay,\n hoverBoundingBox: hoverBoundingBox,\n touchBoundingBox: touchBoundingBox,\n boundingBoxContainer: boundingBoxContainer\n };\n\n if (this.settings.injectBaseStyles) {\n injectBaseStylesheet();\n }\n\n this._buildZoomPane();\n\n this._buildTrigger();\n }\n\n _createClass(Drift, [{\n key: \"_buildZoomPane\",\n value: function _buildZoomPane() {\n this.zoomPane = new ZoomPane({\n container: this.settings.paneContainer,\n zoomFactor: this.settings.zoomFactor,\n showWhitespaceAtEdges: this.settings.showWhitespaceAtEdges,\n containInline: this.settings.containInline,\n inline: this.settings.inlinePane,\n namespace: this.settings.namespace,\n inlineOffsetX: this.settings.inlineOffsetX,\n inlineOffsetY: this.settings.inlineOffsetY,\n inlineContainer: this.settings.inlineContainer\n });\n }\n }, {\n key: \"_buildTrigger\",\n value: function _buildTrigger() {\n this.trigger = new Trigger({\n el: this.triggerEl,\n zoomPane: this.zoomPane,\n handleTouch: this.settings.handleTouch,\n onShow: this.settings.onShow,\n onHide: this.settings.onHide,\n sourceAttribute: this.settings.sourceAttribute,\n hoverDelay: this.settings.hoverDelay,\n touchDelay: this.settings.touchDelay,\n hoverBoundingBox: this.settings.hoverBoundingBox,\n touchBoundingBox: this.settings.touchBoundingBox,\n namespace: this.settings.namespace,\n zoomFactor: this.settings.zoomFactor,\n boundingBoxContainer: this.settings.boundingBoxContainer\n });\n }\n }, {\n key: \"setZoomImageURL\",\n value: function setZoomImageURL(imageURL) {\n this.zoomPane._setImageURL(imageURL);\n }\n }, {\n key: \"disable\",\n value: function disable() {\n this.trigger.enabled = false;\n }\n }, {\n key: \"enable\",\n value: function enable() {\n this.trigger.enabled = true;\n }\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.trigger._hide();\n\n this.trigger._unbindEvents();\n }\n }, {\n key: \"isShowing\",\n get: function get() {\n return this.zoomPane.isShowing;\n }\n }, {\n key: \"zoomFactor\",\n get: function get() {\n return this.settings.zoomFactor;\n },\n set: function set(zf) {\n this.settings.zoomFactor = zf;\n this.zoomPane.settings.zoomFactor = zf;\n this.trigger.settings.zoomFactor = zf;\n this.boundingBox.settings.zoomFactor = zf;\n }\n }]);\n\n return Drift;\n}(); // Public API\n\n/* eslint-disable no-self-assign */\n\n\nexport { Drift as default };\nObject.defineProperty(Drift.prototype, \"isShowing\", {\n get: function get() {\n return this.isShowing;\n }\n});\nObject.defineProperty(Drift.prototype, \"zoomFactor\", {\n get: function get() {\n return this.zoomFactor;\n },\n set: function set(value) {\n this.zoomFactor = value;\n }\n});\nDrift.prototype[\"setZoomImageURL\"] = Drift.prototype.setZoomImageURL;\nDrift.prototype[\"disable\"] = Drift.prototype.disable;\nDrift.prototype[\"enable\"] = Drift.prototype.enable;\nDrift.prototype[\"destroy\"] = Drift.prototype.destroy;\n/* eslint-enable no-self-assign */\n//# sourceMappingURL=Drift.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/Drift.js\n// module id = 1463\n// module chunks = 2","/* UNMINIFIED RULES\n\nconst RULES = `\n@keyframes noop {\n 0% { zoom: 1; }\n}\n\n@-webkit-keyframes noop {\n 0% { zoom: 1; }\n}\n\n.drift-zoom-pane.drift-open {\n display: block;\n}\n\n.drift-zoom-pane.drift-opening, .drift-zoom-pane.drift-closing {\n animation: noop 1ms;\n -webkit-animation: noop 1ms;\n}\n\n.drift-zoom-pane {\n position: absolute;\n overflow: hidden;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n pointer-events: none;\n}\n\n.drift-zoom-pane-loader {\n display: none;\n}\n\n.drift-zoom-pane img {\n position: absolute;\n display: block;\n max-width: none;\n max-height: none;\n}\n\n.drift-bounding-box {\n position: absolute;\n pointer-events: none;\n}\n`;\n\n*/\nvar RULES = \".drift-bounding-box,.drift-zoom-pane{position:absolute;pointer-events:none}@keyframes noop{0%{zoom:1}}@-webkit-keyframes noop{0%{zoom:1}}.drift-zoom-pane.drift-open{display:block}.drift-zoom-pane.drift-closing,.drift-zoom-pane.drift-opening{animation:noop 1ms;-webkit-animation:noop 1ms}.drift-zoom-pane{overflow:hidden;width:100%;height:100%;top:0;left:0}.drift-zoom-pane-loader{display:none}.drift-zoom-pane img{position:absolute;display:block;max-width:none;max-height:none}\";\nexport default function injectBaseStylesheet() {\n if (document.querySelector(\".drift-base-styles\")) {\n return;\n }\n\n var styleEl = document.createElement(\"style\");\n styleEl.type = \"text/css\";\n styleEl.classList.add(\"drift-base-styles\");\n styleEl.appendChild(document.createTextNode(RULES));\n var head = document.head;\n head.insertBefore(styleEl, head.firstChild);\n}\n//# sourceMappingURL=injectBaseStylesheet.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/injectBaseStylesheet.js\n// module id = 1464\n// module chunks = 2","function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nimport throwIfMissing from \"./util/throwIfMissing\";\nimport BoundingBox from \"./BoundingBox\";\n\nvar Trigger =\n/*#__PURE__*/\nfunction () {\n function Trigger() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n _classCallCheck(this, Trigger);\n\n this._show = this._show.bind(this);\n this._hide = this._hide.bind(this);\n this._handleEntry = this._handleEntry.bind(this);\n this._handleMovement = this._handleMovement.bind(this);\n var _options$el = options.el,\n el = _options$el === void 0 ? throwIfMissing() : _options$el,\n _options$zoomPane = options.zoomPane,\n zoomPane = _options$zoomPane === void 0 ? throwIfMissing() : _options$zoomPane,\n _options$sourceAttrib = options.sourceAttribute,\n sourceAttribute = _options$sourceAttrib === void 0 ? throwIfMissing() : _options$sourceAttrib,\n _options$handleTouch = options.handleTouch,\n handleTouch = _options$handleTouch === void 0 ? throwIfMissing() : _options$handleTouch,\n _options$onShow = options.onShow,\n onShow = _options$onShow === void 0 ? null : _options$onShow,\n _options$onHide = options.onHide,\n onHide = _options$onHide === void 0 ? null : _options$onHide,\n _options$hoverDelay = options.hoverDelay,\n hoverDelay = _options$hoverDelay === void 0 ? 0 : _options$hoverDelay,\n _options$touchDelay = options.touchDelay,\n touchDelay = _options$touchDelay === void 0 ? 0 : _options$touchDelay,\n _options$hoverBoundin = options.hoverBoundingBox,\n hoverBoundingBox = _options$hoverBoundin === void 0 ? throwIfMissing() : _options$hoverBoundin,\n _options$touchBoundin = options.touchBoundingBox,\n touchBoundingBox = _options$touchBoundin === void 0 ? throwIfMissing() : _options$touchBoundin,\n _options$namespace = options.namespace,\n namespace = _options$namespace === void 0 ? null : _options$namespace,\n _options$zoomFactor = options.zoomFactor,\n zoomFactor = _options$zoomFactor === void 0 ? throwIfMissing() : _options$zoomFactor,\n _options$boundingBoxC = options.boundingBoxContainer,\n boundingBoxContainer = _options$boundingBoxC === void 0 ? throwIfMissing() : _options$boundingBoxC;\n this.settings = {\n el: el,\n zoomPane: zoomPane,\n sourceAttribute: sourceAttribute,\n handleTouch: handleTouch,\n onShow: onShow,\n onHide: onHide,\n hoverDelay: hoverDelay,\n touchDelay: touchDelay,\n hoverBoundingBox: hoverBoundingBox,\n touchBoundingBox: touchBoundingBox,\n namespace: namespace,\n zoomFactor: zoomFactor,\n boundingBoxContainer: boundingBoxContainer\n };\n\n if (this.settings.hoverBoundingBox || this.settings.touchBoundingBox) {\n this.boundingBox = new BoundingBox({\n namespace: this.settings.namespace,\n zoomFactor: this.settings.zoomFactor,\n containerEl: this.settings.boundingBoxContainer\n });\n }\n\n this.enabled = true;\n\n this._bindEvents();\n }\n\n _createClass(Trigger, [{\n key: \"_preventDefault\",\n value: function _preventDefault(event) {\n event.preventDefault();\n }\n }, {\n key: \"_preventDefaultAllowTouchScroll\",\n value: function _preventDefaultAllowTouchScroll(event) {\n if (!this.settings.touchDelay || !this._isTouchEvent(event) || this.isShowing) {\n event.preventDefault();\n }\n }\n }, {\n key: \"_isTouchEvent\",\n value: function _isTouchEvent(event) {\n return !!event.touches;\n }\n }, {\n key: \"_bindEvents\",\n value: function _bindEvents() {\n this.settings.el.addEventListener(\"mouseenter\", this._handleEntry, false);\n this.settings.el.addEventListener(\"mouseleave\", this._hide, false);\n this.settings.el.addEventListener(\"mousemove\", this._handleMovement, false);\n\n if (this.settings.handleTouch) {\n this.settings.el.addEventListener(\"touchstart\", this._handleEntry, false);\n this.settings.el.addEventListener(\"touchend\", this._hide, false);\n this.settings.el.addEventListener(\"touchmove\", this._handleMovement, false);\n } else {\n this.settings.el.addEventListener(\"touchstart\", this._preventDefault, false);\n this.settings.el.addEventListener(\"touchend\", this._preventDefault, false);\n this.settings.el.addEventListener(\"touchmove\", this._preventDefault, false);\n }\n }\n }, {\n key: \"_unbindEvents\",\n value: function _unbindEvents() {\n this.settings.el.removeEventListener(\"mouseenter\", this._handleEntry, false);\n this.settings.el.removeEventListener(\"mouseleave\", this._hide, false);\n this.settings.el.removeEventListener(\"mousemove\", this._handleMovement, false);\n\n if (this.settings.handleTouch) {\n this.settings.el.removeEventListener(\"touchstart\", this._handleEntry, false);\n this.settings.el.removeEventListener(\"touchend\", this._hide, false);\n this.settings.el.removeEventListener(\"touchmove\", this._handleMovement, false);\n } else {\n this.settings.el.removeEventListener(\"touchstart\", this._preventDefault, false);\n this.settings.el.removeEventListener(\"touchend\", this._preventDefault, false);\n this.settings.el.removeEventListener(\"touchmove\", this._preventDefault, false);\n }\n }\n }, {\n key: \"_handleEntry\",\n value: function _handleEntry(e) {\n this._preventDefaultAllowTouchScroll(e);\n\n this._lastMovement = e;\n\n if (e.type == \"mouseenter\" && this.settings.hoverDelay) {\n this.entryTimeout = setTimeout(this._show, this.settings.hoverDelay);\n } else if (this.settings.touchDelay) {\n this.entryTimeout = setTimeout(this._show, this.settings.touchDelay);\n } else {\n this._show();\n }\n }\n }, {\n key: \"_show\",\n value: function _show() {\n if (!this.enabled) {\n return;\n }\n\n var onShow = this.settings.onShow;\n\n if (onShow && typeof onShow === \"function\") {\n onShow();\n }\n\n this.settings.zoomPane.show(this.settings.el.getAttribute(this.settings.sourceAttribute), this.settings.el.clientWidth, this.settings.el.clientHeight);\n\n if (this._lastMovement) {\n var touchActivated = this._lastMovement.touches;\n\n if (touchActivated && this.settings.touchBoundingBox || !touchActivated && this.settings.hoverBoundingBox) {\n this.boundingBox.show(this.settings.zoomPane.el.clientWidth, this.settings.zoomPane.el.clientHeight);\n }\n }\n\n this._handleMovement();\n }\n }, {\n key: \"_hide\",\n value: function _hide(e) {\n if (e) {\n this._preventDefaultAllowTouchScroll(e);\n }\n\n this._lastMovement = null;\n\n if (this.entryTimeout) {\n clearTimeout(this.entryTimeout);\n }\n\n if (this.boundingBox) {\n this.boundingBox.hide();\n }\n\n var onHide = this.settings.onHide;\n\n if (onHide && typeof onHide === \"function\") {\n onHide();\n }\n\n this.settings.zoomPane.hide();\n }\n }, {\n key: \"_handleMovement\",\n value: function _handleMovement(e) {\n if (e) {\n this._preventDefaultAllowTouchScroll(e);\n\n this._lastMovement = e;\n } else if (this._lastMovement) {\n e = this._lastMovement;\n } else {\n return;\n }\n\n var movementX;\n var movementY;\n\n if (e.touches) {\n var firstTouch = e.touches[0];\n movementX = firstTouch.clientX;\n movementY = firstTouch.clientY;\n } else {\n movementX = e.clientX;\n movementY = e.clientY;\n }\n\n var el = this.settings.el;\n var rect = el.getBoundingClientRect();\n var offsetX = movementX - rect.left;\n var offsetY = movementY - rect.top;\n var percentageOffsetX = offsetX / this.settings.el.clientWidth;\n var percentageOffsetY = offsetY / this.settings.el.clientHeight;\n\n if (this.boundingBox) {\n this.boundingBox.setPosition(percentageOffsetX, percentageOffsetY, rect);\n }\n\n this.settings.zoomPane.setPosition(percentageOffsetX, percentageOffsetY, rect);\n }\n }, {\n key: \"isShowing\",\n get: function get() {\n return this.settings.zoomPane.isShowing;\n }\n }]);\n\n return Trigger;\n}();\n\nexport { Trigger as default };\n//# sourceMappingURL=Trigger.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/Trigger.js\n// module id = 1465\n// module chunks = 2","function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nimport throwIfMissing from \"./util/throwIfMissing\";\nimport { addClasses, removeClasses } from \"./util/dom\";\n\nvar BoundingBox =\n/*#__PURE__*/\nfunction () {\n function BoundingBox(options) {\n _classCallCheck(this, BoundingBox);\n\n this.isShowing = false;\n var _options$namespace = options.namespace,\n namespace = _options$namespace === void 0 ? null : _options$namespace,\n _options$zoomFactor = options.zoomFactor,\n zoomFactor = _options$zoomFactor === void 0 ? throwIfMissing() : _options$zoomFactor,\n _options$containerEl = options.containerEl,\n containerEl = _options$containerEl === void 0 ? throwIfMissing() : _options$containerEl;\n this.settings = {\n namespace: namespace,\n zoomFactor: zoomFactor,\n containerEl: containerEl\n };\n this.openClasses = this._buildClasses(\"open\");\n\n this._buildElement();\n }\n\n _createClass(BoundingBox, [{\n key: \"_buildClasses\",\n value: function _buildClasses(suffix) {\n var classes = [\"drift-\".concat(suffix)];\n var ns = this.settings.namespace;\n\n if (ns) {\n classes.push(\"\".concat(ns, \"-\").concat(suffix));\n }\n\n return classes;\n }\n }, {\n key: \"_buildElement\",\n value: function _buildElement() {\n this.el = document.createElement(\"div\");\n addClasses(this.el, this._buildClasses(\"bounding-box\"));\n }\n }, {\n key: \"show\",\n value: function show(zoomPaneWidth, zoomPaneHeight) {\n this.isShowing = true;\n this.settings.containerEl.appendChild(this.el);\n var style = this.el.style;\n style.width = \"\".concat(Math.round(zoomPaneWidth / this.settings.zoomFactor), \"px\");\n style.height = \"\".concat(Math.round(zoomPaneHeight / this.settings.zoomFactor), \"px\");\n addClasses(this.el, this.openClasses);\n }\n }, {\n key: \"hide\",\n value: function hide() {\n if (this.isShowing) {\n this.settings.containerEl.removeChild(this.el);\n }\n\n this.isShowing = false;\n removeClasses(this.el, this.openClasses);\n }\n }, {\n key: \"setPosition\",\n value: function setPosition(percentageOffsetX, percentageOffsetY, triggerRect) {\n var pageXOffset = window.pageXOffset;\n var pageYOffset = window.pageYOffset;\n var inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - this.el.clientWidth / 2 + pageXOffset;\n var inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - this.el.clientHeight / 2 + pageYOffset;\n\n if (inlineLeft < triggerRect.left + pageXOffset) {\n inlineLeft = triggerRect.left + pageXOffset;\n } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerRect.width + pageXOffset) {\n inlineLeft = triggerRect.left + triggerRect.width - this.el.clientWidth + pageXOffset;\n }\n\n if (inlineTop < triggerRect.top + pageYOffset) {\n inlineTop = triggerRect.top + pageYOffset;\n } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerRect.height + pageYOffset) {\n inlineTop = triggerRect.top + triggerRect.height - this.el.clientHeight + pageYOffset;\n }\n\n this.el.style.left = \"\".concat(inlineLeft, \"px\");\n this.el.style.top = \"\".concat(inlineTop, \"px\");\n }\n }]);\n\n return BoundingBox;\n}();\n\nexport { BoundingBox as default };\n//# sourceMappingURL=BoundingBox.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/BoundingBox.js\n// module id = 1466\n// module chunks = 2","function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nimport throwIfMissing from \"./util/throwIfMissing\";\nimport { addClasses, removeClasses } from \"./util/dom\"; // All officially-supported browsers have this, but it's easy to\n// account for, just in case.\n\nvar divStyle = document.createElement(\"div\").style;\nvar HAS_ANIMATION = typeof document === \"undefined\" ? false : \"animation\" in divStyle || \"webkitAnimation\" in divStyle;\n\nvar ZoomPane =\n/*#__PURE__*/\nfunction () {\n function ZoomPane() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n _classCallCheck(this, ZoomPane);\n\n this._completeShow = this._completeShow.bind(this);\n this._completeHide = this._completeHide.bind(this);\n this._handleLoad = this._handleLoad.bind(this);\n this.isShowing = false;\n var _options$container = options.container,\n container = _options$container === void 0 ? null : _options$container,\n _options$zoomFactor = options.zoomFactor,\n zoomFactor = _options$zoomFactor === void 0 ? throwIfMissing() : _options$zoomFactor,\n _options$inline = options.inline,\n inline = _options$inline === void 0 ? throwIfMissing() : _options$inline,\n _options$namespace = options.namespace,\n namespace = _options$namespace === void 0 ? null : _options$namespace,\n _options$showWhitespa = options.showWhitespaceAtEdges,\n showWhitespaceAtEdges = _options$showWhitespa === void 0 ? throwIfMissing() : _options$showWhitespa,\n _options$containInlin = options.containInline,\n containInline = _options$containInlin === void 0 ? throwIfMissing() : _options$containInlin,\n _options$inlineOffset = options.inlineOffsetX,\n inlineOffsetX = _options$inlineOffset === void 0 ? 0 : _options$inlineOffset,\n _options$inlineOffset2 = options.inlineOffsetY,\n inlineOffsetY = _options$inlineOffset2 === void 0 ? 0 : _options$inlineOffset2,\n _options$inlineContai = options.inlineContainer,\n inlineContainer = _options$inlineContai === void 0 ? document.body : _options$inlineContai;\n this.settings = {\n container: container,\n zoomFactor: zoomFactor,\n inline: inline,\n namespace: namespace,\n showWhitespaceAtEdges: showWhitespaceAtEdges,\n containInline: containInline,\n inlineOffsetX: inlineOffsetX,\n inlineOffsetY: inlineOffsetY,\n inlineContainer: inlineContainer\n };\n this.openClasses = this._buildClasses(\"open\");\n this.openingClasses = this._buildClasses(\"opening\");\n this.closingClasses = this._buildClasses(\"closing\");\n this.inlineClasses = this._buildClasses(\"inline\");\n this.loadingClasses = this._buildClasses(\"loading\");\n\n this._buildElement();\n }\n\n _createClass(ZoomPane, [{\n key: \"_buildClasses\",\n value: function _buildClasses(suffix) {\n var classes = [\"drift-\".concat(suffix)];\n var ns = this.settings.namespace;\n\n if (ns) {\n classes.push(\"\".concat(ns, \"-\").concat(suffix));\n }\n\n return classes;\n }\n }, {\n key: \"_buildElement\",\n value: function _buildElement() {\n this.el = document.createElement(\"div\");\n addClasses(this.el, this._buildClasses(\"zoom-pane\"));\n var loaderEl = document.createElement(\"div\");\n addClasses(loaderEl, this._buildClasses(\"zoom-pane-loader\"));\n this.el.appendChild(loaderEl);\n this.imgEl = document.createElement(\"img\");\n this.el.appendChild(this.imgEl);\n }\n }, {\n key: \"_setImageURL\",\n value: function _setImageURL(imageURL) {\n this.imgEl.setAttribute(\"src\", imageURL);\n }\n }, {\n key: \"_setImageSize\",\n value: function _setImageSize(triggerWidth, triggerHeight) {\n this.imgEl.style.width = \"\".concat(triggerWidth * this.settings.zoomFactor, \"px\");\n this.imgEl.style.height = \"\".concat(triggerHeight * this.settings.zoomFactor, \"px\");\n } // `percentageOffsetX` and `percentageOffsetY` must be percentages\n // expressed as floats between `0' and `1`.\n\n }, {\n key: \"setPosition\",\n value: function setPosition(percentageOffsetX, percentageOffsetY, triggerRect) {\n var imgElWidth = this.imgEl.offsetWidth;\n var imgElHeight = this.imgEl.offsetHeight;\n var elWidth = this.el.offsetWidth;\n var elHeight = this.el.offsetHeight;\n var centreOfContainerX = elWidth / 2;\n var centreOfContainerY = elHeight / 2;\n var targetImgXToBeCentre = imgElWidth * percentageOffsetX;\n var targetImgYToBeCentre = imgElHeight * percentageOffsetY;\n var left = centreOfContainerX - targetImgXToBeCentre;\n var top = centreOfContainerY - targetImgYToBeCentre;\n var differenceBetweenContainerWidthAndImgWidth = elWidth - imgElWidth;\n var differenceBetweenContainerHeightAndImgHeight = elHeight - imgElHeight;\n var isContainerLargerThanImgX = differenceBetweenContainerWidthAndImgWidth > 0;\n var isContainerLargerThanImgY = differenceBetweenContainerHeightAndImgHeight > 0;\n var minLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : 0;\n var minTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : 0;\n var maxLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : differenceBetweenContainerWidthAndImgWidth;\n var maxTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : differenceBetweenContainerHeightAndImgHeight;\n\n if (this.el.parentElement === this.settings.inlineContainer) {\n // This may be needed in the future to deal with browser event\n // inconsistencies, but it's difficult to tell for sure.\n // let scrollX = isTouch ? 0 : window.scrollX;\n // let scrollY = isTouch ? 0 : window.scrollY;\n var scrollX = window.pageXOffset;\n var scrollY = window.pageYOffset;\n var inlineLeft = triggerRect.left + percentageOffsetX * triggerRect.width - elWidth / 2 + this.settings.inlineOffsetX + scrollX;\n var inlineTop = triggerRect.top + percentageOffsetY * triggerRect.height - elHeight / 2 + this.settings.inlineOffsetY + scrollY;\n\n if (this.settings.containInline) {\n if (inlineLeft < triggerRect.left + scrollX) {\n inlineLeft = triggerRect.left + scrollX;\n } else if (inlineLeft + elWidth > triggerRect.left + triggerRect.width + scrollX) {\n inlineLeft = triggerRect.left + triggerRect.width - elWidth + scrollX;\n }\n\n if (inlineTop < triggerRect.top + scrollY) {\n inlineTop = triggerRect.top + scrollY;\n } else if (inlineTop + elHeight > triggerRect.top + triggerRect.height + scrollY) {\n inlineTop = triggerRect.top + triggerRect.height - elHeight + scrollY;\n }\n }\n\n this.el.style.left = \"\".concat(inlineLeft, \"px\");\n this.el.style.top = \"\".concat(inlineTop, \"px\");\n }\n\n if (!this.settings.showWhitespaceAtEdges) {\n if (left > minLeft) {\n left = minLeft;\n } else if (left < maxLeft) {\n left = maxLeft;\n }\n\n if (top > minTop) {\n top = minTop;\n } else if (top < maxTop) {\n top = maxTop;\n }\n }\n\n this.imgEl.style.transform = \"translate(\".concat(left, \"px, \").concat(top, \"px)\");\n this.imgEl.style.webkitTransform = \"translate(\".concat(left, \"px, \").concat(top, \"px)\");\n }\n }, {\n key: \"_removeListenersAndResetClasses\",\n value: function _removeListenersAndResetClasses() {\n this.el.removeEventListener(\"animationend\", this._completeShow, false);\n this.el.removeEventListener(\"animationend\", this._completeHide, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeShow, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeHide, false);\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.closingClasses);\n }\n }, {\n key: \"show\",\n value: function show(imageURL, triggerWidth, triggerHeight) {\n this._removeListenersAndResetClasses();\n\n this.isShowing = true;\n addClasses(this.el, this.openClasses);\n\n if (this.imgEl.getAttribute(\"src\") != imageURL) {\n addClasses(this.el, this.loadingClasses);\n this.imgEl.addEventListener(\"load\", this._handleLoad, false);\n\n this._setImageURL(imageURL);\n }\n\n this._setImageSize(triggerWidth, triggerHeight);\n\n if (this._isInline) {\n this._showInline();\n } else {\n this._showInContainer();\n }\n\n if (HAS_ANIMATION) {\n this.el.addEventListener(\"animationend\", this._completeShow, false);\n this.el.addEventListener(\"webkitAnimationEnd\", this._completeShow, false);\n addClasses(this.el, this.openingClasses);\n }\n }\n }, {\n key: \"_showInline\",\n value: function _showInline() {\n this.settings.inlineContainer.appendChild(this.el);\n addClasses(this.el, this.inlineClasses);\n }\n }, {\n key: \"_showInContainer\",\n value: function _showInContainer() {\n this.settings.container.appendChild(this.el);\n }\n }, {\n key: \"hide\",\n value: function hide() {\n this._removeListenersAndResetClasses();\n\n this.isShowing = false;\n\n if (HAS_ANIMATION) {\n this.el.addEventListener(\"animationend\", this._completeHide, false);\n this.el.addEventListener(\"webkitAnimationEnd\", this._completeHide, false);\n addClasses(this.el, this.closingClasses);\n } else {\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.inlineClasses);\n }\n }\n }, {\n key: \"_completeShow\",\n value: function _completeShow() {\n this.el.removeEventListener(\"animationend\", this._completeShow, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeShow, false);\n removeClasses(this.el, this.openingClasses);\n }\n }, {\n key: \"_completeHide\",\n value: function _completeHide() {\n this.el.removeEventListener(\"animationend\", this._completeHide, false);\n this.el.removeEventListener(\"webkitAnimationEnd\", this._completeHide, false);\n removeClasses(this.el, this.openClasses);\n removeClasses(this.el, this.closingClasses);\n removeClasses(this.el, this.inlineClasses);\n this.el.setAttribute(\"style\", \"\"); // The window could have been resized above or below `inline`\n // limits since the ZoomPane was shown. Because of this, we\n // can't rely on `this._isInline` here.\n\n if (this.el.parentElement === this.settings.container) {\n this.settings.container.removeChild(this.el);\n } else if (this.el.parentElement === this.settings.inlineContainer) {\n this.settings.inlineContainer.removeChild(this.el);\n }\n }\n }, {\n key: \"_handleLoad\",\n value: function _handleLoad() {\n this.imgEl.removeEventListener(\"load\", this._handleLoad, false);\n removeClasses(this.el, this.loadingClasses);\n }\n }, {\n key: \"_isInline\",\n get: function get() {\n var inline = this.settings.inline;\n return inline === true || typeof inline === \"number\" && window.innerWidth <= inline;\n }\n }]);\n\n return ZoomPane;\n}();\n\nexport { ZoomPane as default };\n//# sourceMappingURL=ZoomPane.js.map\n\n\n//////////////////\n// WEBPACK FOOTER\n// ../node_modules/drift-zoom/es/ZoomPane.js\n// module id = 1467\n// module chunks = 2","const expandLinkClass = 'js-product-reassurance__item--expand';\r\nconst collapseLinkClass = 'js-product-reassurance__item--collapse';\r\nconst collapseCrossClass = 'js-product-reassurance__description--close';\r\n\r\nconst itemHiddenClass = 'o-product-reassurance__item--hidden';\r\n\r\nfunction findReassuranceIndexByLink(link) {\r\n return link.closest('.o-product-reassurance__item').data('product-reassurance-item');\r\n}\r\n\r\nfunction findDescriptionBlocByIndex(index) {\r\n return $(`.js-product-reassurance__description[data-product-reassurance-description='${index}']`);\r\n}\r\n\r\nfunction hideOpenedDescriptionBlocs(isDescriptionBlocAlreadyOpened) {\r\n if (isDescriptionBlocAlreadyOpened) {\r\n $('.js-product-reassurance__description:visible').hide();\r\n } else {\r\n $(`.${collapseCrossClass}:visible`).hide();\r\n $('.js-product-reassurance__description:visible').slideUp();\r\n }\r\n\r\n $(`.${expandLinkClass}`).not(':visible').removeClass(itemHiddenClass);\r\n $(`.${collapseLinkClass}:visible`).addClass(itemHiddenClass);\r\n}\r\n\r\nfunction invertExpandCollapseLink(sourceLink) {\r\n sourceLink.siblings(`.${collapseLinkClass}`).removeClass(itemHiddenClass);\r\n sourceLink.addClass(itemHiddenClass);\r\n}\r\n\r\nfunction isDescriptionBlocOpened() {\r\n return $('.js-product-reassurance__description:visible').length > 0;\r\n}\r\n\r\nfunction initExpandLinkClick() {\r\n $(`.${expandLinkClass}`).click((event) => {\r\n const isDescriptionBlocAlreadyOpened = isDescriptionBlocOpened();\r\n\r\n hideOpenedDescriptionBlocs(isDescriptionBlocAlreadyOpened);\r\n\r\n const expandLink = $(event.target);\r\n\r\n invertExpandCollapseLink(expandLink);\r\n\r\n const currentReassuranceIndex = findReassuranceIndexByLink(expandLink);\r\n const currentDescriptionBloc = findDescriptionBlocByIndex(currentReassuranceIndex);\r\n\r\n if (isDescriptionBlocAlreadyOpened) {\r\n currentDescriptionBloc.show();\r\n } else {\r\n currentDescriptionBloc.slideDown();\r\n }\r\n\r\n currentDescriptionBloc.find(`.${collapseCrossClass}`).show();\r\n });\r\n}\r\n\r\nfunction initCollapseLinkClick() {\r\n $(`.${collapseLinkClass}`).click((event) => {\r\n hideOpenedDescriptionBlocs(false);\r\n\r\n const collapseLink = $(event.target);\r\n\r\n invertExpandCollapseLink(collapseLink);\r\n\r\n const currentReassuranceIndex = findReassuranceIndexByLink(collapseLink);\r\n findDescriptionBlocByIndex(currentReassuranceIndex).slideUp();\r\n });\r\n}\r\n\r\nfunction initCollapseCrossClick() {\r\n $(`.${collapseCrossClass}`).click(() => {\r\n hideOpenedDescriptionBlocs(false);\r\n });\r\n}\r\n\r\nfunction init() {\r\n if ($('.js-product-reassurance').length) {\r\n initExpandLinkClick();\r\n initCollapseLinkClick();\r\n initCollapseCrossClick();\r\n }\r\n}\r\n\r\n// Named exports - Functions\r\nexport {\r\n init\r\n};\r\n\r\nexport default init;\r\n\n\n\n// WEBPACK FOOTER //\n// ./js/desktop/organism/product-reassurance.js"],"sourceRoot":""}