https://gruppen-impulse.com/assets/js/functions.js

1"use strict";
2const BtnScrollDown = () => {
3    const heroSlider = document.querySelector('.hero-slider-container');
4    const btnDown = document.querySelector('.hero-slider-container .btn-down');
5    if (!heroSlider || !btnDown)
6        return;
7    btnDown.addEventListener('click', function () {
8        const nextSection = heroSlider.nextElementSibling;
9        if (nextSection && nextSection.tagName.toLowerCase() === 'section') {
10            const sectionTop = nextSection.offsetTop - 100;
11            window.scrollTo({
12                top: sectionTop,
13                behavior: 'smooth',
14            });
15        }
16    });
17};
18BtnScrollDown();
19const BurgerMenu = () => {
20    const btnMenu = document.querySelector('.btn-menu');
21    const headerMegaMenu = document.querySelector('.header-mega-menu');
22    const hamburger = document.getElementById('hamburger');
23    const body = document.body;
24    function fadeIn(element, duration) {
25        element.style.opacity = '0';
26        element.style.display = 'block';
27        let start = null;
28        function step(timestamp) {
29            if (!start)
30                start = timestamp;
31            const progress = timestamp - start;
32            element.style.opacity = '' + Math.min(progress / duration, 1);
33            if (progress < duration)
34                window.requestAnimationFrame(step);
35        }
36        window.requestAnimationFrame(step);
37    }
38    function fadeOut(element, duration) {
39        let start = null;
40        function step(timestamp) {
41            if (!start)
42                start = timestamp;
43            const progress = timestamp - start;
44            element.style.opacity = '' + Math.max(1 - progress / duration, 0);
45            if (progress < duration)
46                window.requestAnimationFrame(step);
47            else
48                element.style.display = 'none';
49        }
50        window.requestAnimationFrame(step);
51    }
52    const closeMenu = () => {
53        btnMenu.classList.remove('active');
54        hamburger.classList.remove('active');
55        fadeOut(headerMegaMenu, 300);
56        headerMegaMenu.classList.remove('open');
57        body.classList.remove('overflow');
58    };
59    const openMenu = () => {
60        headerMegaMenu.classList.add('open');
61        fadeIn(headerMegaMenu, 300);
62        btnMenu.classList.add('active');
63        hamburger.classList.add('active');
64        body.classList.add('overflow');
65    };
66    btnMenu.addEventListener('click', function (event) {
67        event.preventDefault();
68        if (headerMegaMenu.classList.contains('open'))
69            closeMenu();
70        else
71            openMenu();
72    });
73};
74BurgerMenu();
75const BurgerMenuMobile = () => {
76    function toggleNavMenus() {
77        if (window.innerWidth <= 820) {
78            const menuCols = document.querySelectorAll('.menu-col');
79            menuCols.forEach(function (menuCol) {
80                const title = menuCol.querySelector('.menu-col-title');
81                if (!title)
82                    return;
83                const nav = menuCol.querySelector('nav');
84                if (!nav)
85                    return;
86                title.addEventListener('click', function () {
87                    menuCols.forEach(function (otherMenuCol) {
88                        const otherNav = otherMenuCol.querySelector('nav');
89                        if (otherNav && otherNav !== nav) {
90                            otherNav.classList.remove('open');
91                        }
92                    });
93                    nav.classList.toggle('open');
94                });
95            });
96        }
97        else {
98            const menuCols = document.querySelectorAll('.menu-col');
99            menuCols?.forEach(function (menuCol) {
100                const title = menuCol.querySelector('.menu-col-title');
101                if (!title)
102                    return;
103                const newTitle = title.cloneNode(true);
104                title.parentNode?.replaceChild(newTitle, title);
105                const nav = menuCol.querySelector('nav');
106                if (!nav)
107                    return;
108                nav.classList.remove('open');
109                nav.style.display = '';
110            });
111        }
112    }
113    toggleNavMenus();
114    window.addEventListener('resize', toggleNavMenus);
115};
116BurgerMenuMobile();
117const HeaderLangSelect = () => {
118    const btnHeaderLang = document.querySelector('.btn-header-lang');
119    const headerLang = document.querySelector('.header-lang');
120    const langActive = headerLang?.querySelector('.round-icon.lang-active');
121    btnHeaderLang?.addEventListener('click', function (event) {
122        event.preventDefault();
123        headerLang?.classList.toggle('open');
124    });
125    langActive?.addEventListener('click', function (event) {
126        event.preventDefault();
127        headerLang?.classList.remove('open');
128    });
129};
130HeaderLangSelect();
131const HeaderNav = () => {
132    document.querySelectorAll('.header-nav li').forEach(function (li) {
133        const currentLI = li;
134        currentLI.addEventListener('mouseenter', function () {
135            headerNavEnter(currentLI);
136        });
137        currentLI.addEventListener('mouseleave', function () {
138            headerNavLeave(currentLI);
139        });
140    });
141    function headerNavEnter(li) {
142        const dropDown = li.querySelector('.drop-down');
143        if (dropDown) {
144            dropDown.style.display = 'block';
145            setTimeout(() => dropDown.style.opacity = '1', 150);
146        }
147        li.classList.add('active');
148        const anchor = li.querySelector('a');
149        if (anchor)
150            anchor.classList.add('active');
151    }
152    function headerNavLeave(li) {
153        const dropDown = li.querySelector('.drop-down');
154        if (dropDown) {
155            dropDown.style.opacity = '0';
156            setTimeout(() => dropDown.style.display = 'none', 150);
157        }
158        li.classList.remove('active');
159        const anchor = li.querySelector('a');
160        if (anchor)
161            anchor.classList.remove('active');
162    }
163};
164HeaderNav();
165function countMainGalleryLinks() {
166    const gallery = document.querySelector('.product-image-gallery');
167    const linkCount = gallery ? gallery.querySelectorAll('a').length : 0;
168    const imageMoreSpan = document.querySelector('.product-image-gallery .image-more span');
169    if (imageMoreSpan)
170        imageMoreSpan.textContent = `${linkCount - 8}`;
171}
172countMainGalleryLinks();
173function countGalleryLinks() {
174    const gallery = document.querySelector('.tab-gallery');
175    const linkCount = gallery ? gallery.querySelectorAll('a').length : 0;
176    const imageMoreSpan = document.querySelector('.tab-gallery .image-more span');
177    if (imageMoreSpan)
178        imageMoreSpan.textContent = `${linkCount - 4}`;
179}
180countGalleryLinks();
181const ProductTabs = () => {
182    const tabs = document.querySelectorAll('.product-tabs-buttons a');
183    const contents = document.querySelectorAll('.tab-content');
184    const scrollTabs = document.getElementById('tabs');
185    const body = document.body;
186    if (!body || !tabs || !contents || !scrollTabs)
187        return;
188    function hideAllTabsAndContents() {
189        setTabsInactive();
190        setContentsInactive();

191        contents.forEach((tab) => (tab.style.display = 'none'));
192        contents.forEach((tab) => (tab.style.opacity = '0'));
193        body.classList.remove('overflow');
194    }
195    function initializeFirstTab() {
196        if (tabs.length > 0 && contents.length > 0) {
197            const firstTab = tabs[0];
198            const firstTabContent = contents[0];
199            firstTab.classList.add('active');
200            firstTabContent.classList.add('active');
201            firstTabContent.style.display = 'block';
202            firstTabContent.style.opacity = '1';
203        }
204    }
205    function setTabsInactive() {
206        tabs.forEach((t) => t.classList.remove('active'));
207    }
208    function setContentsInactive() {
209        contents.forEach((content) => content.classList.remove('active'));
210    }
211    function setCurrentTabActiveAndShowContent(tab) {
212        setTabsInactive();
213        setContentsInactive();
214        tab.classList.add('active');
215        body.classList.add('overflow');
216        const activeTab = tab.getAttribute('data-tab');
217        if (!activeTab)
218            return;
219        const activeContent = document.getElementById(activeTab);
220        if (!activeContent)
221            return;
222        contents.forEach((value) => {
223            const content = value;
224            if (content.style.display !== 'block')
225                return;
226            content.style.opacity = '0';
227            setTimeout(() => content.style.display = 'none', 500);
228        });
229        setTimeout(() => {
230            activeContent.style.display = 'block';
231            setTimeout(() => activeContent.classList.add('active'), 10);
232        }, 500);
233    }
234    function initAndHandleTabClick(tab) {
235        tab.addEventListener('click', function (event) {
236            event.preventDefault();
237            if (window.innerWidth <= 820)
238                setCurrentTabActiveAndShowContent(tab);
239            else {
240                if (tab.classList.contains('active') || !scrollTabs)
241                    return;
242                const rect = scrollTabs.getBoundingClientRect();
243                const scrollTop = window.scrollY || document.documentElement.scrollTop;
244                const targetPosition = rect.top + scrollTop - 120;
245                window.scrollTo({ top: targetPosition, behavior: 'smooth' });
246                setCurrentTabActiveAndShowContent(tab);
247            }
248        });
249    }
250    function initAndHandleContentClose(content) {
251        const closeButton = content.querySelector('.mobile-btn-close');
252        if (closeButton) {
253            closeButton.addEventListener('click', function () {
254                content.classList.remove('active');
255                body.classList.remove('overflow');
256                Array
257                    .from(document.querySelectorAll('.product-tabs-buttons a.active'))
258                    .forEach(function (el) {
259                    el.classList.remove('active');
260                });
261                setTimeout(() => content.style.display = 'none', 500);
262            });
263        }
264    }
265    function initTabs() {
266        if (window.innerWidth <= 820)
267            hideAllTabsAndContents();
268        else
269            initializeFirstTab();

270        tabs.forEach((tab) => initAndHandleTabClick(tab));
271        contents.forEach((content) => initAndHandleContentClose(content));
272    }
273    initTabs();
274    window.addEventListener('resize', initTabs);
275};
276ProductTabs();