https://www.rakurs.com/local/components/gk.rakurs_rd/feedback/templates/callback_work/script.js

1( function( window ){
2
3	'use strict';
4
5
6	window.fav_form_callback_work = function( params ){
7
8		var _this = this;
9
10		params = params || {};
11		params.id = params.id || null;
12		params.url = params.url || null;
13
14		_this.par = {};
15		_this.par.id = params.id;
16		_this.par.hash = params.hash;
17		_this.par.url = params.action;
18
19		_this.par.form = document.getElementById( params.id );
20
21		if( _this.par.form && _this.par.url ){
22
23			_this.par.form.addEventListener( 'submit', function(e){ e.preventDefault(); });
24
25			_this.par.pattern = _this.par.form.querySelector( '.' + _this.set.form_pattern );
26			_this.par.submit = _this.par.form.querySelector( '.' + _this.set.form_submit );
27			_this.par.inputs = _this.par.form.querySelectorAll( '.' + _this.set.form_input );
28			_this.par.error = _this.par.form.querySelectorAll( '.' + _this.set.form_error );
29			_this.par.message = _this.par.form.querySelectorAll( '.' + _this.set.form_message );
30
31			if( _this.par.submit ){ _this.par.submit.addEventListener( 'click', function( event ){ _this.send(); }); }
32
33			if(_this.par.inputs.length > 0) {
34				_this.par.inputs.forEach(input => {
35					input.addEventListener('focus', function () {
36						_this.clear_error(this);
37					})
38				})
39			}
40		}
41	}
42
43	window.fav_form_callback_work.prototype = {
44
45		set : {
46			form_pattern : 'fav_form-pattern', // Класс Паттерн
47			form_pattern_active : 'fav_form-pattern-active', // Класс Паттерн активный
48			form_hidden : 'fav_form-hidden', // Класс скрытый  
49			form_submit : 'fav_form-send', // Класс формы кнопки отправки
50			form_error : 'fav_form-error', // Класс Блок формы с текстом ошибки
51			form_message : 'fav_form-message', // Класс Блок формы с текстом сообщения 
52			form_input : 'fav_form-input', // Класс поля формы
53			form_input_mail : 'fav_form-input-mail', // Класс поля формы e-mail
54			form_input_error : 'fav_form-input-error',  // Класс ошибки поля формы
55			form_input_required : 'fav_form-required', // Класс обязательное поле
56		},
57
58		// Паттерн
59		
60		pattern : function( action ){
61			let active = this.set.form_pattern_active;
62			if( this.par.pattern && active && action ){
63				if( action == 'show' ){ this.par.pattern.classList.add( active ); } 
64				if( action == 'hide' ){ this.par.pattern.classList.remove( active ); }
65			}
66		},
67
68		// Очистить ошибки формы
69		
70		clear_error : function( elem ){
71		
72			let _this = this;
73			elem = elem || null;
74
75			if( !elem ){  
76
77				_this.par.error.forEach( elem => { elem.innerHTML = ''; });
78				_this.par.inputs.forEach( elem => { _this.clear_error( elem ); });
79
80			} else {
81
82				let input_block = elem.closest('.fav_form-block');
83
84				if( input_block ){
85					let field = input_block.querySelector('.fav_form-field');
86					let error = input_block.querySelector('.error');
87					if( field ){ field.classList.remove('form__line__error'); }
88					if( error ){ error.remove(); }
89				}
90			}
91		},
92
93		// Проверка формы
94		
95		check_form : function( callback ){
96		
97			let _this = this;
98			let errors = false;
99			let error_mail = false;
100			let error_phone = false;
101			let error_required = false;
102			let messages = [];
103	
104			if( _this.par.form && _this.par.url && _this.par.hash ){
105		
106				_this.clear_error();
107
108				let form_data = new FormData( _this.par.form );
109				form_data.set( 'PARAMS_HASH', _this.par.hash );
110				if( document.querySelector('h1') ){ 
111					form_data.set( 'MATERIAL', document.querySelector('h1').innerHTML ); 
112				}
113				form_data.set( 'form_submit', 'Y' );
114
115				if( _this.par.inputs.length ){  
116	
117					_this.par.inputs.forEach( input => {
118
119						let input_error_message = false;
120	
121						let input_error = false;
122						let input_value = input.value || null;
123						let input_type = input.getAttribute('type') || null;
124						let input_name = input.getAttribute('name') || null;
125
126						if( input_name && input_value ){
127
128							if( input_type == "mail" ){

129								var re = /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i;
130								if( !re.test( input_value ) ){
131									input_error_message = 'Некорректный формат почты';
132									input_error = true;
133									error_mail = true;           
134								}
135							} else if( input_type == "tel" ){
136								var re = /^(\+7\s)+(\([\d]{3}\)\s)+([\d]{3}\s)+([\d]{2}\s)+([\d]{2})+$/;
137								if( !re.test( input_value ) ){
138									input_error_message = 'Некорректный формат номера';
139									input_error = true;
140									error_phone = true;           
141								}
142							} else if( input_name == 'check-personal' && !input.checked ){
143								messages.push('Подтвердите согласие на обработку персональных данных');
144								input_error = true;
145							}
146
147						} else if( input.hasAttribute('required') || input.classList.contains( _this.set.form_input_required ) ){
148							if( input.classList.contains( _this.set.form_hidden ) || input.closest( _this.set.form_hidden ) ){
149								form_data.delete( input_name );
150							} else { 
151								input_error_message = 'Заполните поле';
152								input_error = true; 
153								error_required = true; 
154							}
155						}
156	
157						if( input_error ){
158
159							let input_block = input.closest('.fav_form-block');
160							let clear_error = () => _this.clear_error( input );            
161							input.removeEventListener( 'change', clear_error );
162							input.addEventListener( 'change', clear_error );
163
164							if( input_block ){
165								let field = input_block.querySelector('.fav_form-field');
166								if( field ){ field.classList.add('form__line__error'); }
167								if( input_error_message ){ 
168									let msg = '<div class="form__line__info active error">' + input_error_message + '</div>';
169									input_block.insertAdjacentHTML( "beforeend", msg ); 
170								}
171							}
172
173							errors = true;
174						}
175					}); 
176				}
177
178				if( errors ){
179
180					// if( error_required ){ messages.push('Заполните обязательные поля'); }
181					// if( error_mail ){ messages.push('Укажите корректный e-mail'); }
182
183					messages = messages.length ? messages.join('<br>') : null;
184
185					if( messages && _this.par.error.length ){
186						_this.par.error.forEach( e => { 
187							e.innerHTML = '<span>' + messages + '</span>'; 
188						});
189					}
190
191				} else { callback( form_data ); }
192			}
193	
194		},
195
196		// Отправка формы
197	
198		send : function(){
199		
200			let _this = this;
201			_this.check_form( function( form_data ){
202				_this.pattern('show');
203				fetch( _this.par.url, {
204					method: "POST",
205					body: form_data
206				}).then( response => {
207					_this.pattern('hide');
208					response.json().then( result => {
209						_this.form_result( result ); 
210					});
211				}).catch( function(){ _this.pattern('hide'); });
212			}); 
213		},
214
215		// Разбор результата отправки
216		
217		form_result : function( form_data ){
218		
219			let _this = this;
220		
221			form_data = form_data || {};  
222			form_data.ERROR = form_data.ERROR || 0;
223			form_data.CLEAR = form_data.CLEAR || 0; 
224			form_data.STATUS = form_data.STATUS || 0;           
225			form_data.RELOAD = form_data.RELOAD || 0;
226			form_data.FIELDS = form_data.FIELDS || {};
227			form_data.ERRORS = form_data.ERRORS || {};
228			form_data.PATCH = form_data.PATCH || null;
229			form_data.MESSAGE = form_data.MESSAGE || '';
230
231			let timeout;
232		
233			if( form_data.ERROR == 1 ){
234				
235
236				if( _this.par.form ){
237					var messages = [];
238					if( form_data.MESSAGE ){ messages.push( form_data.MESSAGE ); }
239					for( var name in form_data.ERRORS ){
240						// if( form_data.ERRORS[ name ] ){ messages.push( form_data.ERRORS[ name ] ); }
241						let input = _this.par.form.querySelector( '.' + _this.set.form_input + '[name="' + name + '"]' );
242						if( input ){ input.classList.add( _this.set.form_input_error ); }
243					}
244					messages = messages.length ? messages.join('<br>') : null;
245					if( messages && _this.par.error.length ){
246						_this.par.error.forEach( e => { 
247							e.innerHTML = '<span>' + messages + '</span>'; 
248						});
249					}
250				}
251
252			} else {
253				
254				if( form_data.RELOAD == 0 && !form_data.PATCH ){
255					if( form_data.CLEAR == 1 && _this.par.form ){ _this.par.form.reset(); }  
256					clearInputFiles( '#' + _this.par.id );
257					_this.form_success( form_data );
258				} else if( form_data.PATCH ){
259					document.location = form_data.PATCH; 
260				} else { window.location.reload( true ); }
261			}
262		},
263		
264		// Действия после отправки
265		
266		form_success : function( form_data ){
267			let _this = this;
268			Fancybox.close();
269			Fancybox.show([{ src: '#js--modal-thanks', type: "inline" }],{
270				autoFocus: false,
271				fullscreen: true,
272				compact: true,
273				showClass: "animate__fadeInDownBig",
274				hideClass: "animate__fadeOutDownBig",
275				mainClass: 'fancy-modals',
276				preload: true,
277			});
278			//if( form_data.MESSAGE && _this.par.message.length ){
279				//_this.par.message.forEach( e => { 
280					//e.innerHTML = '<span>' + form_data.MESSAGE + '</span>'; 
281				//});
282			//}
283		}
284	}
285
286})(window);