https://newnames.ru/wp-content/themes/f1/js/forms.js

1// FORMS
2
3if (typeof wtw_forms_init_custom === 'undefined') {
4    wtw_forms_init();
5}
6
7function wtw_forms_init() {
8
9    const forms = document.querySelectorAll('form');
10
11    if (forms.length) {
12
13        window.wtw_form_submiting = false;
14
15        forms.forEach(el => {
16
17            const bindSelectors = (typeof wtw_forms !== 'undefined' && Array.isArray(wtw_forms['__forms'])) ? wtw_forms['__forms'] : [];
18            let matched = false;
19            for (let i = 0; i < bindSelectors.length; i++) {
20                try {
21                    if (el.matches(bindSelectors[i])) { matched = true; break; }
22                } catch (e) {}
23            }
24            if (!matched) return;
25
26            if (el.getAttribute('action') !== null) return;
27
28            el.setAttribute('action', '/');
29
30            el.querySelectorAll('[data-name]').forEach(el => {
31                el.setAttribute('name', el.getAttribute('data-name'));
32            })
33
34            addHiddenRecaptchaField(wtw_forms['__google_recaptcha']);
35
36            var inputs = [
37                { name: '__page', value: location.origin + location.pathname },
38                { name: '__title', value: document.title },
39                { name: '__form', value: el.dataset.name },
40                { name: '__query', value: document.location.search }
41            ];
42
43            inputs.forEach(function (attrs) {
44                var input = document.createElement("input");
45                input.type = "hidden";
46                input.name = attrs.name;
47                input.value = attrs.value;
48                el.appendChild(input);
49            });
50
51            const event = new CustomEvent('forms-before-send');
52
53            if (typeof VALIDATE_DATA !== 'undefined' && VALIDATE_DATA.length) {
54
55                const validation = new JustValidate(el);
56            
57                VALIDATE_DATA.forEach(setting => {
58                    const { selector, rules } = setting;
59            
60                    const fieldRules = rules.map(rule => {
61                        const ruleConfig = {
62                            rule: rule.rule,
63                            errorMessage: rule.error_message
64                        };
65            
66                        const rules_values = [
67                            'min_length',
68                            'max_length',
69                            'min_number',
70                            'max_number',
71                            'min_files_count',
72                            'max_files_count',
73                        ];
74            
75                        rules_values.forEach(value => {
76                            if (rule[value] !== undefined && rule[value].length)
77                                ruleConfig.value = parseInt(rule[value]);
78                        });
79            
80                        if (rule['custom_regexp'].length)
81                            ruleConfig.value = rule['custom_regexp'];
82                            
83                        if (rule.rule === 'files') {
84                            ruleConfig.value = {
85                                files: {
86                                    extensions: rule['extensions'].split(',').map(ext => ext.trim()),
87                                    types: rule['types'].split(',').map(ext => ext.trim()),
88                                    minSize: rule['min_size'],
89                                    maxSize: rule['max_size'],
90                                },
91                            }
92                        }
93            
94                        return ruleConfig;
95                    });
96            
97                    const matchedFields = el.querySelectorAll(selector);
98
99                    matchedFields.forEach(field => {
100                        validation.addField(field, fieldRules);
101                    });
102                });
103            
104                // ОБЪЕДИНЕННЫЙ обработчик onSuccess
105                validation.onSuccess(async (event) => {
106                    event.preventDefault();
107                    if (window.wtw_form_submiting) return;
108                    const form = event.target;
109                    const ok = await (window.sfaCaptcha && window.sfaCaptcha.validate ? window.sfaCaptcha.validate(form) : Promise.resolve(true));
110                    if (!ok) return;
111                
112                    // Если капчи нет или она пройдена — отправляем форму
113                    setCaptchaField(form);
114                    wto_form_send(form, get_form_extentions(form));
115                });
116
117
118
119            
120            } else {
121            
122                el.addEventListener('submit', async function (e) {
123                    e.preventDefault();
124            
125                    if (window.wtw_form_submiting) return;
126                    const ok = await (window.sfaCaptcha && window.sfaCaptcha.validate ? window.sfaCaptcha.validate(el) : Promise.resolve(true));
127                    if (!ok) return;
128                    setCaptchaField(el);
129                    wto_form_send(el, get_form_extentions(el));
130                })
131            }
132
133        })
134    }
135}
136
137function setCaptchaField(el) {
138    const recaptcha_response_field = el.querySelector('[name=__recaptcha_response]');
139    if (recaptcha_response_field !== null) {
140        grecaptcha.execute(RECAPTCHA_SITE_KEY, { action: 'submit' }).then(function (token) {
141            recaptcha_response_field.value = token;
142        });
143    }
144}
145
146function get_form_extentions(el) {
147
148    let ids = {};
149
150    for (extention in wtw_forms) {

151        wtw_forms[extention].forEach((selector, index) => {
152            if (el.matches(selector)) {
153                ids[extention] = index;
154            }
155        });
156    }
157
158    return ids;
159}
160
161function addHiddenRecaptchaField(selectors) {
162
163    if (selectors === undefined) return null;
164
165    function addHiddenFieldToForm(form) {
166        if (!form.querySelector('input[name="__recaptcha_response"]')) {
167            const hiddenField = document.createElement('input');
168            hiddenField.type = 'hidden';
169            hiddenField.name = '__recaptcha_response';
170            form.appendChild(hiddenField);
171        }
172    }
173
174    selectors.forEach(selector => {
175        const forms = document.querySelectorAll(selector);
176        forms.forEach(form => {
177            addHiddenFieldToForm(form);
178        });
179    });
180}
181
182function wto_form_send(el, ids) {
183
184    const loading_el = el.querySelector('[data-bind="loading"]');
185    if (loading_el !== null) {
186        loading_el.style.display = 'block';
187    } else {
188        el.style.opacity = '0.3';
189    }
190
191    window.wtw_form_submiting = true;
192
193    const data = { foo: el, ...ids };
194
195    ajaxs('ajaxs_wtw_mail_sent', data,
196
197        function (result) {
198
199            window.wtw_form_submiting = false;
200
201            let form_setup = null;
202
203            const succes_el = el.parentElement.querySelector('.w-form-done');
204            const error_el = el.parentElement.querySelector('.w-form-fail');
205
206            if (result.data !== undefined) {
207                form_setup = result.data;
208            }
209
210            if (result.success && form_setup !== null) {
211
212                const event = new CustomEvent('forms-after-send', {
213                    detail: {
214                        form_setup: form_setup,
215                    }
216                });
217
218                const hide_duration = form_setup['hide_duration'] ? parseInt(form_setup['hide_duration']) : 1000;
219
220                document.dispatchEvent(event);
221
222                if (form_setup.redirect) {
223                    if (form_setup.redirect_new_tab) {
224                        window.open(form_setup.redirect_url);
225                    } else {
226                        location.href = form_setup.redirect_url;
227                    }
228                    return;
229                }
230
231                el.reset();
232
233                if (loading_el !== null) {
234                    loading_el.style.display = 'none';
235                } else {
236                    el.style.opacity = '1';
237                }
238
239                document.querySelectorAll('[data-files-list]').forEach(el => {
240					fadeDown(el, hide_duration);
241                });
242
243                if (succes_el === null) return;
244
245                if (form_setup.success_message !== '') {
246                    if (succes_el.querySelector('div') != null) {
247                        succes_el.querySelector('div').innerHTML = form_setup.success_message;
248                    } else {
249                        succes_el.innerHTML = form_setup.success_message;
250                    }
251                }
252
253                succes_el.style.display = 'block';
254                error_el.style.display = 'none';
255
256                if (form_setup.hide) {
257                    el.style.display = 'none';
258                }
259
260                if (form_setup.delay !== undefined && form_setup.delay != null && form_setup.delay.length) {
261
262                    delay = parseInt(form_setup.delay) * 1000;
263
264                    setTimeout(() => {
265                        el.removeAttribute('style');
266						fadeDown(succes_el, hide_duration);
267                        document.body.style.overflow = "visible";
268
269                        if (form_setup.lbox_hide.length) {
270                            lbox_el = document.querySelector(form_setup.lbox_hide);
271                            if (lbox_el !== undefined) {
272								fadeDown(lbox_el, hide_duration);
273                            }
274                        }
275
276                    }, delay)
277
278                }
279
280            } else {
281
282                let error_message = 'Ошибка отправки!<br>Попробуйте позже.';
283
284                if (result.data !== undefined && result?.data?.error_message != undefined) {
285                    error_message = result.data.error_message;
286                } else {
287                    error_message = result.data;
288                }
289
290                if (error_el === null) {
291                    console.log(error_message);
292                } else {
293                    if (error_el.querySelector('div')) {
294                        error_el.querySelector('div').innerHTML = error_message;
295                    } else {
296                        error_el.innerHTML = error_message;
297                    }
298
299                    error_el.style.display = 'block';
300                    succes_el.style.display = 'none';
301                }
302
303            }
304
305        }
306    );
307}
308					
309const fadeDown = (el, timeout) => {
310      el.style.opacity = 1;
311      el.style.transition = `opacity ${timeout}ms`;
312      el.style.opacity = 0;
313
314      setTimeout(() => {
315        el.style.display = 'none';
316      }, timeout);
317    }