{"version":3,"file":"ProductFilters5.min.js","sources":["ProductFilters5.js"],"sourcesContent":["(function (w, $, _) {\n 'use strict';\n\n const assetId = '~/Parts/Views/Product/ProductFilters/ProductFilters5.min.js';\n\n if (!w.umwAssets || !w.umwAssets[assetId]) {\n console.error('No context found for ' + assetId);\n return;\n }\n\n for (var ctx of w.umwAssets[assetId]) {\n\n var controlId = ctx.controlId;\n var productListControlId = ctx.productListControlId;\n var productListPageControlID = ctx.productListPageControlID;\n var filtersTemplateContent = ctx.filtersTemplateContent;\n var labels = ctx.labels;\n var currencyCode = ctx.currencyCode;\n var enableImmediateFiltering = ctx.enableImmediateFiltering;\n var rememberChoiceFor = ctx.rememberChoiceFor;\n var slideFilteringFor = ctx.slideFilteringFor;\n var enableFiltersURLSupport = ctx.enableFiltersURLSupport;\n\n var handlerUrl = w.R + 'Handlers/Public/ProductData.ashx';\n \n var pubSub = w.PubSub;\n var filtersChannelPrefix = 'frontend.productlist.filters.' + (productListPageControlID || productListControlId);\n var staticfilterChannelPrefix = 'frontend.productlist.staticfilter.' + (productListPageControlID || productListControlId);\n var refreshChannelPrefix = 'frontend.productlist.refresh.' + (productListPageControlID || productListControlId);\n var listReadyChannelPrefix = 'frontend.productlist.ready.' + (productListPageControlID || productListControlId);\n var showOnlyInStock = false;\n var precompiledTemplate;\n\n var $filters, excludedItemsMap = {}, allItems, appliedFilters = {};\n var $mainPanel, $filtersContainer, $buttonsContainer, $resetButton, $closeButton;\n\n var savedFiltersLocalStorageKey = controlId + '_saved_filters';\n\n var classes = {\n noFiltersAvailable: 'NoFiltersAvailable',\n template: 'js-uc' + controlId + '-template',\n filtersContainer: 'js-uc' + controlId + '-filters-container',\n buttonsContainer: 'js-uc' + controlId + '-buttons-container',\n filter: 'js-uc' + controlId + '-filter',\n checkboxFilter: 'js-uc' + controlId + '-checkbox-filter',\n sliderFilter: 'js-uc' + controlId + '-slider-filter',\n sliderContainer: 'js-uc' + controlId + '-slider-container',\n minValue: 'js-uc' + controlId + '-min-value',\n maxValue: 'js-uc' + controlId + '-max-value',\n itemsCount: 'js-uc' + controlId + '-items-count',\n resetBtn: 'js-uc' + controlId + '-reset-btn',\n closeBtn: 'js-uc' + controlId + '-close-btn'\n };\n\n var domReady = false;\n var filtersData = null;\n var preAppliedFilterState = null;\n\n function onApplyButtonClick() {\n applyFilters();\n }\n\n function onResetButtonClick(evt) {\n evt.preventDefault();\n\n w.removeFromLocalStorage(savedFiltersLocalStorageKey);\n\n resetAllFilters();\n applyFilters();\n }\n\n function loadFilters() {\n var query = $.extend($.getUrlParamsObj(location.search), {\n action: 'GetFilters',\n controlId: controlId,\n pageId: w.BasePageID,\n showOnlyInStock: showOnlyInStock\n });\n\n if (domReady) {\n blockUI();\n }\n\n $.get(handlerUrl, query)\n .done(function (responseData) {\n\n if (domReady) {\n showFilters(responseData);\n } else {\n filtersData = responseData;\n }\n\n })\n .fail(function (errResp) {\n var message;\n if (typeof (errResp) === 'object') {\n // Extract error message\n var responseObj = JSON.parse(errResp.responseText);\n message = responseObj.Message ? responseObj.Message : errResp.statusText;\n } else {\n message = errResp;\n }\n notify(labels.failedToLoadFilters + '
' + message, 'error');\n })\n .always(function () {\n if (domReady) {\n unblockUI();\n }\n });\n }\n\n function showFilters(data) {\n var filters = data.filters;\n allItems = data.allItemIDs;\n\n if (!filters || !filters.length) {\n $mainPanel.hide();\n pubSub.publish(filtersChannelPrefix + '.empty');\n } else {\n if (typeof (precompiledTemplate) === 'undefined') {\n precompiledTemplate = _.template(filtersTemplateContent);\n }\n\n if (w.siteScripts) {\n filters = w.siteScripts.converters.apply('ProductFilters', filters);\n }\n\n _.each(filters, function (filter, filterIdx) {\n filter.clientId = ['filter', filter.FilterType, filterIdx].join('_');\n filter.slideble = slideFilteringFor.indexOf(filter.Name) > -1;\n _.each(filter.Criterias, function (criteria, criteriaIdx) {\n criteria.clientId = [filter.clientId, 'criteria', criteriaIdx].join('_');\n if (filter.slideble) {\n filter.slideble = extractNumberFromString(criteria.Name) !== null;\n }\n });\n });\n\n var filtersHtml = precompiledTemplate({\n controlId: controlId,\n filters: filters,\n labels: labels,\n currencyCode: currencyCode,\n enableImmediateFiltering: enableImmediateFiltering\n });\n\n $filtersContainer.html(filtersHtml);\n runTemplateLocalScript(filters);\n\n if (filters.length) {\n $filters = $mainPanel.find('.' + classes.filter);\n initFilters(filters);\n\n // Restore filters state from the url or local storage\n // Url values should always override the local storage ones\n try {\n var preAppliedFilters;\n\n var filterHash = location.href.split('#')[1] || '{}'; // Why not just location.hash? See http://stackoverflow.com/a/1704842/1855879\n\n var filtersFromUrl = enableFiltersURLSupport\n ? filterHash.startsWith('{')\n ? JSON.parse(decodeURIComponent(filterHash))\n : getFiltersFromFriendlyUrl(filterHash)\n : {};\n\n if (!_.isEmpty(filtersFromUrl)) {\n preAppliedFilters = filtersFromUrl;\n } else {\n // Grab saved filters from the local storage\n var savedFiltersFromLocalStorageJSON = w.getFromLocalStorage(savedFiltersLocalStorageKey);\n preAppliedFilters = typeof (savedFiltersFromLocalStorageJSON) !== 'undefined' ? JSON.parse(savedFiltersFromLocalStorageJSON) : null;\n }\n\n if (!_.isEmpty(preAppliedFilters)) {\n setAppliedFilters(preAppliedFilters); // restore filters state\n applyFilters(true); // reload product list\n }\n } catch (e) {\n console.error('%s - Failed to restore filters: %s', controlId, e.message || e);\n }\n\n $filtersContainer.removeClass(classes.noFiltersAvailable);\n $buttonsContainer.css({'display': 'flex'});\n pubSub.publish(filtersChannelPrefix + '.load', filters);\n } else {\n $filtersContainer.addClass(classes.noFiltersAvailable);\n $buttonsContainer.hide();\n }\n }\n\n updateCounterSelectedCriteria();\n\n function getFiltersFromFriendlyUrl(filterHash) {\n filterHash = decodeURIComponent(filterHash);\n var filterParts = filterHash.split('/').splice(1);\n var foundFilter = null;\n var prevFoundFilter = null;\n var filtersFromUrl = {};\n\n _.each(filterParts, function (filterOrCriteriaName) {\n if (foundFilter) {\n findAndAddCriteria(foundFilter, filterOrCriteriaName);\n prevFoundFilter = foundFilter;\n foundFilter = null;\n } else {\n foundFilter = findByName(filters, filterOrCriteriaName);\n //if no filter found, then current name may belong to one of criterias from previously found filter\n if (!foundFilter) {\n if (prevFoundFilter) {\n findAndAddCriteria(prevFoundFilter, filterOrCriteriaName);\n } else {\n throw 'No filter found by name: ' + filterOrCriteriaName;\n }\n }\n }\n });\n\n return filtersFromUrl;\n\n function findAndAddCriteria(foundFilter, urlItem) {\n var filterValue;\n if (foundFilter.slideble)\n filterValue = parseFloat(urlItem.replace(/-/g, '.'));\n else {\n var foundCriteria = findByName(foundFilter.Criterias, urlItem);\n if (!foundCriteria) {\n throw 'No criteria found by name: ' + urlItem;\n }\n filterValue = foundCriteria.Name;\n }\n\n if (filtersFromUrl[foundFilter.Name]) {\n filtersFromUrl[foundFilter.Name].push(filterValue);\n } else {\n filtersFromUrl[foundFilter.Name] = [filterValue];\n }\n }\n\n function findByName(filtersOrCriterias, name) {\n return _.find(filtersOrCriterias, function (item) {\n var preparedName = item.Name.toLowerCase();\n //replace invalid chars with dash\n preparedName = preparedName.replace(/[^a-z0-9æøå-]/g, '-');\n //replace sequences of dashes with a single dash\n preparedName = preparedName.replace(/-+/g, '-');\n return preparedName === name;\n });\n }\n }\n\n function initFilters(filtersData) {\n $filters.each(function () {\n var $filter = $(this);\n var filterData = _.find(filtersData, function (filter) { return filter.clientId == $filter.attr('id'); });\n $filter.data('item', filterData);\n\n if ($filter.hasClass(classes.checkboxFilter)) {\n filterData.slideble = false;\n $filter.change(onCheckboxFilterChange);\n } else if ($filter.hasClass(classes.sliderFilter)) {\n filterData.slideble = true;\n var numericCriterias = getNumericCriterias(filterData.Criterias);\n var minValue = _.min(numericCriterias);\n var maxValue = _.max(numericCriterias);\n var sliderValues = [minValue, maxValue];\n var templateName = $('.' + classes.template).val();\n var $mobileCloseBtn = $('.' + classes.closeBtn);\n // Init slider\n $filter.find('.' + classes.sliderContainer).slider({\n range: true,\n min: minValue,\n max: maxValue,\n step: isFloat(minValue) || isFloat(maxValue) ? 0.01 : 1,\n values: sliderValues,\n slide: onSliderFilterChange,\n change: function (event) {\n // Do not process change events fired by programmatic changes\n if ((enableImmediateFiltering || templateName === 'horizontal5') && typeof (event.originalEvent) !== 'undefined') {\n switch (templateName) {\n case 'horizontal5':\n if($mobileCloseBtn.is(\":hidden\")){\n applyFilters();\n }\n break;\n default:\n applyFilters();\n }\n }\n }\n });\n\n // Set initial values\n updateSliderInfo($filter, sliderValues);\n }\n });\n\n function onCheckboxFilterChange() {\n // Get all filtered by the current filter items and store them into the map, independently from the other filters.\n // Later, all the items from the filtered items map will be joined to the resulted set\n var $filter = $(this);\n var filterData = $filter.data('item');\n\n var $selectedCriterias = $filter.find('input:checkbox:checked');\n if ($selectedCriterias.length > 0) {\n // Filter is applied\n var selectedCriteriaIds = $selectedCriterias.map(function () { return this.id; }).get();\n var selectedCriterias = getSelectedCheckboxCriterias(filterData.Criterias, selectedCriteriaIds);\n excludedItemsMap[filterData.clientId] = _.difference(allItems, getCriteriasItems(selectedCriterias));\n appliedFilters[filterData.Name] = _.pluck(selectedCriterias, 'Name');\n } else {\n // Filter is not applied\n delete excludedItemsMap[filterData.clientId];\n delete appliedFilters[filterData.Name];\n }\n\n updateOtherFilters($filter);\n\n if (enableImmediateFiltering) {\n applyFilters();\n }\n }\n\n function onSliderFilterChange(event, ui) {\n var $slider = $(ui.handle);\n var $filter = $slider.closest('.' + classes.sliderFilter);\n var filterData = $filter.data('item');\n\n var selectedCriterias = getSelectedSliderCriterias(filterData.Criterias, ui.values[0], ui.values[1]);\n var selectedCriteriasItems = getCriteriasItems(selectedCriterias);\n\n excludedItemsMap[filterData.clientId] = _.difference(allItems, selectedCriteriasItems);\n appliedFilters[filterData.Name] = ui.values;\n\n updateSliderInfo($filter, ui.values);\n\n updateOtherFilters($filter);\n }\n }\n }\n\n function updateOtherFilters($appliedFilter) {\n // When some filter criterias are applied, the criterias of the other filters should be updated with the new total items values according to the newly applied criterias.\n $filters.not($appliedFilter).each(function () {\n var $filter = $(this);\n var filterData = $filter.data('item');\n var availableItems = [];\n var allItemsExcludedByOtherFilters = getAllItemsExcludedByOtherFilters(filterData.clientId);\n\n if ($filter.hasClass(classes.checkboxFilter)) {\n _.each(filterData.Criterias, function (criteria) {\n var $criteriaCheckbox = $filter.find('#' + criteria.clientId);\n var $criteriaCheckboxCounter = $filter.find('label[for=\"' + criteria.clientId + '\"] .' + classes.itemsCount);\n availableItems = _.difference(criteria.Items, allItemsExcludedByOtherFilters);\n $criteriaCheckboxCounter.text(availableItems.length);\n $criteriaCheckbox.prop('disabled', availableItems.length === 0);\n });\n\n } else if ($filter.hasClass(classes.sliderFilter)) {\n var $currentSlider = $filter.find('.' + classes.sliderContainer);\n var onlyIncludedItems = _.difference(allItems, getAllExcludedItems());\n var numericCriterias = getNumericCriterias(filterData.Criterias, onlyIncludedItems);\n\n if (numericCriterias && numericCriterias.length) {\n var sliderValues = [\n _.min(numericCriterias),\n _.max(numericCriterias)\n ];\n $currentSlider.slider('values', sliderValues);\n updateSliderInfo($filter, sliderValues);\n }\n }\n });\n pubSub.publish(filtersChannelPrefix + '.update');\n };\n\n function getNumericCriterias(allCriterias, onlyIncludedItems) {\n var result = [];\n _.each(allCriterias, function (criteria) {\n if (criteria.Items !== undefined &&\n onlyIncludedItems !== undefined &&\n !_.intersection(criteria.Items, onlyIncludedItems).length) {\n return;\n }\n var number = extractNumberFromString(criteria.Name);\n result = _.union(result, [parseFloat(number)]);\n });\n return result;\n }\n\n //#region Helpers\n\n function isFloat(n) {\n return Number(n) === n && n % 1 !== 0;\n };\n\n function extractNumberFromString(inpurString) {\n var regex = /[+-]?\\d+(?:\\.\\d+)?/g;\n var isMatch = inpurString.match(regex);\n\n return isMatch ? isMatch[0] : null;\n }\n\n function updateSliderInfo($filter, sliderValues) {\n\n var $minValueContainer = $filter.find('.' + classes.minValue);\n var $maxValueContainer = $filter.find('.' + classes.maxValue);\n var $itemsCountContainer = $filter.find('.' + classes.itemsCount);\n\n var minValue = _.min(sliderValues);\n $minValueContainer.text(minValue);\n var maxValue = _.max(sliderValues);\n $maxValueContainer.text(maxValue);\n\n var newTotal = _.difference(allItems, getAllExcludedItems()).length;\n $itemsCountContainer.text(newTotal);\n pubSub.publish(filtersChannelPrefix + '.update');\n }\n\n function getCriteriasItems(criterias) {\n // optimized function only for simple types. UMWC-2830\n function itemsUnion(x, y) {\n var result = [];\n for (var xi = 0; xi < x.length; ++xi) {\n result.push(x[xi]);\n }\n for (var yi = 0; yi < y.length; ++yi) {\n var item = y[yi];\n var exists = false;\n for (var j = 0; j < result.length; ++j)\n if (result[j] === item) {\n exists = true;\n break;\n }\n if (!exists)\n result.push(item);\n }\n return result;\n }\n return _.reduce(criterias, function (memo, criteria) {\n return itemsUnion(memo, criteria.Items);\n }, []);\n }\n\n function getSelectedCheckboxCriterias(allCriterias, selectedCriteriaIds) {\n return _.filter(allCriterias, function (criteria) {\n return _.contains(selectedCriteriaIds, criteria.clientId) && _.some(criteria.Items);\n });\n }\n\n function getSelectedSliderCriterias(allCriterias, selectedMin, selectedMax) {\n return _.filter(allCriterias,\n function (criteria) {\n var number = extractNumberFromString(criteria.Name);\n var numericCriteria = parseFloat(number);\n return (numericCriteria >= selectedMin && numericCriteria <= selectedMax) && _.some(criteria.Items);\n });\n }\n\n function getAllExcludedItems() {\n return _.reduce(excludedItemsMap, function (allExcludedItems, excludedMapItem) {\n return _.union(allExcludedItems, excludedMapItem);\n }, []);\n }\n\n function getAllItemsExcludedByOtherFilters(currentFilterName) {\n return _.reduce(excludedItemsMap,\n function (allExcludedItems, excludedMapItem, excludedByFilterName) {\n return currentFilterName !== excludedByFilterName\n ? _.union(allExcludedItems, excludedMapItem)\n : allExcludedItems;\n },\n []);\n }\n\n function getAllFilterIncludedItems(clientId) {\n var excludedItems = excludedItemsMap[clientId];\n return _.difference(allItems, excludedItems);\n }\n\n function setAppliedFilters(filtersToApply) {\n // Reset current filters first\n excludedItemsMap = {};\n appliedFilters = filtersToApply || {};\n\n $filters.each(function () {\n var $filter = $(this);\n var filterData = $filter.data('item');\n var filterId = filterData.clientId;\n var filteredValues = appliedFilters[filterData.Name];\n var selectedCriterias = [];\n\n if ($filter.hasClass(classes.checkboxFilter)) {\n // Clear previous values\n $filter.find('input:checkbox').prop('checked', false);\n\n if (filteredValues && filteredValues.length) {\n _.each(filterData.Criterias, function (criteria) {\n if (_.contains(filteredValues, criteria.Name)) {\n $filter.find('#' + criteria.clientId).prop('checked', true);\n selectedCriterias.push(criteria);\n excludedItemsMap[filterId] = _.difference(allItems, getCriteriasItems(selectedCriterias));\n }\n });\n }\n } else if ($filter.hasClass(classes.sliderFilter)) {\n var sliderValues = filteredValues;\n var $currentSlider = $filter.find('.' + classes.sliderContainer);\n if (sliderValues && sliderValues.length == 2 && sliderValues[0] <= sliderValues[1]) {\n selectedCriterias = getSelectedSliderCriterias(filterData.Criterias, sliderValues[0], sliderValues[1]);\n excludedItemsMap[filterId] = _.difference(allItems, getCriteriasItems(selectedCriterias));\n } else {\n // Reset slider\n var minRangeValue = $currentSlider.slider('option', 'min');\n var maxRangeValue = $currentSlider.slider('option', 'max');\n sliderValues = [minRangeValue, maxRangeValue];\n }\n\n $currentSlider.slider('values', sliderValues);\n updateSliderInfo($filter, sliderValues);\n }\n\n updateOtherFilters($filter);\n });\n };\n\n function resetAllFilters() {\n excludedItemsMap = {};\n appliedFilters = {};\n\n $filters.each(function () {\n var $filter = $(this);\n var filterData = $filter.data('item');\n\n if ($filter.hasClass(classes.checkboxFilter)) {\n _.each(filterData.Criterias, function (criteria) {\n var $criteriaCheckbox = $filter.find('#' + criteria.clientId);\n $criteriaCheckbox.prop('checked', false);\n $criteriaCheckbox.prop('disabled', false);\n var $criteriaCheckboxCounter = $filter.find('label[for=\"' + criteria.clientId + '\"] .' + classes.itemsCount);\n $criteriaCheckboxCounter.text(criteria.Items.length);\n });\n } else if ($filter.hasClass(classes.sliderFilter)) {\n var $filterSlider = $filter.find('.' + classes.sliderContainer);\n var numericCriterias = getNumericCriterias(filterData.Criterias);\n var minValue = _.min(numericCriterias);\n var maxValue = _.max(numericCriterias);\n\n var sliderValues = [minValue, maxValue];\n $filterSlider.slider('values', sliderValues);\n\n updateSliderInfo($filter, sliderValues);\n }\n });\n };\n\n function setFiltersToFriendlyUrl(appliedFilters) {\n //join all filters and their criterias in a single string, separated by slash\n //replace slash in filter and criteria names, because slash is used as a separator when restoring filters from URL\n var filterUrl = _.reduce(appliedFilters,\n function (memo, criterias, filterName) {\n return memo + '/' + filterName.replace(/\\//g, '-') +\n _.reduce(criterias, function (memo2, criteriaName) { return memo2 + '/' + (criteriaName.replace ? criteriaName.replace(/\\//g, '-') : criteriaName); }, '');\n }, '');\n filterUrl = filterUrl.toLowerCase();\n //replace invalid chars with dash\n filterUrl = filterUrl.replace(/[^a-z0-9æøå\\/-]/g, '-');\n //replace sequences of dashes with a single dash\n filterUrl = filterUrl.replace(/-+/g, '-');\n\n return filterUrl;\n }\n\n function applyFilters(isRestoring, isHistoryPopEvent) {\n var excludedItems = getAllExcludedItems();\n var allIncludedItems = excludedItems.length > 0 ? _.difference(allItems, excludedItems) : null;\n\n var filtersUrl = '';\n if (enableFiltersURLSupport) {\n filtersUrl = setFiltersToFriendlyUrl(appliedFilters);\n }\n\n var filterState = {\n filteredItemIds: allIncludedItems,\n allItemsCount: allItems.length,\n appliedFilters: appliedFilters,\n filtersUrl: filtersUrl,\n isRestoring: isRestoring === true,\n isHistoryPopEvent: isHistoryPopEvent === true\n };\n\n if (isRestoring && !preAppliedFilterState) {\n filterState.isPreApplied = true;\n preAppliedFilterState = filterState;\n }\n\n pubSub.publish(filtersChannelPrefix + '.apply', filterState);\n\n if (rememberChoiceFor.length > 0) {\n var appliedFiltersToRemember = {};\n if (!_.isEmpty(appliedFilters)) {\n appliedFiltersToRemember = _.pick(appliedFilters, rememberChoiceFor);\n }\n\n w.saveToLocalStorage(savedFiltersLocalStorageKey, JSON.stringify(appliedFiltersToRemember));\n } else if (w.getFromLocalStorage(savedFiltersLocalStorageKey)) {\n w.removeFromLocalStorage(savedFiltersLocalStorageKey);\n }\n }\n function applySelectedCheckboxesFilter(filter) {\n // Get all filtered by the current filter items and store them into the map, independently from the other filters.\n // Later, all the items from the filtered items map will be joined to the resulted set\n var $filter = filter;\n var filterData = $filter.data('item');\n\n var $selectedCriterias = $filter.find('input:checkbox:checked');\n if ($selectedCriterias.length > 0) {\n // Filter is applied\n var selectedCriteriaIds = $selectedCriterias.map(function () { return this.id; }).get();\n var selectedCriterias = getSelectedCheckboxCriterias(filterData.Criterias, selectedCriteriaIds);\n excludedItemsMap[filterData.clientId] = _.difference(allItems, getCriteriasItems(selectedCriterias));\n appliedFilters[filterData.Name] = _.pluck(selectedCriterias, 'Name');\n } else {\n // Filter is not applied\n delete excludedItemsMap[filterData.clientId];\n delete appliedFilters[filterData.Name];\n }\n\n updateOtherFilters($filter);\n\n applyFilters();\n }\n function notify(message, type) {\n var notificationChannel = typeof (type) === 'string' && type ? 'notification.' + type : 'notification';\n pubSub.publish(notificationChannel, message);\n }\n function blockUI() {\n if (typeof ($.blockUI) === 'function') {\n $mainPanel.block({ message: null });\n }\n }\n function unblockUI() {\n if (typeof ($.unblockUI) === 'function') {\n $mainPanel.unblock();\n }\n }\n //#endregion\n\n function runTemplateLocalScript(filters) {\n var templateName = $('.' + classes.template).val();\n\n var Template = templateName;\n var UC = 'uc' + controlId;\n var UCTemplated = UC + '-' + Template;\n\n var selectedCriteriaTemplate = '';\n var precompiledSelectedCriteriaTemplate = _.template(selectedCriteriaTemplate);\n\n var sectionSelectedCriteriaTemplate = '<%- criteriaLabel %>';\n var sectionPrecompiledSelectedCriteriaTemplate = _.template(sectionSelectedCriteriaTemplate);\n\n // Specific template classes\n var templateClasses = {\n noAppliedFilters: 'no-applied-filters',\n hasAppliedFilters: 'has-applied-filters',\n openAfterFilterApplied: 'open-after-filter-applied',\n\n // Specific dropdown ctiterias\n sectionSelectedCriterias: 'js-' + UCTemplated + '-section-selected-criterias',\n sectionApplyCriteriasBtn: 'js-' + UCTemplated + '-section-apply-criterias',\n\n sectionSelectedCriteriaCount: 'js-' + UCTemplated + '-selected-criteria-count',\n\n // All selected criterias from all dropdowns\n selectedCriterias: 'js-' + UCTemplated + '-selected-criterias',\n selectedCriteria: 'js-' + UCTemplated + '-selected-criteria',\n clearSelectedCriterias: 'js-' + UCTemplated + '-clear-selected-criterias',\n\n // Dropdown representing a filter\n dropdownItem: 'js-' + UCTemplated + '-dropdown-item',\n dropdownItemClosed: 'is-closed',\n dropdownItemOpened: 'is-opened',\n dropdownItemDisabled: 'is-disabled',\n dropdownBtn: 'js-' + UCTemplated + '-dropdown-btn',\n dropdownTitleBtn: 'js-' + UCTemplated + '-dropdown-title-btn',\n\n // Checkbox Filter \n checkboxFilter: 'js-' + UC + '-checkbox-filter',\n\n // Filter item - wrapper for criteria\n filterItem: 'js-' + UCTemplated + '-filter-item',\n filterItemDisabled: 'is-disabled',\n filterItemIsHidden: 'is-mobile-hidden',\n criteriaCheckbox: 'js-' + UCTemplated + '-filter-item-checkbox',\n criteriaLabel: 'js-' + UCTemplated + '-filter-item-label',\n\n // Close Button\n closeBtn: 'js-' + UC + '-close-btn',\n };\n\n // UI Elements selected by template classes\n var $selectedCriterias = $('.' + templateClasses.selectedCriterias, $mainPanel);\n var $allSectionsSelectedCriterias = $('.' + templateClasses.sectionSelectedCriterias);\n var $clearSelectedCriterias = $('.' + templateClasses.clearSelectedCriterias, $mainPanel);\n var $dropdownItem = $('.' + templateClasses.dropdownItem, $mainPanel);\n var $dropdownBtn = $('.' + templateClasses.dropdownBtn, $mainPanel);\n var $dropdownTitleBtn = $('.' + templateClasses.dropdownTitleBtn, $mainPanel);\n var $filterItem = $('.' + templateClasses.filterItem, $mainPanel);\n var $filterItemLabel = $('.' + templateClasses.criteriaLabel, $mainPanel);\n var $sectionApplyCriteriasBtn = $('.' + templateClasses.sectionApplyCriteriasBtn, $mainPanel);\n var initialNumberOfSelectedCheckboxes = 0;\n //var $selectedCriteria = $('.' + templateClasses.selectedCriteria, $mainPanel);\n \n // 🤘 time\n\n $mainPanel.addClass(UCTemplated);\n\n // Delegate clicks from specific theme buttons to the UC195 Control buttons placed ousite the theme markup\n $clearSelectedCriterias.click(function (evt) {\n $filterItem.removeClass(templateClasses.filterItemDisabled);\n $dropdownItem.removeClass(templateClasses.dropdownItemDisabled);\n $resetButton.trigger('click');\n \n $('.' + templateClasses.selectedCriteria, $mainPanel).remove();\n });\n\n $sectionApplyCriteriasBtn.on('click', function () {\n onApplyButtonClick();\n });\n\n // click on dropdown button (to expand filter criterias on mobile devices)\n $dropdownItem.click(function(e){\n var index = $(this).index();\n\n var currentNumberOfSelectedCheckboxes = _.size($('.' + templateClasses.criteriaCheckbox + ':checked'));\n\n $(this).find('.' + templateClasses.filterItem + ':gt(2)').addClass(templateClasses.filterItemIsHidden);\n\n if ($(this).hasClass(templateClasses.dropdownItemOpened)) {\n $(this).removeClass(templateClasses.dropdownItemOpened).addClass(templateClasses.dropdownItemClosed);\n } else {\n $dropdownItem.removeClass(templateClasses.dropdownItemOpened).addClass(templateClasses.dropdownItemClosed).eq(index).removeClass(templateClasses.dropdownItemClosed).addClass(templateClasses.dropdownItemOpened);\n }\n\n if (initialNumberOfSelectedCheckboxes !== currentNumberOfSelectedCheckboxes) {\n onApplyButtonClick();\n initialNumberOfSelectedCheckboxes = currentNumberOfSelectedCheckboxes;\n }\n\n e.stopPropagation();\n });\n \n $('.' + templateClasses.checkboxFilter).click(function(e){\n e.stopPropagation();\n });\n\n $('.' + templateClasses.checkboxFilter + ' .' + templateClasses.closeBtn).on('click', function (e) {\n $('#collapsableProductFilters').collapse('toggle');\n onApplyButtonClick();\n updateCounterSelectedCriteria();\n });\n\n \n\n $(document).click(function(){\n var currentNumberOfSelectedCheckboxes = _.size($('.' + templateClasses.criteriaCheckbox + ':checked'));\n\n $dropdownItem.removeClass(templateClasses.dropdownItemOpened).addClass(templateClasses.dropdownItemClosed);\n\n if (initialNumberOfSelectedCheckboxes !== currentNumberOfSelectedCheckboxes) {\n onApplyButtonClick();\n initialNumberOfSelectedCheckboxes = currentNumberOfSelectedCheckboxes;\n }\n });\n\n // click on dropdown button (to expand filter criterias on mobile devices)\n $dropdownTitleBtn.on('click', function () {\n onApplyButtonClick();\n\n var currentNumberOfSelectedCheckboxes = _.size($('.' + templateClasses.criteriaCheckbox + ':checked'));\n\n $dropdownItem.find('.' + templateClasses.filterItem + ':gt(2)').addClass(templateClasses.filterItemIsHidden);\n\n if ($dropdownItem.hasClass(templateClasses.dropdownItemOpened)) {\n $dropdownItem.removeClass(templateClasses.dropdownItemOpened).addClass(templateClasses.dropdownItemClosed);\n } else {\n if (initialNumberOfSelectedCheckboxes === currentNumberOfSelectedCheckboxes) {\n $dropdownItem.removeClass(templateClasses.dropdownItemClosed).addClass(templateClasses.dropdownItemOpened);\n } else {\n $dropdownItem.addClass(templateClasses.openAfterFilterApplied);\n }\n }\n\n if (initialNumberOfSelectedCheckboxes !== currentNumberOfSelectedCheckboxes) {\n onApplyButtonClick();\n initialNumberOfSelectedCheckboxes = currentNumberOfSelectedCheckboxes;\n }\n\n var $mainPanelTopBox = $('.TopBox', $mainPanel);\n \n $mainPanelTopBox.find('.' + templateClasses.selectedCriteria).remove();\n\n if(currentNumberOfSelectedCheckboxes>0){\n $mainPanelTopBox.append('' + currentNumberOfSelectedCheckboxes + '');\n }\n \n });\n\n // handle click on selected criteria\n $($selectedCriterias).on('click', '.' + templateClasses.selectedCriteria, function (evt) {\n var criteriaID = $(evt.currentTarget).data('criteria-id');\n var $criteriaCheckbox = $('.' + templateClasses.criteriaCheckbox).filter('[id=' + criteriaID + ']');\n var $filter = $criteriaCheckbox.closest('.' + classes.filter);\n\n $criteriaCheckbox.attr('checked', false);\n applySelectedCheckboxesFilter($filter);\n $(this).remove();\n });\n\n // use pubSub.subscribe instead of change event\n // because this is dynamic filter and checking one criteria can cause changes for another criterias\n pubSub.subscribe(filtersChannelPrefix + '.apply', function (ignore, filterState) {\n // handle selected criterias\n $selectedCriterias.add($allSectionsSelectedCriterias).empty();\n $('.' + templateClasses.sectionSelectedCriterias).remove();\n\n var filter, criteria;\n\n $.each(filterState.appliedFilters, function (appliedFilter, appliedCriterias) {\n filter = _.find(filters, function (filter) {\n return filter.Name === appliedFilter;\n });\n // skip price filter and slideble filters\n if (!filter || filter.slideble) {\n return true; // continue .each loop\n }\n var $sectionCriteriasContainer = $('