https://duan.edu.ua/wp-content/themes/duan-theme/assets/js/script.js?ver=1790284678

1document.addEventListener("DOMContentLoaded", function () {
2
3    window.addEventListener('scroll', function () {
4        var scrollPosition = window.scrollY;
5
6        let header = document.querySelector('.header'),
7            customHeader = document.querySelector('.custom-header');
8
9        if (scrollPosition > 300) {
10            if (header) {
11                document.querySelector('.header').classList.add('scroll-header');
12            }
13            if (customHeader) {
14                document.querySelector('.custom-header').classList.add('scroll-header');
15            }
16        } else {
17            if (header) {
18                document.querySelector('.header').classList.remove('scroll-header');
19            }
20            if (customHeader) {
21                document.querySelector('.custom-header').classList.remove('scroll-header');
22            }
23        }
24    });
25
26    let headerSearch = document.querySelectorAll('.header__search'),
27        searchClose = document.querySelector('.search-modal__close'),
28        searchModal = document.querySelector('.search-modal');
29
30    if(headerSearch){
31        headerSearch.forEach(el=>{
32            el.addEventListener('click', ()=>{
33                searchModal.classList.add('opened');
34            });
35        });
36
37        searchClose.addEventListener('click', ()=>{
38            searchModal.classList.remove('opened');
39        });
40    }
41
42    // Swiper
43    var swiper = new Swiper(".specialty__swiper", {
44        slidesPerView: 3,
45        spaceBetween: 20,
46        autoplay: {
47            delay: 3000,
48        },
49        navigation: {
50            nextEl: ".specialty__arrow-r",
51            prevEl: ".specialty__arrow-l",
52        },
53        breakpoints: {
54            0: {
55                slidesPerView: 1,
56                spaceBetween: 11
57            },
58            768: {
59                slidesPerView: 2
60            },
61            1200: {
62                slidesPerView: 3,
63                spaceBetween: 20,
64            }
65        }
66    });
67
68    document.querySelectorAll(".certificates").forEach((container, index) => {
69        const swiperEl = container.querySelector(".certificates__swiper");
70
71        new Swiper(swiperEl, {
72            slidesPerView: 'auto',
73            spaceBetween: 20,
74            navigation: {
75                nextEl: container.querySelector(".certificates__arrow-r"),
76                prevEl: container.querySelector(".certificates__arrow-l"),
77            },
78            pagination: {
79                el: container.querySelector(".swiper-pagination"),
80                clickable: true
81            },
82        });
83    });
84
85
86    let eventsSwipers = document.querySelectorAll('.events__swiper');
87
88    if (eventsSwipers) {
89        eventsSwipers.forEach(el => {
90            let swParent = el.closest('.events'),
91                arrL = swParent.querySelector('.events__arrow-l'),
92                arrR = swParent.querySelector('.events__arrow-r');
93            var swiperEl = new Swiper(el, {
94                slidesPerView: 1,
95                spaceBetween: 4,
96                navigation: {
97                    nextEl: arrR,
98                    prevEl: arrL,
99                },
100            });
101
102            // swiperEl.on('slideChange', function () {
103            //     // var activeSlide = document.querySelector('.swiper-slide-active');
104            //     // activeSlide.style.width = '747px'; // Зміна ширини активного слайда
105            //     swiperEl.update();
106            // });
107
108            // document.querySelectorAll('.events__slide').forEach(function(slide) {
109            //     slide.addEventListener('click', function(event) {
110            //         // Перевірка, чи був вже оброблений клік на іншому слайді
111            //         if (this.dataset.clicked === 'true') {
112            //             // Видаляємо атрибут, щоб знову дозволити обробку кліків
113            //             delete this.dataset.clicked;
114            //             return;
115            //         }
116
117            //         // Встановлюємо атрибут для позначення обробленого кліку
118            //         this.dataset.clicked = 'true';
119
120            //         // Ваш обробник кліку
121            //         this.classList.toggle('active');

122            //         swiperEl.update();
123            //     });
124            // });
125        })
126    }
127
128    var gallerySwiper = new Swiper(".gallery-cards__swiper", {
129        slidesPerView: 3,
130        spaceBetween: 18,
131        navigation: {
132            nextEl: ".gallery-cards__arrow-r",
133            prevEl: ".gallery-cards__arrow-l",
134        },
135        breakpoints: {
136            0: {
137                slidesPerView: 1,
138            },
139            768: {
140                slidesPerView: 2
141            },
142            1200: {
143                slidesPerView: 3,
144            }
145        }
146    });
147
148    var simpleGallerySwiper = new Swiper(".simple-gallery__swiper", {
149        slidesPerView: 2,
150        spaceBetween: 13,
151        navigation: {
152            nextEl: ".simple-gallery__arrow-r",
153            prevEl: ".simple-gallery__arrow-l",
154        },
155        pagination: {
156            el: ".simple-gallery .blog-slider__pagination",
157            clickable: true
158        },
159        breakpoints: {
160            0: {
161                slidesPerView: 1,
162                spaceBetween: 10,
163            },
164            768: {
165                slidesPerView: 2,
166                spaceBetween: 13,
167            }
168        }
169    });
170
171    var blogSwiper = new Swiper(".blog-slider__swiper", {
172        slidesPerView: 1,
173        spaceBetween: 15,
174        navigation: {
175            nextEl: ".blog-slider__arrow-r",
176            prevEl: ".blog-slider__arrow-l",
177        },
178        pagination: {
179            el: ".blog-slider .blog-slider__pagination",
180            clickable: true
181        },
182    });
183
184    var acc = document.querySelectorAll(".faq__i");
185    var i;
186
187    for (i = 0; i < acc.length; i++) {
188        acc[i].addEventListener("click", function () {
189            this.classList.toggle("active");
190            var panel = this.querySelector('.faq__panel');
191            if (panel.style.maxHeight) {
192                panel.style.maxHeight = null;
193            } else {
194                panel.style.maxHeight = panel.scrollHeight + "px";
195            }
196        });
197    }
198
199
200    let openMenu = document.querySelector('.open__menu'),
201        closeMenu = document.querySelector('.close__sidebar'),
202        sidebar = document.querySelector('.sidemenu');
203
204    if (openMenu) {
205        openMenu.addEventListener('click', () => {
206            sidebar.classList.add('active');
207        })
208    }
209
210    if (closeMenu) {
211        closeMenu.addEventListener('click', () => {
212            sidebar.classList.remove('active');
213        })
214    }
215
216
217    let allAccLinks = document.querySelectorAll('.links-block__i');
218
219    if (allAccLinks) {
220        allAccLinks.forEach(el => {
221            el.addEventListener('click', () => {
222                el.classList.toggle('open');
223            });
224        });
225    }
226
227    Fancybox.bind("[data-fancybox]", {});
228
229
230    let tabsSidebar = document.querySelectorAll('.sidemenu__tabs-el'),
231        sidemenuMenus = document.querySelectorAll('.sidemenu__menu'),
232        sidemenuMob = document.querySelectorAll('.sidemenu__tabs-items');
233
234    if (tabsSidebar) {
235        if (window.innerWidth < 567) {
236            tabsSidebar.forEach(el => { el.classList.remove('active') });
237            sidemenuMenus.forEach(el => { el.classList.remove('active') });
238        }
239        tabsSidebar.forEach((el, ind) => {
240            el.addEventListener('click', () => {
241                if (window.innerWidth > 567) {
242                    tabsSidebar.forEach(el => { el.classList.remove('active') });
243                    sidemenuMenus.forEach(el => { el.classList.remove('active') });
244                    el.classList.add('active');
245                    sidemenuMenus[ind].classList.add('active');
246                } else {
247                    el.classList.toggle('active');
248                }
249
250                if (sidemenuMob[ind].classList.contains('expanded')) {
251                    // Якщо вже розгорнуто, згортаємо
252                    sidemenuMob[ind].classList.remove('expanded');
253                    sidemenuMob[ind].style.height = '0';
254                } else {
255                    // Визначаємо висоту sidemenuMob[ind] і встановлюємо його
256                    let height = sidemenuMob[ind].scrollHeight;
257                    sidemenuMob[ind].style.height = height + 'px';
258
259                    // Трошки затримки перед додаванням класу для виклику анімації
260                    setTimeout(() => {
261                        sidemenuMob[ind].classList.add('expanded');
262                    }, 10);
263                }
264
265            })
266        })
267    }
268
269    let modules = document.querySelectorAll('.modules__i');
270
271    if (modules) {

272        modules.forEach(el => {
273            el.addEventListener('click', () => {
274                el.classList.toggle('active');
275            });
276        })
277    }
278
279    //Mouse Parallax
280    let body = document.querySelector("body");
281
282    if (body) {
283        body.addEventListener("mousemove", parallax);
284    }
285
286    function parallax(event) {
287        this.querySelectorAll(".mouse").forEach((shift) => {
288            const position = 3.7;
289            const x = (window.innerWidth - event.pageX * position) / 90;
290            const y = (window.innerHeight - event.pageY * position) / 90;
291
292            shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
293        });
294    }
295
296    // Change lang anim
297    let headLangCont = document.querySelector('.header__t-lang'),
298        langItemAnoth = document.querySelector('.header__t-lang li:not(.current-lang) a');
299
300    if (langItemAnoth) {
301        langItemAnoth.addEventListener('click', ev => {
302            headLangCont.classList.add('change');
303        });
304    }
305
306
307    // Categories switcher
308    const linksCateg = document.querySelectorAll('.blog-block__categ-l a');
309    const prevArrow = document.querySelector('.blog-block__categ-arrow--prev');
310    const nextArrow = document.querySelector('.blog-block__categ-arrow--next');
311
312    function navigateLinks(direction) {
313        let activeIndex;
314        linksCateg.forEach((link, index) => {
315            if (link.classList.contains('active')) {
316                activeIndex = index;
317            }
318        });
319
320        let newIndex;
321        if (direction === 'next') {
322            newIndex = (activeIndex + 1) % linksCateg.length;
323        } else if (direction === 'prev') {
324            newIndex = (activeIndex - 1 + linksCateg.length) % linksCateg.length;
325        }
326
327        window.location.href = linksCateg[newIndex].href;
328    }
329
330    if (nextArrow) {
331        nextArrow.addEventListener('click', function () {
332            navigateLinks('next');
333        });
334    }
335
336    if (prevArrow) {
337        prevArrow.addEventListener('click', function () {
338            navigateLinks('prev');
339        });
340    }
341
342
343    // Accordion
344    const accordionItems = document.querySelectorAll('.accordion__item');
345
346    if (accordionItems) {
347        accordionItems.forEach(item => {
348            const accordionTop = item.querySelector('.accordion__item-top');
349            const accordionContent = item.querySelector('.accordion__item-content');
350
351            if (accordionContent) {
352                accordionContent.style.maxHeight = '0';
353                accordionContent.style.overflow = 'hidden';
354                accordionContent.style.transition = 'all 0.3s ease';
355                accordionContent.style.paddingTop = '0';
356                accordionContent.style.paddingBottom = '0';
357            }
358
359            // Додаємо обробник кліку
360            accordionTop.addEventListener('click', () => {
361                const isOpen = item.classList.contains('active');
362
363                if (isOpen) {
364                    item.classList.remove('active');
365                    if (accordionContent) {
366                        accordionContent.style.maxHeight = '0';
367                        accordionContent.style.paddingTop = '0';
368                        accordionContent.style.paddingBottom = '0';
369                    }
370                } else {
371                    item.classList.add('active');
372                    if (accordionContent) {
373                        accordionContent.style.maxHeight = accordionContent.scrollHeight + 116 + 'px';
374                        accordionContent.style.paddingTop = '58px';
375                        accordionContent.style.paddingBottom = '58px';
376                    }
377                }
378            });
379        });
380    }
381
382    let accordionParent = document.querySelectorAll('.accordion__item-parent');
383
384    if (accordionParent) {
385        accordionParent.forEach(el => {
386            el.addEventListener('click', () => {
387                let nextChild = el.nextElementSibling;
388
389                nextChild.classList.toggle('active');
390            });
391        });
392    };
393
394
395
396    // // Faculty tabs
397    // const tabsFaculty = document.querySelectorAll('.faculty-content__tabs > div');
398    // const contentsFaculty = document.querySelectorAll('.faculty-content__contents > .faculty-content__content');
399

400    // tabsFaculty.forEach(tab => {
401    //     tab.addEventListener('click', () => {
402    //         tabsFaculty.forEach(t => t.classList.remove('active'));
403    //         tab.classList.add('active');
404    //         contentsFaculty.forEach(content => content.classList.remove('active'));
405    //         const targetClass = Array.from(tab.classList).find(cls => cls.startsWith('faculty-content__tab-'));
406    //         const targetContent = document.querySelector(`.faculty-content__content.${targetClass}`);
407    //         if (targetContent) {
408    //             targetContent.classList.add('active');
409    //         }
410    //     });
411    // });
412
413    // Tabs
414    const eventsTabs = document.querySelectorAll('.tabs-events__tabs-item');
415    const eventsContent = document.querySelectorAll('.tabs-events__content');
416
417    if (eventsTabs) {
418        eventsTabs.forEach((el, ind) => {
419            el.addEventListener('click', () => {
420                eventsTabs.forEach(el => { el.classList.remove('active'); });
421                eventsContent.forEach(el => { el.classList.remove('active'); });
422                el.classList.add('active');
423                eventsContent[ind].classList.add('active');
424            });
425        });
426    }
427
428    // Tabs
429
430    let tabs = document.querySelectorAll('.tabs');
431
432    if (tabs) {

433        tabs.forEach(tabs => {
434            let tab = tabs.querySelectorAll('.tab'),
435                content = tabs.querySelectorAll('.tab-content');
436
437            if (tab) {
438                tab.forEach((el, ind) => {
439                    el.addEventListener('click', () => {
440                        tab.forEach(el => {el.classList.remove('active');});
441                        el.classList.add('active');
442                        content.forEach(el => {el.classList.remove('active');});
443                        content[ind].classList.add('active');
444                    });
445                });
446            }
447        });
448    }
449
450});
451