Фильтр в каталоге / Filter in catalog (с параметрами)

      window.FilterCatalog = function(settings) {
    const SELECTOR = settings.selector;
    let newFieldTagFilter = '';
    let newBlockFilter = '';

    this.init = function() {
        if (document.body.offsetWidth <= settings.breakpoint) {
            this.addButtonFilter();
            this.addPanelFilter();

            let block = document.querySelector(SELECTOR);
            let fieldTagFilter = document.querySelector('.field-tag-filter');

            if (fieldTagFilter) {
                let newFieldTagFilter = fieldTagFilter.cloneNode(true);
                document.querySelector('.filter-panel__content').append(newFieldTagFilter);
                fieldTagFilter.remove();
            }

            if (block) {
                let newBlockFilter = block.cloneNode(true);
                document.querySelector('.filter-panel__content').append(newBlockFilter);
                block.remove();
            }

        } else {
            let block = document.querySelector(SELECTOR);
            let fieldTagFilter = document.querySelector('.field-tag-filter');

            fieldTagFilter ? newFieldTagFilter = fieldTagFilter.cloneNode(true) : null;
            block ? newBlockFilter = block.cloneNode(true) : null;

            document.querySelector('.button-filter-catalog-wrapper') ? document.querySelector('.button-filter-catalog-wrapper').remove() : null;
            document.querySelector('.filter-panel') ? document.querySelector('.filter-panel').remove() : null;

            if (!document.querySelector('.filter-panel')) {
                if (!document.querySelector(SELECTOR)) {
                    document.querySelector("aside").prepend(newBlockFilter)
                }
                if (!document.querySelector('.field-tag-filter')) {
                    document.querySelector("main").prepend(newFieldTagFilter)
                }
            }

        }
    }
    this.addButtonFilter = function() {
        if (!document.body.querySelector(".btn-filter-catalog")) {
            document.body.querySelector(".block-system-main-block main").insertAdjacentHTML("afterbegin", `
                <div class="button-filter-catalog-wrapper">
                    <a href="javascript://" class="btn btn-primary btn-filter-catalog">Фильтр</a>
                </div>
            `);
            this.addBadge();
            this.clickButtonOpenFilter();
        }
    }
    this.removeButtonFilter = function() {
        if (document.body.querySelector(".btn-filter-catalog")) {
            document.body.querySelector(".btn-filter-catalog").remove();
        }
    }
    this.addBadge = function() {
        if (this.countingQuantity() > 0) {
            document.querySelector(".btn-filter-catalog").insertAdjacentHTML("beforeend", `<span class="badge">${this.countingQuantity()}</span>`);
        }
    }
    this.countingQuantity = function() {
        return document.querySelectorAll('.field-tag-filter .value').length - 1;
    }
    this.clickButtonOpenFilter = function() {
        document.querySelector('.btn-filter-catalog').addEventListener('click', e => {
            e.preventDefault();
            document.querySelector('.filter-panel').classList.add('is-open');
        });
    }
    this.addPanelFilter = function() {
        if (!document.body.querySelector(".filter-panel")) {
            document.body.insertAdjacentHTML("beforeend", `
                <div class='filter-panel'>
                    <div class='filter-panel__inner'>
                        <div class="filter-panel__header">
                            <div class="filter-panel__title">Фильтры</div>
                            <div class="filter-panel__close"></div>
                        </div>
                        <div class="filter-panel__content-wrapper">
                            <div class="filter-panel__content"></div>
                        </div>
                    </div>
                    <div class="filter-panel__overlay"></div>
                </div>
            `);
            this.clickButtonClosePanel();
            this.clickOverlayPanel();
        }
    }
    this.removePanelFilter = function() {
        if (document.body.querySelector(".filter-panel")) {
            document.body.querySelector(".filter-panel").remove();
        }
    }
    this.clickButtonClosePanel = function() {
        document.querySelector('.filter-panel__close').addEventListener("click", e => {
            document.querySelector(".filter-panel").classList.remove("is-open");
        });
    }
    this.clickOverlayPanel = function() {
        document.querySelector('.filter-panel__overlay').addEventListener("click", e => {
            document.querySelector(".filter-panel").classList.remove("is-open");
        });
    }

    if (document.querySelector('#filter-catalog-form')) {
        this.init();
        window.addEventListener('resize', e => {
            this.init();
        });
    }

}