https://zaw.de/app/themes/zaw/js/custom.js?ver=1.0.1

1let mobileLock = false;
2const mastHead = document.getElementById('masthead');
3const mainMenu = document.getElementById('site-navigation');
4const metaMenu = document.getElementById('meta-menu-wrap');
5const hasThumbnail = document.getElementById('primary').querySelector(':scope > .has-post-thumbnail');
6let thumbWrap;
7let thumbImage;
8
9if (hasThumbnail) {
10    thumbWrap = hasThumbnail.querySelector('.post-thumbnail');
11    thumbImage = thumbWrap.querySelector('.wp-post-image');
12}
13
14function is_touch_enabled() {
15    return ( 'ontouchstart' in window ) ||
16        ( navigator.maxTouchPoints > 0 ) ||
17        ( navigator.msMaxTouchPoints > 0 );
18}
19
20if( is_touch_enabled() ) {
21    document.body.classList.add('is-touch');
22}
23
24document.body.classList.add('loaded-first');
25
26window.addEventListener('load', function (event) {
27    mobileMenu();
28    ctElementTeaser();
29    headerImagePosition();
30    fullElementHeight(true);
31    heroAnimation();
32    document.getElementById('menuButton').addEventListener('click', function () {
33        this.classList.toggle('open');
34        mastHead.classList.toggle('open-menu');
35        document.documentElement.classList.toggle('open-menu');
36    });
37    document.body.classList.add('loaded-page');
38}, true);
39
40window.addEventListener('resize', function (event) {
41    mobileMenu();
42    ctElementTeaser();
43    headerImagePosition();
44    fullElementHeight();
45}, true);
46
47function mobileMenu()
48{
49    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
50    if (viewportWidth < 992 || is_touch_enabled()) {
51        if (!mobileLock) {
52            mobileLock = true;
53            document.querySelectorAll('#site-navigation .menu > .menu-item').forEach(function (element) {
54                element.addEventListener('click', function () {
55                    this.classList.toggle('open');
56                })
57            });
58        }
59        mainMenu.appendChild(metaMenu);
60    } else {
61        document.querySelectorAll('#masthead > .site-branding')[0].appendChild(metaMenu);
62    }
63
64    // Menu active class initial adding
65    document.querySelectorAll('#site-navigation .menu > .menu-item').forEach(function (element) {
66        if (element.classList.contains('current_page_parent')) {
67            element.classList.add('open');
68        }
69    });
70}
71
72/*
73Created by Stefan Nieke, https://niekes.com
74*/
75const smoothScrollingIsSupported = 'scrollBehavior' in document.documentElement.style;
76const scrollOptions = {
77    behavior: 'smooth',
78    left: 0,
79    top: 0,
80};
81
82function getScrollTop()
83{
84    return (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
85}
86
87function scrollToTop(e, duration = 750)
88{
89    const start = window.performance.now();
90    const scrollTop = getScrollTop();
91
92    if (scrollTop === 0) {
93        return;
94    }
95
96    /*
97        For modern browsers
98    */
99    if (smoothScrollingIsSupported) {
100        window.scrollTo(scrollOptions);
101    }
102
103    /*
104        Mainly for IE & Safari
105    */
106    if (!smoothScrollingIsSupported) {
107        const step = (timestamp) => {
108            const elapsed = timestamp - start;
109            const k = Math.round(elapsed / duration * 100) / 100;
110
111            if (k <= 1.05) {
112                window.scrollTo(scrollOptions.left, scrollTop * (1 - k) + scrollOptions.top * k);
113                window.requestAnimationFrame(step);
114            }
115        };
116
117        window.requestAnimationFrame(step);
118    }
119}
120
121function ctElementTeaser()
122{
123    let viewportWidth = window.innerWidth || document.documentElement.clientWidth;
124    if (viewportWidth > 767) {
125        document.querySelectorAll('[class*="ct-element-teaser-"]').forEach(function (element) {
126            let elementImage = element.querySelector('.wp-block-image img');
127            if (elementImage) {
128                let elementImageOffset = elementImage.offsetHeight;
129                element.style.paddingTop = elementImageOffset / 2 + "px";
130                element.classList.add('loaded');
131            }
132        });
133    } else {
134        document.querySelectorAll('[class*="ct-element-teaser-"]').forEach(function (element) {
135            element.style.removeProperty('padding-top');
136        });
137    }
138}
139
140function headerImagePosition()
141{
142    if (hasThumbnail) {

143        let thumbHeight = thumbWrap.offsetHeight;
144        let thumbImageHeight = thumbImage.offsetHeight;
145        thumbImage.style.top = -(thumbImageHeight - thumbHeight) / 2 + "px";
146    }
147}
148
149function heroAnimation()
150{
151    document.querySelectorAll('.wp-block-group.hero-animation').forEach(function (element) {
152
153        let elementList = element.querySelector('ul');
154        let firstElement = element.querySelector('ul > li:first-child');
155        let firstElementCopy = firstElement.cloneNode(true);
156
157        elementList.appendChild(firstElementCopy);
158
159        let elementChilds = element.querySelectorAll('ul li');
160        let elementListDefaultPosX = elementList.style.top = '0';
161        let elementChildIndex = 0
162        let elementListChildCount = elementChilds.length;
163
164        // speed is controlled by css transition in _hero.sass
165        let timeOutDefault = 2500;
166        let timeOut = timeOutDefault;
167        let positionX = elementListDefaultPosX;
168        let loopElement;
169        let loopElementInitialHeight = elementChilds[0].offsetHeight;
170
171        function step()
172        {
173            setTimeout(function () {
174                loopElement = elementChilds[elementChildIndex];
175                let loopElementHeight = loopElement.offsetHeight;
176
177                if (elementChildIndex === 0) {
178                    elementList.style.removeProperty('transition');
179                    timeOut = timeOutDefault;
180                }
181
182                elementChildIndex++
183
184                if (elementChildIndex === elementListChildCount) {
185                    elementChildIndex = 0;
186                    elementList.style.transition = 'none';
187                    positionX = elementListDefaultPosX;
188                    timeOut = 0;
189                } else {
190                    if (loopElementInitialHeight !== loopElementHeight) {
191                        // resize fix for position
192                        loopElementInitialHeight = loopElementHeight;
193                        let newPositionX = -loopElementHeight * elementChildIndex;
194                        positionX = newPositionX;
195                    } else {
196                        positionX = positionX - loopElementHeight;
197                    }
198                }
199
200                elementList.style.top = positionX + 'px';
201
202                window.requestAnimationFrame(step);
203            }, timeOut);
204        }
205
206        window.requestAnimationFrame(step);
207    });
208}
209
210let fullElementHeightElementTable;
211
212function fullElementHeight(initial)
213{
214    let mastHeadHeight = mastHead.offsetHeight;
215
216    document.querySelectorAll('.wp-block-group.full-height').forEach(function (element, i) {
217
218        if (initial) {
219            element.closest('.element-group').classList.add('full-height-group');
220            fullElementHeightElementTable = element.querySelectorAll('.wp-block-group__inner-container')[0];
221            fullElementHeightElementTable.innerHTML += '<i class="icon-scroll-down scroll-down" tabindex="0"></i>';
222
223            let elementButton = element.querySelector('.scroll-down');
224            elementButton.addEventListener('click', function () {
225                let elementHeight = element.offsetHeight;
226                let scrollPosition = mastHeadHeight + elementHeight;
227                let startHero = window.performance.now();
228                let scrollTopHero = getScrollTop();
229                /*
230                    For modern browsers
231                */
232                if (smoothScrollingIsSupported) {
233                    window.scroll({top: scrollPosition, left: 0, behavior: 'smooth'});
234                }
235
236                /*
237                    Mainly for IE & Safari
238                */
239                if (!smoothScrollingIsSupported) {
240                    const step = (timestamp) => {
241                        const elapsed = timestamp - startHero;
242                        const k = Math.round(elapsed / 750 * 100) / 100;
243
244                        if (k <= 1.05) {
245                            window.scrollTo(scrollOptions.left, scrollTopHero * (1 - k) + scrollPosition * k);
246                            window.requestAnimationFrame(step);
247                        }
248                    };
249
250                    window.requestAnimationFrame(step);
251                }
252            });
253        }
254    });
255}
256