https://www.mango-office.ru/design_kit/site/blocks/hero/script.js

1class MangoPagesBanners {
2    constructor() {
3        this.containerClass = '.js-hero';
4        this.itemClass = '.js-hero-item';
5        this.btnClass = '.js-button';
6
7        this.apiStatsUri = '/api/mango-pages/banners/';
8
9        this.init();
10    }
11
12    init()
13    {
14        const self = this;
15
16        const observer = new IntersectionObserver(
17            function(entries) {
18                self.callbackObserver(entries, this);
19            },
20            {
21                rootMargin: '0px',
22                threshold: 0.5
23            });
24
25        document.querySelectorAll(self.containerClass).forEach((cont) => {
26
27            cont.querySelectorAll(self.itemClass).forEach((item) => observer.observe(item));
28
29            cont.querySelectorAll(self.btnClass).forEach((btn) => {
30                btn.addEventListener('click', () => {
31                    self.sendStat(
32                        'click',
33                        btn.closest(self.itemClass).getAttribute('data-id')
34                    );
35                });
36            });
37        });
38    }
39
40    callbackObserver(entries, observer)
41    {
42        const self = this;
43
44        entries.forEach((entry) => {
45            if (entry.isIntersecting) {
46                observer.unobserve(entry.target);
47                self.sendStat(
48                    'view',
49                    entry.target.getAttribute('data-id')
50                );
51            }
52        });
53    }
54
55    sendStat(action, id)
56    {
57        const self = this;
58
59        fetch(self.apiStatsUri, {
60            method: 'POST',
61            headers: {
62                'Content-Type': 'application/json',
63                'X-Requested-With': 'XMLHttpRequest'
64            },
65            body: JSON.stringify({
66                'id': id,
67                'action': action
68            }),
69        }).then(function (response) {
70            return response.json();
71        }).catch(function (err) {
72            console.error(err);
73        });
74
75        if (typeof mgoTriggerEvent !== 'function') {
76            return;
77        }
78
79        switch(action) {
80            case 'view':
81                mgoTriggerEvent('viewBanner', [id]);
82                break;
83            case 'click':
84                mgoTriggerEvent('clickBannerButton', [id]);
85                break;
86            default:
87                return;
88        }
89    }
90}
91
92if (window.frameCacheVars !== undefined) {
93    BX.addCustomEvent('onFrameDataReceived', function () {
94        new MangoPagesBanners();
95    });
96    BX.addCustomEvent('onFrameDataRequestFail', () => {
97        new MangoPagesBanners();
98    });
99} else {
100    new MangoPagesBanners();
101}