{"version":3,"file":"../../../javascript/pages/configurable-options.js","names":["configurableOptions","updateOptions","options","selectedOptions","option","Array","from","forEach","val","current","this","container","querySelector","value","icon","getElementsByClassName","valid","classList","remove","innerHTML","contains","add","svg","Svg","render","showSelectionMessage","submit","disabled","dataset","optionUrl","compare","optionSku","actionContent","style","display","actionSelection","document","querySelectorAll","optionStyle","selectedFinish","hasAttribute","optionEvent","addEventListener","blur","optionField","el","originalTitle","paramsObject","selected","optionValue","$","extend","getSelectedOptions","getParams","ajax","url","type","data","dataType","success","payload","selectedProduct","product","sku","updateProduct","tippy","tippyConfig","selectOption","e","target","defaultUrl","location","magnificPopup","close","defaultSku","window","compareParams","replace","with","request","Date","getTime"],"sources":["pages/configurable-options.js"],"mappings":"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","ignoreList":[],"sourceRoot":"../../../../../resources/javascript","sourcesContent":["function configurableOptions() {\n    this.container = document.querySelector('[data-option-style]');\n    this.options = Array.from(this.container.querySelectorAll('button.js-configurable-option,a.js-configurable-option'));\n    this.style = this.container.dataset.optionStyle;\n    this.submit = this.container.querySelector('button.js-configurable-submit');\n    this.compare = this.container.querySelector('button.js-configurable-compare');\n    this.actionContent = this.container.querySelector('.js-configurable-action-content');\n    this.actionSelection = this.container.querySelector('.js-configurable-action-selection');\n    this.selectedFinish = this.container.querySelector('.js-configurable-selected-finish');\n\n    this.options.forEach(option => {\n        if (!option.hasAttribute('data-option-event')) {\n            option.dataset.optionEvent = '';\n            option.addEventListener('click', () => {\n                selectOption(option);\n            });\n        }\n    });\n\n    if (this.submit) {\n        this.submit.addEventListener('click', (e) => {\n            if (e.target.dataset.optionUrl !== e.target.dataset.defaultUrl) {\n                document.location = e.target.dataset.optionUrl;\n            } else {\n                $.magnificPopup.close();\n            }\n        });\n\n        if (this.submit.disabled) {\n            showSelectionMessage();\n        }\n    }\n\n    if (this.compare) {\n        this.compare.addEventListener('click', (e) => {\n            const data = this.compare.dataset;\n            if (data.optionSku !== data.defaultSku) {\n                window.window.compareParams = {\n                    replace: data.defaultSku,\n                    with: data.optionSku,\n                    request: new Date().getTime(),\n                };\n            }\n\n            $.magnificPopup.close();\n        });\n    }\n\n    function selectOption(option)\n    {\n        option.blur();\n\n        // unselect all matching field options that are not the selected option\n        Array.from(this.container.querySelectorAll('[data-option-field=\"' + option.dataset.optionField + '\"]')).forEach((el) => {\n            if (el != option) {\n                el.classList.remove('pdp-configure-popup__option--selected');\n                el.classList.remove('variants__item--active');\n            }\n        });\n\n        // now handle the selected option\n        if (option.classList.contains('variants__item')) {\n            option.classList.add('variants__item--active');\n            if (!option.classList.contains('variants__item--active')) {\n                this.selectedFinish.innerHTML = 'Please select';\n            } else {\n                this.selectedFinish.innerHTML = option.dataset.originalTitle;\n            }\n        } else {\n            option.classList.add('pdp-configure-popup__option--selected');\n        }\n\n        var paramsObject = {};\n        paramsObject.selected = {};\n        paramsObject.selected[option.dataset.optionField] = option.dataset.optionValue;\n\n        $.extend(paramsObject, getParams());\n\n        // trigger ajax update\n        $.ajax({\n            url: '/products/configurable-options',\n            type: 'post',\n            data: paramsObject,\n            dataType: 'json',\n            success: function(data) {\n                if (data.payload) {\n                    var selectedOptions = false;\n                    if (data.payload.selectedProduct) {\n                        updateProduct(data.payload.selectedProduct);\n                        tippy('[data-tooltip]', tippyConfig);\n                        selectedOptions = data.payload.selectedProduct.selectedOptions;\n                    } else {\n                        showSelectionMessage();\n                    }\n\n                    if (data.payload.configurableOptions) {\n                        updateOptions(data.payload.configurableOptions, selectedOptions);\n                    }\n                }\n            }\n        })\n    }\n\n    function getParams()\n    {\n        var paramsObject = {};\n\n        paramsObject['style'] = this.style;\n        paramsObject['fields'] = getSelectedOptions();\n\n        return paramsObject;\n    }\n\n    function getSelectedOptions()\n    {\n        var options = {};\n\n        Array.from(this.container.querySelectorAll('.js-configurable-option.pdp-configure-popup__option--selected,.js-configurable-option.variants__item--active')).forEach((el) => {\n            options[el.dataset.optionField] = el.dataset.optionValue;\n        });\n\n        return options;\n    }\n\n    function updateOptions(options, selectedOptions)\n    {\n        for (option in options) {\n            Array.from(options[option]).forEach((val) => {\n                var current = this.container.querySelector('[data-option-field=\"' + option + '\"][data-option-value=\"' + val.value + '\"]');\n                var icon = current.getElementsByClassName('variants__unavailable-icon')[0];\n                if (val.valid) {\n                    current.classList.remove('pdp-configure-popup__option--disabled');\n                    current.classList.remove('variants__item--disabled');\n\n                    if (typeof icon !== 'undefined') {\n                        icon.innerHTML = '';\n                    }\n                    if (selectedOptions && selectedOptions[option] == val.value) {\n                        if (current.classList.contains('variants__item')) {\n                            current.classList.add('variants__item--active');\n                        } else {\n                            current.classList.add('pdp-configure-popup__option--selected');\n                        }\n                    }\n                } else {\n                    if (current.classList.contains('variants__item')) {\n                        current.classList.add('variants__item--disabled');\n                        var svg = new Svg();\n                        icon.innerHTML = svg.render('x');\n                    } else {\n                        current.classList.add('pdp-configure-popup__option--disabled');\n                    }\n                    current.classList.remove('pdp-configure-popup__option--selected');\n                    current.classList.remove('variants__item--active');\n                }\n            });\n        }\n    }\n\n    function updateProduct(product)\n    {\n        if (this.submit) {\n            this.submit.disabled = false;\n            this.submit.dataset.optionUrl = product.url;\n        }\n\n        if (this.compare) {\n            this.compare.disabled = false;\n            this.compare.dataset.optionSku = product.sku;\n        }\n\n        this.actionSelection.style.display = 'none';\n        this.actionContent.innerHTML = product.actionContent;\n        this.actionContent.style.display = 'inline-block';\n    }\n\n    function showSelectionMessage()\n    {\n        if (this.submit) {\n            this.submit.disabled = true;\n            this.submit.dataset.optionUrl = '';\n        }\n\n        if (this.compare) {\n            this.compare.disabled = true;\n            this.compare.dataset.optionSku = '';\n        }\n\n        this.actionContent.style.display = 'none';\n        this.actionContent.innerHTML = '';\n        this.actionSelection.style.display = 'inline-block';\n    }\n}\n\nconfigurableOptions();\n"]}