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

'use strict';

// =============================================================================
// Сортировка
// dependencies:
//  - jQuery
// =============================================================================

class AppSortUI {

    constructor() {
        this.timeout = 200;

        this.selectSort = document.querySelector('.select-sort');
        this.selectSortMob = document.querySelector('#catalog__sort-select-mob');

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

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

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

        document.querySelector('.select-sort li').addEventListener('click', (event) => {
            this._selectSortChange(event.currentTarget);
        });

        document.querySelector('.select-sort-mobile li').addEventListener('click', (event) => {
            this._selectSortChange(event.currentTarget);
        });

        document.querySelector('.select-sort-current').addEventListener('click', (event) => {
            let target = event.currentTarget;
            if (globalUI.isMobile && !document.querySelector(target).closest('.select-sort_open').length) {
                this._sortSelectPopUp(event.currentTarget);

                return;
            }
            document.querySelector(target).closest(this.selectSort.selector).classList.toggle('select-sort_open');
        });

        document.querySelector(document).addEventListener('click', '.darkMask:visible', (event) => {
            let sortMobile = document.querySelector('.catalog__sort-form-mobile');
            if (sortMobile.is(':visible')) {
                sortMobile.css('display', 'none');
                document.querySelector('.darkMask').remove();
                sendDeactivateSortGA();
            }
        })
    }

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

        document.querySelector(target).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);

        let dataUrl = document.querySelector(target).attr('data-url');

        if (dataUrl) {
            sendSelectedSortGA(document.querySelector(target).text());
            setTimeout(() => {
                window.location.href = dataUrl;
            }, 1);
        } else {
            sendDeactivateSortGA();
        }

        setTimeout(() => {
            document.querySelector('.catalog__sort-form-mobile').css('display', 'none');
            document.querySelector('.darkMask').remove();
        }, this.timeout)
    }

    _sortSelectPopUp(target) {
        if (document.querySelector(target).closest('.select-sort_open').length) {
            return;
        }

        let sortSelect = document.querySelector(target).closest('.select-sort').next('.catalog__sort-form-mobile');

        document.querySelector('body').insertAdjacentHTML("beforeend",'<span class="darkMask"></span>');
        sortSelect.css('display', 'block');
    }
}

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