JS (themes/redesign/custom-js/profile_filters.js)

'use strict';

// Фильтры
// dependencies:
//  - jQuery
// =============================================================================
const CHECK_BOX_FILTER_LIMIT = 8;

class AppFilterUI {

    constructor() {
        this._eventHandlersInit();
    }

    _eventHandlersInit() {
        document.querySelector('.catalog__mob-filter-btn').addEventListener('click', () => {
            this._filtersOpenClick();
        });

        document.querySelector('.n-profile-orders-filters__btn_filter').addEventListener('click', (event) => {
            let name = document.querySelector(event.currentTarget).children('.select-sort-current').text();
            let target = document.querySelector(`.filter__title[data-name=${name}]`);
            if (target.length === 0){
                return;
            }

            this._filtersOpenClick();
            toggleFilterBox(target, false);
        });

        document.querySelector(document).addEventListener('click', '#F-popup-overlay', () => {
            if (document.querySelector('.catalog__filter-column').classList.contains('opened')) {
                document.querySelector('.filters-close').trigger('click');
            }
        });

        document.querySelector(document).addEventListener('click', '#filters-close', () => {
            this._filtersCloseClick();
        });

        document.querySelector(document).addEventListener('click', '.filter__title', (event) => {
            toggleFilterBox(event.currentTarget, false);
        });

        document.querySelector(document).addEventListener('click', '.filter-btn_show', () => {
            this._filtersApplyClick();
        });

        document.querySelector(document).addEventListener('click', '.filter-show-all', (event) => {
            showAllFilters(event.currentTarget);
        });

        document.querySelector(document).addEventListener('click', '#filters-box_second_page_title', (event) => {
            this._return(event.currentTarget)
        });

        document.querySelector(document).addEventListener('click', '.filter-btn_clear', () => {
            this._resetFilter();
        });

        document.querySelector(document).addEventListener('input', '.filter-search-input', (event) => {
            applySearchFilter(event.currentTarget);
        });

        document.querySelector(document).addEventListener('click', '.filters .clear-button', (event) => {
            let filter = document.querySelector(event.currentTarget).closest('.filter');
            filter.querySelector('.filter-search-input').val('');
            applySearchFilter(event.currentTarget);
        });

        document.querySelector('.n-profile-orders-chosen-filters__item').addEventListener('click', () => {
            this._addPreloader();
        });

        document.querySelector(document).addEventListener('click', 'input[type="checkbox"]', (event) => {
            let catalogFilter = document.querySelector('.catalog__filter-column');
            let maxPosition = Number(catalogFilter.attr('data-max-position')) + 1;
            document.querySelector(event.currentTarget).attr('data-position', maxPosition);
            catalogFilter.attr('data-max-position', maxPosition);
        });
    }

    _filtersOpenClick() {
        this._addOverlay();
        document.querySelector('html').classList.add('F-popup__window-no-scroll');
        setHiddenClassToListItems();
        returnFilterState();
        setFilterState(false);

        document.querySelector('.catalog__filter-column').classList.add('anim-prepeare-opened_right');
        setTimeout(() => {
            document.querySelector('.catalog__filter-column').classList.add('opened');
        }, 1);
    }

    _filtersApplyClick() {
        if (document.querySelector('input[type="checkbox"].modifier').length === 0
            && !document.querySelector('.catalog__filter-column').classList.contains('modified')
        ) {
            this._filtersCloseClick();

            return;
        }

        this._addPreloader();
        document.location.href = this._getClearUrl() + this._buildURI();
    }

    _filtersCloseClick() {
        let filtersWrap = document.querySelector('.catalog__filter-column');
        filtersWrap.removeClass('opened');
        filtersWrap.removeClass('modified');

        returnFilterState();
        rollbackModifierFilters();
        document.querySelector('.reset-all-btn').removeClass('reset-checkbox-btn');
        document.querySelector('html').removeClass('F-popup__window-no-scroll');
        document.querySelector('#F-popup-overlay').removeClass('show');
    }

    _getClearUrl()
    {
        let url = location.href;
        let newUrl = url.replace(/?(.*)$/g, '');
        return newUrl.replace(//$/g, '');
    }

    _buildURI()
    {
        let queryURI = '';

        let checkedList = document.querySelector('input[type="checkbox"]:checked').sort(function (a, b) {
            return +a.dataset.position - +b.dataset.position;
        })

        $.each(checkedList, function (number, item) {
            let key = document.querySelector(item).closest('.filter_list_checkbox').attr('data-key');
            let value = document.querySelector(item).attr('data-value');
            queryURI += `&filter[][${key}][]=${value}`;
        });

        let sort = this._getSort();
        if (sort !== '') {
            queryURI += "&sort=" + sort;
        }

        if (queryURI !== '') {
            queryURI = '?' + queryURI.substring(1);
        }

        return queryURI;
    }

    _getSort() {
        let url = new URL(window.location);
        let params = new URLSearchParams(url.search);

        if(params.has('sort')) {
            return params.get('sort')
        }

        return '';
    }

    _return(target) {
        document.querySelector('.reset-all-btn').removeClass('reset-checkbox-btn');

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

        afterReturnAction(false);
    }

    _resetFilter() {
        if (!document.querySelector('#filters-box_second_page_title').is(':visible')) {
            this._resetAllFilters();

            return;
        }

        $.each(document.querySelector('.filter__list:visible').querySelector('.filter-label>input:checked'), function () {
            let disabled = document.querySelector(this).attr('disabled');
            document.querySelector(this).attr('disabled', false);
            document.querySelector(this).click();
            document.querySelector(this).attr('disabled', disabled);
        });
    }

    _resetAllFilters() {
        if (document.querySelector('#filters-box_second_page_title').is(':visible')) {
            return;
        }

        let href = document.querySelector('.n-profile-orders-chosen-filters__clear').attr('href');
        if (!href) {
            this._filtersApplyClick();

            return;
        }

        this._addPreloader();
        window.location.href = href;
    }

    _getFilterRawData() {
        let filters = [];
        $.each(document.querySelector('.filter_list_checkbox'), function (number, filter) {
            let key = document.querySelector(filter).attr('data-key');
            let listItem = document.querySelector(filter).querySelector('input[type="checkbox"]:checked');
            $.each(listItem, function (number, item) {
                let value = document.querySelector(item).attr('data-value');
                filters.push(key + '=' + value);
            });
        });

        return filters;
    }

    _reloadFromServer() {
        document.querySelector('.catalog__filter-column').classList.add('modified');
        let url = this._getClearUrl();

        $.ajax(url, {
            method: 'POST',
            data: {
                'action' : 'reload_filters',
                'filterRaw' : this._getFilterRawData(),
            },
            dataType: 'json',
            success: function (data) {
                if (data && data.filters !== undefined) {
                    document.querySelector('.catalog__filter-column').html(data.filters);
                    returnFilterState();
                    setFilterState(false);
                    setHiddenClassToListItems();
                }
            },
            beforeSend: function () {
                let container = document.querySelector('<div>')
                    .classList.add('filter-overlay filter-overlay_show')
                    .appendTo(document.querySelector('.catalog__filter-column'));
                document.querySelector('<div>').appendTo(container);
            },
        });
    }

    _addPreloader() {
        let container = document.querySelector('<div>')
            .classList.add('filter-overlay filter-overlay_show')
            .css({position: 'fixed'})
            .appendTo(document.querySelector('.inner-page > .layout-main'));
        document.querySelector('<div>').appendTo(container);
    }

    _addOverlay() {
        let popupOverlay = document.querySelector('#F-popup-overlay');
        if (popupOverlay.length > 0) {
            popupOverlay.classList.add('show');

            return;
        }

        document.querySelector('<div id="F-popup-overlay">')
            .classList.add('show')
            .appendTo(document.querySelector('body'));
    }
}

document.querySelector(document).addEventListener('ready', function () {
    new AppFilterUI();
});