{"version":3,"sources":["webpack:///./cartridges/app_accelerator_core/cartridge/client/default/js/modules/module.product-tile.js"],"names":["ProductTile","options","_classCallCheck","callbackOnElements","elements","setupTile","bind","_createClass","key","value","currentTile","setPermanentImageData","setupSwatches","setupSecondaryImageDisplay","setupVariationListeners","setupAddToCart","_this","swatches","querySelectorAll","swatchesContainer","querySelector","forEach","call","currentSwatch","setupSingleSwatch","addEventListener","updateImages","permanentImageData","swatchData","JSON","parse","getAttribute","swatchSelectHandler","images","undefined","evt","preventDefault","updateURLs","unselectAllSwatches","setSelected","currentSelectedSwatches","classList","remove","add","productImages","currentImage","url","src","title","alt","target","dataset","imageIndex"],"mappings":"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","file":"module-product-tile.js","sourcesContent":["\nimport {updateImages, updateURLs} from '../product/productUtils';\nimport {setupVariationListeners} from '../product/variationsUtils';\nimport {setupAddToCart} from '../product/addToCart';\nimport {callbackOnElements} from '@borngroup/born-utilities';\n\n\n\nexport default class ProductTile {\n    constructor(options) {\n        callbackOnElements(options.elements, this.setupTile.bind(this));\n    }\n\n    setupTile(currentTile) {\n        this.setPermanentImageData(currentTile);\n\n        this.setupSwatches(currentTile);\n\n        this.setupSecondaryImageDisplay(currentTile);\n        setupVariationListeners(currentTile);\n        setupAddToCart(currentTile);\n    }\n\n    setupSwatches(currentTile) {\n        let swatches = currentTile.querySelectorAll('[data-product-swatch]'),\n            swatchesContainer = currentTile.querySelector('[data-product-component=\"swatches\"]');\n\n        [].forEach.call(swatches, currentSwatch => this.setupSingleSwatch(currentSwatch, currentTile));\n\n        if (swatchesContainer) {\n            swatchesContainer.addEventListener('mouseleave', function() {\n                updateImages(currentTile.permanentImageData, currentTile);\n            });\n        }\n    }\n\n    setupSingleSwatch(currentSwatch, currentTile) {\n        let swatchData = JSON.parse(currentSwatch.getAttribute('data-product-swatch'));\n\n        currentSwatch.addEventListener('click', this.swatchSelectHandler.bind(this, swatchData, currentSwatch, currentTile));\n        currentSwatch.addEventListener('mouseenter', updateImages.bind(this, swatchData.images, currentTile, undefined));\n    }\n\n    swatchSelectHandler(swatchData, currentSwatch, currentTile, evt) {\n        evt.preventDefault();\n\n        updateImages(swatchData.images, currentTile);\n\n        updateURLs(currentSwatch.getAttribute('data-query-string'), currentTile);\n\n        this.unselectAllSwatches(currentTile);\n        this.setSelected(currentSwatch, currentTile);\n\n        currentTile.permanentImageData = swatchData.images;\n    }\n\n    unselectAllSwatches(currentTile) {\n        let currentSelectedSwatches = currentTile.querySelectorAll('[data-product-swatch].selected');\n\n        [].forEach.call(currentSelectedSwatches, currentSwatch => currentSwatch.classList.remove('selected'));\n    }\n\n    setSelected(currentSwatch) {\n        currentSwatch.classList.add('selected');\n    }\n\n    setPermanentImageData(currentTile) {\n        let productImages = currentTile.querySelectorAll('[data-product-component=\"image\"]');\n\n        currentTile.permanentImageData = [];\n\n        [].forEach.call(productImages, function(currentImage) {\n            currentTile.permanentImageData[currentImage.getAttribute('data-image-index')] = {\n                url: currentImage.src || currentImage.getAttribute('data-src'),\n                title: currentImage.title,\n                alt: currentImage.alt\n            };\n        }.bind(this));\n    }\n\n    //This utility adds a special class \"set--images-lazy-loaded\" to the product tiles.\n    //This class is the used in the CSS to ensure that the \"main\" product image is not hidden when hovering on a tile.\n    //This is necessary because the product images are transparent, and on hover the secondary image must show.\n    //The secondary image however needs to be fully loaded before letting the tile show it, hence the need for this snippet.\n    setupSecondaryImageDisplay(currentTile) {\n        currentTile.addEventListener('lazyloaded', function(evt) {\n            if (evt.target.dataset.imageIndex > 0) {\n                currentTile.classList.add('set--images-lazy-loaded');\n            }\n        });\n    }\n}\n"],"sourceRoot":""}