https://xn-----dlccfbfdksbbn6ccdrcazo.xn--p1ai/local/components/project/webform/webform.js?17858987467585

1if(!window.Project)
2    window.Project = {};
3
4window.Project.Ajax = function(component, method, data)
5{
6    let params = {
7        mode: 'class',
8        data: {post: data}
9    };
10    let bx_promise = BX.ajax.runComponentAction(component, method, params);
11    return new Promise(function(resolve, reject){
12        bx_promise.then(function(response) {
13            if (response.status === 'success')
14            {
15                resolve(response);
16            }
17            else
18            {
19                reject();
20            }
21        });
22    });
23}
24
25window.Project.Validity = {
26    email: function(email) {
27        let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
28        return re.test(email);
29    },
30    input: function(input)
31    {
32        if(input.required && !input.value) return "Это поле должно быть заполнено";
33        if(input.type === 'email' && !window.Project.Validity.email(input.value)) return "Некорректный email";
34        if(input.type === 'checkbox' && input.classList.contains('visually-hidden') && !input.checked) return "Необходимо согласиться с условиями оферты";
35
36        if(input.pattern)
37        {
38            const pa = new RegExp(".{18,18}")
39            if(!pa.test(input.value)) return "Это поле заполненно некорректно";
40        }
41
42        console.log("[validity]", input);
43
44        return false;
45    }
46};
47
48window.Project.Webform = function(form_name, arParams)
49{
50    this.form_name = form_name;
51    this.arParams = arParams;
52    let self = this;
53    this.ajax = function(data)
54    {
55        return window.Project.Ajax('project:webform', 'send', {
56            fields: data,
57            arParams: self.arParams
58        })
59    }
60}
61
62window.Project.Webform.prototype = {
63    constructor: window.Project.Webform,
64    find: function(selector)
65    {
66        return this.findContainer().querySelector(selector)
67    },
68
69    findAll: function(selector)
70    {
71        return this.findContainer().querySelectorAll(selector)
72    },
73
74    findInputs: function()
75    {
76        return this.findAll('input, select, textarea');
77    },
78
79    findContainer: function()
80    {
81        return document.forms[this.form_name];
82    },
83
84    findSubmiters: function()
85    {
86        return this.findAll('button.btn');
87    },
88
89
90    bind: function()
91    {
92        let self = this;
93        this.findSubmiters().forEach(function(btn){
94            btn.addEventListener('click', self.submit.bind(self, btn));
95        });
96        this.findAll('input[type=file]').forEach(function(file_input){
97            let hidden = self.find("[name="+file_input.dataset.name+"]");
98            if(hidden)
99            {
100                self.bindFile(new window.Project.WebformFile(file_input, hidden));
101            }
102        })
103
104        this.bindCustom();
105    },
106
107    bindFile: function(webform_file)
108    {
109
110    },
111
112    bindCustom: function()
113    {
114
115    },
116
117    //////////////////////////////
118
119    createHint(is_error, msg)
120    {
121        let hint = document.createElement('p');
122        if(is_error)
123        {
124            hint.classList.add('form_error');
125            hint.style.color = '#f00';
126        }
127        else
128        {
129            hint.classList.add('form_success');
130            hint.style.color = 'rgb(5 154 5)';
131        }
132
133        hint.innerText = msg;
134        return hint;
135    },
136
137
138
139    clearHints: function()
140    {
141        this.findAll('.form_error').forEach(function(ep){
142            ep.parentNode.removeChild(ep);
143        })
144
145        this.findAll('.form_success').forEach(function(ep){
146            ep.parentNode.removeChild(ep);
147        })
148    },
149
150    attachHint(target, hint)
151    {
152        target.after(hint);
153    },
154
155    /////////////////////////
156
157    collectAll: function()
158    {
159        let collect = {form: {}, js: []};

160        this.findInputs().forEach(function(input){
161            if(input.type === 'checkbox' || input.type === 'radio')
162            {
163                if(input.checked)collect.form[input.name] = input.value;
164            }
165            else
166            {
167                collect.form[input.name] = input.value;
168            }
169            collect.js.push(input);
170        });
171
172        return collect;
173    },
174
175    checkState: function()
176    {
177        let success = true;
178        let self = this;
179
180        this.collectAll().js.forEach(function(input){
181            let error = window.Project.Validity.input(input);
182            if(error) {
183                self.attachHint(input, self.createHint(true, error));
184                success = false;
185            }
186        });
187
188        return success;
189    },
190
191    submit: function(btn, e)
192    {
193        e.preventDefault();
194        this.clearHints();
195        if(this.checkState())
196        {
197            let self = this;
198            this.ajax(this.collectAll().form).then(function(response){
199                if(response.data.status)
200                {
201                    document.dispatchEvent(new CustomEvent('project:webform:success', {
202                        detail: {
203                            form: self.findContainer(),
204                            button: btn,
205                            formCode: self.arParams && self.arParams.CODE ? self.arParams.CODE : ''
206                        }
207                    }));
208                    self.OnSuccess(btn);
209                }
210                else
211                {
212                    for (let i in response.data.errors)
213                    {
214                        let error = response.data.errors[i];
215                        self.attachHint(btn, self.createHint(true, error));
216                    }
217                }
218            })
219        }
220    },
221
222    OnSuccess: function(btn)
223    {
224        this.attachHint(btn, this.createHint(false, 'Форма успешно отправлена'));
225        this.findContainer().reset();
226    }
227};
228
229
230window.Project.WebformFile = function(input, hidden)
231{
232    this.input = input;
233    this.hidden = hidden;
234    this.proxy = new window.Project.Proxy();
235
236    this.bind();
237}
238
239window.Project.WebformFile.prototype = {
240    constructor: window.Project.WebformFile,
241    bind: function()
242    {
243        this.input.addEventListener('change', this.update.bind(this));
244    },
245
246    update: function()
247    {
248        console.log("[file] update", this.input.files[0])
249        let self = this;
250        if(this.input.files && this.input.files[0])
251        {
252            let file = this.input.files[0];
253            let reader = new FileReader();
254            reader.onload = function(e)
255            {
256                self.hidden.value = JSON.stringify({
257                    name: file.name,
258                    value: btoa(e.target.result)
259                });
260
261                self.proxy.release(file.name);
262            }
263
264            reader.readAsBinaryString(file);
265        }
266        else
267        {
268            self.hidden.value = '';
269        }
270    },
271}
272
273window.Project.Proxy = function()
274{
275    this.handlers = [];
276}
277
278window.Project.Proxy.prototype = {
279    assign: function(callback)
280    {
281        this.handlers.push(callback);
282    },
283
284    release: function(value)
285    {
286        this.handlers.forEach(function(handler){
287            handler(value);
288        })
289    }
290}