{"version":3,"file":"embedded-listing.js","names":[],"sources":["../resources/javascript/listing/embedded.js","../resources/javascript/embedded-listing.js"],"sourcesContent":["import { initBasketForm } from '../features/basket';\nimport { initChoosersForContainer } from '../pdp/chooser/chooser-helpers';\nimport { productOptionChanged } from '../pdp/chooser/constants';\nimport { initDeferredImages } from './deferred-images';\nimport {\n    dispatchResultsRendered,\n    initSwatches,\n    reloadResult,\n    resultRendered,\n} from './result';\nimport 'scheduler-polyfill';\n\nexport const initEmbeddedListing = ({ container }) => {\n    const expandedResultPositions = {};\n    initDeferredImages(container);\n\n    // Add an event listener that initialises swatches when a result card is\n    // rendered.\n    container.addEventListener(resultRendered, e => {\n        const resultCard = e.detail.result;\n        initSwatches(resultCard);\n        initChoosersForContainer(resultCard);\n\n        const basketForm = resultCard.querySelector('.js-add-to-basket-form');\n        if (basketForm) {\n            initBasketForm(basketForm);\n        }\n\n        // Initialise expandable containers.\n        resultCard.querySelectorAll('.expander').forEach(expander => {\n            if (expander.dataset.expander) {\n                return;\n            }\n\n            // Set the initial state of the expander.\n            const previouslyExpanded =\n                expandedResultPositions[resultCard.dataset.position] ?? false;\n            expander.classList.toggle(\n                'expander--expanded-a',\n                previouslyExpanded\n            );\n            expander.classList.toggle(\n                'expander--expanded-b',\n                previouslyExpanded\n            );\n\n            // Add an event listener that toggles the expander.\n            // Use delayed class remove to allow granular control over the animation\n            expander\n                .querySelector('.expander__toggle')\n                .addEventListener('click', e => {\n                    e.preventDefault();\n                    e.stopPropagation();\n\n                    if (expander.dataset.expanding) {\n                        return;\n                    }\n\n                    const expanded = () => {\n                        if (\n                            expander.classList.contains('expander--expanded-b')\n                        ) {\n                            expander.classList.remove('expander--expanded-b');\n\n                            setTimeout(() => {\n                                expander.classList.remove(\n                                    'expander--expanded-a'\n                                );\n                                delete expander.dataset.expanding;\n                            }, 250);\n                        } else {\n                            expander.classList.add('expander--expanded-a');\n\n                            setTimeout(() => {\n                                expander.classList.add('expander--expanded-b');\n                                expandedResultPositions[\n                                    resultCard.dataset.position\n                                ] = true;\n                                delete expander.dataset.expanding;\n                            }, 250);\n                        }\n                    };\n\n                    expander.dataset.expanding = true;\n\n                    expandedResultPositions[resultCard.dataset.position] =\n                        expanded();\n                });\n\n            expander.dataset.expander = true;\n        });\n    });\n\n    // Add an event listener that reloads the result card when a product option\n    // is changed.\n    container.addEventListener(productOptionChanged, e => {\n        e.stopPropagation();\n        const { optionValues } = e.detail;\n\n        const resultCard = e.target.closest('.listing-item');\n\n        // Load the result in a separate task, to avoid blocking the main thread.\n        scheduler.postTask(() => reloadResult(resultCard, optionValues), {\n            priority: 'background',\n        });\n    });\n\n    // Dispatch an event for all the result cards that are already rendered, to\n    // initialise the options.\n    dispatchResultsRendered(container);\n};\n","import { initEmbeddedListing } from './listing/embedded';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    document.querySelectorAll('.listing--embedded').forEach(listing => {\n        initEmbeddedListing({ container: listing });\n    });\n});\n"],"mappings":"0OAYA,MAAa,GAAuB,CAAE,eAAgB,CAClD,IAAM,EAA0B,CAAC,EACjC,EAAmB,CAAS,EAI5B,EAAU,iBAAiB,EAAgB,GAAK,CAC5C,IAAM,EAAa,EAAE,OAAO,OAC5B,EAAa,CAAU,EACvB,EAAyB,CAAU,EAEnC,IAAM,EAAa,EAAW,cAAc,wBAAwB,EAChE,GACA,EAAe,CAAU,EAI7B,EAAW,iBAAiB,WAAW,CAAC,CAAC,QAAQ,GAAY,CACzD,GAAI,EAAS,QAAQ,SACjB,OAIJ,IAAM,EACF,EAAwB,EAAW,QAAQ,WAAa,GAC5D,EAAS,UAAU,OACf,uBACA,CACJ,EACA,EAAS,UAAU,OACf,uBACA,CACJ,EAIA,EACK,cAAc,mBAAmB,CAAC,CAClC,iBAAiB,QAAS,GAAK,CAI5B,GAHA,EAAE,eAAe,EACjB,EAAE,gBAAgB,EAEd,EAAS,QAAQ,UACjB,OAGJ,IAAM,MAAiB,CAEf,EAAS,UAAU,SAAS,sBAAsB,GAElD,EAAS,UAAU,OAAO,sBAAsB,EAEhD,eAAiB,CACb,EAAS,UAAU,OACf,sBACJ,EACA,OAAO,EAAS,QAAQ,SAC5B,EAAG,GAAG,IAEN,EAAS,UAAU,IAAI,sBAAsB,EAE7C,eAAiB,CACb,EAAS,UAAU,IAAI,sBAAsB,EAC7C,EACI,EAAW,QAAQ,UACnB,GACJ,OAAO,EAAS,QAAQ,SAC5B,EAAG,GAAG,EAEd,EAEA,EAAS,QAAQ,UAAY,GAE7B,EAAwB,EAAW,QAAQ,UACvC,EAAS,CACjB,CAAC,EAEL,EAAS,QAAQ,SAAW,EAChC,CAAC,CACL,CAAC,EAID,EAAU,iBAAiB,EAAsB,GAAK,CAClD,EAAE,gBAAgB,EAClB,GAAM,CAAE,gBAAiB,EAAE,OAErB,EAAa,EAAE,OAAO,QAAQ,eAAe,EAGnD,UAAU,aAAe,EAAa,EAAY,CAAY,EAAG,CAC7D,SAAU,YACd,CAAC,CACL,CAAC,EAID,EAAwB,CAAS,CACrC,EC5GA,SAAS,iBAAiB,uBAA0B,CAChD,SAAS,iBAAiB,oBAAoB,CAAC,CAAC,QAAQ,GAAW,CAC/D,EAAoB,CAAE,UAAW,CAAQ,CAAC,CAC9C,CAAC,CACL,CAAC"}