JS (redesign-dev/js-dev/models/pages/app_catalog-ui.js)

'use strict';

// =============================================================================
// ui на странице каталога
// dependencies:
//  - jQuery
//  - AppSendAJAX
//  - AnalyticsFiltersSearch
//  - modules/forms/jquery.select.js            - кастомный селект для сортировки
// =============================================================================

const DESKTOP_MIN_WIDTH = 1024;

class AppCatalogUI {

    constructor() {

        this.cartPicUrl                 = document.querySelector('[data-api-pics]').data('api-pics');

        this.selectSort                 = document.querySelector('.select-sort');
        this.selectSortCurrent          = document.querySelector('.select-sort-current');
        this.selectSortMob              = document.querySelector('#catalog__sort-select-mob');
        this.selectSortLi               = document.querySelector('.select-sort li');
        this.selectSortLiMob            = document.querySelector('.select-sort-mobile li');


        this.filterTitle                = document.querySelector('.filter__title');
        this.filterSearch                = document.querySelector('.filter-search-input');
        this.clearSearch                = document.querySelector('.filters .clear-button');

        this.filterGroupTitle           = document.querySelector('.filters-box__title');
        this.filtersClose               = document.querySelector('#filters-close');
        this.filtersOpen                =  document.querySelector('#mob-filter-open');
        this.filtersWrap                = document.querySelector('.catalog__filter-column');


        this.oilBtn                     = document.querySelector('.product-card-packaging__item');
        this.oilMore                    = document.querySelector('.product-card-packaging__more');

        this.applicability              = document.querySelector('.product-card-applicability');

        this.filtersShowAll             = document.querySelector('.filter-show-all');
        this.OUT_OF_STOCK               = 2;

        this._initModules();
        this._eventHandlersInit();
    }

    _initModules() {
        this.selectSortMob.customSelect();
        this._labelWithTooltip();
        this.renderShowMoreButton();
    }

    renderShowMoreButton(modifier = '+ показать еще') {
        let selector = '.product-card__price-layout:not(.product-card__price-layout_more) .product-card-packaging';
        document.querySelector(selector).each((index, element) => {
            if (45 < element.scrollHeight) {
                document.querySelector(element).after(document.querySelector(`<div class="product-card-packaging__more">${modifier}</div>`))
            }
        })
    }

    _labelWithTooltip() {
        if(!globalUI.isMobile) {
            document.querySelector(document).addEventListener('mouseover', '.label_with_tooltip', function() {
                catalogUI._createTooltip(document.querySelector(this));
                document.querySelector(this).parents('.product-card__layout-inside').querySelector('.tooltip__box').show();
            }).addEventListener('mouseout', '.label_with_tooltip', function() {
                document.querySelector(this).parents('.product-card__layout-inside').querySelector('.tooltip__box').hide();
            })
        }
    }

    _createTooltip(label) {
        if (label.classList.contains('tooltip_created')) {
            return;
        }

        let tooltip = document.querySelector(`
            <span class="tooltip__mob-wrap">
                <span class="tooltip__box tooltip__box_tile">
                    <span>${label.data('tooltip')}</span>
                    <span class="tooltip__box-close"></span>
                </span>
            </span>
        `);

        let tooltipBlock = label
            .classList.add('tooltip_created')
            .parents('.product-card__layout-inside')
            .insertAdjacentHTML("beforeend",tooltip)
            .querySelector('.tooltip__box.tooltip__box_tile');

        tooltipBlock.show();
        tooltipBlock.css('top', -(tooltipBlock.height() + 25))
        tooltipBlock.hide();
    }

    changeOil(target) {
        if(document.querySelector(target).classList.contains("product-card-packaging__item_current")) return;

        let productId = document.querySelector(target).data('product-id');
        let customerCityId = document.querySelector(target).data('customer-city-id');
        let available = parseInt(document.querySelector(target).data('available'));
        let parent = document.querySelector(target).parents(".product-card");
        let btnBuy = parent.querySelector(".product-card__button-buy");

        if (available === this.OUT_OF_STOCK) {
            btnBuy.classList.add('button-buy__hidden');
        } else {
            btnBuy.removeClass('button-buy__hidden');
        }

        parent.querySelector(".product-card-packaging__item").removeClass('product-card-packaging__item_current');
        document.querySelector(target).classList.add('product-card-packaging__item_current');
        parent.querySelector(".product-card__price").text(document.querySelector(target).data("price"));

        btnBuy.attr("data-id", document.querySelector(target).data("id"));

        this._changeLabel(parent, document.querySelector(target).attr('data-label'));
        this._changeAvailableHtml(productId, customerCityId, document.querySelector(target));
        this._loadPic(document.querySelector(target).data("id"), parent);
        this._checkInCard(document.querySelector(target).data("id"));
        this._changeLink(target, parent);
        this._changeAnalytics(target, parent);
        this._changeModificationFavorite(document.querySelector(target).data("id"), parent);
    }

    _changeLabel(parent, label) {
        document.querySelector(parent).querySelector('.label_with_tooltip').remove();
        document.querySelector(parent).querySelector('.tooltip__mob-wrap').remove();
        document.querySelector(parent).querySelector('.product-card__layout-inside').prepend(label);
        document.querySelector(parent).querySelector('.slide_viewer').prepend(label);
    }

    updateRubricator(filterBlock) {
        let letterList = [];
        filterBlock.querySelector('.rubricator-letter').remove();

        if (!filterBlock.querySelector('ul.filter-rubricator').length) {
            return;
        }

        let regex = /[A-zА-яёїd]/i;

        filterBlock.querySelector('.filter-checkbox').each((key, value) => {
            let elem = document.querySelector(value);
            if (elem.classList.contains('hidden-filter-value')) {
                return;
            }

            let firstLetter = document.querySelector(value).querySelector('.filter-checkbox__text').text().match(regex)[0].toUpperCase();

            if ($.inArray(firstLetter, letterList) !== -1) {
                return;
            }

            letterList.push(firstLetter);
            let html = '<div class="rubricator-letter">' + firstLetter + '</div>'
                , elemToPrepend = filterBlock.classList.contains('.filter-search-enabled')
                    ? elem.parent()
                    : elem;
            elemToPrepend.prepend(html);
        });
    }

    mobFiltersCloseClick() {
        document.querySelector('body').removeClass('noscroll-mob');
        setTimeout(() => {
            if (this.filtersWrap.classList.contains('modified')) {
                setFilter(true);

                return;
            }

            this.filtersWrap.removeClass('opened');
            ga('send', 'event', 'Products-Filter', 'filter-popup', 'close');

            this.filtersWrap.removeClass('modified');

            returnFilterState();
            rollbackModifierFilters();
            document.querySelector('.reset-all-btn').removeClass('reset-checkbox-btn');
        }, 500);
    }

    mobFiltersOpenClick() {
        if (globalUI.isMobile) {
            document.querySelector('body').classList.add('noscroll-mob');
            returnFilterState();
            setFilterState(true);
        }

        this.filtersWrap.classList.add('anim-prepeare-opened');
        setTimeout(() => {
            this.filtersWrap.classList.add('opened');
            //аналітика для відкриття фільтрів на мобайлі
            ga('send', 'event', 'Products-Filter', 'filter-popup', 'open');
        }, 1);
    }

    // Подгрузка совместимых фильтров с сервера
    reloadFilterFromServer() {
        let mobileFilterData = JSON.parse(document.querySelector('.filters').attr('data-mobile-filter'));

        document.querySelector('.catalog__filter-column').classList.add('modified');

        let priceForm = document.querySelector('.filter').querySelector('.filter-price-form.price-range');
        let from = +priceForm.querySelector('.from').value;
        let to = +priceForm.querySelector('.to').value;
        let min = +priceForm.querySelector('.from').attr('min');
        let max = +priceForm.querySelector('.from').attr('max');

        let priceFrom = from !== 0 && from !== min ? from : 0;
        let priceTo = to !== 0 && to !== max ? to : 0;

        let data = {
            dokRazdelId: document.querySelector('#dokRazdelId_marker').value,
            filterRaw: this.getFilterRawData(),
            'dok-vitrina': document.querySelector('.dok-vitrina').is(':checked'),
            'popular-filter': this.getPopularFilterData(),
            priceFrom: priceFrom,
            priceTo: priceTo,
            forAllCars: document.querySelector('#for-all-car-radio').prop("checked") ? 1 : 0,
            className: mobileFilterData.filter_class,
            showAllCarsButton: mobileFilterData.is_show_all_cars_bnt
                ? parseInt(mobileFilterData.is_show_all_cars_bnt)
                : 0,
            carData: mobileFilterData.car_data ? mobileFilterData.car_data : [],
            carId: mobileFilterData.car_id ? mobileFilterData.car_id : ''
        };

        $.ajax('/api/get-filters', {
            method: 'POST',
            data: data,
            success: function (data) {
                if (data && data !== null && data !== undefined) {
                    document.querySelector('.catalog__filter-column .filters').html(data);
                }
            },
            beforeSend: function () {
                document.querySelector('.filter-overlay').classList.add('filter-overlay_show');
            },
            complete: function () {
                document.querySelector('.catalog__filter-column .filter-overlay.filter-overlay_show').remove();
                document.querySelector('.catalog__filter-column .filters')
                    .removeClass('filters-ajax-loader');

                setTimeout(function () {
                    setFilterState(true);
                }, 200)
            }
        });
    }

    // Данные по всем выбраным фильтрам
    getFilterRawData(keySeparator = '-', valueSeparator = ',') {
        let listItem = document.querySelector('.filter').querySelector('input[type="checkbox"]:checked')
            .not('.popular-checkbox')
            .not('.dok-vitrina');
        let filterData = {};
        let filterGaData = '';
        $.each(listItem, function (index, item) {
            let charId = String(document.querySelector(item).attr('data-cat'));
            let valueChar = String(document.querySelector(item).attr('data-id'));

            filterData[charId] = charId in filterData
                ? filterData[charId] + valueSeparator + valueChar
                : valueChar
        });

        for (let key in filterData) {
            filterGaData += key + keySeparator + filterData[key] + ';';
        }

        return filterGaData;
    }

    // Данные по всем выбранным фильтрам
    getPopularFilterData(keySeparator = '-', valueSeparator = ',') {
        let popularFilter = document.querySelector('.popular_filter_list');
        let selectedPopularFilter = popularFilter.querySelector('input:checked');
        let dataValue = '';
        // Блок популярные фильтра в инсайде
        if (selectedPopularFilter
            && selectedPopularFilter.length > 0
        ) {
            $.each(selectedPopularFilter, function (index, data) {
                dataValue += document.querySelector(data).value + ',';
            });

            dataValue = trimChar(dataValue, ',');
        }

        return dataValue;
    }

    // Очистить все выбранные фильтра
    clearFiltersValue(visibleOnly = true) {
        let items = visibleOnly
            ? document.querySelector('.filter__list:visible')
            : document.querySelector('.filter__list')
        ;
        let checkedElement = items.querySelector('input:checkbox');

        items.querySelector('input:radio#for-all-car-radio').prop('checked', true);

        let rangeFilterFrom = items.querySelector('.from');
        let rangeFilterTo = items.querySelector('.to');

        rangeFilterFrom.val('');
        rangeFilterTo.val('');

        $.each(checkedElement, function (index, item) {
            document.querySelector(item).attr('checked', false);
        });

        document.querySelector('.reset-all-btn').classList.add('filter-btn_clear_noactive');
    }

    isDefaultMinPriceFilter() {
        let inputForm = document.querySelector('#price-range_from');
        let from = +inputForm.value;
        let min = +inputForm.attr('min');

        return from === min;
    }

    isDefaultMaxPriceFilter() {
        let inputTo = document.querySelector('#price-range_to');
        let to = +inputTo.value;
        let max = +inputTo.attr('max');

        return to === max;
    }

    _changeModificationFavorite(productId, parent) {
        let favoriteIcon = parent.querySelector('.favorite-heart');
        let advancedTileFavoriteTextItem = favoriteIcon.parent('.advanced-tile-favorite').querySelector('.favorite-heart-text');
        let advancedTileFavoriteText = '';
        favoriteIcon.attr('data-product-id', productId);

        if (globalUI.isFavoriteProduct(productId)) {
            favoriteIcon
                .removeClass('favorite-heart_empty')
                .classList.add('favorite-heart_full');
            advancedTileFavoriteText = Yii.t('app', 'card.favorites.product_added_to_favorites');
        } else {
            favoriteIcon
                .removeClass('favorite-heart_full')
                .classList.add('favorite-heart_empty')
                .attr("onclick", null)
                .removeEventListener('click')
                .removeAttr("data-location");
            advancedTileFavoriteText = Yii.t('app', 'card.favorites.add_product_to_favorites');
        }

        if (advancedTileFavoriteTextItem.length > 0) {
            advancedTileFavoriteTextItem.attr('data-product-id', productId);
            advancedTileFavoriteTextItem.text(advancedTileFavoriteText);
        }

        this._initFavoriteObserver();
    }

     _changeLink(target, parent)
    {
        let newLink = document.querySelector(target).data('link');

        parent.querySelector('.product-card__bottom-block>a').attr( 'href', newLink);
        parent.querySelector('.product-card__layout-pic').attr( 'href', newLink);
        parent.querySelector('.product-card__layout-name').attr( 'href', newLink);
        parent.querySelector('.product-card-recom_link').attr( 'onclick', `window.location='${newLink}#recomended'`);
    }

    _changeAnalytics(target, parent)
    {
        let fbHash = document.querySelector(target).attr('fb-hash');
        let price = document.querySelector(target).attr('data-price');
        let fbCode = "addToCartFacebookAnalytic('" + price +"', '" + fbHash + "')";
        let buyBtn = document.querySelector(parent).querySelector('.product-card__button-buy');

        let onclick = buyBtn.attr('onclick');
        let oldOnclick = buyBtn.attr('data-old-onclick');

        if (onclick === undefined || oldOnclick === undefined) {
            return;
        }

        onclick = onclick.replace(/addToCartFacebookAnalytic(.+)/, fbCode);
        oldOnclick = oldOnclick.replace(/addToCartFacebookAnalytic(.+)/, fbCode);

        buyBtn.attr('onclick', onclick)
            .attr('data-old-onclick', oldOnclick);
    }

    _checkInCard(pid) {
        this.ajax =  new AppSendAJAX({
            serverScriptUrl : '/cart/check',
            sendMethod  : 'post',
            dataType: 'html'
        });

        let data = {
            'hash': Cookies.get('cart'),
            'pid': pid
        };

        this.ajax.sendData(data).then( responseJSON => {
            let buyBtn = document.querySelector('[data-cart-add][data-id="' + pid + '"]');
            if (responseJSON) {
                buyBtn
                    .text(Yii.t('app', 'btn_buy.in_cart'))
                    .classList.add('in-cart')
                    .attr('onclick', "inCartButtonClick('catalog-button')");
            } else {
                let dataHash = buyBtn.attr('data-hash'),
                    replaceOnclickAttr = buyBtn.attr('data-old-onclick')
                    ? 'data-old-onclick'
                    : 'addOilToCart(' + pid + ',' ' + dataHash + '')';

                buyBtn
                    .text(Yii.t('app', 'btn_buy.buy'))
                    .removeClass('in-cart')
                    .attr('onclick', replaceOnclickAttr);
            }
        });
    }

    _changeAvailableHtml(productId, customerCityId, elem) {
        let parent = elem.parents(".product-card");

        let availableHtml = elem.data('available-text'),
            availableElement = parent.querySelector(".product-card__note.product-card__note_not-available");

        availableElement.html(availableHtml);

        if (document.querySelector('.popup_search_block').is(':visible')) {
            availableElement.querySelector(">:first-child").click();
        }
    }

    _loadPic(pid, parent) {
        let url = `${this.cartPicUrl}?pid=${pid}`;

        this.ajax =  new AppSendAJAX({
            serverScriptUrl : url,
            sendMethod  : 'post'
        });

        this.ajax.sendData(  ).then( responseJSON => {
                if (responseJSON.result)  {
                    parent.querySelector(".product-card__pic, .without-lazy-load").attr("src", responseJSON.result);
                }
            },
            function ( error ) {
                console.log(error);
            }
        );
    }

    _selectSortCange(target) {
        document.querySelector('.select-sort-li-current').removeClass('select-sort-li-current');
        document.querySelector(target).classList.add('select-sort-li-current');
        document.querySelector('.select-sort_open').removeClass('select-sort_open');
        this.selectSortCurrent.text(document.querySelector(target).text());

        document.querySelector('.custom-select-text').text(document.querySelector(target).text());
        document.querySelector(`#catalog__sort-select-mob option[value="${document.querySelector(target).data('id')}"]`).prop('selected', true);
    }

    _showMoreOil(target) {
        document.querySelector(target).parent().classList.add('product-card__price-layout_more');
    }

    _applicabilityShift(target) {
        document.querySelector(target).classList.add('hover');

        let str = document.querySelector(target).querySelector('span'),
            str_width = str.width(),
            wrap = document.querySelector(target).querySelector('.product-card-applicability__wrap'),
            wrap_width = wrap.width(),
            delta = str_width - wrap_width;
        if(delta>0) {
            str.css({"transform": `translateX(-${delta+10}px)`})
        }
        else {
            document.querySelector(target).removeClass('hover');
        }
    }
    _applicabilityClearShift(target) {
        let str = document.querySelector(target).querySelector('span');

        str.removeAttr("style");
        setTimeout(()=> {
            document.querySelector(target).removeClass('hover');
        },200);
    }

    // Отслеживание добавления товара в избранное
    _initFavoriteObserver() {
        document.querySelector('.catalog__product-list-row .favorite-heart_empty').click(function (e) {
            e.preventDefault();
            let location = document.querySelector(this).attr('data-location');

            if (location) {
                return;
            }

            let productId = parseInt(document.querySelector(e.target).attr('data-product-id'));
            globalUI.setProductAsFavorite(
                document.querySelector(e.target)
                .parents('.product-card')
                .querySelector('.product-card__layout-pic')
                .querySelector('.favorite-heart')
            );
            globalUI.addFavoriteProduct(productId);

            window.localStorage.removeItem('favoriteFilters');

            let product = globalUI.getAnalyticProductByPaId(productId);
            gaWrapper.ga('ec:addProduct', product);
            gaWrapper.ga('send', 'event', 'Favorite', 'add-to-favorite', 'catalog-buy');

            catalogUI._initFavoriteObserver();

            return false;
        });

        document.querySelector('.catalog__product-list-row .favorite-heart_full').click(function (e) {
            e.preventDefault();
            let favoriteQuantity = globalUI.getCountFavoriteProductListFromLocalStorage();
            gaWrapper.ga('send', 'event', 'Favorite', 'favorite-visit', 'catalog-button', favoriteQuantity);

            let location = document.querySelector(this).attr('data-location');

            if (location) {
                window.location = location;
            }

            return false;
        });
    }

    /**
     * перевіряє чи користувач
     * знаходиться на сторінці пошуку
     * @returns {*|boolean}
     * @private
     */
    _isSearchPage() {
        return /result2/.test(window.location.pathname);
    }

     _eventHandlersInit() {
         document.querySelector(document).addEventListener('ready', () => {
             let favoriteProductList = document.querySelector('.favorite-heart_empty');

             $.each(favoriteProductList, function (index, item) {
                 let productId = parseInt(document.querySelector(item).attr('data-product-id'));
                 let isFavoriteProduct = globalUI.isFavoriteProduct(productId);

                 if (isFavoriteProduct) {
                     globalUI.setProductAsFavorite(item);
                 }
             });

             this._initFavoriteObserver();
         });

         document.querySelector('.filters-box.category-list .click-able').addEventListener('click', (e) => {
             let razdelId = document.querySelector(e.target).data('razdel-id');
             gaWrapper.ga('send', 'event', 'Products-cross', 'category-button', 'side', razdelId);
         });

         document.querySelector(document).addEventListener('click', 'body', () => {
             if (this.selectSort.classList.contains('select-sort_open')) {
                 this.selectSortCurrent.trigger('click');
             }
         });

         document.querySelector(document).addEventListener(
             'copy',
             '.product-card .product-card__layout-name span.product-card__title,'
                + ' .product-card .product-card__layout-name span.product-card__serie',
             (e) => {
                 let elem = document.querySelector(e.target),
                     event = COPYING_ANALYTICS_SOURCE_CATALOG_COMPACT;

                 if (elem.closest('.product-card__layout-inside-link').querySelector('.advanced-tile-on').length) {
                     event = COPYING_ANALYTICS_SOURCE_CATALOG_EXTENDED;
                 }

                 AnalyticsCopying.copyEvent(event);
             }
         );

         document.querySelector(document).addEventListener('copy', '.product-card .product-card__descr', () => {
             AnalyticsCopying.copyEvent(COPYING_ANALYTICS_SOURCE_CHARS_EXTENDED);
         });

         document.querySelector(document).addEventListener('click', '.favorite-heart-text' , (e) => {
             setTimeout(function () {
                 let productId = parseInt(document.querySelector(e.target).attr('data-product-id'));
                 let favoriteIcon = document.querySelector(e.target).parents('.product-card').querySelector('.favorite-heart');
                 globalUI.setProductAsFavorite(favoriteIcon);
                 globalUI.addFavoriteProduct(productId);
             }, 100)
         });

         document.querySelector(document).addEventListener('click', this.selectSort.selector, (event) => {
             event.stopImmediatePropagation();
         });

         document.querySelector(document).addEventListener('click', this.selectSortCurrent.selector, () => {
             this.selectSort.classList.toggle('select-sort_open');
         });

         document.querySelector(document).addEventListener('click', this.selectSortLi.selector, (event) => {
            this._selectSortCange(event.currentTarget);
         });

         document.querySelector(document).addEventListener('click', this.selectSortLiMob.selector, (event) => {
             this._selectSortCange(event.currentTarget);
         });

         document.querySelector(document).addEventListener('click', this.filterTitle.selector, (event) => {
            toggleFilterBox(event.currentTarget, true);
         });

         document.querySelector(document).addEventListener('focus', this.filterSearch.selector, (event) => {
             let filter = document.querySelector(event.currentTarget).closest('filter'),
                filterId = filter.attr('data-char-id');
             AnalyticsFiltersSearch.filterSearch('focus', filterId);
         });

         document.querySelector(document).addEventListener('focusout', this.filterSearch.selector, (event) => {
             let filter = document.querySelector(event.currentTarget).closest('.filter'),
                filterId = filter.attr('data-char-id');
             AnalyticsFiltersSearch.filterSearch('focusout', filterId);
         });

         document.querySelector(document).addEventListener('input', this.filterSearch.selector, (event) => {
             let target = document.querySelector(event.currentTarget),
                 filter = target.closest('.filter'),
                 filterId = filter.attr('data-char-id');
             if (!target.classList.contains('changed')) {
                 AnalyticsFiltersSearch.filterSearch('edit', filterId);
                 target.classList.add('changed');
             }
             applySearchFilter(event.currentTarget);
             this.updateRubricator(filter);
         });

         document.querySelector(document).addEventListener('click', this.clearSearch.selector, (event) => {
             let filter = document.querySelector(event.currentTarget).closest('.filter'),
                 filterId = filter.attr('data-char-id');
             AnalyticsFiltersSearch.filterSearch('clear', filterId);
             filter.querySelector('.filter-search-input').val('');
             applySearchFilter(event.currentTarget);
             this.updateRubricator(filter);
         });

         document.querySelector(document).addEventListener('click', this.filtersClose.selector, () => {
             this.mobFiltersCloseClick();
         });

         document.querySelector(document).addEventListener('click', this.filtersOpen.selector, () => {
             this.mobFiltersOpenClick();
         });

         document.querySelector(document).addEventListener('click', this.oilBtn.selector, (event) => {
             this.changeOil(event.currentTarget);
         });

         document.querySelector(document).addEventListener('click', this.filtersShowAll.selector, (event) => {
             let target = event.currentTarget;
             showAllFilters(target);
             this.updateRubricator(document.querySelector(target).parent());
         });

         document.querySelector(document).addEventListener('click', this.oilMore.selector, (event) => {
             this._showMoreOil(event.currentTarget);
         });

         document.querySelector(document).addEventListener('mouseover', this.applicability.selector, (event) => {
             this._applicabilityShift(event.currentTarget);

         });

         document.querySelector(document).addEventListener('mouseleave', this.applicability.selector, (event) => {
             this._applicabilityClearShift(event.currentTarget);
         });

         document.querySelector(document).addEventListener('input', '#price-range_to', (event) => {
             // Если цена была изменена
             if (catalogUI.isDefaultMaxPriceFilter()) {
                 document.querySelector('.reset-all-btn').classList.add('filter-btn_clear_noactive');
             } else {
                 document.querySelector('#filters-box_second_page_title').removeClass('is-show-only');
                 document.querySelector('.reset-all-btn').removeClass('filter-btn_clear_noactive');
             }
         });

         document.querySelector(document).addEventListener('input', '.filter-price-form > input', () => {
             document.querySelector('#filters-box_second_page_title').removeClass('is-show-only');
             document.querySelector('.reset-all-btn').removeClass('filter-btn_clear_noactive');
         });

         document.querySelector(document).addEventListener('change', '.filter-radio-form-line>input', () => {
             document.querySelector('#filters-box_second_page_title').classList.toggle('is-show-only');
             document.querySelector('.reset-all-btn').classList.toggle('filter-btn_clear_noactive');
         });

         // Кнопка назад в мобильных фильтрах
         document.querySelector(document).addEventListener('click', '#filters-box_second_page_title', (event) => {
             document.querySelector('.reset-all-btn').removeClass('reset-checkbox-btn');

             let rangeFilter = document.querySelector('.filter-price-form:visible');
             if (
                 rangeFilter.length
                 && !this._isSearchPage()
             ) {
                 validateInputNumber(rangeFilter.querySelector('.from'));
                 validateInputNumber(rangeFilter.querySelector('.to'));
             }

             // Если не выбрали новый фильтр не грузим данные с сервера
             if (
                 !document.querySelector(event.currentTarget).classList.contains('is-show-only')
                 && !document.querySelector(event.currentTarget).classList.contains('no-reload')
                 && !this._isSearchPage()
             ) {
                 this.reloadFilterFromServer();
             }

             afterReturnAction(true);
         });

         // Переход от мобильных фильтров к десктопным
         let prevWidth = 0;
         document.querySelector(document).ready(() => {
             prevWidth = document.querySelector(window).width();
         });

         document.querySelector(window).resize(() => {
             if (this._isSearchPage()) {
                 return;
             }

             let currentWidth = document.querySelector(window).width();

             let filterPage = document.querySelector('.filter-overlay').length;

             if (currentWidth >= DESKTOP_MIN_WIDTH && prevWidth < DESKTOP_MIN_WIDTH && filterPage) {
                 setFilter(true);
             }

             prevWidth = currentWidth;
         });
    }
}

let catalogUI = new AppCatalogUI();