https://www.sb-opt.com/bitrix/cache/js/s1/sb/page_b85d330e64d0e020…0e020995f453593445c19_v1.js?174145448111125

1
2; /* Start:"a:4:{s:4:"full";s:64:"/local/components/logicloud/forms/js/callback.js?174144452010832";s:6:"source";s:48:"/local/components/logicloud/forms/js/callback.js";s:3:"min";s:0:"";s:3:"map";s:0:"";}"*/
3function Callback(selector, settings = {}) {
4    this.form = document.querySelector(selector);
5    this.ajaxUrl = this.form.action;
6    this.submit = (e) => {
7        e.preventDefault();
8        this._ajax(this.ajaxUrl, this.load);
9    }
10    this.clearForm = () => {
11        for (let i = 0; i < this.form.length; i++) {
12            let item = this.form[i];
13            this._removeErrorClass(item);
14            if (item.type != 'hidden') {
15                item.value = '';
16            }
17        }
18    }
19    this.update = () => {
20        this._getSettings();
21        this._addListener();
22        //this._addMask();
23    }
24    this._checkError = () => {
25        for (let key in this.errors) {
26            if (this.errors[key]) {
27                return true;
28            }
29        }
30        return false;
31    }
32    this._addMask = () => {
33        let phoneInputs = this.form.querySelectorAll(this.phoneMaskSelector);
34        phoneInputs.forEach((e) => {
35            e.addEventListener("input", this._mask);
36            e.addEventListener("focus", this._mask);
37            e.addEventListener("blur", this._mask);
38        });
39    }
40    this._setCursorPosition = function (pos, elem) {
41        elem.focus();
42        if (elem.setSelectionRange)
43            elem.setSelectionRange(pos, pos);
44        else if (elem.createTextRange) {
45            var range = elem.createTextRange();
46            range.collapse(true);
47            range.moveEnd("character", pos);
48            range.moveStart("character", pos);
49            range.select()
50        }
51    }
52    this._mask = (event) => {
53        let input = event.target;
54        var matrix = "+7 ___ ___-__-__",
55                i = 0,
56                def = matrix.replace(/\D/g, ""),
57                val = input.value.replace(/\D/g, "");
58        if (def.length >= val.length)
59            val = def;
60        input.value = matrix.replace(/./g, function (a) {
61            return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
62        });
63        if (event.type == "blur") {
64            if (input.value.length == 2)
65                input.value = ""
66        } else
67            this._setCursorPosition(input.value.length, input)
68    }
69    this._addPostSettins = () => {
70        for (let key in settings.POST) {
71            this.dataPOST.append(key, settings.POST[key]);
72        }
73    }
74    this._ajax = (ajaxUrl, load) => {
75        this._checkFill();
76        if (!this._checkError()) {
77            this.dataPOST = new FormData(this.form);
78            this._addPostSettins();
79            this._fadeOut(this.alert, 'block');
80            this.alert.classList.remove(this.alertClasses.error);
81            this.alert.innerHTML = '';
82            let request = new XMLHttpRequest();
83            request.open("POST", ajaxUrl);
84            request.addEventListener("load", () => {
85                if (request.response >= 1) {
86                    if (load !== undefined) {
87                        load(request);
88                    }
89                    this.clearForm();
90                    this.alert.classList.add(this.alertClasses.success);
91                    this.alert.innerHTML = this.alerts.success;
92                    this._fadeIn(this.alert, 'block');
93                    setTimeout(() => {
94                        this._fadeOut(this.alert, 'block');
95                        this.alert.innerHTML = '';
96                        this.alert.classList.remove(this.alertClasses.success);
97                    }, 2000);
98                } else {
99                    this.alert.classList.add(this.alertClasses.error);
100                    this.alert.innerHTML = this.alerts.error.server;
101                    this._fadeIn(this.alert, 'block');
102                }
103
104            }, false);
105            request.send(this.dataPOST);
106        } else {
107            let activeHtml = false;
108            for (let key in this.errors) {
109                if (this.errors[key]) {
110                    if (!activeHtml) {
111                        activeHtml = true;
112                        this.alert.innerHTML = this.alerts.error[key]
113                    } else {
114                        this.alert.innerHTML = this.alert.innerHTML + '<br><br>' + this.alerts.error[key]
115                    }
116                }
117            }
118            this.alert.classList.add(this.alertClasses.error);
119            this._fadeIn(this.alert, 'block');
120        }
121    }
122    this._addListener = () => {
123        this.btnSubmit.addEventListener('click', this.submit);
124    }
125    this._checkFill = () => {
126        this.errors = {
127            item: false,
128            email: false,
129            phone: false,
130            personal: false,
131        }
132        let checkedForm = this.form;
133        for (let i = 0; i < checkedForm.length; i++) {
134            let checkedItem = checkedForm[i];
135            let customCheckedTypes = ['email', 'tel', 'checkbox', 'hidden'];
136            let isClassicItemType = checkedItem.required && !customCheckedTypes.includes(checkedItem.type);
137            let isCustomItemType = checkedItem.required && customCheckedTypes.includes(checkedItem.type) || checkedItem.value != '';
138            // console.log(checkedItem, isClassicItemType);
139            if (isClassicItemType) {
140                // console.log(checkedItem.value)
141                if (checkedItem.value != '') {
142                    this._removeErrorClass(checkedItem);
143                } else {
144                    this._addErrorClass(checkedItem);
145                    this.errors.item = true;
146                }
147            } else if (isCustomItemType) {
148
149                if (checkedItem.type == 'email') {
150                    this._checkEmail(checkedItem);
151                } else if (checkedItem.type == 'tel') {
152
153                    //this._checkPhone(checkedItem);
154                } else if (checkedItem.type == 'checkbox') {
155                    this._checkCheckbox(checkedItem);
156                }
157            }
158        }
159        // console.log(this.errors);
160    }
161    this._checkCheckbox = (checkedItem) => {
162        if (!checkedItem.checked) {
163            this._addErrorClass(checkedItem);
164            this.errors.personal = true;
165        } else {
166            this._removeErrorClass(checkedItem);
167        }
168    }
169    this._checkPhone = (checkedItem) => {
170        if (checkedItem.value.length != 22) {
171            this._addErrorClass(checkedItem);
172            this.errors.phone = true;
173        } else {
174            this._removeErrorClass(checkedItem);
175        }
176    }
177    this._checkEmail = (checkedItem) => {
178        if (checkedItem.value != '') {
179            if (checkedItem.value.length > 0 && (checkedItem.value.match(/.+?\@.+/g) || []).length !== 1) {
180                this._addErrorClass(checkedItem);
181                this.errors.email = true;
182            } else {
183                this._removeErrorClass(checkedItem);
184            }
185        } else {
186            this._addErrorClass(checkedItem);
187            this.errors.email = true;
188        }
189    }
190    this._getSettings = () => {
191        if (settings.alert) {
192            this.alert = document.querySelector(settings.alert)
193        } else {
194            this.alert = this.form.querySelector('.alert');
195        }
196        if (settings.btnSubmit) {
197            this.btnSubmit = document.querySelector(settings.btnSubmit);
198        } else {
199            this.btnSubmit = this.form.querySelector('[type=submit]');
200        }
201        if (settings.load) {
202            this.load = settings.load;
203        }
204        if (settings.phoneMaskSelector) {
205            this.phoneMaskSelector = settings.phoneMaskSelector;
206        } else {
207            this.phoneMaskSelector = 'input.phone';
208        }
209        this.alerts = {
210            error: {
211                item: (settings?.alerts?.errorItem !== undefined) ? settings.alerts.errorItem : 'Заполните обязательные поля',
212                email: (settings?.alerts?.errorEmail !== undefined) ? settings.alerts.errorEmail : 'Введите корретный Email',
213                phone: (settings?.alerts?.errorPhone !== undefined) ? settings.alerts.errorPhone : 'Введите корретный телефон',
214                server: (settings?.alerts?.errorServer !== undefined) ? settings.alerts.errorServer : 'Ошибка сервера, попробуйте позже',
215                personal: (settings?.alerts?.personal !== undefined) ? settings.alerts.personal : 'Подтвердите согласие на обработку персональных данных'
216            },
217            success: (settings?.alerts?.success !== undefined) ? settings.alerts.success : 'Заявка успешно отправленна'
218        }
219        this.alertClasses = {
220            error: (settings?.alertClasses?.error !== undefined) ? settings.alertClasses.error : 'alert-danger',
221            success: (settings?.alertClasses?.success !== undefined) ? settings.alertClasses.success : 'alert-success',
222        }
223        this.fadeIteration = 0;
224    }
225    this._addErrorClass = (item, className = 'errorFormItem') => {
226        if (item !== undefined && typeof (item) === 'object') {
227            item.classList.add(className)
228    }
229    }
230    this._removeErrorClass = (item, className = 'errorFormItem') => {
231        if (item !== undefined && typeof (item) === 'object') {
232            item.classList.remove(className)
233    }
234    }
235    this._timer = (fade, item, display) => {
236        setTimeout(() => {
237            if (fade != 'in') {
238                if (this.fadeIteration >= 1 && this.fadeActive == 'fadeOut') {
239                    item.style.opacity = this.fadeIteration / 100;
240                    this.fadeIteration--;
241                    this._timer('out', item, display);
242                } else if (this.fadeActive == 'fadeIn') {
243                    return;
244                } else {
245                    item.style.opacity = this.fadeIteration / 100;
246                    item.style.display = 'none';
247                    return;
248                }
249            } else {
250                if (this.fadeIteration <= 99 && this.fadeActive == 'fadeIn') {
251                    item.style.display = display;
252                    item.style.opacity = this.fadeIteration / 100;
253                    this.fadeIteration = this.fadeIteration + 1;
254                    this._timer('in', item, display);
255                } else if (this.fadeActive == 'fadeOut') {
256                    return;
257                } else {
258                    item.style.opacity = this.fadeIteration / 100;
259                    return;
260                }
261            }
262
263        }, 1);
264    };
265    this._fadeOut = (item, display) => {
266        this.fadeActive = 'fadeOut';
267        this._timer('out', item, display);
268    }
269    this._fadeIn = (item, display) => {
270        this.fadeActive = 'fadeIn';
271        this._timer('in', item, display);
272    }
273    this.update();
274}
275
276/* End */
277;; /* /local/components/logicloud/forms/js/callback.js?174144452010832*/