https://www.zoga-beauty.com/templates/NOVA/js/consent.js?v=5.5.3

1class ConsentManager
2{
3    static defaultOptions = {
4        prefix: 'consent',
5        storageKey: 'consent',
6        version: 1,
7        viewsUntilBannerIsShown: $('#consent-manager-show-banner').val(),
8        eventReadyName: 'consent.ready',
9        eventUpdatedName: 'consent.updated'
10    };
11
12    constructor(options)
13    {
14        this.options = Object.assign({}, ConsentManager.defaultOptions, options);
15        this.$manager = document.getElementById(this.options.prefix + '-manager');
16        this.$banner = document.getElementById(this.options.prefix + '-banner');
17        this.$collapseToggle = this.$manager.querySelectorAll('[data-collapse]');
18        this.$bannerBtnAcceptAll = document.getElementById(this.options.prefix + '-banner-btn-all');
19        this.$bannerBtnClose = document.getElementById(this.options.prefix + '-banner-btn-close');
20        this.$bannerBtnSettings = document.getElementById(this.options.prefix + '-banner-btn-settings');
21        this.$modalSettings = document.getElementById(this.options.prefix + '-settings');
22        this.$modalSettingsCheckboxes = this.$modalSettings.querySelectorAll('[data-storage-key]');
23
24        this.$modalSettingsCheckAll = this.$modalSettings.querySelectorAll(
25            '[data-toggle="' + this.options.prefix + '-all"]'
26        );
27
28        this.$modalConfirm = document.getElementById(this.options.prefix + '-confirm');
29        this.$modalConfirmBtnOnce = document.getElementById(this.options.prefix + '-btn-once');
30        this.$modalConfirmBtnAlways = document.getElementById(this.options.prefix + '-btn-always');
31        this.$modalConfirmKeyInput = document.getElementById(this.options.prefix + '-confirm-key');
32        this.$modalConfirmHeadline = document.getElementById(this.options.prefix + '-confirm-info-headline');
33        this.$modalConfirmHelp = document.getElementById(this.options.prefix + '-confirm-info-help');
34
35        this.$modalConfirmDescription = document.getElementById(
36            this.options.prefix + '-confirm-info-description'
37        );
38
39        this.$modalClose = document.querySelectorAll('[data-toggle="' + this.options.prefix + '-close"]');
40        this.$btnOpenSettings = document.getElementById(this.options.prefix + '-settings-btn');
41        this._isModalOpen = false;
42        this._confirmCallback = null;
43        this._checkVersion();
44        this._events();
45        this._init();
46    }
47
48    openModal(modal)
49    {
50        this._isModalOpen = true;
51        document.body.style.overflow = 'hidden';
52        modal.classList.add('active');
53        setTimeout(() => modal.classList.add('show'), 10);
54
55        let modalClose = document.querySelector('.' + this.options.prefix + '-modal.active .consent-modal-close');
56
57        setTimeout(() => modalClose.focus(), 100);
58    }
59
60    closeModal(event)
61    {
62        let modal = document.querySelector('.' + this.options.prefix + '-modal.active');
63
64        if(!this._isModalOpen || event && modal !== event.target) {
65            return;
66        }
67
68        if(modal !== null) {
69            document.body.style.overflow = '';
70            this._isModalOpen = false;
71            modal.classList.remove('show');
72            setTimeout(() => modal.classList.remove('active'), 200);
73        }
74    }
75
76    closeBanner()
77    {
78        this.$manager.classList.add('fading');
79
80        setTimeout(
81            () => {
82                this.$manager.classList.add('mini');
83                this.$manager.classList.remove('fading');
84            },
85            200
86        );
87    }
88
89    setSetting(key, value)
90    {
91        let settings = {};
92
93        if (key === '*') {
94            for(const modalSettingsCheckbox of this.$modalSettingsCheckboxes) {
95                let key = modalSettingsCheckbox.getAttribute('data-storage-key');
96                settings[key] = value;
97            }
98        } else if(typeof key === 'string') {
99            settings[key] = value;
100        } else {
101            settings = key;
102        }
103
104        this.closeBanner();
105        this._setStorageData(settings);
106
107        document.dispatchEvent(
108            new CustomEvent(this.options.eventUpdatedName, {
109                detail: this._getLocalData() !== null && this._getLocalData().settings
110            })
111        );
112    }
113
114    openConfirmationModal(key, confirmCallback = () => {})
115    {
116        let checkbox = this.$modalSettings.querySelector('[data-storage-key="' + key + '"]');
117
118        if (checkbox !== null) {
119            let consentSwitch = checkbox.parentElement;
120            let label = consentSwitch.querySelector('.' + this.options.prefix + '-label');
121            let help = consentSwitch.querySelector('.' + this.options.prefix + '-help');
122            let moreDescription = consentSwitch.querySelector('.' + this.options.prefix + '-more-description');
123
124            this._confirmCallback = confirmCallback;
125            this.$modalConfirmKeyInput.setAttribute('value', key);
126            this.$modalConfirmHeadline.innerHTML = label.innerHTML;
127            this.$modalConfirmHelp.innerHTML = help.innerHTML;
128            this.$modalConfirmDescription.innerHTML = moreDescription.innerHTML;
129            this.openModal(this.$modalConfirm);
130        }
131    }
132
133    getSettings(key)
134    {
135        let localData = this._getLocalData();
136
137        if(localData && localData.settings) {
138            return localData.settings[key];
139        }
140
141        return false;

142    }
143
144    _init()
145    {
146        let sessionData = this._getSessionData() ?? {views: 0};
147        sessionData.views ++;
148
149        if(sessionData.views < this.options.viewsUntilBannerIsShown) {
150            this.$banner.classList.add(this.options.prefix + '-hidden');
151        }
152
153        if(this._getLocalData() !== null) {
154            this.$manager.classList.add('mini');
155        }
156
157        this.$manager.classList.add('active');
158        this._updateSettings();
159        sessionStorage.setItem(this.options.storageKey, JSON.stringify(sessionData));
160
161        document.dispatchEvent(new CustomEvent(
162            this.options.eventReadyName,
163            {detail: this._getLocalData() !== null && this._getLocalData().settings}
164        ));
165    }
166
167    _confirmationClick(permanent)
168    {
169        let confirmKey = this.$modalConfirmKeyInput.getAttribute('value');
170
171        if(permanent) {
172            this.setSetting(confirmKey, true);
173        }
174
175        if(this._confirmCallback) {
176            this._confirmCallback();
177        }
178
179        this.closeModal();
180    }
181
182    _getSessionData()
183    {
184        return JSON.parse(sessionStorage.getItem(this.options.storageKey));
185    }
186
187    _getLocalData()
188    {
189        return JSON.parse(localStorage.getItem(this.options.storageKey));
190    }
191
192    _setStorageData(settings = {})
193    {
194        let localData = this._getLocalData();
195
196        if(localData && typeof localData.settings === 'object') {
197            settings = Object.assign({}, localData.settings, settings);
198        }
199
200        localStorage.setItem(
201            this.options.storageKey,
202            JSON.stringify({version: this.options.version, settings})
203        );
204
205        this._updateSettings();
206    }
207
208    _updateSettings()
209    {
210        let localData = this._getLocalData();
211        let agreedCount = 0;
212
213        if(localData !== null) {
214            for(const modalSettingsCheckbox of this.$modalSettingsCheckboxes) {
215                let storageKey = modalSettingsCheckbox.getAttribute('data-storage-key');
216
217                if(localData.settings[storageKey]) {
218                    agreedCount++;
219                }
220
221                modalSettingsCheckbox.checked = localData.settings[storageKey];
222            }
223
224            if(agreedCount === this.$modalSettingsCheckboxes.length) {
225                for(const modalSettingsCheckAll of this.$modalSettingsCheckAll) {
226                    modalSettingsCheckAll.checked = true;
227                }
228            }
229        }
230    }
231
232    _checkVersion()
233    {
234        let localData = this._getLocalData();
235
236        if(localData !== null && localData.version !== this.options.version) {
237            localStorage.removeItem(this.options.storageKey);
238        }
239    }
240
241    _events()
242    {
243        this.$bannerBtnAcceptAll.addEventListener('click', () => this.setSetting('*', true));
244        this.$bannerBtnClose.addEventListener('click', () => this.setSetting('*', false));
245        this.$bannerBtnSettings.addEventListener('click', () => this.openModal(this.$modalSettings));
246        this.$modalSettings.addEventListener('click', e => this.closeModal(e));
247
248        for(const modalSettingsCheckbox of this.$modalSettingsCheckboxes) {
249            modalSettingsCheckbox.addEventListener('change', () => {
250                this.setSetting(
251                    modalSettingsCheckbox.getAttribute('data-storage-key'),
252                    modalSettingsCheckbox.checked
253                );
254            });
255        }
256
257        for(const modalSettingsCheckAll of this.$modalSettingsCheckAll) {
258            modalSettingsCheckAll.addEventListener('change', () => {
259                this.setSetting('*', modalSettingsCheckAll.checked);
260
261                for(const modalSettingsCheckAll2 of this.$modalSettingsCheckAll) {
262                    modalSettingsCheckAll2.checked = modalSettingsCheckAll.checked;
263                }
264            });
265        }
266
267        this.$modalConfirm.addEventListener('click', e => this.closeModal(e));
268        this.$modalConfirmBtnOnce.addEventListener('click', () => this._confirmationClick(false));
269        this.$modalConfirmBtnAlways.addEventListener('click', () => this._confirmationClick(true));
270
271        for(const modalClose of this.$modalClose) {
272            modalClose.addEventListener('click', () => this.closeModal());
273        }
274
275        document.addEventListener('keyup', e => {
276            if(e.key === 'Escape') {
277                this.closeModal();
278            }
279        });
280
281        this.$btnOpenSettings.addEventListener('click', () => this.openModal(this.$modalSettings));
282
283        for(const collapseToggle of this.$collapseToggle) {
284            collapseToggle.addEventListener('click', () => {
285                let collapseTarget = document.getElementById(collapseToggle.getAttribute('data-collapse'));
286
287                if(collapseTarget !== null) {
288                    collapseTarget.classList.toggle(this.options.prefix + '-hidden');
289                }
290            });
291        }
292    }
293}
294
295$('.consent-show-more').on('click', function(e) {
296    e.preventDefault();
297});
298
299$('#consent-accept-banner-btn-close').on('click', function(e) {
300    $('[data-storage-key]').each(function(v,k){
301        CM.setSetting($(k).data('storageKey'), $(k).is(':checked'));
302    });
303
304    CM.closeBanner();
305});