https://5element.by/local/components/patio/list/templates/article_list/pager.js?17887936804671

1const PagerApp = function (settings) {
2    this._settings = {
3        componentContainer: '.nl-list',
4        preloaderContainer: '.preloader_container',
5        defaultOffsetSelector: '.nl-hdt__title',
6        paginationItemClass: '.js-pager',
7        paginationMoreItemClass: 'c-list__show-more',
8        paginationContainerSelector: '.js-pager-node',
9        itemsSelector: '.nl-list__list',
10    }
11    for (let propName in settings) {
12        if (settings.hasOwnProperty(propName)) {
13            this._settings[propName] = settings[propName];
14        }
15    }
16    this._$preloaderContainer = document.querySelector(this._settings.preloaderContainer);
17    this._$componentContainer = document.querySelector(this._settings.componentContainer);
18    if (this._$componentContainer && this._$preloaderContainer) {
19        this._init();
20    }
21}
22
23PagerApp.prototype._init = function () {
24    this._setupListener.call(this);
25}
26
27PagerApp.prototype._setupListener = function () {
28    const _this = this,
29        paginationItemSelector = _this._settings.paginationItemClass,
30        paginationItemClass = paginationItemSelector.substring(paginationItemSelector.indexOf('.') + 1);
31
32    _this._$componentContainer.addEventListener('click', (e) =>
33    {
34        if (e.target?.classList?.contains(paginationItemClass) || e.target.closest('.' + paginationItemClass) !== null)
35        {
36            e.preventDefault();
37            let link = e.target.getAttribute('href');
38            let more = e.target?.classList?.contains(_this._settings.paginationMoreItemClass);
39
40            if (!link)
41            {
42                link = e.target.closest('.' + paginationItemClass).getAttribute('href')
43            }
44            _this._send({reload_ajax: 'y'}, link, link, more);
45        }
46    });
47};
48
49PagerApp.prototype._send = function (data = {}, link = window.location.href, changeLink = '', more = false) {
50    const _this = this;
51    if (data.length === 0 || link === '#' || !link) return;
52
53    _this._displayLoading();
54
55    if (!more) {
56        let $topOffset = (document.querySelector(this._settings.defaultOffsetSelector)
57            .getBoundingClientRect().top - 300 + document.body.scrollTop);
58
59        window.scrollBy({
60            top: $topOffset,
61            behavior: 'smooth'
62        });
63    }
64
65    fetch(link, {
66        method: 'POST',
67        cache: 'no-cache',
68        headers: {'Content-Type': 'application/x-www-form-urlencoded', 'Bx-ajax': 'true'},
69        body: new URLSearchParams(data)
70    }).then(function(response) {
71        return response.text()
72    }).then(function(text) {
73        let template = document.createElement('div');
74        template.innerHTML = text;
75
76        if (more){
77            const productsContainer = _this._$componentContainer.querySelector(_this._settings.itemsSelector);
78            const moreContainer = _this._$componentContainer.querySelector('.' + _this._settings.paginationMoreItemClass);
79            const moreContainerNew = template.querySelector('.' + _this._settings.paginationMoreItemClass);
80            const paginationContainer = _this._$componentContainer.querySelector(_this._settings.paginationContainerSelector);
81
82            if (productsContainer){
83                productsContainer.insertAdjacentHTML('beforeend', template.querySelector(_this._settings.itemsSelector).innerHTML);
84            }
85
86            if (moreContainer && moreContainerNew) {
87                moreContainer.outerHTML = moreContainerNew.outerHTML;
88            } else {
89                moreContainer.outerHTML = '';
90            }
91
92            if (paginationContainer){
93                paginationContainer.innerHTML = template.querySelector(_this._settings.paginationContainerSelector).innerHTML;
94            }
95        } else {
96            if (template.querySelector(_this._settings.componentContainer))
97            {
98                _this._$componentContainer.innerHTML = template.querySelector(_this._settings.componentContainer).innerHTML;
99            }
100        }
101
102        if (changeLink !== '')
103        {
104            history.pushState(null, null, changeLink);
105        }
106
107        _this._hideLoading();
108
109        window.dispatchEvent(new CustomEvent("ajax-finished", {
110            detail: {}
111        }));
112
113    })
114    .catch(error => {
115        console.log(error);
116    });
117};
118
119PagerApp.prototype._displayLoading = function() {
120    this._$preloaderContainer?.classList?.add('ajax-preloader');
121    setTimeout(() => {
122        this._hideLoading();
123    }, 4000);
124};
125
126PagerApp.prototype._hideLoading = function() {
127    this._$preloaderContainer?.classList?.remove('ajax-preloader');
128};
129
130window.addEventListener('DOMContentLoaded', () => {
131    new PagerApp();
132});