{"version":3,"file":"Src_Scripts_components_shop-category-overview_js.743949f9831e333cd6ec.js","sources":["webpack://haveselskabet/./Src/Scripts/components/shop-category-overview.js"],"sourcesContent":["export default class ShopCategoryOverview {\n    constructor(elm, args) {\n        var container = elm.querySelector('[data-shop-category-container]');\n\n        if (!container)\n            return;\n\n        var categoryId = container.dataset.categoryId;\n        var catalogId = container.dataset.catalogId;\n        var pricegroupId = container.dataset.pricegroupId;\n        var pageNumber = container.dataset.pageNumber;\n        var pageSize = container.dataset.pageSize;\n        var totalPages = container.dataset.totalPages;\n        var next = container.querySelector('[data-pagination-next]');\n        var prev = container.querySelector('[data-pagination-prev]');\n        var numbers = container.querySelectorAll('[data-pagination-goto]');\n        var resetPageNumber = false;\n\n        init();\n\n        function init() {\n\n            categoryId = container.dataset.categoryId;\n            catalogId = container.dataset.catalogId;\n            pricegroupId = container.dataset.pricegroupId;\n            pageNumber = container.dataset.pageNumber;\n            pageSize = container.dataset.pageSize;\n            totalPages = container.dataset.totalPages;\n            next = container.querySelector('[data-pagination-next]')\n            prev = container.querySelector('[data-pagination-prev]')\n            numbers = container.querySelectorAll('[data-pagination-goto]')\n            resetPageNumber = false;\n            // facets\n            var enabledCheckboxes = container.querySelectorAll('input[type=\"checkbox\"]:enabled');\n            enabledCheckboxes.forEach(item => {\n                item.addEventListener('click', e => {\n                    resetPageNumber = true;\n                    applyChanges(e);\n                })\n            });\n\n            // sorting\n            const sortingRadios = [...container.querySelectorAll('input[name=\"sort-products\"]')];\n            sortingRadios.forEach(radio => {\n                radio.addEventListener('change', e => {\n                    applyChanges(e);\n                });\n            });\n\n            //pagination\n            if (numbers.length > 0) {\n                numbers.forEach(item => {\n                    item.addEventListener('click', e => {\n                        pageNumber = item.dataset.paginationGoto;\n                        applyChanges(e);\n                    })\n                });\n            }\n\n            if (next != null) {\n                next.addEventListener('click', e => {\n                    pageNumber = parseInt(pageNumber) + 1;\n                    applyChanges(e);\n                });\n            }\n            if (prev != null) {\n                prev.addEventListener('click', e => {\n                    pageNumber = parseInt(pageNumber) - 1;\n                    applyChanges(e);\n                });\n            }\n\n            // If clicked on filter, then load menu\n            const filterButton = elm.querySelector('.filter-toggle');\n            const dropdowns = elm.querySelector('.filter-bar__dropdowns');\n            const filterCloseButtons = [...elm.querySelectorAll('.filter-bar__save-and-close')];\n\n            filterButton.addEventListener('click', () => {\n                console.log('toggle');\n                dropdowns.classList.add('filter-bar__dropdowns--active');\n            })\n\n            filterCloseButtons.forEach(button => {\n                button.addEventListener('click', () => {\n                    dropdowns.classList.remove('filter-bar__dropdowns--active');\n                })\n            })\n        }\n\n\n        function applyChanges(e) {\n            var queryStrings = {};\n            var baseUrl = window.location.href.split('?')[0] + '?';\n            var facets = Array.from(container.querySelectorAll('input[type=\"checkbox\"]:checked, input[type=\"radio\"]:checked'));\n            var price = '';\n            var memberPrice = '';\n            var brand = '';\n            var color = '';\n            var size = '';\n            var sortBy = '';\n            facets.forEach(item => {\n                var key = item.getAttribute('key');\n                if (queryStrings[key] == null) {\n                    queryStrings[key] = encodeURIComponent(item.getAttribute('value'));\n                }\n                else {\n                    queryStrings[key] += '|' + encodeURIComponent(item.getAttribute('value'));\n                }\n            });\n\n            const filterTags = [];\n\n            if (queryStrings.Brand !== undefined) {\n                brand = queryStrings.Brand;\n                filterTags.push(queryStrings.Brand);\n            }\n            if (queryStrings.Color !== undefined) {\n                color = queryStrings.Color;\n                filterTags.push(queryStrings.Color);\n            }\n            if (queryStrings.Size !== undefined) {\n                size = queryStrings.Size;\n                filterTags.push(queryStrings.Size);\n            }\n            if (queryStrings['PricesInclTax.Normalpris - u. moms'] !== undefined) {\n                price = queryStrings['PricesInclTax.Normalpris - u. moms'];\n                filterTags.push(queryStrings['PricesInclTax.Normalpris - u. moms']);\n            }\n            if (queryStrings['PricesInclTax.Medlemspris - u. moms'] !== undefined) {\n                memberPrice = queryStrings['PricesInclTax.Medlemspris - u. moms'];\n                filterTags.push(queryStrings['PricesInclTax.Medlemspris - u. moms']);\n            }\n            if (queryStrings.sortBy !== undefined) {\n                sortBy = queryStrings.sortBy;\n                filterTags.push(queryStrings.sortBy);\n            }\n\n            var querystring = `Brand=${brand}&Size=${size}&Color=${color}&sortBy=${sortBy}&` + encodeURIComponent('PricesInclTax.Normalpris - u. moms') + `=${price}&` + encodeURIComponent('PricesInclTax.Medlemspris - u. moms') + `=${memberPrice}`;\n            var url = `/Umbraco/surface/shopcategorysurface/GetCategoryWithProducts?categoryId=${categoryId}&catalogId=${catalogId}&priceGroupId=${pricegroupId}&requestUrl=${location.pathname}&Brand=${brand}&Size=${size}&Color=${color}&sortBy=${sortBy}&price=${price}&memberPrice=${memberPrice}&pagenumber=${pageNumber}&pagesize=${pageSize}&resetpagenumber=${resetPageNumber}`;\n            console.log('sortBy', sortBy);\n            console.log('url', url);\n            fetch(url, {\n                method: 'GET',\n                headers: {\n                    'Content-Type': 'application/json',\n                },\n            })\n                .then(response => response.json())\n                .then(json => {\n                    elm.innerHTML = json.html;\n                    let newHtmlLoadedEvent = new CustomEvent('new-html-loaded', { detail: elm.firstElementChild });\n                    window.dispatchEvent(newHtmlLoadedEvent);\n                    container = elm.querySelector('[data-shop-category-container]');\n                    init();\n                    applyNewFacets(container, querystring);\n                    // uncheck all disabled checkboxes\n                    var disabledCheckboxes = container.querySelectorAll('input[type=\"checkbox\"]:disabled, input[type=\"radio\"]:disabled');\n                    disabledCheckboxes.forEach(item => { item.checked = '' });\n                });\n        }\n\n        function getQueryParams(queryString) {\n            var result = {};\n            var regex = /([^&=]+)=([^&]*)/g, m;\n\n            while (m = regex.exec(queryString)) {\n                result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);\n            }\n\n            return result;\n        }\n\n        function applyNewFacets(facetcontainer, querystring) {\n            // Is this function ever being used?\n            var params = getQueryParams(querystring);\n            // facets\n            for (var propertyName in params) {\n                var value = params[propertyName].split('|');\n\n                for (var i = 0; i < value.length; i++) {\n                    if (facetcontainer.querySelectorAll('.filter[key=\"' + propertyName + '\"][value=\"' + value[i] + '\"]').length) {\n                        facetcontainer.querySelectorAll('.filter[key=\"' + propertyName + '\"][value=\"' + value[i] + '\"]')[0].setAttribute('checked', 'checked');\n                    }\n                }\n            }\n            // sorting\n            //for (var propertyName in params) {\n            //    var value = params[propertyName];\n            //    if (params.hasOwnProperty('sortBy') && sortcontainer.querySelector('input[name=\"sort-products\"]').length && sortcontainer.querySelector('option[key=\"' + value + '\"]')) {\n            //        sortcontainer.querySelector('option[key=\"' + value + '\"]').selected = true;\n\n            //    }\n\n            //}\n        }\n\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAAA;;A;;A","sourceRoot":""}