https://www.iway.ch/wp-content/themes/iwaytwo/assets/js/iway-popup.js?ver=1790242809

1/**
2 * 12.09.23/PK
3 * Globale iWay-Popup-Funktion.
4 * @param {HTMLElement} target  - Referenz auf den Container, der zu einem Popup werden soll.
5 * @param {Object} [args]       - Optionale Einstellungsmöglichkeiten
6 */
7const iWayPopup = function (target, args) {
8    /**
9     * Eigenschaften
10     */
11    let
12        myName = 'IWayPopup',
13        modalBack,
14        modalDialog,
15        modalClose,
16        chatDialog,
17        mobileWidth = 768,
18        modalOpen = false,
19        myArgs = {                      // Impementiert sind Eigenschaften mit Kommentar.
20            className: undefined,
21            modal: undefined,
22            resizable: undefined,
23            draggable: undefined,
24            width: undefined,
25            maxWidth: undefined,        // [int]            Maximale Breite, meint die Breite des Popups ohne Titel und Spatzung
26            minWidth: undefined,        // [int]            Minimale Breite, meint die Breite des Popups ohne Titel und Spatzung
27            height: undefined,
28            maxHeight: undefined,       // [int]            Maximale Höhe, meint die Höhe des Popups ohne Titel und Spatzung
29            minHeight: undefined,       // [int]            Minimale Höhe, meint die Höhe des Popups ohne Titel und Spatzung
30            load: undefined,            // [function]       Auszuführende Funktion bevor das Popup initialisiert wird
31            loadargs: undefined,        // [object]         Argumente für die Funktion, die ausgeführt wird
32            unload: undefined,          // [function]       Auszuführende Funktion bevor das Popup entladen wird
33            unloadargs: undefined,      // [object]         Argumente für die Funktion, die ausgeführt wird
34            resize: undefined,           
35            containsWPForm: false,      // [bool]          Popup-Inhalt wird nicht geklont, wenn es WPForm enthaelt, da es mit einem Formular-Token interferiert.
36            appendTo: document.body
37        }
38    ;
39
40    /**
41     * Methoden
42     */
43    const
44        /**
45         * Main-Methoden
46         */
47        load = function () {
48            // Einkommende Argumente mappen
49            mapArgs(args);
50            hideChat(false);
51            // Content-Div bereit machen
52            if (myArgs.containsWPForm === true) { // Es gibt Probleme, wenn Popup-Container mit WPForm drin geklont wird
53                modalDialog = target;
54                modalBack = modalDialog.parentNode.appendChild(createElement('div', { className: 'popup-modal-bg'}));
55            } else {
56                modalDialog = document.body.appendChild(target.cloneNode(true));
57                modalBack = document.body.appendChild(createElement('div', { className: 'popup-modal-bg'}));
58            }
59            modalDialog.setAttribute('aria-modal', 'true');
60            modalDialog.setAttribute('role', 'dialog');
61            modalClose = modalDialog.firstChild.appendChild(createElement('a', { title: 'Schliessen', href: '#'}, document.createTextNode('X')));
62            // Dialog sichtbar machen und stylen
63            replaceClass(modalDialog, 'info', 'popup-container');
64            // Scroll auf der Seite abstellen, wenn nicht Mobile (Reaktion gleich wie in CSS)
65            if (window.innerWidth > mobileWidth) {
66                document.body.style.overflow = 'hidden';
67            }
68            // Grössen binden. Generell hat das Fenster eine Breite und Höhe von 70% des Browsers, wird aber durch min und max begrenzt.
69            setSize();
70            // Position setzen
71            // Modalen Div erzeugen
72            modalBack.style.zIndex = 2147483646;    // Ist so hoch, weil andere Indexe so hoch sind
73            modalDialog.style.zIndex = 2147483647;  // Ist so hoch, weil andere Indexe so hoch sind
74            modalDialog.style.display = 'block';
75            setCenterPos(modalDialog);
76            // Schliessen binden auf X und ausserhalb Popup.
77            modalClose.addEventListener('click', unload, false);
78            modalDialog.addEventListener('click', function (event) {event.stopPropagation();}, false);
79            modalBack.addEventListener('click', unload, false);
80            // Resize binden
81            window.addEventListener('resize', resize, false);
82            // Custom-Methode injizieren
83            if (myArgs.load) {
84                myArgs.load(myArgs.loadargs);
85            }
86            // Box draggable machen, Handle ist der Titel.
87            // Position nach links und oben begrenzen
88            $(modalDialog).draggable({ handle: 'h2.popup-title', scroll: false, drag: function( event, ui){
89                var
90                    leftScroll = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
91                    topScroll = document.documentElement.scrollTop || document.body.scrollTop || 0
92                ;
93                if (myArgs.containsWPForm === false) {
94                    topScroll = Math.max(20, topScroll);
95                } else {
96                    topScroll = Math.max(-120, topScroll);
97                }
98                ui.position.left = minValue(leftScroll, ui.position.left);
99                ui.position.top = minValue(topScroll, ui.position.top);
100            }});
101            // Abschluss
102            modalOpen = true;
103        },
104        unload = function (event) {
105            event.preventDefault();
106            if (modalOpen == true) {
107                modalOpen = false;

108                // Dialog und Back wegmachen
109                modalBack.parentNode.removeChild(modalBack);
110                if (myArgs.containsWPForm === true) {
111                    modalDialog.style.display = 'none';
112                } else {
113                    modalDialog.parentNode.removeChild(modalDialog);
114                }
115                // Scroll auf der Seite wieder anstellen.
116                document.body.style.overflow = 'auto';
117                // Z-Index rückgängig
118                hideChat(true);
119                // Window-Event raus (andere sollten automatisch aufgehoben werden)
120                window.removeEventListener('resize', resize, false);
121                // Custom-Methode injizieren
122                if (myArgs.unload) {
123                    myArgs.unload( myArgs.unloadargs);
124                }
125            }
126        },
127        resize = function () {
128            if (modalDialog) {
129                if (window.innerWidth > mobileWidth) {
130                    document.body.style.overflow = 'hidden';
131                } else {
132                    document.body.style.overflow = 'auto';
133                }
134                setSize();
135                setCenterPos(modalDialog);
136                // Custom-Methode injizieren
137                if (myArgs.resize) {
138                    myArgs.resize();
139                }
140            }
141        },
142        /**
143         * Helpers
144         */
145        minValue = function (min, val) {
146            if (val < min) {
147                return min;
148            }
149            return val;
150        },
151        maxValue = function (max, val) {
152            if (val > max) {
153                return max;
154            }
155            return val;
156        },
157        hideChat = function (reset) {
158            if (reset === true) {
159                if (chatDialog) {
160                    for (let i = 0; i < chatDialog.length; i++) {
161                        chatDialog[i].style.zIndex = 2147483646;
162                    }
163                }
164            } else {
165                chatDialog = document.querySelectorAll('[data-test-id="userlike-container"] [class*="umm-"]');
166                if (chatDialog) {
167                    for (let i = 0; i < chatDialog.length; i++) {
168                        chatDialog[i].style.zIndex = 90;
169                    }
170                }
171            }
172        },
173        setSize = function () {
174
175            var 
176                winSize = getSize(),
177                size = getSize(modalDialog),
178                contentSize = getSize(modalDialog.lastElementChild),
179                minHeight = winSize.height - 150,
180                maxHeight = winSize.height - 150,
181                minWidth = winSize.width - 150,
182                maxWidth = winSize.width - 150
183            ;
184            if (winSize.width <= mobileWidth) {
185                minWidth = winSize.width - 10,
186                maxWidth = winSize.width - 10
187            }
188
189            // modalDialog.lastElementChild.style.minHeight = 'unset';
190            // modalDialog.lastElementChild.style.maxHeight = 'unset';
191            // modalDialog.lastElementChild.style.height = contentSize + 'px';
192            // modalDialog.style.minWidth = 'unset';
193            // modalDialog.style.maxWidth = 'unset';
194            console.log(modalDialog,size.height,  myArgs.minHeight, minHeight, myArgs.maxHeight, maxHeight);
195
196            if (myArgs.minHeight !== void 0) {
197                if (isNaN(myArgs.minHeight)) {
198                    // modalDialog.lastElementChild.style.minHeight = myArgs.minHeight;
199                    console.log(myName, 'minHeight muss numerisch sein, wenn gesetzt!');
200                } else {
201                    modalDialog.lastElementChild.style.minHeight = myArgs.minHeight + 'px';
202                }
203            } else {
204                 modalDialog.lastElementChild.style.minHeight = minHeight + 'px';
205            }
206            if (myArgs.maxHeight !== void 0) {
207                if (isNaN(myArgs.maxHeight)) {
208                    // modalDialog.lastElementChild.style.maxHeight = myArgs.maxHeight;
209                    console.log(myName, 'maxHeight muss numerisch sein, wenn gesetzt!');
210                } else {
211                    modalDialog.lastElementChild.style.maxHeight = myArgs.maxHeight + 'px';
212                }
213            } else {
214                modalDialog.lastElementChild.style.maxHeight = maxHeight + 'px';
215            }
216            size = getSize(modalDialog);
217            if (size.height > minHeight) {
218                modalDialog.lastElementChild.style.minHeight = minHeight + 'px';
219            }
220            if (size.height > maxHeight) {
221                modalDialog.lastElementChild.style.maxHeight = maxHeight + 'px';
222            }
223
224            if (myArgs.minWidth !== void 0) {
225                if (isNaN(myArgs.minWidth)) {
226                    // modalDialog.style.minWidth = myArgs.minWidth;
227                    console.log(myName, 'maxHeight muss numerisch sein, wenn gesetzt!');
228                } else {
229                    modalDialog.style.minWidth = myArgs.minWidth + 'px';
230                }
231            }
232            if (myArgs.minWidth === void 0 || size.width > minWidth) {
233                modalDialog.style.minWidth = minWidth + 'px';
234            }
235
236            if (myArgs.maxWidth !== void 0) {
237                if (isNaN(myArgs.maxWidth)) {
238                    // modalDialog.style.maxWidth = myArgs.maxWidth;
239                    console.log(myName, 'maxHeight muss numerisch sein, wenn gesetzt!');
240                } else {
241                    modalDialog.style.maxWidth = myArgs.maxWidth + 'px';
242                }
243            }
244            if (myArgs.maxWidth === void 0 || size.width > maxWidth) {
245                modalDialog.style.maxWidth = maxWidth + 'px';
246            }
247        }
248        setCenterPos = function (element) {
249            let
250                winSize = getSize(),
251                size = getSize(element),
252                leftScroll = document.documentElement.scrollLeft || document.body.scrollLeft || 0,
253                topScroll = document.documentElement.scrollTop || document.body.scrollTop || 0,
254                leftPos = parseInt((winSize.width - size.width) / 2 + leftScroll),
255                topPos = parseInt((winSize.height - size.height) / 2 + topScroll)
256            ;

257            if (winSize.width <= mobileWidth || winSize.width < size.width) {
258                leftPos = 0;
259            }
260            if (winSize.height < size.height) {
261                topPos = 20 + topScroll;
262            }
263            if (winSize.width <= mobileWidth) {
264                topPos = 0 + topScroll;
265            }
266            element.style.left = Math.max(0, leftPos) + 'px';
267            element.style.top = Math.max(20, topPos) + 'px';
268            element.style.transform = 'none';
269        },
270        getSize = function (element) {
271            if (element) {
272                return {
273                    width: element.getBoundingClientRect().width,
274                    height: element.getBoundingClientRect().height
275                };
276            } else {
277                return {
278                    width: window.innerWidth,
279                    height: window.innerHeight
280                };
281            }
282        }
283        mapArgs = function (args) {
284            if (args) {
285                for (const [key, value] of Object.entries(args)) {
286                    if (key in myArgs) {
287                        myArgs[key] = value;
288                    } else {
289                        console.log('Error', myName, 'Unknown argument received:', key, ':', value);
290                    }
291                }
292            }
293        },
294        addClass = function (element, newClass) {
295            element.classList.add(newClass);
296        },
297        replaceClass = function (element, oldClass, newClass) {
298            element.classList.replace(oldClass, newClass);
299        },
300        createElement = function (element, attributes, content) {
301            let
302                node = document.createElement(element)
303            ;
304            if (attributes) {
305                for (const [key, value] of Object.entries(attributes)) {
306                    if (key == 'className') {
307                        node.className = value;
308                    } else {
309                        node.setAttribute(key, value);
310                    }
311                }
312            }
313            if (content) {
314                node.appendChild(content);
315            }
316            return node;
317        }
318    ;
319
320    /**
321     * Konstruktor
322     */
323    load();
324};