https://www.rubackup.ru/local/templates/rubackup/assets/js/script.js

1import slider from './components/slider.js';
2import collapse from './components/collapse.js';
3import burger from './components/header.js';
4
5document.addEventListener("DOMContentLoaded", function () {
6    const body = document.querySelector('body');
7
8    // Header burger
9    const headerBurger = document.querySelector('.header__burger');
10    const headerNav = document.querySelector('.header__nav');
11
12    if (headerBurger && headerNav) burger(headerBurger, headerNav, body);
13
14    // Slider
15    const sliderItem = document.querySelector('.slider');
16
17    if (sliderItem) slider(sliderItem);
18
19    // Collapse
20    const elem = document.querySelector('.collapse');
21    const button = document.querySelector('.collapse__button');
22
23    if (elem && button) collapse(button, elem);
24
25    // Popup
26    const popup = document.querySelector('.popup');
27    const popupToggle = document.querySelectorAll('#popupToggle');
28    const popupClose = document.querySelector('.popup__close');
29
30    const openModal = () => {
31        popup.showModal();
32        document.body.classList.add('scroll-lock');
33    };
34
35    const closeModal = () => {
36        popup.close();
37        document.body.classList.remove('scroll-lock');
38    };
39
40    const closeOnBackDropClick = ({ currentTarget, target }) => {
41        const dialog = currentTarget;
42        const isClickOnBackDrop = target === dialog;
43
44        if (isClickOnBackDrop) closeModal();
45    };
46
47    popup.addEventListener('click', closeOnBackDropClick);
48    popupToggle.forEach(el => {
49        el.addEventListener('click', openModal);
50    })
51
52    popupClose.addEventListener('click', closeModal);
53
54    // // Popup
55    // const popup = document.querySelector('.popup');
56    // const popupBack = document.querySelector('.popup__backdrop');
57    // const popupToggle = document.querySelector('#popupToggle');
58    // const popupClose = document.querySelector('.popup__close');
59
60    // if (popup && popupToggle && popupClose) {
61    //     popup.addEventListener('click', (event) => {
62    //         event.stopPropagation();
63    //     });
64
65    //     popupToggle.addEventListener('click', () => {
66    //         popupBack.classList.remove('visually-hidden');
67    //         document.body.classList.add('body_lock');
68    //     });
69
70    //     popupBack.addEventListener('click', () => {
71    //         popupBack.classList.add('visually-hidden');
72    //         document.body.classList.remove('body_lock');
73    //     });
74
75    //     popupClose.addEventListener('click', () => {
76    //         popupBack.classList.add('visually-hidden');
77    //         document.body.classList.remove('body_lock');
78    //     });
79    // }
80
81
82    // document.addEventListener('keydown', (event) => {
83    //     if (event.key === 'Escape') {
84    //         popupBack.classList.add('visually-hidden');
85    //         document.body.classList.remove('body_lock');
86    //     }
87    // });
88});