https://laserprolab.ru/static/js/index5.js

1
2
3
4 const adressSlider = () => {
5    const adressTabs= document.querySelectorAll('.adress__slider_item ')
6    if(adressTabs.length > 1) {
7
8        const swiper = new Swiper(".adress__slider", {
9            direction: 'horizontal',
10            slidesPerView: 5,
11            spaceBetween: 30,
12            centeredSlides: true,
13            loop: true,
14            autoplay: {
15                delay: 3000,
16                disableOnInteraction: false,
17                pauseOnMouseEnter: true
18            },	
19    
20    
21            breakpoints: {
22                300: {
23                    slidesPerView: 1,
24                },
25                500: {
26                    slidesPerView: 2,
27                },
28                900: {
29                    slidesPerView: 3,
30                },
31                1300: {
32                    slidesPerView: 4,
33                },
34                1440: {
35                    slidesPerView: 5,
36                }
37            }
38    
39        });
40    }
41
42
43}
44adressSlider()
45
46const complexTabsSlider = () => {
47
48	const swiper = new Swiper('.slider', {
49		direction: 'vertical',
50		// loop: true,
51		slidesPerView: 5,
52        grabCursor: true,
53        mousewheel: {
54            invert:false,
55        },
56        keyboard: {
57            enabled: true,
58        },
59		autoplay: {
60		  delay: 3000,
61		  disableOnInteraction: true,
62		  pauseOnMouseEnter: true
63	    },
64		spaceBetween: 10,
65        navigation: {
66            nextEl: ".laser__services__complex__btn_down",
67            prevEl: ".laser__services__complex__btn_up",
68        },
69        scrollbar: {
70            el: ".laser__services__complex__scrollbar",
71            draggable: true,
72            snapOnRelease: true,
73            // dragSize: 'auto',
74            // shortSwipes: false
75        },
76  
77  
78	});
79    
80    function getIndex(name, list) {
81        for (var i = 0; i < list.length; i++) {
82            if (name == list[i].innerText){
83                list[i].classList.add('active_button')
84                return i-2;
85            }
86        }
87        return 0
88    }
89    
90    if (document.getElementById('get_complex_name')) {
91        var choosen_complex = document.getElementById('get_complex_name').innerText;
92        const all_buttons = document.getElementsByName('choose_complex');
93        var number = getIndex(choosen_complex, all_buttons)
94        swiper.slideTo(number, 0);
95    }
96}
97complexTabsSlider()
98  
99document.addEventListener('htmx:afterSettle', function(evt) {
100	complexTabsSlider()
101});
102
103
104
105
106const openHeaderModal = () => {
107    const menuBtn = document.querySelector('.header__burger')
108    const modalMenu = document.querySelector('.modal__header')
109    const overlay = document.querySelector('.header__overlay')
110    const closeBtn = document.querySelector('.modal__header_close')
111    
112    
113
114    const animate = ({timing, draw, duration}) => {
115
116        let start = performance.now();
117        requestAnimationFrame(function animate(time) {
118            // timeFraction изменяется от 0 до 1
119            let timeFraction = (time - start) / duration;
120            if (timeFraction > 1) timeFraction = 1;
121    
122            // вычисление текущего состояния анимации
123            let progress = timing(timeFraction);
124    
125            draw(progress); // отрисовать её
126    
127            if (timeFraction < 1) {
128                requestAnimationFrame(animate);
129            }
130    
131        });
132    };
133    
134    const choiseOpacity = (count) => {
135        animate({
136            duration: 1000,
137            timing(timeFraction) {
138              return timeFraction;
139            },
140            draw(progress) {
141                if(count === 1){
142                    overlay.classList.add('header__overlay_active')      
143                    overlay.style.opacity = progress * count;
144                } else if(count === -1){
145                    overlay.style.opacity = 1 - progress;
146                    setTimeout(()=> {
147                        overlay.classList.remove('header__overlay_active')      
148                        
149
150                    },1000)
151                }
152            }
153        });
154    }
155
156    const openModal = () => {
157        choiseOpacity(1)
158        menuBtn.classList.add('header__burger_active')
159        modalMenu.classList.add('modal__header_active') 
160
161    }
162
163    const closeModel = () => {
164        menuBtn.classList.remove('header__burger_active')
165        modalMenu.classList.remove('modal__header_active') 
166        choiseOpacity(-1)
167    }
168  

169    menuBtn.addEventListener('click', openModal)
170
171    closeBtn.addEventListener('click', closeModel)
172
173    document.addEventListener('click', (e) => {
174        if(e.target.closest('.header__overlay')) {
175            closeModel()
176        }
177    })
178
179    document.addEventListener('keydown', (e) => {
180        if(e.keyCode === 27) {
181            closeModel()
182        }
183    })
184
185}
186openHeaderModal()
187
188const optionallyText = () => {
189    const text = document.querySelector('.laser__services__descr_optionally')
190    if(text){
191
192        const words = text.textContent
193        const blockWords = words.substring(0, 200)
194        text.textContent = words.length > 200? blockWords + " . . .": words
195    }
196}
197optionallyText()
198
199document.addEventListener('htmx:afterRequest', function(evt) {
200    optionallyText()
201});
202
203const renderServicesDescrList = () => {
204    const hoverBgBtns = (selector, color1, color2) => {
205    
206        const btns = document.querySelectorAll(selector)
207    
208        
209        btns.forEach(btn => {
210            btn.addEventListener('click', (e) => {
211                
212                e.preventDefault();
213                btn.style.background= color1
214                setTimeout(() => {
215                    btn.style.background= color2
216                },200)
217            })
218        })
219    }
220    
221    const hoverColorTextBtns = (selector, color1, color2) => {
222        const btns = document.querySelectorAll(selector)
223    
224        btns.forEach(btn => {
225            btn.addEventListener('click', (e) => {
226                // console.log(btn)
227                e.preventDefault();
228                    btn.style.color= color1
229                setTimeout(() => {
230                    btn.style.color= color2
231                },200)
232            })
233        })
234    }
235
236
237    
238    hoverBgBtns('.services__nav__btn', 'rgba(0,0,0, .2)', 'transparent')
239
240    
241    hoverBgBtns('.laser__services__descr_more', 'rgb(139, 139, 139)', 'transparent')
242    hoverColorTextBtns('.laser__services__descr_more', '#ffffff', 'rgb(139, 139, 139)')
243
244    hoverBgBtns('.laser__order__price_buy', 'rgb(191 56 121)', 'linear-gradient(90deg, rgb(231, 135, 181) 2.8%, rgb(248, 169, 177) 100%)')
245    hoverColorTextBtns('.laser__order__price_buy', '#ffffff', '#000000')
246
247    hoverBgBtns('.laser__order__price_instalment', 'rgb(191 56 121)', 'linear-gradient(90deg, rgba(56, 112, 255, 0.5) 2.8%, rgb(248, 169, 177) 100%)')
248    hoverColorTextBtns('.laser__order__price_instalment', '#ffffff', '#000000')  
249}
250renderServicesDescrList()
251
252
253const servicesNameTabsSlider = () => {
254
255    const swiper = new Swiper('.services__nav', {
256        slidesPerView: 5,
257        loop: true,
258   	
259        navigation: {
260            nextEl: ".services__nav__btn_next",
261            prevEl: ".services__nav__btn_prev",
262        },
263
264        breakpoints: {
265            320: {
266                slidesPerView: 1,
267            },
268            640: {
269                slidesPerView: 2,
270            },
271            900: {
272                slidesPerView: 4,
273            },
274          
275
276
277        },
278    })
279}
280servicesNameTabsSlider()
281
282const validateFields = () => {
283
284    const form = document.querySelector('.form')
285
286    if(form) {
287
288        const validNameField = (selector) => {
289            
290            const inputName = document.querySelector(selector)
291
292
293    
294            if( inputName && inputName.value === ''){
295                inputName.addEventListener('focus', () => {
296                    inputName.style.border = `1px solid red`
297                })
298            }
299            inputName.addEventListener('input', (e) => {
300                inputName.value = e.target.value.replace(/[^а-я,ё,\ ]/gi, '')
301                const borderColor = inputName.value === ''? 'red': 'green'
302                inputName.style.border = `1px solid ${borderColor}`
303            })
304    
305            inputName.addEventListener('change', () => {
306    
307                inputName.value = inputName.value.split(' ').map(word => {
308                    return (word[0].toUpperCase() + word.substring(1))
309                })
310                inputName.value = inputName.value.replace(/\,/g, '  ')
311                console.log(inputName.value)
312            })
313
314            inputName.addEventListener('focus', () => {
315                console.log("error")
316                if(inputName.value === ''){

317                    inputName.style.border = `1px solid red`
318                } else {
319                    inputName.style.border = `1px solid green`
320                }
321            })
322           
323           
324    
325        }
326        validNameField('#fio')
327    
328    
329    
330        const validPhoneField = (selector) =>{
331            
332            [].forEach.call( document.querySelectorAll(selector), (input) => {
333                        
334                let keyCode;
335                
336                
337                function mask(event) {
338                    event.keyCode && (keyCode = event.keyCode);
339                    let pos = this.selectionStart;
340                    if (pos < 3) event.preventDefault();
341                    let matrix = "+7 (___) ___ ____",
342                        i = 0,
343                        def = matrix.replace(/\D/g, ""),
344                        val = this.value.replace(/\D/g, ""),
345                        new_value = matrix.replace(/[_\d]/g, function(a) {
346                            
347                            return i < val.length ? val.charAt(i++) : a
348                        });
349                    i = new_value.indexOf("_");
350                    if (i != -1) {
351                        i < 5 && (i = 3);
352                        new_value = new_value.slice(0, i)
353                        
354                    }
355                    let reg = matrix.substr(0, this.value.length).replace(/_+/g,
356                    function(a) {
357                        return "\\d{1," + a.length + "}"
358                    }).replace(/[+()]/g, "\\$&");
359        
360                      reg = new RegExp("^" + reg + "$");
361                
362                    if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) {
363                        this.value = new_value;
364                        if(this.value.length < 16) {
365                            input.style.border = '1px solid red'
366                            input.classList.remove('success')
367                        } else {
368        
369                            input.classList.add('success')
370                            input.style.border = '1px solid green'
371                        }
372                    } else {
373                        input.style.border = '1px solid red'
374                        input.classList.remove('success')
375                    }
376                    if (event.type == "blur" && this.value.length < 5) {
377                        this.value = "";
378                        
379                    }
380                }
381            
382                input.addEventListener("input",  mask, false);
383                input.addEventListener("focus", mask, false);
384                input.addEventListener("blur", mask, false);
385                input.addEventListener("keydown", mask, false);
386
387                input.addEventListener('focus', () => {
388                    if(input.value.length < 16){
389                        input.style.border = `1px solid red`
390                    } 
391                })
392            
393            });
394    
395        }
396        validPhoneField('#phone')
397    
398    
399    
400        const validEmailField = (selector) => {
401            const testEmail = /^([a-z0-9\_\ \.\~\*\']+)(@{1})([a-z]+)(\.)(\w{2,3})$/gi
402            const inputEmail = document.querySelector(selector)
403            
404    
405            
406                inputEmail.addEventListener('focus', () => {
407                    if(inputEmail.value === ''){
408                        inputEmail.style.border = `1px solid red`
409                    }
410                })
411            
412    
413            inputEmail.addEventListener('input', (e) => {
414                inputEmail.value = e.target.value.replace(/[^a-z0-9\_\ \.\~\*\'@]/gi, '')
415                if(e.target.value.match(testEmail) !== null) {
416                    inputEmail.value = e.target.value
417                    inputEmail.style.border = '1px solid green'
418    
419                } else {
420                    inputEmail.style.border = '1px solid red' 
421                }
422            })
423          
424         
425        }
426        validEmailField('#email')
427    }
428
429}
430
431validateFields()
432
433
434// const colorComplexTabs = () => {
435//     const complexTabsBtns = document.querySelectorAll('.services__nav__menu_item')
436    
437//     complexTabsBtns.forEach((btn, i) => {
438//         btn.addEventListener('click', () => {
439//             btn.style.cssText = `
440//                  border: 1px solid rgb(231, 135, 181)
441//                  border-radius: 20px;
442            
443//             `
444//         })
445//     })
446//     console.log(complexTabsBtns)
447// }
448// colorComplexTabs()
449
450