https://18000.com.ua/wp-content/plugins/mdf-popups/assets/js/cta-popup.js

1var ScrollYLock = function () {
2    function ScrollYLock() {
3        this.html = document.documentElement;
4        this.body = document.body;
5        this.pageWrapper = document.querySelector('body');
6        this.lockPaddingElements = document.querySelectorAll('[data-lp]');
7    }
8
9    ScrollYLock.prototype.toggleBodyLock = function (isLock) {
10        var lockPaddingValue = window.innerWidth - this.pageWrapper.offsetWidth;
11
12        if (this.lockPaddingElements) {
13            this.lockPaddingElements.forEach(function (element) {
14                element.style.paddingRight = isLock ? lockPaddingValue + 'px' : '0px';
15            });
16        }
17
18        this.body.style.paddingRight = isLock ? lockPaddingValue + 'px' : '0px';
19        this.html.classList.toggle('lock', isLock);
20    };
21
22    return ScrollYLock;
23}();
24
25var CtaPopupManager = function () {
26    function CtaPopupManager(popups) {
27        this.popups = Array.isArray(popups) ? popups : [];
28        this.initPopups();
29    }
30
31    CtaPopupManager.prototype.initPopups = function () {
32        var _this = this;
33
34        this.popups.forEach(function (popup) {
35            _this.generatePopup(popup.type, popup.id, popup.content);
36
37            var popupElement = document.querySelector('[data-popup-id="' + popup.id + '"]');
38            var popupInstance = new Popup(popupElement, popup.type, popup.id, popup);
39
40            popupInstance.init();
41        });
42    };
43
44    CtaPopupManager.prototype.generatePopup = function (type, id, content) {
45        switch (type) {
46            case 1:
47                this.generateType1Popup(id.toString(), content);
48                break;
49
50            case 2:
51                this.generateType2Popup(id.toString(), content);
52                break;
53
54            default:
55                break;
56        }
57    };
58
59    CtaPopupManager.prototype.generateType1Popup = function (id, content) {
60        if (window.location.href !== content.button_label) {
61            var ctaPopup = document.createElement('div');
62
63            ctaPopup.className = 'cta-popup d-none';
64            ctaPopup.setAttribute('data-popup-type', '1');
65            ctaPopup.setAttribute('data-popup-id', id);
66
67            ctaPopup.innerHTML = '\
68              <div class="cta-popup__content cta-popup__container">\
69                <button class="cta-popup__close" aria-label="' + content.button_label + '">\
70                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">\
71                    <path d="M18 6L6 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
72                    <path d="M6 6L18 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
73                  </svg>\
74                </button>\
75                <div class="cta-popup__creative">\
76                  <div class="cta-popup__image-box">\
77                    <img class="cta-popup__image" src="' + content.image_url + '" alt="' + content.image_alt + '"/>\
78                  </div>\
79                </div>\
80                <div class="cta-popup__body">\
81                  <div class="cta-popup__heading">\
82                    <p class="cta-popup__title">' + content.title + '</p>\
83                    <p class="cta-popup__text">' + content.text + '</p>\
84                  </div>\
85                  <a href="' + content.link_to + '" class="cta-popup__button" title="' + content.button_btn_text + '" target="_blank" style="background-color:' + content.button_color + ';">' + content.button_btn_text + '</a>\
86                </div>\
87              </div>\
88            ';
89
90            document.body.append(ctaPopup);
91        }
92    };
93
94    CtaPopupManager.prototype.generateType2Popup = function (id, content) {
95        if (window.location.href !== content.button_label) {
96            var ctaPopup = document.createElement('div');
97
98            ctaPopup.className = 'cta-popup d-none';
99            ctaPopup.setAttribute('data-popup-type', '2');
100            ctaPopup.setAttribute('data-popup-id', id);
101
102            var imageUrl = window.innerWidth <= 768 ? content.mobile_image_url : content.image_url;
103
104            ctaPopup.innerHTML = '\
105                  <a href="' + content.link_to + '" target="_blank" class="cta-popup__content">\
106                    <button class="cta-popup__close" aria-label="' + content.button_label + '">\
107                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">\
108                        <path d="M18 6L6 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
109                        <path d="M6 6L18 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\
110                      </svg>\
111                    </button>\
112                    <div class="cta-popup__image-box">\
113                      <img class="cta-popup__image" src="' + imageUrl + '" alt="' + content.image_alt + '" />\
114                    </div>\
115                  </a>\
116    ';
117
118            document.body.append(ctaPopup);
119        }
120    };
121
122    return CtaPopupManager;
123}();
124

125var Popup = function (_ScrollYLock) {
126    function Popup(element, type, id, options) {
127        _ScrollYLock.call(this);
128        this.element = element;
129        this.type = type;
130        this.id = id;
131        this.options = options;
132        this.currentTime = new Date().getTime();
133    }
134
135    if (_ScrollYLock) Popup.__proto__ = _ScrollYLock;
136    Popup.prototype = Object.create(_ScrollYLock && _ScrollYLock.prototype);
137    Popup.prototype.constructor = Popup;
138
139    Popup.prototype.init = function () {
140        var _this2 = this;
141
142        this.element.querySelector('.cta-popup__close').addEventListener('click', function (event) {
143            event.preventDefault();
144            _this2.hide();
145        });
146
147        setTimeout(function () {
148            return _this2.show();
149        }, this.options.timeToAppear);
150    };
151
152    Popup.prototype.show = function () {
153        if (Number(localStorage.getItem('cta-popup-' + this.id)) > this.currentTime) return;
154
155        this.revive();
156
157        if (this.type === 2) this.toggleBodyLock(true);
158
159        setTimeout(function () {
160            return this.element.classList.add('visible');
161        }.bind(this), 300);
162    };
163
164    Popup.prototype.hide = function () {
165        this.element.classList.remove('visible');
166
167        localStorage.setItem('cta-popup-' + this.id, this.currentTime + this.options.refreshDate);
168
169        if (this.type === 2) this.toggleBodyLock(false);
170
171        setTimeout(function () {
172            return this.destroy();
173        }.bind(this), 300);
174    };
175
176    Popup.prototype.destroy = function () {
177        this.element.classList.add('d-none');
178    };
179
180    Popup.prototype.revive = function () {
181        this.element.classList.remove('d-none');
182    };
183
184    return Popup;
185}(ScrollYLock);
186
187document.addEventListener('DOMContentLoaded', function () {
188    function ctaPopupsInit() {
189        var popupsOptionsData = [];
190
191        var currentTime = new Date().getTime();
192        var twentyFourHours = 86400000;
193        var ctaPopupFetchDuration = 'ctaPopupsFetchTime';
194        var popupSettingsData = 'popupsOptionsData';
195
196        // if (!localStorage.getItem(ctaPopupFetchDuration) || Number(localStorage.getItem(ctaPopupFetchDuration)) <= currentTime) {
197        //     // popupsOptionsData = [{
198        //     //     id: 1,
199        //     //     type: 1,
200        //     //     timeToAppear: 1000,
201        //     //     refreshDate: 1000,
202        //     //     content: {
203        //     //         image_url: './images/cta-popup/image.jpg',
204        //     //         image_alt: 'alt text',
205        //     //         title: 'Новий випуск подкасту уже в ефірі',
206        //     //         text: 'Нове на вашому улюбленому подкасті! Слухайте просто зараз і залишайтесь в курсі найважливіших подій.',
207        //     //         button_title: 'Слухати подкаст',
208        //     //         button_text: 'Прослухати',
209        //     //         button_label: 'Закрити попап'
210        //     //     }
211        //     // }, {
212        //     //     id: 2,
213        //     //     type: 2,
214        //     //     timeToAppear: 2000,
215        //     //     refreshDate: 86400000,
216        //     //     content: {
217        //     //         image_url: './images/cta-popup/image.jpg',
218        //     //         image_alt: 'alt text',
219        //     //         button_label: 'Закрити попап'
220        //     //     }
221        //     // }];
222        //     popupsOptionsData = ctaPopupData.popups;
223        //
224        //     localStorage.setItem(popupSettingsData, JSON.stringify(popupsOptionsData));
225        //     localStorage.setItem(ctaPopupFetchDuration, currentTime + twentyFourHours);
226        // } else {
227        //     popupsOptionsData = JSON.parse(localStorage.getItem(popupSettingsData));
228        // }
229
230        new CtaPopupManager(ctaPopupData.popups);
231    }
232
233    ctaPopupsInit();
234});