https://womoshopping.com/plugins/dzm_resources/frontend/js/dzmPopUpContainer.js?v=5.6.4

1const popupTypes = {
2    exitIntent:'exitIntent',
3    showAfterSeconds:'showAfterSeconds',
4    showOnScroll:'showOnScroll',
5    scrollToElement:'scrollToElement'
6
7}
8
9class DZMPopUpContainer{
10    constructor(uid, type) {
11        this.container = null
12        this.uid = uid
13        this.closeButton = null
14        this.backdrop = null
15        this.remember = false
16        this.rememberDays = 0
17        this.type = type
18        this.showAfterSeconds = 0
19        this.showOnScroll = 0
20        this.scrollToElement = ""
21        this.backdrop = document.createElement('div')
22        this.backdrop.classList.add('modal-backdrop')
23        this.backdrop.classList.add('fade')
24        this.backdropContainer = null
25        this.content = ""
26        this.contentWrapper = null
27        this.showAgain = true;
28
29        this.selectors = {
30            containerSelector:'[data-dzm-popup-container="'+uid+'"]',
31            closeButtonSelector: '[data-dzm-popup-closebutton="'+uid+'"]',
32            backdropContainerSelector:'body',
33            contentWrapperSelector:'.dzm-popup-content-wrapper'
34        }
35
36    }
37
38    init(options){
39        this.content = options.content
40        this.remember = options.remember
41        this.rememberDays = options.rememberDays
42        this.container = document.querySelector(this.selectors.containerSelector)
43        this.closeButton = this.container.querySelector(this.selectors.closeButtonSelector)
44        if(this.closeButton){
45            this.closeButton.addEventListener('click',()=>{
46                this.hide(this)
47            })
48        }
49
50        this.backdropContainer = document.body
51
52        if(this.container == null){
53            console.warn('no popup found')
54            return
55        }
56        this.contentWrapper = this.container.querySelector(this.selectors.contentWrapperSelector)
57
58        if(this.getCookie(this.uid)===""){
59            switch (this.type){
60                case popupTypes.exitIntent:
61                    document.addEventListener('mouseout', e=>{
62                        if(this.showAgain){
63                            if(!e.toElement && !e.relatedTarget){
64                                this.show(this)
65                            }
66                        }
67                    })
68                    break;
69                case popupTypes.scrollToElement:
70                    if(!options.scrollToElement){
71                        console.warn('scrollToElement Missing', options)
72                        return;
73                    }else{
74                        this.scrollToElement = options.scrollToElement
75                    }
76
77                    let target = document.getElementById(this.scrollToElement);
78                    if(target && this.showAgain){
79                        (new IntersectionObserver((entries, observer)=>{
80                            entries.forEach(entry=>{
81                                if(entry.isIntersecting){
82                                    this.show(this)
83                                    observer.unobserve(target)
84                                }
85                            })
86
87                        },{root:null,rootMargin:'-50px', threshold:0.4})).observe(target)
88                    }
89
90
91                    break;
92                case popupTypes.showAfterSeconds:
93                    if('showAfterSeconds' in options){
94                        this.showAfterSeconds = options.showAfterSeconds
95                    }else{
96                        console.warn('showAfterSeconds Missing', options)
97                        return;
98                    }
99                    setTimeout(()=>{
100                        this.show(this)
101                    }, Math.abs(this.showAfterSeconds) * 1000 + 1)
102
103                    break;
104                case popupTypes.showOnScroll:
105                    if(!options.showOnScroll){
106                        console.warn('showOnScroll Missing', options)
107                        return;
108                    }else{
109                        this.showOnScroll = options.showOnScroll
110                    }
111                    const handleScroll = ()=>{
112                        /*console.log('scroll')*/
113                        const windowHeight = window.innerHeight;
114                        const fullDocumentHeight = document.documentElement.scrollHeight;
115                        const scrolled = document.documentElement.scrollTop || document.body.scrollTop;
116
117                        const scrollPercentage = (scrolled + windowHeight) / fullDocumentHeight * 100;
118
119                        if (scrollPercentage >= this.showOnScroll) {
120                            this.show(this);
121                            // Optional: Event-Listener entfernen, damit 'show' nur einmal aufgerufen wird
122                            document.removeEventListener('scroll', handleScroll);
123                        }
124                    }
125                    document.addEventListener('scroll', handleScroll);
126                    break;
127                default:
128                    break;
129
130
131            }
132        }else{
133            /*console.log(' cookie for ',this.uid)*/
134            this.showAgain = false;

135
136        }
137
138
139
140
141
142    }
143
144    /**
145     *
146     * @param {DZMPopUpContainer} instance
147     */
148    show(instance){
149        this.contentWrapper.innerHTML = instance.content
150        instance.backdropContainer.appendChild(instance.backdrop)
151        setTimeout(()=>{
152            instance.backdrop.classList.add('show')
153            instance.backdrop.addEventListener('click',()=>{
154                this.hide(instance)
155            })
156        },1)
157
158
159        instance.container.classList.add('show')
160    }
161
162    hide(instance){
163        instance.container.classList.remove('show')
164        instance.backdrop.classList.remove('show')
165        instance.backdrop.style.pointerEvents = 'none'
166        setTimeout(()=>{
167            instance.backdrop.remove()
168            instance.backdrop.style.pointerEvents = 'all'
169            this.contentWrapper.innerHTML = ''
170
171        },500)
172
173        console.log('hide', instance.remember)
174        if(instance.remember){
175            instance.setCookie(instance.uid,1,instance.rememberDays)
176        }
177    }
178
179    getCookie(cname) {
180        let name = cname + "=";
181        let decodedCookie = decodeURIComponent(document.cookie);
182        let ca = decodedCookie.split(';');
183        for(let i = 0; i <ca.length; i++) {
184            let c = ca[i];
185            while (c.charAt(0) === ' ') {
186                c = c.substring(1);
187            }
188
189            if (c.indexOf(name) === 0) {
190                return c.substring(name.length, c.length);
191            }
192        }
193        return "";
194    }
195    setCookie(cname, cvalue, exdays) {
196        console.log('setCookie')
197        const d = new Date();
198        let expires = ''
199        if(exdays > 0){
200            d.setTime(d.getTime() + (exdays*24*60*60*1000));
201            expires = "expires="+ d.toUTCString() + ';';
202        }
203
204
205        document.cookie = cname + "=" + cvalue + ";" + expires + "path=/";
206        this.showAgain = false;
207    }
208}