https://podshipnikru.com/local/templates/redesign-podshipnik/js/classes/Event.js?17847030245606

1class Event{
2
3    constructor() {
4        this.eventBtn = main.content.querySelectorAll('[data-event]');
5        this.overlay = null;
6        this.modal = null;
7
8        if(!!this.eventBtn){
9            this.init();
10        }
11
12    }
13
14    init(){
15        this.eventAction.listAction();
16    }
17
18    eventAction = {
19
20        listAction:()=>{
21            this.eventBtn.forEach((e) => {
22                e.addEventListener('click', (d) => {
23                    d.preventDefault();
24                    let data = {};
25
26                    switch (d.currentTarget.dataset.event){
27                        case 'form':
28                           data = {
29                                action : d.currentTarget.dataset.event,
30                                id : d.currentTarget.dataset.id,
31                            };
32                            break;
33                        case 'video':
34                            data = {
35                                action : d.currentTarget.dataset.event,
36                                src : d.currentTarget.dataset.video,
37                            };
38                            break;
39                        case 'choice-city':
40                            data = {
41                                action : d.currentTarget.dataset.event,
42                                id : d.currentTarget.dataset.id,
43                            };
44                            break;
45                        case 'add-review':
46                            data = {
47                                action : d.currentTarget.dataset.event,
48                                id : d.currentTarget.dataset.id,
49                            };
50                            break;
51                        default:
52
53                            return false;
54                            break;
55                    }
56                    if(!!Object.keys(data).length){
57                        this.requestEventBtn(data)
58                    }
59
60
61
62                });
63            });
64        },
65        closeModal: (data) => {
66
67            const closeBtn = data.querySelector('.close-modal-form svg');
68            if (closeBtn) {
69                closeBtn.addEventListener('click', (d) => {
70                    data.remove();
71                    // Удаляем оверлей при закрытии модального окна
72                    if (this.overlay) {
73                        this.overlay.remove();
74                        this.overlay = null;
75                    }
76                    this.modal = null;
77                });
78            }
79
80            // data.querySelector('.close-modal-form svg').addEventListener('click', (d) => {
81            //     data.remove();
82            // });
83        }
84
85    }
86
87    requestEventBtn(data) {
88        fetch('/local/action/event/action.php', {
89            method: 'POST',
90            credentials: 'include',
91            // headers: {
92            //     'Content-Type': 'application/json;charset=utf-8'
93            // },
94            body: JSON.stringify(data)
95        }).then(response => response.json())
96            .then((result) => {
97                if(!result) return;
98
99                if(!!result.html){
100
101                    // Удаляем предыдущий оверлей если есть
102                    this.removeOverlay();
103
104                    // Создаем новый оверлей
105                    this.overlay = this.createOverlay();
106
107                    var parser = new DOMParser();
108                    data = parser.parseFromString(result.html, 'text/html');
109                    data = data.querySelector('.modal-wrapper');
110                    main.content.append(data);
111                    this.eventAction.closeModal(data);
112                    this.modal = data;
113                    this.eventBtnInmadals();
114                    form.eventForm.eventFormInit();
115
116
117                    this.overlay.addEventListener('click', () => {
118                        if (this.modal) {
119                            this.modal.remove();
120                            this.modal = null;
121                        }
122                        this.removeOverlay();
123                    });
124                }
125
126            });
127    }
128
129
130    eventBtnInmadals(){
131        if(!!this.modal)
132
133            switch (this.modal.getAttribute('id')){
134                case 'choice-city':
135                    this.modal.querySelector('.regions-btn').addEventListener('click', (d) => {
136                        this.modal.querySelector('.regions-list--items--hide').classList.remove('hide');
137                        d.target.remove();
138                    });
139                    break;
140
141                default:
142                    return false;
143                    break;
144            }
145
146    }
147
148    createOverlay() {

149        const overlay = document.createElement('div');
150        overlay.className = 'modal-overlay';
151        overlay.style.cssText = `
152            position: fixed;
153            top: 0;
154            left: 0;
155            width: 100%;
156            height: 100%;
157            background-color: rgba(0, 0, 0, 0.7);
158            backdrop-filter: blur(3px);
159            z-index: 9999;
160            transition: opacity 0.3s ease;
161        `;
162        document.body.appendChild(overlay);
163        return overlay;
164    }
165    removeOverlay() {
166        if (this.overlay) {
167            this.overlay.remove();
168            this.overlay = null;
169        }
170    }
171}
172
173let event = new Event();