{"mappings":"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","sources":["src/ts/components/quick-view.ts"],"sourcesContent":["import { addJSClass } from '../utils/progressive-enhancement';\r\nimport { getEventElement } from '../utils/event-handlers';\r\nimport { svgPath } from '../utils/svg-path';\r\nimport { translate } from '../utils/translation';\r\nimport { ajaxAbortHandler, ajaxErrorHandler } from '../utils/ajax-helpers';\r\nimport { Share } from './share';\r\n\r\nexport class QuickView {\r\n    private quickViewToggles: NodeListOf<HTMLButtonElement>;\r\n\r\n    constructor(private quickViewGrid: HTMLElement) {\r\n        addJSClass(quickViewGrid);\r\n\r\n        this.quickViewToggles =\r\n            quickViewGrid.querySelectorAll('[data-quick-view]');\r\n\r\n        this.init();\r\n    }\r\n\r\n    public static start(): void {\r\n        const quickViewGrids = document.querySelectorAll('.gw-quick-view-grid');\r\n\r\n        if (quickViewGrids) {\r\n            [...(quickViewGrids as any)].map((quickViewGrid) => {\r\n                addJSClass(quickViewGrid);\r\n\r\n                const instance = new QuickView(quickViewGrid);\r\n\r\n                return instance;\r\n            });\r\n        }\r\n    }\r\n\r\n    private init(): void {\r\n        const quickViewItem = this.initQuickViewItem();\r\n        this.initQuickViewToggle(quickViewItem);\r\n    }\r\n\r\n    private initQuickViewItem(): HTMLLIElement {\r\n        // 1. Create an <li> to contain quick view content.\r\n        const quickViewItem = document.createElement('li');\r\n        quickViewItem.classList.add('gw-quick-view__item');\r\n        quickViewItem.setAttribute('tabIndex', '0');\r\n\r\n        // 2. Create close button.\r\n        const quickViewClose: HTMLButtonElement =\r\n            document.createElement('button');\r\n        quickViewClose.setAttribute('type', 'button');\r\n        quickViewClose.classList.add('gw-button');\r\n        quickViewClose.classList.add('gw-button--icon');\r\n        quickViewClose.classList.add('gw-quick-view__close');\r\n\r\n        const svgHref = svgPath();\r\n        const buttonText = translate('Close', 'Close');\r\n        const buttonContent = `\r\n            <svg\r\n                aria-hidden=\"true\"\r\n                focusable=\"false\"\r\n                class=\"gw-icon\"\r\n            >\r\n                <title>${buttonText}</title>\r\n                <use href=\"${svgHref}#GRUX00016\" />\r\n            </svg>\r\n            <span class=\"sr-only\">${buttonText}</span>\r\n        `;\r\n        quickViewClose.innerHTML = buttonContent;\r\n\r\n        // 3. Create empty <div> for Ajax content.\r\n        const quickViewAjax: HTMLDivElement = document.createElement('div');\r\n        quickViewAjax.classList.add('gw-quick-view__ajax');\r\n\r\n        quickViewItem.appendChild(quickViewClose);\r\n        quickViewItem.appendChild(quickViewAjax);\r\n\r\n        // 4. Handle click event for \"close\" button in quick view card.\r\n        quickViewClose?.addEventListener('click', (): void => {\r\n            this.handleCloseClick(quickViewItem);\r\n        });\r\n\r\n        return quickViewItem;\r\n    }\r\n\r\n    private initQuickViewToggle(quickViewItem: HTMLLIElement): void {\r\n        [...(this.quickViewToggles as any)].map((quickViewToggle) => {\r\n            quickViewToggle.classList.remove('is-hidden');\r\n\r\n            quickViewToggle.addEventListener('click', (e: MouseEvent): void => {\r\n                let target = getEventElement(\r\n                    e.target\r\n                ) as HTMLButtonElement | null;\r\n                // Button has a nested <span> so ensure we're passing the target as a <button>.\r\n                if (target && target.nodeName !== 'BUTTON') {\r\n                    target = target.closest('.gw-button');\r\n                }\r\n                target &&\r\n                    this.handleQuickViewToggleClick(target, quickViewItem);\r\n            });\r\n\r\n            return true;\r\n        });\r\n    }\r\n\r\n    private handleQuickViewToggleClick(\r\n        target: HTMLButtonElement,\r\n        quickViewItem: HTMLLIElement\r\n    ): void {\r\n        const clickedCard = target.closest('.gw-card');\r\n        const selectedItem = clickedCard?.closest('li');\r\n        const isExpanded =\r\n            target.getAttribute('aria-expanded') === 'true' || false;\r\n        const toggleLabel = target.querySelector(\r\n            '.gw-icon:last-of-type'\r\n        )?.nextElementSibling;\r\n        const toggleLabelText = isExpanded\r\n            ? target.dataset.quickViewLabelOpen\r\n            : target.dataset.quickViewLabelClose;\r\n\r\n        target.setAttribute('aria-expanded', Boolean(!isExpanded).toString());\r\n        target.classList.toggle('is-selected');\r\n        clickedCard?.classList.toggle('is-selected');\r\n        if (toggleLabel && toggleLabelText) {\r\n            toggleLabel.innerHTML = toggleLabelText;\r\n        }\r\n\r\n        // \"Quick view\" toggle button clicked.\r\n        if (!isExpanded) {\r\n            selectedItem &&\r\n                this.quickViewGrid &&\r\n                this.openQuickView(target, quickViewItem, selectedItem);\r\n\r\n            // Make Ajax request for quick view content.\r\n            this.ajaxFetch(target, quickViewItem);\r\n        } else {\r\n            this.closeQuickView(quickViewItem);\r\n        }\r\n    }\r\n\r\n    private openQuickView(\r\n        target: HTMLButtonElement,\r\n        quickViewItem: HTMLLIElement,\r\n        selectedItem: HTMLLIElement\r\n    ): void {\r\n        // First reset any previously selected quick view toggle buttons.\r\n        this.resetQuickViewToggle(target);\r\n\r\n        // Inject quick view item into correct place in the DOM.\r\n        selectedItem &&\r\n            this.quickViewGrid.insertBefore(\r\n                quickViewItem,\r\n                selectedItem.nextSibling\r\n            );\r\n    }\r\n\r\n    private closeQuickView(quickViewItem: HTMLLIElement): void {\r\n        this.quickViewGrid.removeChild(quickViewItem);\r\n    }\r\n\r\n    private handleCloseClick(quickViewItem: HTMLLIElement): void {\r\n        // Work out which product card triggered quick view, and reset it.\r\n        const clickedCard =\r\n            quickViewItem.previousElementSibling?.querySelector('.gw-card');\r\n        const toggler = clickedCard?.querySelector(\r\n            '[data-quick-view]'\r\n        ) as HTMLButtonElement;\r\n        const togglerLabel = toggler.querySelector(\r\n            '.gw-icon:last-of-type'\r\n        )?.nextElementSibling;\r\n\r\n        if (togglerLabel && toggler.dataset.quickViewLabelOpen) {\r\n            togglerLabel.innerHTML = toggler.dataset.quickViewLabelOpen;\r\n        }\r\n        clickedCard?.classList.remove('is-selected');\r\n        toggler.setAttribute('aria-expanded', 'false');\r\n        toggler.classList.remove('is-selected');\r\n        toggler.focus();\r\n\r\n        // Remove quick view item.\r\n        this.quickViewGrid.removeChild(quickViewItem);\r\n    }\r\n\r\n    private resetQuickViewToggle(target: HTMLButtonElement): void {\r\n        [...(this.quickViewToggles as any)].map((selectedButton) => {\r\n            if (\r\n                selectedButton.classList.contains('is-selected') &&\r\n                selectedButton !== target\r\n            ) {\r\n                const selectedButtonLabel = selectedButton.querySelector(\r\n                    '.gw-icon:last-of-type'\r\n                )?.nextElementSibling;\r\n\r\n                if (selectedButtonLabel) {\r\n                    selectedButtonLabel.innerHTML =\r\n                        selectedButton.dataset.quickViewLabelOpen;\r\n                }\r\n                selectedButton.setAttribute('aria-expanded', 'false');\r\n                selectedButton.classList.toggle('is-selected');\r\n                selectedButton\r\n                    .closest('.gw-card')\r\n                    .classList.toggle('is-selected');\r\n            }\r\n\r\n            return true;\r\n        });\r\n    }\r\n\r\n    // eslint-disable-next-line class-methods-use-this\r\n    private ajaxFetch(target: HTMLElement, quickViewItem: HTMLLIElement): void {\r\n        const ajaxUrl = target.dataset.quickViewUrl;\r\n        const ajaxContainer = quickViewItem.querySelector(\r\n            '.gw-quick-view__ajax'\r\n        ) as HTMLElement;\r\n        const showAjaxLoader = true;\r\n        const ajaxLoaderContainer = ajaxContainer;\r\n        const ajaxTimeout = 10000;\r\n\r\n        if (ajaxUrl && ajaxUrl !== '') {\r\n            fetch(ajaxUrl, {\r\n                signal: ajaxAbortHandler({\r\n                    ajaxLoaderContainer,\r\n                    showAjaxLoader,\r\n                    ajaxTimeout,\r\n                }),\r\n            })\r\n                .then((response) => response.text())\r\n                .then((html) => {\r\n                    ajaxContainer.innerHTML = html;\r\n\r\n                    // Instantiate 'share' component, as we've Ajax fetched it as part of quick view.\r\n                    Share.start();\r\n\r\n                    // Scroll browser - see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView.\r\n                    if (document.body.getBoundingClientRect().width < 1024) {\r\n                        quickViewItem.scrollIntoView();\r\n                    } else {\r\n                        quickViewItem.scrollIntoView({ block: 'center' });\r\n                    }\r\n                })\r\n                .catch((error) => {\r\n                    ajaxErrorHandler({\r\n                        error,\r\n                        ajaxContainer,\r\n                    });\r\n                });\r\n        }\r\n    }\r\n}\r\n"],"names":["$0acb8c7ee8b516ca$export$8e2e6e914f26c424","quickViewGrids","document","querySelectorAll","map","quickViewGrid","$9mUbj","addJSClass","init","quickViewItem","this","initQuickViewItem","initQuickViewToggle","createElement","classList","add","setAttribute","quickViewClose","svgHref","$3lTLo","svgPath","buttonText","$3h2WB","translate","buttonContent","innerHTML","quickViewAjax","appendChild","addEventListener","handleCloseClick","quickViewToggles","quickViewToggle","remove","e","target","$eBVNX","getEventElement","nodeName","closest","handleQuickViewToggleClick","quickViewItem1","ref","clickedCard","selectedItem","isExpanded","getAttribute","toggleLabel","querySelector","nextElementSibling","toggleLabelText","dataset","quickViewLabelOpen","quickViewLabelClose","Boolean","toString","toggle","closeQuickView","openQuickView","ajaxFetch","target1","quickViewItem2","resetQuickViewToggle","insertBefore","nextSibling","quickViewItem3","removeChild","quickViewItem4","ref1","previousElementSibling","toggler","togglerLabel","focus","target2","selectedButton","contains","selectedButtonLabel","ajaxUrl","target3","quickViewUrl","ajaxContainer","quickViewItem5","ajaxLoaderContainer","fetch","signal","$lLdy6","ajaxAbortHandler","ajaxTimeout","then","response","text","html","$l5Ojj","Share","start","body","getBoundingClientRect","width","scrollIntoView","block","catch","error","ajaxErrorHandler"],"version":3,"file":"quick-view.638f6772.js.map"}