1document.addEventListener('DOMContentLoaded', function() { 2const menuCont2 = document.getElementById("menu2"); 3if (!menuCont2) return; 4 5const menuBtn2 = document.getElementById("menu_btn2"); 6const menuClose2 = document.getElementById("menu_close2"); 7const menuBg2 = document.getElementById("menu_wr2"); 8 9 10if (document.querySelector(".cookie")) { 11 document.querySelectorAll('.cookie .close').forEach((element) => { 12 element.addEventListener('click', function (event) { 13 document.querySelector(".cookie").remove(); 14 }); 15 }); 16} 17if (document.querySelector(".cookie")) { 18 document.querySelector(".cookie .accept").addEventListener('click', function (event) { 19 document.querySelector(".cookie").remove(); 20 21 var expirationDate = new Date(); 22 expirationDate.setMonth(expirationDate.getMonth() + 2); 23 24 document.cookie = "cookie_accept=" + encodeURIComponent(new Date().toString()) + 25 "; expires=" + expirationDate.toUTCString() + 26 "; path=/"; 27 }); 28} 29 30 31if(!!menuBtn2){ 32 // ÐÑкÑÑÑие Ð¼ÐµÐ½Ñ Ð¿Ð¾ ÐºÐ»Ð¸ÐºÑ Ð½Ð° ÐºÐ½Ð¾Ð¿ÐºÑ 33 menuBtn2.addEventListener("click", (e) => { 34 menuCont2.classList.toggle('active'); 35 menuBg2.classList.toggle('active'); 36 document.body.classList.toggle('no-scroll'); // ÐобавлÑем/ÑбиÑаем no-scroll 37 }); 38 39// ÐакÑÑÑие Ð¼ÐµÐ½Ñ Ð¿Ð¾ ÐºÐ»Ð¸ÐºÑ Ð·Ð° его пÑеделами 40 document.addEventListener("click", (e) => { 41 if (!menuCont2.contains(e.target) && !menuBtn2.contains(e.target)) { 42 menuCont2.classList.remove('active'); 43 menuBg2.classList.remove('active'); 44 document.body.classList.remove('no-scroll'); // УбиÑаем no-scroll 45 } 46 }); 47 48// ÐакÑÑÑие Ð¼ÐµÐ½Ñ Ð¿Ð¾ ÐºÐ»Ð¸ÐºÑ Ð½Ð° ÐºÐ½Ð¾Ð¿ÐºÑ Ð·Ð°ÐºÑÑÑÐ¸Ñ 49 if(!!menuClose2){ 50 menuClose2.addEventListener("click", (e) => { 51 menuCont2.classList.remove('active'); 52 menuBg2.classList.remove('active'); 53 document.body.classList.remove('no-scroll'); // УбиÑаем no-scroll 54 }); 55 } 56} 57 58 59}); 60 61 62document.addEventListener('DOMContentLoaded', function() { 63 const scrollToTopButton = document.getElementById('scrollToTop'); 64 65 // ÐоказÑваем или ÑкÑÑваем ÐºÐ½Ð¾Ð¿ÐºÑ Ð¿Ñи пÑокÑÑÑке 66 window.addEventListener('scroll', function() { 67 if (window.pageYOffset > 300) { 68 scrollToTopButton.style.display = 'flex'; 69 } else { 70 scrollToTopButton.style.display = 'none'; 71 } 72 }); 73 74 // ÐÐ»Ð°Ð²Ð½Ð°Ñ Ð¿ÑокÑÑÑка ввеÑÑ Ð¿Ñи клике 75 scrollToTopButton.addEventListener('click', function() { 76 window.scrollTo({ 77 top: 0, 78 behavior: 'smooth' 79 }); 80 }); 81}); 82 83 84// document.addEventListener('DOMContentLoaded', function () { 85// function initializeSlider({ 86// sliderContainerSelector, 87// slideSelector, 88// nextButtonSelector = null, 89// prevButtonSelector = null, 90// sliderName = '', 91// paginationBreakpoint = null, // ÐÑÐµÐ¹ÐºÐ¿Ð¾Ð¸Ð½Ñ Ð´Ð»Ñ Ð²ÐºÐ»ÑÑÐµÐ½Ð¸Ñ Ð¿Ð°Ð³Ð¸Ð½Ð°Ñии 92// paginationEnabled = false, // ÐклÑÑиÑÑ Ð¿Ð°Ð³Ð¸Ð½Ð°ÑÐ¸Ñ 93// startIndex = 0, 94// rangeInputSelector = null 95// }) { 96// const sliderContainer = document.querySelector(sliderContainerSelector); 97// if (!sliderContainer) return; 98 99// const slides = document.querySelectorAll(slideSelector); 100// const rangeInput = rangeInputSelector ? document.querySelector(rangeInputSelector) : null; 101// let currentIndex = startIndex; 102// let startX = 0; 103// let isSwiping = false; 104// let isMouseDown = false; 105 106// function getGap() { 107// const gapValue = window.getComputedStyle(sliderContainer).gap; 108// return parseInt(gapValue) || 0; 109// } 110 111// function updateSliderPosition() { 112// const gap = getGap(); 113// const slideWidth = slides[0].offsetWidth; 114// const offset = -(currentIndex * (slideWidth + gap)); 115 116// sliderContainer.style.transform = `translateX(${offset}px)`; 117
118// slides.forEach((slide, index) => { 119// slide.classList.toggle('active', index === currentIndex); 120// }); 121 122// if (rangeInput) { 123// rangeInput.value = currentIndex; 124// rangeInput.dispatchEvent(new Event('change')); 125// } 126 127// if (paginationEnabled) { 128// updatePagination(); 129// } 130// } 131 132// function nextSlide() { 133// currentIndex = (currentIndex + 1) % slides.length; 134// updateSliderPosition(); 135// } 136 137// function prevSlide() { 138// currentIndex = (currentIndex - 1 + slides.length) % slides.length; 139// updateSliderPosition(); 140// } 141 142// if (rangeInput) { 143// rangeInput.max = slides.length - 1; 144// rangeInput.addEventListener('input', function () { 145// currentIndex = parseInt(rangeInput.value); 146// updateSliderPosition(); 147// }); 148// } 149 150// function createPagination() { 151// const paginationContainer = document.createElement('div'); 152// paginationContainer.className = 'slider-pagination'; 153 154// slides.forEach((_, index) => { 155// const dot = document.createElement('button'); 156// dot.className = 'pagination-dot'; 157// dot.dataset.index = index; 158// dot.addEventListener('click', () => { 159// currentIndex = index; 160// updateSliderPosition(); 161// }); 162// paginationContainer.appendChild(dot); 163// }); 164 165// sliderContainer.parentElement.appendChild(paginationContainer); 166 167// // УÑÑановиÑÑ Ð°ÐºÑивнÑÑ ÑоÑÐºÑ Ð¿Ñи Ñоздании пагинаÑии 168// updatePagination(); 169// } 170 171// function updatePagination() { 172// const dots = sliderContainer.parentElement.querySelectorAll('.pagination-dot'); 173// dots.forEach((dot, index) => { 174// dot.classList.toggle('active', index === currentIndex); 175// }); 176// } 177 178// function togglePagination() { 179// const shouldEnable = paginationBreakpoint && window.innerWidth <= paginationBreakpoint; 180// if (shouldEnable && !paginationEnabled) { 181// paginationEnabled = true; 182// createPagination(); 183// } else if (!shouldEnable && paginationEnabled) { 184// paginationEnabled = false; 185// const paginationContainer = sliderContainer.parentElement.querySelector('.slider-pagination'); 186// if (paginationContainer) paginationContainer.remove(); 187// } 188// } 189 190// sliderContainer.addEventListener('touchstart', event => { 191// startX = event.touches[0].clientX; 192// isSwiping = true; 193// }); 194 195// sliderContainer.addEventListener('touchmove', event => { 196// if (!isSwiping) return; 197// const moveX = event.touches[0].clientX - startX; 198 199// if (moveX > 50) { 200// prevSlide(); 201// isSwiping = false; 202// } else if (moveX < -50) { 203// nextSlide(); 204// isSwiping = false; 205// } 206// }); 207 208// sliderContainer.addEventListener('touchend', () => { 209// isSwiping = false; 210// }); 211 212// sliderContainer.addEventListener('mousedown', event => { 213// if (event.button !== 0) return; 214// startX = event.clientX; 215// isMouseDown = true; 216// }); 217 218// sliderContainer.addEventListener('mousemove', event => { 219// if (!isMouseDown) return; 220// const moveX = event.clientX - startX; 221 222// if (moveX > 50) { 223// prevSlide(); 224// isMouseDown = false; 225// } else if (moveX < -50) { 226// nextSlide(); 227// isMouseDown = false;
228// } 229// }); 230 231// sliderContainer.addEventListener('mouseup', () => { 232// isMouseDown = false; 233// }); 234 235// sliderContainer.addEventListener('mouseleave', () => { 236// isMouseDown = false; 237// }); 238 239// if (nextButtonSelector && document.querySelector(nextButtonSelector)) { 240// document.querySelector(nextButtonSelector).addEventListener('click', nextSlide); 241// } 242 243// if (prevButtonSelector && document.querySelector(prevButtonSelector)) { 244// document.querySelector(prevButtonSelector).addEventListener('click', prevSlide); 245// } 246 247// window.addEventListener('resize', togglePagination); 248// window.addEventListener('load', () => { 249// updateSliderPosition(); 250// togglePagination(); 251// }); 252 253// // УÑÑановиÑÑ Ð°ÐºÑивнÑÑ ÑоÑÐºÑ Ð¿Ð¾Ñле пеÑвонаÑалÑной наÑÑÑойки 254// updateSliderPosition(); 255// } 256 257// initializeSlider({ 258// sliderContainerSelector: '.main-first__banner', 259// slideSelector: '.main-first__banner .banner__slide', 260// nextButtonSelector: '.slider-btns__item.next', 261// prevButtonSelector: '.slider-btns__item.back', 262// sliderName: 'main-first__banner', 263// paginationBreakpoint: 768 264// }); 265 266// initializeSlider({ 267// sliderContainerSelector: '.articles__slider', 268// slideSelector: '.articles__slider-item', 269// nextButtonSelector: '.slider-btns__item.next', 270// prevButtonSelector: '.slider-btns__item.back', 271// sliderName: 'articles__slider', 272// startIndex: 0 273// }); 274 275// initializeSlider({ 276// sliderContainerSelector: '.main-second_banner', 277// slideSelector: '.main-second_banner .banner__slide', 278// nextButtonSelector: '.main-second__btns .slider-btns__item.next', 279// prevButtonSelector: '.main-second__btns .slider-btns__item.back', 280// sliderName: 'main-second_banner', 281// startIndex: 1, 282// rangeInputSelector: '#slider-range' 283// }); 284// }); 285 286 287 288 289 document.addEventListener('DOMContentLoaded', function() { 290 function initializeSlider({ 291 sliderContainerSelector, 292 slideSelector, 293 nextButtonSelector = null, 294 prevButtonSelector = null, 295 sliderName = '', 296 pagination = '', 297 startIndex = 0, 298 rangeInputSelector = null // ÐобавлÑем опÑÐ¸Ñ Ð´Ð»Ñ Ð¿Ð¾Ð»Ð·Ñнка 299 }) { 300 const sliderContainer = document.querySelector(sliderContainerSelector); 301 302 // ÐÑовеÑÑем, ÑÑÑеÑÑвÑÐµÑ Ð»Ð¸ конÑÐµÐ¹Ð½ÐµÑ 303 if (!sliderContainer) { 304 return; // ÐÑли не найден, вÑÑ Ð¾Ð´Ð¸Ð¼ из ÑÑнкÑии 305 } 306 307 const slides = document.querySelectorAll(slideSelector); 308 const rangeInput = rangeInputSelector ? document.querySelector(rangeInputSelector) : null; 309 var currentIndex = startIndex; 310 let startX = 0; 311 let isSwiping = false; 312 let isMouseDown = false; 313 314 315 316 function getGap() { 317 const gapValue = window.getComputedStyle(sliderContainer).gap; 318 return parseInt(gapValue) || 0; 319 } 320 321 function updateSliderPosition() { 322 if (!slides || slides.length === 0 || !slides[0]) { 323 return; // ÐÑÑ Ð¾Ð´Ð¸Ð¼, еÑли ÑÐ»Ð°Ð¹Ð´Ñ Ð½Ðµ Ð½Ð°Ð¹Ð´ÐµÐ½Ñ 324 } 325 const gap = getGap(); 326 const slideWidth = slides[0].offsetWidth; 327 const offset = -(currentIndex * (slideWidth + gap)); 328 329 330 331 sliderContainer.style.transform = `translateX(${offset}px)`; 332 333 slides.forEach((slide, index) => { 334 slide.classList.toggle('active', index === currentIndex); 335 }); 336 337 if (rangeInput) { 338 rangeInput.value = currentIndex; // ÐбновлÑем знаÑение ползÑнка 339 rangeInput.dispatchEvent(new Event('change')); 340 } 341 342 if (pagination) { 343 updatePagination(); 344 } 345 } 346 347 function nextSlide() { 348 currentIndex = (currentIndex + 1) % slides.length; 349 updateSliderPosition(); 350 } 351 352 function prevSlide() { 353 currentIndex = (currentIndex - 1 + slides.length) % slides.length; 354 updateSliderPosition(); 355 } 356 357 if (rangeInput) { 358 rangeInput.max = slides.length - 1; // УÑÑанавливаем макÑималÑное знаÑение 359 rangeInput.addEventListener('input', function() { 360 currentIndex = parseInt(rangeInput.value); 361 updateSliderPosition(); 362 }); 363 } 364 365 sliderContainer.addEventListener('touchstart', function(event) { 366 startX = event.touches[0].clientX; 367 isSwiping = true; 368 }); 369 370 sliderContainer.addEventListener('touchmove', function(event) { 371 if (!isSwiping) return; 372 const moveX = event.touches[0].clientX - startX; 373 374 if (moveX > 50) { 375 prevSlide(); 376 isSwiping = false;
377 } else if (moveX < -50) { 378 nextSlide(); 379 isSwiping = false; 380 } 381 }); 382 383 sliderContainer.addEventListener('touchend', function() { 384 isSwiping = false; 385 }); 386 387 sliderContainer.addEventListener('mousedown', function(event) { 388 if (event.button !== 0) return; // ТолÑко Ð»ÐµÐ²Ð°Ñ ÐºÐ½Ð¾Ð¿ÐºÐ° мÑÑи 389 startX = event.clientX; 390 isMouseDown = true; 391 }); 392 393 sliderContainer.addEventListener('mousemove', function(event) { 394 if (!isMouseDown) return; 395 const moveX = event.clientX - startX; 396 397 if (moveX > 50) { 398 prevSlide(); 399 isMouseDown = false; 400 } else if (moveX < -50) { 401 nextSlide(); 402 isMouseDown = false; 403 } 404 }); 405 406 sliderContainer.addEventListener('mouseup', function() { 407 isMouseDown = false; 408 }); 409 410 sliderContainer.addEventListener('mouseleave', function() { 411 isMouseDown = false; 412 }); 413 414 if (nextButtonSelector && document.querySelector(nextButtonSelector)) { 415 document.querySelector(nextButtonSelector).addEventListener('click', nextSlide); 416 } 417 418 if (prevButtonSelector && document.querySelector(prevButtonSelector)) { 419 document.querySelector(prevButtonSelector).addEventListener('click', prevSlide); 420 } 421 422 window.addEventListener('load', () => { 423 updateSliderPosition(); 424 if (pagination) { 425 createPagination(); 426 } 427 }); 428 } 429 430 initializeSlider({ 431 sliderContainerSelector: '.main-first__banner', 432 slideSelector: '.main-first__banner .banner__slide', 433 nextButtonSelector: '.slider-btns__item.next', 434 prevButtonSelector: '.slider-btns__item.back', 435 sliderName: 'main-first__banner', 436 startIndex: 0 437 }); 438 439 initializeSlider({ 440 sliderContainerSelector: '.main-second_banner', 441 slideSelector: '.main-second_banner .banner__slide', 442 nextButtonSelector: '.main-second__btns .slider-btns__item.next', 443 prevButtonSelector: '.main-second__btns .slider-btns__item.back', 444 sliderName: 'main-second_banner', 445 startIndex: 1, 446 rangeInputSelector: '#slider-range' 447 }); 448}); 449 450 451document.addEventListener('DOMContentLoaded', function () { 452 const nav = document.querySelector('.articles__nav'); 453 const panelsRoot = document.querySelector('.articles__slider'); 454 if (!nav || !panelsRoot) { 455 return; 456 } 457 458 const navItems = nav.querySelectorAll('.articles__nav-item'); 459 const panels = panelsRoot.querySelectorAll('.articles__slider-item'); 460 461 navItems.forEach((item, index) => { 462 item.addEventListener('click', () => { 463 navItems.forEach((navItem, i) => { 464 navItem.classList.toggle('active', i === index); 465 }); 466 panels.forEach((panel, i) => { 467 panel.classList.toggle('active', i === index); 468 }); 469 }); 470 }); 471}); 472 473 474 475 476/* 477document.addEventListener("DOMContentLoaded", () => { 478 // ÐÐ°Ñ Ð¾Ð´Ð¸Ð¼ вÑе ÑлеменÑÑ Ñ ÐºÐ»Ð°ÑÑом .mini-cart_btns-item 479 const cartItems = document.querySelectorAll('.mini-cart_btns-item'); 480 481 cartItems.forEach(item => { 482 // ÐÐ°Ñ Ð¾Ð´Ð¸Ð¼ кнопки и инпÑÑ Ð²Ð½ÑÑÑи каждого ÑлеменÑа 483 const minusBtn = item.querySelector('.mini-cart__input:nth-child(1)'); 484 const plusBtn = item.querySelector('.mini-cart__input:nth-child(3)'); 485 const inputField = item.querySelector('.mini-cart__input.num'); 486 487 if (minusBtn && plusBtn && inputField) { 488 // УвелиÑение знаÑÐµÐ½Ð¸Ñ Ð¿Ñи клике на ÐºÐ½Ð¾Ð¿ÐºÑ Ð¿Ð»ÑÑ 489 plusBtn.addEventListener('click', () => { 490 inputField.value = parseInt(inputField.value || 0, 10) + 1; 491 }); 492 493 // УменÑÑение знаÑÐµÐ½Ð¸Ñ Ð¿Ñи клике на ÐºÐ½Ð¾Ð¿ÐºÑ Ð¼Ð¸Ð½ÑÑ 494 minusBtn.addEventListener('click', () => { 495 let currentValue = parseInt(inputField.value || 0, 10); 496 if (currentValue > 0) { 497 inputField.value = currentValue - 1; 498 } 499 }); 500 } 501 }); 502});*/ 503 504 505document.addEventListener("DOMContentLoaded", () => { 506 const rangeInput = document.getElementById("slider-range"); 507 508 if (!rangeInput) return; 509 510 const customSlider = document.getElementById("custom-slider"); 511 const customThumb = document.getElementById("custom-slider-thumb"); 512 const customProgress = document.getElementById("custom-slider-progress"); 513 514 let min = parseFloat(rangeInput.min); 515 let max = parseFloat(rangeInput.max); 516 const step = parseFloat(rangeInput.step); 517 const sliderWidth = customSlider.offsetWidth; 518 519 max += 1; 520 521 let isDragging = false;
522 let isProgrammaticChange = false; 523 let isMouseMoving = false; // Флаг Ð´Ð»Ñ Ð¾ÑÑÐ»ÐµÐ¶Ð¸Ð²Ð°Ð½Ð¸Ñ Ð´Ð²Ð¸Ð¶ÐµÐ½Ð¸Ñ Ð¼ÑÑи 524 525 // ФÑнкÑÐ¸Ñ Ð´Ð»Ñ Ð¾Ð±Ð½Ð¾Ð²Ð»ÐµÐ½Ð¸Ñ Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¿Ð¾Ð»Ð·Ñнка и пÑогÑеÑÑ-баÑа 526 function updateThumbPosition(value) { 527 const percentage = ((value - min) / (max - min)) * 100; 528 customThumb.style.left = `${percentage}%`; 529 customProgress.style.width = `${percentage}%`; 530 rangeInput.value = value; // Ð¡Ð¸Ð½Ñ ÑонизаÑÐ¸Ñ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ñ ÑкÑÑÑого range 531 rangeInput.dispatchEvent(new Event('input')); 532 } 533 534 // ФÑнкÑÐ¸Ñ Ð´Ð»Ñ Ð²ÑÑиÑÐ»ÐµÐ½Ð¸Ñ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ñ ÑлайдеÑа 535 function calculateValue(clientX) { 536 const rect = customSlider.getBoundingClientRect(); 537 const offsetX = Math.min(Math.max(clientX - rect.left, 0), sliderWidth); 538 const rawValue = (offsetX / sliderWidth) * (max - min) + min; 539 return Math.round(rawValue / step) * step; // УÑиÑÑваем Ñаг 540 } 541 542 // ÐбÑабоÑка кликов на ÑлайдеÑе 543 customSlider.addEventListener("click", (e) => { 544 const value = calculateValue(e.clientX); 545 updateThumbPosition(value); 546 }); 547 548 // ÐбÑабоÑка наÑала пеÑеÑаÑÐºÐ¸Ð²Ð°Ð½Ð¸Ñ (Ð´Ð»Ñ Ð¼ÑÑи) 549 customThumb.addEventListener("mousedown", (e) => { 550 e.preventDefault(); // ÐÑÑанавливаем ÑÑандаÑÑное поведение 551 isDragging = true; 552 document.body.style.userSelect = "none"; // ÐÑклÑÑаем вÑделение ÑекÑÑа пÑи пеÑеÑаÑкивании 553 }); 554 555 // ÐпÑимизиÑÐ¾Ð²Ð°Ð½Ð½Ð°Ñ Ð¾Ð±ÑабоÑка Ð´Ð²Ð¸Ð¶ÐµÐ½Ð¸Ñ Ð¼ÑÑи 556 function onMouseMove(e) { 557 if (!isDragging) return; 558 const value = calculateValue(e.clientX); 559 updateThumbPosition(value); 560 } 561 562 // ÐÑполÑзÑем requestAnimationFrame Ð´Ð»Ñ Ð¿Ð»Ð°Ð²Ð½Ð¾Ð³Ð¾ Ð´Ð²Ð¸Ð¶ÐµÐ½Ð¸Ñ 563 function smoothMouseMove(e) { 564 if (!isMouseMoving) { 565 isMouseMoving = true; 566 requestAnimationFrame(() => { 567 onMouseMove(e); 568 isMouseMoving = false; 569 }); 570 } 571 } 572 573 // ÐбÑабоÑка Ð´Ð²Ð¸Ð¶ÐµÐ½Ð¸Ñ Ð¼ÑÑи 574 document.addEventListener("mousemove", smoothMouseMove); 575 576 // ÐавеÑÑение пеÑеÑаÑÐºÐ¸Ð²Ð°Ð½Ð¸Ñ 577 document.addEventListener("mouseup", () => { 578 if (isDragging) { 579 isDragging = false; 580 document.body.style.userSelect = "auto"; // ÐклÑÑаем вÑделение ÑекÑÑа обÑаÑно 581 } 582 }); 583 584 // ÐбÑабоÑка наÑала пеÑеÑаÑÐºÐ¸Ð²Ð°Ð½Ð¸Ñ (Ð´Ð»Ñ Ð¼Ð¾Ð±Ð¸Ð»ÑнÑÑ ÑÑÑÑойÑÑв) 585 customThumb.addEventListener("touchstart", (e) => { 586 e.preventDefault(); // ÐÑÑанавливаем ÑÑандаÑÑное поведение 587 isDragging = true; 588 document.body.style.userSelect = "none"; // ÐÑклÑÑаем вÑделение ÑекÑÑа пÑи пеÑеÑаÑкивании 589 }); 590 591 // ÐбÑабоÑка Ð´Ð²Ð¸Ð¶ÐµÐ½Ð¸Ñ ÐºÐ°ÑÐ°Ð½Ð¸Ñ (Ð´Ð»Ñ Ð¼Ð¾Ð±Ð¸Ð»ÑнÑÑ ÑÑÑÑойÑÑв) 592 document.addEventListener("touchmove", (e) => { 593 if (!isDragging) return; 594 const touch = e.touches[0]; // ÐолÑÑаем пеÑвое каÑание 595 const value = calculateValue(touch.clientX); 596 updateThumbPosition(value); 597 }); 598 599 // ÐавеÑÑение пеÑеÑаÑÐºÐ¸Ð²Ð°Ð½Ð¸Ñ (Ð´Ð»Ñ Ð¼Ð¾Ð±Ð¸Ð»ÑнÑÑ ÑÑÑÑойÑÑв) 600 document.addEventListener("touchend", () => { 601 if (isDragging) { 602 isDragging = false; 603 document.body.style.userSelect = "auto"; // ÐклÑÑаем вÑделение ÑекÑÑа обÑаÑно 604 } 605 }); 606 607 // Ð¡Ð¸Ð½Ñ ÑонизаÑÐ¸Ñ Ð·Ð½Ð°Ñений пÑи изменении ÑÑандаÑÑного ÑлайдеÑа 608 rangeInput.addEventListener("input", () => { 609 if (!isProgrammaticChange) { 610 isProgrammaticChange = true; 611 updateThumbPosition(rangeInput.value); // ÐбновлÑем каÑÑомнÑй ÑÐ»Ð°Ð¹Ð´ÐµÑ Ð¿Ñи изменении оÑигиналÑного 612 isProgrammaticChange = false;
613 } 614 }); 615 616 rangeInput.addEventListener("change", () => { 617 if (!isProgrammaticChange) { 618 isProgrammaticChange = true; 619 updateThumbPosition(rangeInput.value); // ÐбновлÑем каÑÑомнÑй ÑÐ»Ð°Ð¹Ð´ÐµÑ Ð¿Ñи изменении оÑигиналÑного 620 isProgrammaticChange = false; 621 } 622 }); 623 624 // ÐниÑиализаÑÐ¸Ñ 625 updateThumbPosition(rangeInput.value); 626 627 // Ðобавление плавноÑÑи ÑеÑез CSS 628 customThumb.style.transition = "left 0.1s ease-out"; // Ðлавное движение thumb 629 customProgress.style.transition = "width 0.1s ease-out"; // Ðлавное обновление пÑогÑеÑÑа 630 631}); 632 633// document.addEventListener("DOMContentLoaded", () => { 634// const items = document.querySelectorAll('.cart-info__akk-item'); 635 636// if (!items) return; 637// const content = document.querySelector('.cart-info__akk-content'); 638 639// const defaultActiveIndex = 0; 640// const defaultActiveItem = items[defaultActiveIndex]; 641 642// if (!defaultActiveItem) return; 643 644// defaultActiveItem.classList.add('active'); 645// const defaultItemContent = defaultActiveItem.querySelector('.cart-info__akk-item-text').innerHTML; 646// content.innerText = defaultItemContent; 647 648// items.forEach((item) => { 649// item.addEventListener('click', () => { 650// items.forEach((i) => i.classList.remove('active')); 651 652// item.classList.add('active'); 653 654// const itemContent = item.querySelector('.cart-info__akk-item-text'); 655// const itemContentText = itemContent.innerHTML; 656 657// content.style.opacity = 0; 658// setTimeout(() => { 659// content.innerText = itemContentText; 660// content.style.opacity = 1; 661// }, 300); 662 663// }); 664// }); 665// }); 666 667document.addEventListener("DOMContentLoaded", () => { 668 const items = document.querySelectorAll('.cart-info__akk-item'); 669 670 if (!items) return; 671 672 const descContent = document.querySelector('.cart-info__akk-content-desc'); 673 const charContent = document.querySelector('.cart-info__akk-content-char'); 674 675 if (!descContent || !charContent) return; 676 677 const defaultActiveIndex = 0; 678 const defaultActiveItem = items[defaultActiveIndex]; 679 680 if (!defaultActiveItem) return; 681 682 defaultActiveItem.classList.add('active'); 683 updateContent(defaultActiveItem); 684 685 const targetContent = 686 defaultActiveItem.querySelector('.cart-info__akk-item-name').textContent.trim() === 'ÐпиÑание' 687 ? descContent 688 : charContent; 689 690 targetContent.classList.add('active'); 691 692 items.forEach((item) => { 693 item.addEventListener('click', () => { 694 items.forEach((i) => i.classList.remove('active')); 695 item.classList.add('active'); 696 697 descContent.classList.remove('active'); 698 charContent.classList.remove('active'); 699 700 setTimeout(() => { 701 updateContent(item); 702 const targetContent = 703 item.querySelector('.cart-info__akk-item-name').textContent.trim() === 'ÐпиÑание' 704 ? descContent 705 : charContent; 706 targetContent.classList.add('active'); 707 }, 300); 708 }); 709 }); 710 711 function updateContent(item) { 712 const itemName = item.querySelector('.cart-info__akk-item-name'); 713 const itemTexts = item.querySelectorAll('.cart-info__akk-item-text'); 714 715 if (!itemName || !itemTexts.length) return; 716 717 descContent.innerHTML = ''; 718 charContent.innerHTML = ''; 719 720 const targetContent = 721 itemName.textContent.trim() === 'ÐпиÑание' 722 ? descContent 723 : charContent; 724
725 itemTexts.forEach((text) => { 726 const p = document.createElement('p'); 727 p.textContent = text.textContent.trim(); 728 targetContent.appendChild(p); 729 }); 730 } 731}); 732 733 734 735 736document.addEventListener("DOMContentLoaded", () => { 737 const mainImage = document.querySelector('.cart-img__main .cart-img__img'); 738 const mainLink = document.querySelector('.cart-img__main .cart-img__link'); 739 if (!mainImage) return; 740 741 742 const thumbnailsContainer = document.querySelector('.cart-img__other'); 743 const thumbnails = document.querySelectorAll('.cart-img__other .cart-img__img2'); 744 const nextButton = document.querySelector('.cart-img__next'); 745 const prevButton = document.querySelector('.cart-img__prev'); 746 747 let currentIndex = 0; 748 const visibleCount = 4; // ÐолиÑеÑÑво видимÑÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑ 749 let totalThumbnails = thumbnails.length; 750 751 // ÐбÑабоÑÑик на миниаÑÑÑÑ 752 thumbnails.forEach((thumbnail, index) => { 753 thumbnail.addEventListener('click', () => { 754 const newSrc = thumbnail.getAttribute('src'); 755 const newLink = thumbnail.getAttribute('data-link'); 756 mainImage.style.opacity = 0; 757 setTimeout(() => { 758 mainImage.setAttribute('src', newSrc); 759 mainLink.setAttribute('href', newLink); 760 mainImage.style.opacity = 1; 761 }, 300); 762 763 // УдалÑем акÑивнÑй клаÑÑ Ñо вÑÐµÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑ 764 thumbnails.forEach(img => img.classList.remove('active')); 765 766 // ÐобавлÑем акÑивнÑй клаÑÑ Ð½Ð° нажаÑÑÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑÑ 767 thumbnail.classList.add('active'); 768 }); 769 }); 770 771 // ÐниÑиализаÑиÑ: добавлÑем акÑивнÑй клаÑÑ Ðº пеÑÐ²Ð¾Ð¼Ñ ÑлеменÑÑ 772 thumbnails[0].classList.add('active'); 773 mainImage.setAttribute('src', thumbnails[0].getAttribute('src')); 774 775 // ФÑнкÑÐ¸Ñ Ð´Ð»Ñ Ñдвига миниаÑÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ translateX 776 function shiftThumbnails() { 777 const thumbnailWidth = thumbnails[0].offsetWidth + 14; // ШиÑина миниаÑÑÑÑ Ñ ÑÑÑÑом пÑомежÑÑка 778 const newTranslateX = -(currentIndex * thumbnailWidth); // ÐеÑемеÑение на ÑиÑÐ¸Ð½Ñ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑÑ 779 780 if (window.innerWidth < 1000) { 781 thumbnailsContainer.style.transform = `translateX(${newTranslateX}px)`; 782 } else { 783 thumbnailsContainer.style.transform = `translateY(${newTranslateX}px)`; 784 785 } 786 787 // УдалÑем клаÑÑ 'active-thumb' Ñ Ð²ÑÐµÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑ 788 thumbnails.forEach(thumbnail => thumbnail.classList.remove('active-thumb')); 789 790 // ÐобавлÑем клаÑÑ 'active-thumb' Ð´Ð»Ñ 4 видимÑÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑ 791 for (let i = currentIndex; i < currentIndex + visibleCount && i < totalThumbnails; i++) { 792 thumbnails[i].classList.add('active-thumb'); 793 } 794 } 795 796 797 if(totalThumbnails <= visibleCount) { 798 nextButton.remove(); 799 prevButton.remove(); 800 } 801 802 803 // ФÑнкÑÐ¸Ñ Ð´Ð»Ñ Ð¿ÐµÑеклÑÑÐµÐ½Ð¸Ñ Ð½Ð° ÑледÑÑÑÑÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑÑ 804 function nextThumbnail() { 805 if(totalThumbnails <= visibleCount) { 806 return false; 807 } 808 809 if (currentIndex < totalThumbnails - visibleCount) { 810 currentIndex++; // ÐеÑÐµÑ Ð¾Ð´ к ÑледÑÑÑей миниаÑÑÑе 811 } else { 812 currentIndex = 0; // ÐÑли доÑÑигнÑÑ ÐºÐ¾Ð½ÐµÑ, возвÑаÑаемÑÑ Ðº пеÑÐ²Ð¾Ð¼Ñ 813 } 814 shiftThumbnails(); 815 } 816 817 // ФÑнкÑÐ¸Ñ Ð´Ð»Ñ Ð¿ÐµÑеклÑÑÐµÐ½Ð¸Ñ Ð½Ð° пÑедÑдÑÑÑÑ Ð¼Ð¸Ð½Ð¸Ð°ÑÑÑÑ 818 function prevThumbnail() { 819 if(totalThumbnails <= visibleCount) { 820 return false;
821 } 822 if (currentIndex > 0) { 823 currentIndex--; // ÐеÑÐµÑ Ð¾Ð´ к пÑедÑдÑÑей миниаÑÑÑе 824 } else { 825 currentIndex = totalThumbnails - visibleCount; // ÐÑли на пеÑвой, возвÑаÑаемÑÑ Ðº поÑледней 826 } 827 shiftThumbnails(); 828 } 829 830 // ÐбÑабоÑÑик кнопки "Next" 831 nextButton.addEventListener('click', nextThumbnail); 832 833 // ÐбÑабоÑÑик кнопки "Prev" 834 prevButton.addEventListener('click', prevThumbnail); 835 836 // ÐниÑиализиÑÑем ÑÐ»Ð°Ð¹Ð´ÐµÑ 837 shiftThumbnails(); 838}); 839 840 841document.addEventListener("DOMContentLoaded", function() { 842 function moveElements() { 843 const cartTitle = document.querySelector(".cart-title"); 844 const cartDesc = document.querySelector(".cart-desc"); 845 const cartImg = document.querySelector(".cart-img_desc"); 846 847 if (window.innerWidth > 1000) { 848 if (cartTitle && cartImg && !cartImg.contains(cartTitle)) { 849 cartImg.appendChild(cartTitle); // ÐеÑемеÑаем .cart-title внÑÑÑÑ .cart-img 850 } 851 if (cartDesc && cartImg && !cartImg.contains(cartDesc)) { 852 cartImg.appendChild(cartDesc); // ÐеÑемеÑаем .cart-desc внÑÑÑÑ .cart-img 853 } 854 855 // УбедимÑÑ, ÑÑо .cart-title Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑ Ð¿ÐµÑед .cart-desc 856 if (cartTitle && cartDesc && cartImg.contains(cartTitle) && cartImg.contains(cartDesc)) { 857 cartImg.insertBefore(cartTitle, cartDesc); 858 } 859 } 860 } 861 862 // ÐÑовеÑка пÑи загÑÑзке ÑÑÑаниÑÑ 863 moveElements(); 864 865 // ÐÑовеÑка пÑи изменении ÑазмеÑа окна 866 window.addEventListener("resize", moveElements); 867 }); 868 869 870document.addEventListener("DOMContentLoaded", () => { 871 const menuCont = document.getElementById("menu"); 872 const menuBtn = document.getElementById("menu_btn"); 873 const menuClose = document.getElementById("menu_close"); 874 const menuBg = document.getElementById("menu_wr"); 875 876 if (!menuBtn) return; 877 if (!menuCont) return; 878 879 // ÐÑкÑÑÑие Ð¼ÐµÐ½Ñ Ð¿Ð¾ ÐºÐ»Ð¸ÐºÑ Ð½Ð° ÐºÐ½Ð¾Ð¿ÐºÑ 880 menuBtn.addEventListener("click", (e) => { 881 menuCont.classList.toggle('active'); 882 menuBg.classList.toggle('active'); 883 document.body.classList.toggle('no-scroll'); // ÐобавлÑем/ÑбиÑаем no-scroll 884 }); 885 886 // ÐакÑÑÑие Ð¼ÐµÐ½Ñ Ð¿Ð¾ ÐºÐ»Ð¸ÐºÑ Ð·Ð° его пÑеделами 887 document.addEventListener("click", (e) => { 888 if (!menuCont.contains(e.target) && !menuBtn.contains(e.target)) { 889 menuCont.classList.remove('active'); 890 if(menuBg && menuBg.classList.contains('active')) menuBg.classList.remove('active'); 891 document.body.classList.remove('no-scroll'); // УбиÑаем no-scroll 892 } 893 }); 894 895 // ÐакÑÑÑие Ð¼ÐµÐ½Ñ Ð¿Ð¾ ÐºÐ»Ð¸ÐºÑ Ð½Ð° ÐºÐ½Ð¾Ð¿ÐºÑ Ð·Ð°ÐºÑÑÑÐ¸Ñ 896 if(!!menuClose){ 897 menuClose.addEventListener("click", (e) => { 898 menuCont.classList.remove('active'); 899 if(menuBg && menuBg.classList.contains('active')) menuBg.classList.remove('active'); 900 document.body.classList.remove('no-scroll'); // УбиÑаем no-scroll 901 }); 902 } 903 904}); 905 906document.addEventListener("DOMContentLoaded", () => { 907 function initializeResponsiveSlider(options) { 908 const { sliderContainerSelector, slideSelector, containerSelector, nextButtonSelector, prevButtonSelector } = options; 909 910 function initializeSmallScreenSlider() { 911 const slider = document.querySelector(sliderContainerSelector); 912 const listContainer = document.querySelector(containerSelector); 913 914 if (!slider || !listContainer) { 915 return; 916 } 917 918 let isDown = false;
919 let startX; 920 let currentTranslate = 0; 921 let prevTranslate = 0; 922 let animationID; 923 let hasMoved = false; 924 925 const sliderWidth = slider.scrollWidth; 926 const containerWidth = listContainer.offsetWidth; 927 928 let totalPadding = window.innerWidth < 1600 ? 30 : 0; 929 930 function clamp(value, min, max) { 931 return Math.max(min, Math.min(value, max)); 932 } 933 934 slider.querySelectorAll('a').forEach(link => { 935 link.addEventListener('dragstart', e => e.preventDefault()); 936 937 link.addEventListener('click', e => { 938 if (hasMoved) e.preventDefault(); 939 }); 940 }); 941 942 function startDragging(e) { 943 isDown = true; 944 hasMoved = false; 945 slider.classList.add('active'); 946 startX = e.pageX || e.touches[0].pageX; 947 prevTranslate = currentTranslate; 948 animationID = requestAnimationFrame(animation); 949 } 950 951 function stopDragging() { 952 isDown = false; 953 slider.classList.remove('active'); 954 cancelAnimationFrame(animationID); 955 } 956 957 function moveSlider(e) { 958 if (!isDown) return; 959 const deltaX = (e.pageX || e.touches[0].pageX) - startX; 960 currentTranslate = prevTranslate + deltaX; 961 962 if (Math.abs(deltaX) > 5) { 963 hasMoved = true; 964 } 965 966 const maxTranslate = 0; 967 const minTranslate = containerWidth - sliderWidth - totalPadding; 968 currentTranslate = clamp(currentTranslate, minTranslate, maxTranslate); 969 } 970 971 slider.addEventListener('mousedown', startDragging); 972 slider.addEventListener('mouseleave', stopDragging); 973 slider.addEventListener('mouseup', stopDragging); 974 slider.addEventListener('mousemove', moveSlider); 975 976 slider.addEventListener('touchstart', startDragging); 977 slider.addEventListener('touchend', stopDragging); 978 slider.addEventListener('touchmove', moveSlider); 979 980 function animation() { 981 slider.style.transform = `translateX(${currentTranslate}px)`; 982 if (isDown) requestAnimationFrame(animation); 983 } 984 } 985 986 function initializeLargeScreenSlider() { 987 const slider = document.querySelector(sliderContainerSelector); 988 if (!slider) { 989 return; 990 } 991 992 const slides = slider.querySelectorAll(slideSelector); 993 const listContainer = document.querySelector(containerSelector); 994 995 if (!slides.length || !listContainer) { 996 console.error('ÐевеÑнÑе ÑелекÑоÑÑ Ð¸Ð»Ð¸ оÑÑÑÑÑÑвÑÑÑ ÑлеменÑÑ.'); 997 return; 998 } 999 1000 const nextButton = document.querySelector(nextButtonSelector); 1001 const prevButton = document.querySelector(prevButtonSelector); 1002 1003 if (!nextButton || !prevButton) { 1004 console.error('Ðе Ð½Ð°Ð¹Ð´ÐµÐ½Ñ ÐºÐ½Ð¾Ð¿ÐºÐ¸ пеÑеклÑÑениÑ. УбедиÑеÑÑ, ÑÑо ÑелекÑоÑÑ ÐºÐ½Ð¾Ð¿Ð¾Ðº ÑÐºÐ°Ð·Ð°Ð½Ñ Ð²ÐµÑно.'); 1005 return; 1006 } 1007 1008 const visibleSlides = 5; // ÐолиÑеÑÑво оÑобÑажаемÑÑ Ñлайдов 1009 let currentIndex = 0; // ТекÑÑий пеÑвÑй видимÑй Ñлайд 1010 1011 // УÑÑанавливаем ÑиÑÐ¸Ð½Ñ Ð¾Ð´Ð½Ð¾Ð³Ð¾ Ñлайда и наÑалÑнÑе позиÑии 1012 const slideWidth = slides[0].offsetWidth; 1013 const gap = parseInt(window.getComputedStyle(slider).gap) || 0; // УÑиÑÑваем `gap`, еÑли он еÑÑÑ 1014 const slideStep = slideWidth + gap; 1015 1016 // ФÑнкÑÐ¸Ñ Ð¾Ð±Ð½Ð¾Ð²Ð»ÐµÐ½Ð¸Ñ Ð¿Ð¾Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ ÑлайдеÑа 1017 function updateSliderPosition() { 1018 const offset = -(currentIndex * slideStep); 1019 slider.style.transform = `translateX(${offset}px)`; 1020 } 1021 1022 // ÐбÑабоÑÑик Ð´Ð»Ñ ÐºÐ½Ð¾Ð¿ÐºÐ¸ "ÐпеÑÑд" 1023 nextButton.addEventListener('click', () => { 1024 if (currentIndex < slides.length - visibleSlides) { 1025 currentIndex++; 1026 } else { 1027 currentIndex = 0; // ÐозвÑÐ°Ñ Ðº пеÑÐ²Ð¾Ð¼Ñ ÑÐ»Ð°Ð¹Ð´Ñ 1028 } 1029 updateSliderPosition(); 1030 }); 1031 1032 // ÐбÑабоÑÑик Ð´Ð»Ñ ÐºÐ½Ð¾Ð¿ÐºÐ¸ "Ðазад" 1033 prevButton.addEventListener('click', () => { 1034 if (currentIndex > 0) { 1035 currentIndex--; 1036 } else { 1037 currentIndex = slides.length - visibleSlides; // ÐеÑÐµÑ Ð¾Ð´ к поÑледним видимÑм Ñлайдам 1038 } 1039 updateSliderPosition(); 1040 }); 1041 1042 // ÐниÑиализаÑÐ¸Ñ 1043 updateSliderPosition(); 1044 } 1045 1046 if (window.innerWidth <= 1600) { 1047 initializeSmallScreenSlider(); 1048 } else { 1049 initializeLargeScreenSlider(); 1050 } 1051 } 1052 1053 initializeResponsiveSlider({ 1054 sliderContainerSelector: '.category-list__cont', 1055 slideSelector: '.category-list__item', 1056 containerSelector: '.category-list', 1057 nextButtonSelector: '.next-button', 1058 prevButtonSelector: '.prev-button' 1059 }); 1060}); 1061 1062 1063 1064// document.addEventListener("DOMContentLoaded", function () { 1065// const container = document.querySelector("#listContainer"); 1066// const list = document.querySelector("#list"); 1067// const items = document.querySelectorAll(".list-item"); 1068 1069// // ÐаÑÑÑойки ÑлайдеÑа 1070// const slideWidth = items[0].offsetWidth; // ШиÑина одного Ñлайда 1071// const slideGap = 24; // РаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ Ñлайдами 1072// const visibleSlides = 3; // ÐолиÑеÑÑво видимÑÑ Ñлайдов 1073// const totalSlides = items.length; 1074// let currentIndex = 0; 1075 1076// // УÑÑанавливаем ÑиÑÐ¸Ð½Ñ ÑпиÑка 1077// list.style.width = `${(slideWidth + slideGap) * totalSlides - slideGap}
1077px`; 1078 1079// // Создаем кнопки навигаÑии 1080// const prevButton = document.createElement("button"); 1081// const nextButton = document.createElement("button"); 1082// prevButton.textContent = "â"; 1083// nextButton.textContent = "â"; 1084// prevButton.classList.add("slider-btn", "slider-btn--prev"); 1085// nextButton.classList.add("slider-btn", "slider-btn--next"); 1086 1087// container.appendChild(prevButton); 1088// container.appendChild(nextButton); 1089 1090// // ФÑнкÑÐ¸Ñ Ð´Ð»Ñ Ð¿ÐµÑемеÑÐµÐ½Ð¸Ñ Ñлайдов 1091// const updateSliderPosition = () => { 1092// const offset = -(slideWidth + slideGap) * currentIndex; 1093// list.style.transform = `translateX(${offset}px)`; 1094// }; 1095 1096// // ÐбÑабоÑÑики ÑобÑÑий Ð´Ð»Ñ ÐºÐ½Ð¾Ð¿Ð¾Ðº 1097// prevButton.addEventListener("click", () => { 1098// if (currentIndex > 0) { 1099// currentIndex--; 1100// updateSliderPosition(); 1101// } 1102// }); 1103 1104// nextButton.addEventListener("click", () => { 1105// if (currentIndex < totalSlides - visibleSlides) { 1106// currentIndex++; 1107// updateSliderPosition(); 1108// } 1109// }); 1110 1111// // ÐобавлÑем ÑеÑайз обÑабоÑÑик Ð´Ð»Ñ Ð°Ð´Ð°Ð¿ÑивноÑÑи 1112// window.addEventListener("resize", () => { 1113// // ÐеÑеÑÑиÑÑваем ÑиÑÐ¸Ð½Ñ Ñлайдов пÑи изменении ÑазмеÑа окна 1114// list.style.transition = "none"; 1115// currentIndex = 0; // СбÑаÑÑваем позиÑÐ¸Ñ Ð½Ð° наÑало 1116// updateSliderPosition(); 1117// setTimeout(() => { 1118// list.style.transition = "transform 0.3s ease"; 1119// }); 1120// }); 1121// }); 1122 1123 1124document.addEventListener('DOMContentLoaded', () => { 1125 const sliders = document.querySelectorAll('.list-containerr'); 1126 1127 if (sliders.length > 0) { 1128 sliders.forEach((slider) => { 1129 new Swiper(slider, { 1130 preventClicks: true, 1131 preventClicksPropagation: true, 1132 slidesPerView: 5, 1133 spaceBetween: 55, 1134 breakpoints: { 1135 120: { 1136 slidesPerView: 1.05, 1137 spaceBetween: 20, 1138 loop: true, 1139 }, 1140 370: { 1141 slidesPerView: 1.1, 1142 spaceBetween: 20, 1143 loop: true, 1144 }, 1145 430: { 1146 slidesPerView: 1.3, 1147 spaceBetween: 20, 1148 loop: true, 1149 }, 1150 620: { 1151 slidesPerView: 1.8, 1152 spaceBetween: 20, 1153 loop: true, 1154 }, 1155 767: { 1156 slidesPerView: 2.2, 1157 spaceBetween: 20, 1158 loop: true, 1159 }, 1160 992: { 1161 slidesPerView: 3, 1162 spaceBetween: 25, 1163 }, 1164 1250: { 1165 slidesPerView: 4, 1166 spaceBetween: 35, 1167 }, 1168 1650: { 1169 slidesPerView: 5, 1170 spaceBetween: 55, 1171 }, 1172 }, 1173 }); 1174 }); 1175 } 1176}); 1177 1178 1179// document.addEventListener("DOMContentLoaded", () => { 1180// function initializeList({ 1181// sliderContainerSelector, 1182// slideSelector, 1183// containerSelector 1184// }) { 1185// const slider = document.querySelector(sliderContainerSelector); 1186// const listContainer = document.querySelector(containerSelector); 1187 1188// if (!slider || !listContainer) { 1189// return; 1190// } 1191 1192// let isDown = false; 1193// let startX; 1194// let currentTranslate = 0; 1195// let prevTranslate = 0; 1196// let animationID; 1197// let hasMoved = false; 1198 1199// const sliderWidth = slider.scrollWidth; 1200// const containerWidth = listContainer.offsetWidth; 1201 1202// let totalPadding = 0 1203 1204 1205// if (window.innerWidth < 1600) { 1206// totalPadding = 20; 1207// } else { 1208// totalPadding = 0; 1209// return 1210// } 1211 1212// function clamp(value, min, max) {
1213// return Math.max(min, Math.min(value, max)); 1214// } 1215 1216// slider.querySelectorAll('a').forEach(link => { 1217// link.addEventListener('dragstart', e => e.preventDefault()); 1218 1219// link.addEventListener('click', e => { 1220// if (hasMoved) e.preventDefault(); 1221// }); 1222// }); 1223 1224// function startDragging(e) { 1225// isDown = true; 1226// hasMoved = false; 1227// slider.classList.add('active'); 1228// startX = e.pageX || e.touches[0].pageX; 1229// prevTranslate = currentTranslate; 1230// animationID = requestAnimationFrame(animation); 1231// } 1232 1233// function stopDragging() { 1234// isDown = false; 1235// slider.classList.remove('active'); 1236// cancelAnimationFrame(animationID); 1237// } 1238 1239// function moveSlider(e) { 1240// if (!isDown) return; 1241// const deltaX = (e.pageX || e.touches[0].pageX) - startX; 1242// currentTranslate = prevTranslate + deltaX; 1243 1244// if (Math.abs(deltaX) > 5) { 1245// hasMoved = true; 1246// } 1247 1248// const maxTranslate = 0; 1249// const minTranslate = containerWidth - sliderWidth - totalPadding; 1250// currentTranslate = clamp(currentTranslate, minTranslate, maxTranslate); 1251// } 1252 1253// slider.addEventListener('mousedown', startDragging); 1254// slider.addEventListener('mouseleave', stopDragging); 1255// slider.addEventListener('mouseup', stopDragging); 1256// slider.addEventListener('mousemove', moveSlider); 1257 1258// slider.addEventListener('touchstart', startDragging); 1259// slider.addEventListener('touchend', stopDragging); 1260// slider.addEventListener('touchmove', moveSlider); 1261 1262// function animation() { 1263// slider.style.transform = `translateX(${currentTranslate}px)`; 1264// if (isDown) requestAnimationFrame(animation); 1265// } 1266// } 1267 1268// initializeList({ 1269// sliderContainerSelector: '#list', 1270// slideSelector: '.list-item', 1271// containerSelector: '.list-container' 1272// }); 1273 1274// }); 1275 1276//=========== Slider-info ============================================================================================================================================ 1277 1278document.addEventListener('DOMContentLoaded', function () { 1279 const sliders = document.querySelectorAll('.info-slider__slider'); 1280 1281 if (sliders.length > 0) {
1282 sliders.forEach(slider => { 1283 new Swiper(slider, { 1284 initialSlide: 1, 1285 autoHeight: true, 1286 pagination: { 1287 el: '.swiper-pagination', 1288 clickable: true, 1289 }, 1290 slidesPerView: 1, 1291 spaceBetween: 10, 1292 speed: 700, 1293 }); 1294 }); 1295 } 1296}); 1297 1298// Slider-items 1299 1300document.addEventListener('DOMContentLoaded', function () { 1301 const sliders = document.querySelectorAll('.items-electroplating__slider'); 1302 1303 if (sliders.length > 0) { 1304 sliders.forEach(slider => { 1305 const swiper = new Swiper(slider, { 1306 initialSlide: 1, 1307 autoHeight: true, 1308 pagination: { 1309 el: '.swiper-pagination', 1310 clickable: true, 1311 }, 1312 slidesPerView: 7, 1313 spaceBetween: 53, 1314 speed: 700, 1315 breakpoints: { 1316 320: { 1317 slidesPerView: 1.35, 1318 spaceBetween: 20, 1319 loop: true, 1320 }, 1321 360: { 1322 slidesPerView: 1.5, 1323 spaceBetween: 20, 1324 loop: true, 1325 }, 1326 400: { 1327 slidesPerView: 1.8, 1328 spaceBetween: 20, 1329 loop: true, 1330 }, 1331 576: { 1332 slidesPerView: 2.2, 1333 spaceBetween: 20, 1334 loop: true, 1335 }, 1336 768: { 1337 slidesPerView: 3.2, 1338 spaceBetween: 20, 1339 loop: false, 1340 }, 1341 992: { 1342 slidesPerView: 4.7, 1343 spaceBetween: 20, 1344 }, 1345 1150: { 1346 slidesPerView: 5.2, 1347 spaceBetween: 20, 1348 }, 1349 1350: { 1350 slidesPerView: 6.2, 1351 spaceBetween: 30, 1352 }, 1353 1600: { 1354 slidesPerView: 7, 1355 spaceBetween: 40, 1356 }, 1357 1650: { 1358 slidesPerView: 7, 1359 spaceBetween: 53, 1360 }, 1361 }, 1362 on: { 1363 slideChangeTransitionEnd: function () { 1364 const screenWidth = window.innerWidth; 1365 1366 if (screenWidth <= 768) { 1367 this.params.centeredSlides = true; 1368 this.update(); 1369 this.slideTo(this.activeIndex, 700, true); 1370 } 1371 }, 1372 }, 1373 }); 1374 }); 1375 } 1376}); 1377 1378// electroplating-slider 1379 1380document.addEventListener('DOMContentLoaded', function () { 1381 const sliders = document.querySelectorAll('[data-electroplating-slider]'); 1382 1383 if (sliders.length > 0) {
1384 sliders.forEach(slider => { 1385 const swiper = new Swiper(slider, { 1386 initialSlide: 1, 1387 autoHeight: true, 1388 pagination: { 1389 el: '.swiper-pagination', 1390 clickable: true, 1391 }, 1392 navigation: { 1393 nextEl: '.arrow-slider-next', 1394 prevEl: '.arrow-slider-prev', 1395 }, 1396 slidesPerView: 5, 1397 spaceBetween: 53, 1398 speed: 700, 1399 //centeredSlides: true, 1400 loop: false, 1401 breakpoints: { 1402 100: { 1403 slidesPerView: 1.1, 1404 spaceBetween: 20, 1405 centeredSlides: false, 1406 }, 1407 320: { 1408 slidesPerView: 1.2, 1409 spaceBetween: 20, 1410 centeredSlides: false, 1411 }, 1412 360: { 1413 slidesPerView: 1.2, 1414 spaceBetween: 20, 1415 centeredSlides: false, 1416 }, 1417 576: { 1418 slidesPerView: 2.1, 1419 spaceBetween: 20, 1420 centeredSlides: false, 1421 }, 1422 768: { 1423 slidesPerView: 2.5, 1424 spaceBetween: 20, 1425 }, 1426 1150: { 1427 slidesPerView: 3.5, 1428 spaceBetween: 20, 1429 }, 1430 1350: { 1431 slidesPerView: 3.5, 1432 spaceBetween: 30, 1433 }, 1434 1600: { 1435 slidesPerView: 4, 1436 spaceBetween: 80, 1437 }, 1438 1650: { 1439 slidesPerView: 4, 1440 spaceBetween: 80, 1441 }, 1442 }, 1443 }); 1444 }); 1445 } 1446}); 1447 1448// article-news-slider 1449 1450document.addEventListener('DOMContentLoaded', function () { 1451 const sliders = document.querySelectorAll('[data-article-news-slider]'); 1452 1453 if (sliders.length > 0) {
1454 sliders.forEach(slider => { 1455 const swiper = new Swiper(slider, { 1456 //initialSlide: 1, 1457 autoHeight: false, 1458 pagination: { 1459 el: '.swiper-pagination', 1460 clickable: true, 1461 }, 1462 navigation: { 1463 nextEl: '.arrow-slider-next', 1464 prevEl: '.arrow-slider-prev', 1465 }, 1466 slidesPerView: 3, 1467 spaceBetween: 53, 1468 speed: 700, 1469 // centeredSlides: true, 1470 loop: false, 1471 breakpoints: { 1472 100: { 1473 slidesPerView: 1, 1474 spaceBetween: 20, 1475 centeredSlides: false, 1476 }, 1477 320: { 1478 slidesPerView: 1, 1479 spaceBetween: 20, 1480 centeredSlides: false, 1481 }, 1482 360: { 1483 slidesPerView: 1, 1484 spaceBetween: 20, 1485 centeredSlides: false, 1486 }, 1487 576: { 1488 slidesPerView: 1, 1489 spaceBetween: 20, 1490 centeredSlides: false, 1491 }, 1492 768: { 1493 slidesPerView: 1.7, 1494 spaceBetween: 20, 1495 }, 1496 1497 992: { 1498 slidesPerView: 1.99, 1499 spaceBetween: 20, 1500 }, 1501 // 1150: { 1502 // slidesPerView: 2.2, 1503 // spaceBetween: 43, 1504 // }, 1505 1350: { 1506 slidesPerView: 1.99, 1507 spaceBetween: 20, 1508 }, 1509 1600: { 1510 slidesPerView: 2.95, 1511 spaceBetween: 43, 1512 }, 1513 1650: { 1514 slidesPerView: 2.95, 1515 spaceBetween: 43, 1516 }, 1517 }, 1518 }); 1519 }); 1520 } 1521}); 1522 1523 1524// article-slider-mob 1525 1526document.addEventListener('DOMContentLoaded', function () { 1527 const sliders = document.querySelectorAll('[data-article-slider-mob]'); 1528 1529 if (sliders.length > 0) {
1530 sliders.forEach(slider => { 1531 const swiper = new Swiper(slider, { 1532 //initialSlide: 1, 1533 autoHeight: false, 1534 pagination: { 1535 el: '.swiper-pagination', 1536 clickable: true, 1537 }, 1538 slidesPerView: 3, 1539 spaceBetween: 53, 1540 speed: 700, 1541 // centeredSlides: true, 1542 loop: false, 1543 breakpoints: { 1544 100: { 1545 slidesPerView: 1, 1546 spaceBetween: 20, 1547 centeredSlides: false, 1548 }, 1549 320: { 1550 slidesPerView: 1, 1551 spaceBetween: 20, 1552 centeredSlides: false, 1553 }, 1554 360: { 1555 slidesPerView: 1, 1556 spaceBetween: 20, 1557 centeredSlides: false, 1558 }, 1559 576: { 1560 slidesPerView: 1, 1561 spaceBetween: 20, 1562 centeredSlides: false, 1563 }, 1564 768: { 1565 slidesPerView: 2, 1566 spaceBetween: 20, 1567 }, 1568 1569 992: { 1570 slidesPerView: 2, 1571 spaceBetween: 43, 1572 }, 1573 // 1150: { 1574 // slidesPerView: 2.2, 1575 // spaceBetween: 43, 1576 // }, 1577 1350: { 1578 slidesPerView: 1.99, 1579 spaceBetween: 43, 1580 }, 1581 1600: { 1582 slidesPerView: 2.95, 1583 spaceBetween: 43, 1584 }, 1585 1650: { 1586 slidesPerView: 2.95, 1587 spaceBetween: 43, 1588 }, 1589 }, 1590 }); 1591 }); 1592 } 1593}); 1594 1595 1596//======= select ================================================================================================================================================= 1597 1598let selects = document.getElementsByTagName('select'); 1599if (selects.length > 0) { 1600 selects_init(); 1601} 1602function selects_init() { 1603 for (let index = 0; index < selects.length; index++) { 1604 const select = selects[index]; 1605 if (select.matches('[data-native-select]')) { 1606 continue; 1607 } 1608 select_init(select); 1609 } 1610 //select_callback(); 1611 document.addEventListener('click', function (e) { 1612 selects_close(e); 1613 }); 1614 document.addEventListener('keydown', function (e) { 1615 if (e.which == 27) { 1616 selects_close(e); 1617 } 1618 }); 1619} 1620function selects_close(e) { 1621 const selects = document.querySelectorAll('.select'); 1622 if (!e.target.closest('.select')) { 1623 for (let index = 0; index < selects.length; index++) { 1624 const select = selects[index]; 1625 const select_body_options = select.querySelector('.select__options'); 1626 select.classList.remove('_active'); 1627 _slideUp(select_body_options, 100); 1628 } 1629 } 1630} 1631function select_init(select) { 1632 const select_parent = select.parentElement; 1633 const select_modifikator = select.getAttribute('class'); 1634 const select_selected_option = select.querySelector('option:checked'); 1635 select.setAttribute('data-default', select_selected_option.value); 1636 select.style.display = 'none'; 1637 1638 select_parent.insertAdjacentHTML('beforeend', '<div class="select select_' + select_modifikator + '"></div>'); 1639 1640 let new_select = select.parentElement.querySelector('.select'); 1641 new_select.appendChild(select); 1642 select_item(select); 1643} 1644function select_item(select) { 1645 const select_parent = select.parentElement; 1646 const select_items = select_parent.querySelector('.select__item'); 1647 const select_options = select.querySelectorAll('option'); 1648 const select_selected_option = select.querySelector('option:checked'); 1649 const select_selected_text = select_selected_option.text; 1650 const select_type = select.getAttribute('data-type'); 1651 1652 if (select_items) { 1653 select_items.remove(); 1654 } 1655 1656 let select_type_content = ''; 1657 if (select_type == 'input') { 1658 select_type_content = '<div class="select__value"><input autocomplete="off" type="text" name="form[]" value="' + select_selected_text + '" data-error="ÐÑибка" data-value="' + select_selected_text + '" class="select__input"></div>'; 1659 } else { 1660 select_type_content = '<div class="select__value"><span>' + select_selected_text + '</span></div>'; 1661 } 1662 1663 select_parent.insertAdjacentHTML('beforeend', 1664 '<div class="select__item">' + 1665 '<div class="select__title">' + select_type_content + '</div>' + 1666 '<div class="select__options">' + select_get_options(select_options) + '</div>' + 1667 '</div></div>'); 1668 1669 select_actions(select, select_parent); 1670} 1671function select_actions(original, select) { 1672 const select_item = select.querySelector('.select__item'); 1673 const select_body_options = select.querySelector('.select__options'); 1674 const select_options = select.querySelectorAll('.select__option'); 1675 const select_type = original.getAttribute('data-type'); 1676 const select_input = select.querySelector('.select__input'); 1677 1678 select_item.addEventListener('click', function () { 1679 let selects = document.querySelectorAll('.select'); 1680 for (let index = 0; index < selects.length; index++) { 1681 const select = selects[index]; 1682 const select_body_options = select.querySelector('.select__options'); 1683 if (select != select_item.closest('.select')) { 1684 select.classList.remove('_active'); 1685 _slideUp(select_body_options, 100); 1686 } 1687 } 1688 _slideToggle(select_body_options, 100); 1689 select.classList.toggle('_active'); 1690 }); 1691 1692 for (let index = 0; index < select_options.length; index++) { 1693 const select_option = select_options[index]; 1694 const select_option_value = select_option.getAttribute('data-value'); 1695 const select_option_text = select_option.innerHTML; 1696 1697 if (select_type == 'input') { 1698 select_input.addEventListener('keyup', select_search); 1699 } else { 1700 if (select_option.getAttribute('data-value') == original.value) { 1701 select_option.style.display = 'none'; 1702 } 1703 } 1704 select_option.addEventListener('click', function () { 1705 const originalForm = original.closest('form'); 1706 if(originalForm && originalForm.getAttribute('data-submit')) { 1707 resetFormFields(originalForm); 1708 } 1709 1710 for (let index = 0; index < select_options.length; index++) { 1711 const el = select_options[index]; 1712 el.style.display = 'block'; 1713 } 1714 if (select_type == 'input') { 1715 select_input.value = select_option_text; 1716 original.value = select_option_value; 1717 } else { 1718 select.querySelector('.select__value').innerHTML = '<span>' + select_option_text + '</span>'; 1719 original.value = select_option_value; 1720 select_option.style.display = 'none'; 1721 } 1722 1723 original.dispatchEvent(new Event('change', { bubbles: true })); 1724 1725 if(originalForm && originalForm.getAttribute('data-submit')) { 1726 originalForm.dispatchEvent(new Event('submit')); 1727 } 1728 }); 1729 } 1730} 1731function select_get_options(select_options) { 1732 if (select_options) { 1733 let select_options_content = ''; 1734 for (let index = 0; index < select_options.length; index++) { 1735 const select_option = select_options[index]; 1736 const select_option_value = select_option.value; 1737 if (select_option_value != '') { 1738 const select_option_text = select_option.text; 1739 select_options_content = select_options_content + '<div data-value="' + select_option_value + '" class="select__option">' + select_option_text + '</div>'; 1740 } 1741 } 1742 return select_options_content; 1743 } 1744} 1745function select_search(e) { 1746 let select_block = e.target.closest('.select ').querySelector('.select__options'); 1747 let select_options = e.target.closest('.select ').querySelectorAll('.select__option'); 1748 let select_search_text = e.target.value.toUpperCase(); 1749 1750 for (let i = 0; i < select_options.length; i++) { 1751 let select_option = select_options[i]; 1752 let select_txt_value = select_option.textContent || select_option.innerText; 1753 if (select_txt_value.toUpperCase().indexOf(select_search_text) > -1) { 1754 select_option.style.display = ""; 1755 } else { 1756 select_option.style.display = "none"; 1757 } 1758 } 1759} 1760function selects_update_all() { 1761 let selects = document.querySelectorAll('select:not([data-native-select])'); 1762 if (selects) { 1763 for (let index = 0; index < selects.length; index++) { 1764 const select = selects[index]; 1765 select_item(select); 1766 } 1767 } 1768} 1769 1770 1771let _slideUp = (target, duration = 500) => { 1772 target.style.transitionProperty = 'height, margin, padding'; 1773 target.style.transitionDuration = duration + 'ms'; 1774 target.style.height = target.offsetHeight + 'px'; 1775 target.offsetHeight; 1776 target.style.overflow = 'hidden'; 1777 target.style.height = 0; 1778 target.style.paddingTop = 0; 1779 target.style.paddingBottom = 0; 1780 target.style.marginTop = 0; 1781 target.style.marginBottom = 0; 1782 window.setTimeout(() => { 1783 target.style.display = 'none'; 1784 target.style.removeProperty('height'); 1785 target.style.removeProperty('padding-top'); 1786 target.style.removeProperty('padding-bottom'); 1787 target.style.removeProperty('margin-top'); 1788 target.style.removeProperty('margin-bottom'); 1789 target.style.removeProperty('overflow'); 1790 target.style.removeProperty('transition-duration'); 1791 target.style.removeProperty('transition-property'); 1792 target.classList.remove('_slide'); 1793 }, duration); 1794} 1795let _slideDown = (target, duration = 500) => { 1796 target.style.removeProperty('display'); 1797 let display = window.getComputedStyle(target).display; 1798 if (display === 'none') 1799 display = 'block'; 1800 1801 target.style.display = display; 1802 let height = target.offsetHeight; 1803 target.style.overflow = 'hidden'; 1804 target.style.height = 0; 1805 target.style.paddingTop = 0; 1806 target.style.paddingBottom = 0; 1807 target.style.marginTop = 0; 1808 target.style.marginBottom = 0; 1809 target.offsetHeight; 1810 target.style.transitionProperty = "height, margin, padding"; 1811 target.style.transitionDuration = duration + 'ms'; 1812 target.style.height = height + 'px'; 1813 target.style.removeProperty('padding-top'); 1814 target.style.removeProperty('padding-bottom'); 1815 target.style.removeProperty('margin-top'); 1816 target.style.removeProperty('margin-bottom'); 1817 window.setTimeout(() => { 1818 target.style.removeProperty('height'); 1819 target.style.removeProperty('overflow'); 1820 target.style.removeProperty('transition-duration'); 1821 target.style.removeProperty('transition-property'); 1822 target.classList.remove('_slide'); 1823 }, duration); 1824} 1825let _slideToggle = (target, duration = 500) => { 1826 if (!target.classList.contains('_slide')) { 1827 target.classList.add('_slide'); 1828 if (window.getComputedStyle(target).display === 'none') { 1829 return _slideDown(target, duration); 1830 } else { 1831 return _slideUp(target, duration); 1832 } 1833 } 1834} 1835 1836//===== tabs =================================================================================================================================================== 1837 1838 function tabs() { 1839 const tabs = document.querySelectorAll('[data-tabs]'); 1840 let tabsActiveHash = []; 1841 1842 if (tabs.length > 0) {
1843 tabs.forEach((tabsBlock, index) => { 1844 tabsBlock.classList.add('_tab-init'); 1845 tabsBlock.setAttribute('data-tabs-index', index); 1846 tabsBlock.addEventListener("click", setTabsAction); 1847 initTabs(tabsBlock); 1848 }); 1849 1850 let mdQueriesArray = dataMediaQueries(tabs, "tabs"); 1851 if (mdQueriesArray && mdQueriesArray.length) { 1852 mdQueriesArray.forEach(mdQueriesItem => { 1853 mdQueriesItem.matchMedia.addEventListener("change", function () { 1854 setTitlePosition(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia); 1855 }); 1856 setTitlePosition(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia); 1857 }); 1858 } 1859 } 1860 1861 function setTitlePosition(tabsMediaArray, matchMedia) { 1862 tabsMediaArray.forEach(tabsMediaItem => { 1863 tabsMediaItem = tabsMediaItem.item; 1864 let tabsTitles = tabsMediaItem.querySelector('[data-tabs-titles]'); 1865 let tabsTitleItems = tabsMediaItem.querySelectorAll('[data-tabs-title]'); 1866 let tabsContent = tabsMediaItem.querySelector('[data-tabs-body]'); 1867 let tabsContentItems = tabsMediaItem.querySelectorAll('[data-tabs-item]'); 1868 tabsTitleItems = Array.from(tabsTitleItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem); 1869 tabsContentItems = Array.from(tabsContentItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem); 1870 tabsContentItems.forEach((tabsContentItem, index) => { 1871 if (matchMedia.matches) { 1872 tabsContent.append(tabsTitleItems[index]); 1873 tabsContent.append(tabsContentItem); 1874 tabsMediaItem.classList.add('_tab-spoller'); 1875 } else { 1876 tabsTitles.append(tabsTitleItems[index]); 1877 tabsMediaItem.classList.remove('_tab-spoller'); 1878 } 1879 }); 1880 }); 1881 } 1882 1883 function initTabs(tabsBlock) { 1884 let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-titles]>*'); 1885 let tabsContent = tabsBlock.querySelectorAll('[data-tabs-body]>*'); 1886 const tabsBlockIndex = tabsBlock.dataset.tabsIndex; 1887 const tabsActiveHashBlock = tabsActiveHash[0] == tabsBlockIndex; 1888 1889 if (tabsActiveHashBlock) { 1890 const tabsActiveTitle = tabsBlock.querySelector('[data-tabs-titles]>._tab-active'); 1891 tabsActiveTitle ? tabsActiveTitle.classList.remove('_tab-active') : null; 1892 } 1893 if (tabsContent.length) { 1894 tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock); 1895 tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock); 1896 tabsContent.forEach((tabsContentItem, index) => { 1897 tabsTitles[index].setAttribute('data-tabs-title', ''); 1898 tabsContentItem.setAttribute('data-tabs-item', ''); 1899 1900 if (tabsActiveHashBlock && index == tabsActiveHash[1]) { 1901 tabsTitles[index].classList.add('_tab-active'); 1902 } 1903 tabsContentItem.hidden = !tabsTitles[index].classList.contains('_tab-active'); 1904 }); 1905 } 1906 } 1907 function setTabsStatus(tabsBlock) { 1908 let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-title]'); 1909 let tabsContent = tabsBlock.querySelectorAll('[data-tabs-item]'); 1910 const tabsBlockIndex = tabsBlock.dataset.tabsIndex; 1911 function isTabsAnamate(tabsBlock) { 1912 if (tabsBlock.hasAttribute('data-tabs-animate')) { 1913 return tabsBlock.dataset.tabsAnimate > 0 ? Number(tabsBlock.dataset.tabsAnimate) : 500; 1914 } 1915 } 1916 const tabsBlockAnimate = isTabsAnamate(tabsBlock); 1917 if (tabsContent.length > 0) { 1918 const isHash = tabsBlock.hasAttribute('data-tabs-hash'); 1919 tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock); 1920 tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock); 1921 tabsContent.forEach((tabsContentItem, index) => { 1922 if (tabsTitles[index].classList.contains('_tab-active')) { 1923 if (tabsBlockAnimate) { 1924 _slideDown(tabsContentItem, tabsBlockAnimate); 1925 } else { 1926 tabsContentItem.hidden = false; 1927 } 1928 if (isHash && !tabsContentItem.closest('.popup')) { 1929 setHash(`tab-${tabsBlockIndex}-${index}`); 1930 } 1931 } else { 1932 if (tabsBlockAnimate) { 1933 _slideUp(tabsContentItem, tabsBlockAnimate); 1934 } else { 1935 tabsContentItem.hidden = true; 1936 } 1937 } 1938 }); 1939 } 1940 } 1941 function setTabsAction(e) { 1942 const el = e.target; 1943 if (el.closest('[data-tabs-title]')) { 1944 const tabTitle = el.closest('[data-tabs-title]'); 1945 const tabsBlock = tabTitle.closest('[data-tabs]'); 1946 if (!tabTitle.classList.contains('_tab-active') && !tabsBlock.querySelector('._slide')) { 1947 let tabActiveTitle = tabsBlock.querySelectorAll('[data-tabs-title]._tab-active'); 1948 tabActiveTitle.length ? tabActiveTitle = Array.from(tabActiveTitle).filter(item => item.closest('[data-tabs]') === tabsBlock) : null; 1949 tabActiveTitle.length ? tabActiveTitle[0].classList.remove('_tab-active') : null; 1950 tabTitle.classList.add('_tab-active'); 1951 setTabsStatus(tabsBlock); 1952 } 1953 e.preventDefault(); 1954 } 1955 } 1956} 1957 1958tabs(); 1959 1960 1961 function dataMediaQueries(array, dataSetValue) { 1962 const media = Array.from(array).filter(function (item, index, self) { 1963 if (item.dataset[dataSetValue]) { 1964 return item.dataset[dataSetValue].split(",")[0]; 1965 } 1966 }); 1967 if (media.length) { 1968 const breakpointsArray = [];
1969 media.forEach(item => { 1970 const params = item.dataset[dataSetValue]; 1971 const breakpoint = {}; 1972 const paramsArray = params.split(","); 1973 breakpoint.value = paramsArray[0]; 1974 breakpoint.type = paramsArray[1] ? paramsArray[1].trim() : "max"; 1975 breakpoint.item = item; 1976 breakpointsArray.push(breakpoint); 1977 }); 1978 let mdQueries = breakpointsArray.map(function (item) { 1979 return '(' + item.type + "-width: " + item.value + "px)," + item.value + ',' + item.type; 1980 }); 1981 mdQueries = uniqArray(mdQueries); 1982 const mdQueriesArray = []; 1983 1984 if (mdQueries.length) { 1985 mdQueries.forEach(breakpoint => { 1986 const paramsArray = breakpoint.split(","); 1987 const mediaBreakpoint = paramsArray[1]; 1988 const mediaType = paramsArray[2]; 1989 const matchMedia = window.matchMedia(paramsArray[0]); 1990 const itemsArray = breakpointsArray.filter(function (item) { 1991 if (item.value === mediaBreakpoint && item.type === mediaType) { 1992 return true; 1993 } 1994 }); 1995 mdQueriesArray.push({ 1996 itemsArray, 1997 matchMedia 1998 }) 1999 }); 2000 return mdQueriesArray; 2001 } 2002 } 2003} 2004function uniqArray(array) { 2005 return array.filter(function (item, index, self) { 2006 return self.indexOf(item) === index; 2007 }); 2008} 2009 2010//========= ÐеÑаÑÑ =============================================================================================================================================== 2011 2012document.addEventListener("DOMContentLoaded", () => { 2013 const printButtons = document.querySelectorAll("[data-print]"); 2014 2015 if (printButtons.length > 0) { 2016 printButtons.forEach((button) => { 2017 button.addEventListener("click", (e) => { 2018 e.preventDefault(); 2019 window.print(); 2020 }); 2021 }); 2022 } 2023}); 2024 2025 2026//====== Ðамена ÑекÑÑа ================================================================================================================================================== 2027 2028document.addEventListener('DOMContentLoaded', () => { 2029 2030 function checkAndReplaceText() { 2031 const elements = document.querySelectorAll('[data-text-replacement][data-media-replacement]'); 2032 elements.forEach(element => { 2033 const replacementText = element.getAttribute('data-text-replacement'); 2034 const mediaWidth = parseFloat(element.getAttribute('data-media-replacement')); 2035 const originalText = element.dataset.originalText || element.textContent; 2036 2037 if (window.innerWidth <= mediaWidth) { 2038 if (element.textContent !== replacementText) { 2039 element.textContent = replacementText; 2040 } 2041 } else { 2042 if (element.textContent !== originalText) { 2043 element.textContent = originalText; 2044 } 2045 } 2046 2047 if (!element.dataset.originalText) { 2048 element.dataset.originalText = originalText; 2049 } 2050 }); 2051 } 2052 2053 checkAndReplaceText(); 2054 2055 window.addEventListener('resize', checkAndReplaceText); 2056}); 2057 2058//======================================================================================================================================================== 2059 2060let bodyLockStatus = true; 2061let bodyLockToggle = (delay = 500) => { 2062 if (document.documentElement.classList.contains('lock')) { 2063 bodyUnlock(delay); 2064 } else { 2065 bodyLock(delay); 2066 } 2067} 2068let getLockPaddingValue = () => { 2069 return (window.innerWidth - document.documentElement.clientWidth) + 'px'; 2070} 2071let bodyUnlock = (delay = 500) => { 2072 let body = document.querySelector("body"); 2073 if (bodyLockStatus) { 2074 let lock_padding = document.querySelectorAll("[data-lp]"); 2075 setTimeout(() => { 2076 for (let index = 0; index < lock_padding.length; index++) { 2077 const el = lock_padding[index]; 2078 el.style.paddingRight = ''; 2079 } 2080 body.style.paddingRight = ''; 2081 document.documentElement.classList.remove("lock"); 2082 }, delay); 2083 bodyLockStatus = false; 2084 setTimeout(function () { 2085 bodyLockStatus = true; 2086 }, delay); 2087 } 2088} 2089let bodyLock = (delay = 500) => { 2090 let body = document.querySelector("body"); 2091 if (bodyLockStatus) { 2092 let lockPaddingValue = getLockPaddingValue(); 2093 let lock_padding = document.querySelectorAll("[data-lp]"); 2094 for (let index = 0; index < lock_padding.length; index++) { 2095 const el = lock_padding[index]; 2096 el.style.paddingRight = lockPaddingValue; 2097 } 2098 body.style.paddingRight = lockPaddingValue; 2099 document.documentElement.classList.add("lock"); 2100 2101 bodyLockStatus = false;
2102 setTimeout(function () { 2103 bodyLockStatus = true; 2104 }, delay); 2105 } 2106} 2107 2108//====== Popup ================================================================================================================================================== 2109 2110class Popup { 2111 constructor(options = {}) { 2112 this.vkAttribute = 'data-popup-vk'; 2113 this.vkPlaceAttribute = 'data-popup-vk-place'; 2114 const defaultConfig = { 2115 logging: true, 2116 init: true, 2117 attributeOpenButton: 'data-popup', 2118 attributeCloseButton: 'data-close', 2119 fixElementSelector: '[data-lp]', 2120 youtubeAttribute: 'data-popup-youtube', 2121 youtubePlaceAttribute: 'data-popup-youtube-place', 2122 setAutoplayYoutube: true, 2123 classes: { 2124 popup: 'popup', 2125 popupContent: 'popup__content', 2126 popupActive: 'popup_show', 2127 bodyActive: 'popup-show', 2128 thanksLock: 'popup-thanks-lock' 2129 }, 2130 focusCatch: true, 2131 closeEsc: true, 2132 bodyLock: true, 2133 hashSettings: { 2134 location: true, 2135 goHash: true, 2136 }, 2137 on: { 2138 beforeOpen: () => {}, 2139 afterOpen: () => {}, 2140 beforeClose: () => {}, 2141 afterClose: () => {}, 2142 }, 2143 }; 2144 2145 this.options = { 2146 ...defaultConfig, 2147 ...options, 2148 classes: { ...defaultConfig.classes, ...options?.classes }, 2149 hashSettings: { ...defaultConfig.hashSettings, ...options?.hashSettings }, 2150 }; 2151 2152 this.isOpen = false; 2153 this.targetOpen = { selector: false, element: null }; 2154 this.previousOpen = { selector: false, element: null }; 2155 this.lastClosed = { selector: false, element: null }; 2156 this.lastFocusEl = null; 2157 this.bodyLock = false; 2158 2159 this._focusEl = [ 2160 'a[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])', 2161 'textarea:not([disabled])', 'select:not([disabled])', '[tabindex]:not([tabindex^="-"])' 2162 ]; 2163 2164 if (this.options.init) this.initPopups(); 2165 } 2166 2167 initPopups() { 2168 this.eventsPopup(); 2169 } 2170 2171 eventsPopup() { 2172 document.addEventListener("click", (e) => { 2173 const openButton = e.target.closest(`[${this.options.attributeOpenButton}]`); 2174 if (openButton) { 2175 e.preventDefault(); 2176 const popupSelector = openButton.getAttribute(this.options.attributeOpenButton); 2177 const vkId = openButton.getAttribute(this.vkAttribute); 2178 2179 if (popupSelector) { 2180 this.targetOpen.selector = popupSelector; 2181 this.targetOpen.element = document.querySelector(this.targetOpen.selector); 2182 2183 if (this.targetOpen.element) { 2184 this._updateVkContent(vkId); 2185 this.open(); 2186 } 2187 } 2188 return; 2189 } 2190 2191 const closeButton = e.target.closest(`[${this.options.attributeCloseButton}]`); 2192 if (closeButton || (!e.target.closest(`.${this.options.classes.popupContent}`) && this.isOpen)) { 2193 e.preventDefault(); 2194 this.close(); 2195 } 2196 }); 2197 2198 document.addEventListener("keydown", (e) => { 2199 if (this.options.closeEsc && e.key === "Escape" && this.isOpen) { 2200 e.preventDefault(); 2201 this.close(); 2202 } 2203 if (this.options.focusCatch && e.key === "Tab" && this.isOpen) { 2204 this._focusCatch(e); 2205 } 2206 }); 2207 } 2208 2209 _updateVkContent(vkId) { 2210 const vkPlace = this.targetOpen.element.querySelector(`[${this.vkPlaceAttribute}]`); 2211 if (vkPlace) { 2212 vkPlace.innerHTML = ''; 2213 if (vkId) { 2214 const [oid, id] = vkId.split('_'); 2215 const iframe = document.createElement('iframe'); 2216 iframe.src = `https://vk.com/video_ext.php?oid=${oid}&id=${id}&autoplay=1`; 2217 iframe.width = "640"; 2218 iframe.height = "360"; 2219 iframe.frameBorder = "0"; 2220 iframe.allow = "autoplay; encrypted-media"; 2221 iframe.allowFullscreen = true; 2222 vkPlace.appendChild(iframe); 2223 } 2224 } 2225 } 2226 2227 open() { 2228 this.options.on.beforeOpen(this); 2229 this.targetOpen.element.classList.add(this.options.classes.popupActive); 2230 document.documentElement.classList.add(this.options.classes.bodyActive); 2231 2232 if (this.targetOpen.selector && this.targetOpen.selector.includes('thanks')) { 2233 document.documentElement.classList.add(this.options.classes.thanksLock); 2234 } 2235 2236 if (this.options.bodyLock) { 2237 bodyLock(); 2238 } 2239 2240 this.isOpen = true; 2241 2242 setTimeout(() => { 2243 this._focusTrap(); 2244 }, 50); 2245 2246 this.options.on.afterOpen(this); 2247 } 2248 2249 close() { 2250 this.options.on.beforeClose(this); 2251 if (this.targetOpen.element) { 2252 this.targetOpen.element.classList.remove(this.options.classes.popupActive); 2253 } 2254 2255 document.documentElement.classList.remove(this.options.classes.bodyActive); 2256 2257 if (this.targetOpen.selector && this.targetOpen.selector.includes('thanks')) { 2258 document.documentElement.classList.remove(this.options.classes.thanksLock); 2259 } 2260 2261 if (this.options.bodyLock) { 2262 bodyUnlock(); 2263 } 2264 2265 const vkPlace = this.targetOpen.element?.querySelector(`[${this.vkPlaceAttribute}]`); 2266 if (vkPlace) { 2267 vkPlace.innerHTML = ''; 2268 } 2269 2270 this.isOpen = false;
2271 this.options.on.afterClose(this); 2272 } 2273 2274 _focusCatch(e) { 2275 const focusable = this.targetOpen.element.querySelectorAll(this._focusEl); 2276 const index = Array.prototype.indexOf.call(focusable, document.activeElement); 2277 2278 if (e.shiftKey && index === 0) { 2279 focusable[focusable.length - 1].focus(); 2280 e.preventDefault(); 2281 } else if (!e.shiftKey && index === focusable.length - 1) { 2282 focusable[0].focus(); 2283 e.preventDefault(); 2284 } 2285 } 2286 2287 _focusTrap() { 2288 const focusable = this.targetOpen.element.querySelectorAll(this._focusEl); 2289 if (focusable.length) focusable[0].focus(); 2290 } 2291} 2292 2293function setFormSending(form, on) { 2294 const btn = form.querySelector('[type="submit"]'); 2295 if (!btn) { 2296 return; 2297 } 2298 btn.classList.toggle('_sending', !!on); 2299 btn.disabled = !!on; 2300} 2301 2302function showFormAjaxError(form, message) { 2303 let box = form.querySelector('[data-form-error]'); 2304 if (!box) { 2305 box = document.createElement('div'); 2306 box.setAttribute('data-form-error', ''); 2307 box.className = 'order__left-form-error'; 2308 const submitBtn = form.querySelector('[type="submit"]'); 2309 submitBtn ? submitBtn.before(box) : form.appendChild(box); 2310 } 2311 box.textContent = message || ''; 2312 box.hidden = !message; 2313} 2314 2315async function parseAjaxJson(response) { 2316 const text = await response.text(); 2317 try { 2318 return JSON.parse(text); 2319 } catch (e) { 2320 const match = text.match(/\{[\s\S]*\}/); 2321 if (match) { 2322 try { 2323 return JSON.parse(match[0]); 2324 } catch (e2) {} 2325 } 2326 return null; 2327 } 2328} 2329 2330function formSubmit() { 2331 const forms = document.forms; 2332 if (forms.length) { 2333 for (const form of forms) { 2334 // ÐÑклÑÑаем ÑоÑÐ¼Ñ Ñ Ð¿Ð¾Ð»ÐµÐ¼ WEB_FORM_ID (Bitrix ÑоÑмÑ) 2335 if (form.querySelector('input[name="WEB_FORM_ID"]')) { 2336 continue; 2337 } 2338 2339 // ÐÑклÑÑаем Bitrix ÑоÑÐ¼Ñ Ð¿Ð¾ клаÑÑÑ 2340 if (form.classList.contains('product__modal-form')) { 2341 continue; 2342 } 2343 2344 if (!form.classList.contains('notajax')) { 2345 form.addEventListener('submit', function (e) { 2346 e.preventDefault(); 2347 if (formValidate(form)) { 2348 formSubmitAction(form); 2349 } else { 2350 showFormAjaxError(form, 'ÐаполниÑе обÑзаÑелÑнÑе Ð¿Ð¾Ð»Ñ Ð¸ подÑвеÑдиÑе ÑоглаÑие.'); 2351 } 2352 }); 2353 } 2354 } 2355 } 2356 2357 async function formSubmitAction(form) { 2358 const popupContent = form.closest('.popup')?.querySelector('.popup__content'); 2359 popupContent?.classList.add('_sending'); 2360 showFormAjaxError(form, ''); 2361 2362 const ajax = form.hasAttribute('data-ajax'); 2363 if (ajax) { 2364 setFormSending(form, true); 2365 // ÐолÑÑаем Ñокен reCAPTCHA пеÑед оÑпÑавкой 2366 const recaptchaField = form.querySelector('input[name="g-recaptcha-response"]'); 2367 2368 if (recaptchaField && typeof grecaptcha !== 'undefined') { 2369 try { 2370 const publicKey = window.GOOGLE_RECAPTCHA_PUBLIC_KEY || ''; 2371 const tokenPromise = new Promise((resolve, reject) => { 2372 grecaptcha.ready(() => { 2373 if (!publicKey) { 2374 resolve(''); 2375 return; 2376 } 2377 grecaptcha.execute(publicKey, { action: 'submit' }).then(resolve).catch(reject); 2378 }); 2379 }); 2380 const recaptchaToken = await Promise.race([ 2381 tokenPromise, 2382 new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 8000)) 2383 ]); 2384 if (recaptchaToken) { 2385 recaptchaField.value = recaptchaToken; 2386 } 2387 } catch (error) { 2388 console.warn('ÐÑибка полÑÑÐµÐ½Ð¸Ñ Ñокена reCAPTCHA:', error); 2389 showFormAjaxError(form, 'Ðе ÑдалоÑÑ Ð¿ÑойÑи пÑовеÑÐºÑ reCAPTCHA. ÐбновиÑе ÑÑÑаниÑÑ Ð¸ попÑобÑйÑе Ñнова.'); 2390 popupContent?.classList.remove('_sending'); 2391 setFormSending(form, false); 2392 return; 2393 } 2394 } 2395 2396 const formAction = form.getAttribute('action') ? form.getAttribute('action').trim() : '#'; 2397 const formMethod = form.getAttribute('method') ? form.getAttribute('method').trim() : 'GET'; 2398 const formData = new FormData(form); 2399 2400 try { 2401 const response = await fetch(formAction, { 2402 method: formMethod, 2403 body: formData 2404 }); 2405 const responseData = await parseAjaxJson(response); 2406 2407 if (response.ok && responseData && responseData.status !== 'error') { 2408 popupContent?.classList.remove('_sending'); 2409 setFormSending(form, false); 2410 form.reset(); 2411 formSent(form); 2412 return; 2413 } 2414 2415 showFormAjaxError(form, (responseData && responseData.message) || 'ÐÑибка оÑпÑавки даннÑÑ .'); 2416 popupContent?.classList.remove('_sending'); 2417 setFormSending(form, false); 2418 } catch (error) { 2419 showFormAjaxError(form, 'ÐÑибка оÑпÑавки даннÑÑ .'); 2420 popupContent?.classList.remove('_sending'); 2421 setFormSending(form, false); 2422 } 2423 } else if (form.hasAttribute('data-dev')) { 2424 popupContent?.classList.remove('_sending'); 2425 formSent(form); 2426 } else if (form.hasAttribute('data-no_ajax')) { 2427 form.submit(); 2428 } 2429 } 2430 2431 function formSent(form) { 2432 document.dispatchEvent(new CustomEvent("formSent", { 2433 detail: { 2434 form: form 2435 } 2436 })); 2437 2438 const popupSelector = form.dataset.popupMessage; 2439 2440 if (popupSelector) { 2441 if (popup.isOpen) { 2442 popup.close(); 2443 } 2444 2445 popup.targetOpen.selector = popupSelector; 2446 popup.targetOpen.element = document.querySelector(popupSelector); 2447 popup.open(); 2448 } 2449 2450 form.reset(); 2451 } 2452 2453 document.addEventListener('formSent', (event) => { 2454 const form = event.detail.form; 2455 if (form) { 2456 const fileNameDisplays = form.querySelectorAll('[data-name-file]'); 2457 fileNameDisplays.forEach(fileNameDisplay => { 2458 fileNameDisplay.innerHTML = ''; 2459 fileNameDisplay.classList.remove('_with-content'); 2460 }); 2461 2462 const fileInputs = form.querySelectorAll('[data-btn-download]');
2463 fileInputs.forEach(fileInput => { 2464 fileInput.value = ''; // СбÑÐ¾Ñ Ð¿Ð¾Ð»Ñ Ð²Ð²Ð¾Ð´Ð° Ñайла 2465 }); 2466 } 2467 }); 2468} 2469 2470function formValidate(form) { 2471 let isValid = true; 2472 2473 const requiredInputs = form.querySelectorAll('input[data-required], textarea[data-required]'); 2474 requiredInputs?.forEach(input => { 2475 if (!input.value.trim()) { 2476 input.classList.add('_error'); 2477 isValid = false; 2478 } else { 2479 input.classList.remove('_error'); 2480 } 2481 }); 2482 2483 const checkboxes = form.querySelectorAll('[data-agreement-checkbox], .product__modal-checkbox input[type="checkbox"]'); 2484 checkboxes?.forEach(checkbox => { 2485 if (!checkbox.checked) { 2486 checkbox.classList.add('_error'); 2487 isValid = false; 2488 } else { 2489 checkbox.classList.remove('_error'); 2490 } 2491 }); 2492 2493 return isValid; 2494} 2495 2496document.addEventListener('submit', (event) => { 2497 const form = event.target; 2498 if (!form || form.tagName !== 'FORM') { 2499 return; 2500 } 2501 const checkboxes = form.querySelectorAll('[data-agreement-checkbox], .product__modal-checkbox input[type="checkbox"]'); 2502 let invalid = false; 2503 checkboxes.forEach((checkbox) => { 2504 checkbox.required = false; 2505 if (!checkbox.checked) { 2506 checkbox.classList.add('_error'); 2507 invalid = true; 2508 } else { 2509 checkbox.classList.remove('_error'); 2510 } 2511 }); 2512 if (invalid) { 2513 event.preventDefault(); 2514 event.stopImmediatePropagation(); 2515 showFormAjaxError(form, 'ÐодÑвеÑдиÑе ÑоглаÑие на обÑабоÑÐºÑ Ð¿ÐµÑÑоналÑнÑÑ Ð´Ð°Ð½Ð½ÑÑ .'); 2516 } 2517}, true); 2518 2519document.addEventListener('change', (event) => { 2520 const checkbox = event.target; 2521 if (checkbox && checkbox.matches('[data-agreement-checkbox], .product__modal-checkbox input[type="checkbox"]') && checkbox.checked) { 2522 checkbox.classList.remove('_error'); 2523 } 2524}); 2525 2526document.addEventListener('DOMContentLoaded', () => { 2527 const inputs = document.querySelectorAll('input[data-required], textarea[data-required]'); 2528 inputs?.forEach(input => { 2529 input.addEventListener('input', () => { 2530 if (input.value.trim()) { 2531 input.classList.remove('_error'); 2532 } 2533 }); 2534 }); 2535 2536 const checkboxes = document.querySelectorAll('[data-agreement-checkbox]'); 2537 checkboxes?.forEach(checkbox => { 2538 checkbox.addEventListener('change', () => { 2539 if (checkbox.checked) { 2540 checkbox.classList.remove('_error'); 2541 } 2542 }); 2543 }); 2544 2545 if (document.forms.length > 0) { 2546 formSubmit(); 2547 } 2548}); 2549 2550const popup = new Popup(); 2551window.popup = popup; 2552 2553 2554// class Popup { 2555// constructor(options = {}) { 2556// this.vkAttribute = 'data-popup-vk'; 2557// this.vkPlaceAttribute = 'data-popup-vk-place'; 2558// const defaultConfig = { 2559// logging: true, 2560// init: true, 2561// attributeOpenButton: 'data-popup', 2562// attributeCloseButton: 'data-close', 2563// fixElementSelector: '[data-lp]', 2564// youtubeAttribute: 'data-popup-youtube', 2565// youtubePlaceAttribute: 'data-popup-youtube-place', 2566// setAutoplayYoutube: true, 2567// classes: { 2568// popup: 'popup', 2569// popupContent: 'popup__content', 2570// popupActive: 'popup_show', 2571// bodyActive: 'popup-show', 2572// }, 2573// focusCatch: true, 2574// closeEsc: true, 2575// bodyLock: true, 2576// hashSettings: { 2577// location: true, 2578// goHash: true, 2579// }, 2580// on: { 2581// beforeOpen: () => {}, 2582// afterOpen: () => {}, 2583// beforeClose: () => {}, 2584// afterClose: () => {}, 2585// }, 2586// }; 2587 2588// this.options = { 2589// ...defaultConfig, 2590// ...options, 2591// classes: { ...defaultConfig.classes, ...options?.classes }, 2592// hashSettings: { ...defaultConfig.hashSettings, ...options?.hashSettings }, 2593// }; 2594 2595// this.isOpen = false;
2596// this.targetOpen = { selector: false, element: null }; 2597// this.previousOpen = { selector: false, element: null }; 2598// this.lastClosed = { selector: false, element: null }; 2599// this.lastFocusEl = null; 2600// this.bodyLock = false; 2601 2602// this._focusEl = [ 2603// 'a[href]', 'button:not([disabled])', 'input:not([disabled]):not([type="hidden"])', 2604// 'textarea:not([disabled])', 'select:not([disabled])', '[tabindex]:not([tabindex^="-"])' 2605// ]; 2606 2607// if (this.options.init) this.initPopups(); 2608// } 2609 2610// initPopups() { 2611// this.eventsPopup(); 2612// } 2613 2614// eventsPopup() { 2615// document.addEventListener("click", (e) => { 2616// const openButton = e.target.closest(`[${this.options.attributeOpenButton}]`); 2617// if (openButton) { 2618// e.preventDefault(); 2619// const popupSelector = openButton.getAttribute(this.options.attributeOpenButton); 2620// const vkId = openButton.getAttribute(this.vkAttribute); // ÐолÑÑаем VK ID 2621 2622// if (popupSelector) { 2623// this.targetOpen.selector = popupSelector; 2624// this.targetOpen.element = document.querySelector(this.targetOpen.selector); 2625 2626// if (this.targetOpen.element) { 2627// this._updateVkContent(vkId); // ÐбновлÑем ÑодеÑжимое попапа пеÑед оÑкÑÑÑием 2628// this.open(); 2629// } 2630// } 2631// return; 2632// } 2633 2634// const closeButton = e.target.closest(`[${this.options.attributeCloseButton}]`); 2635// if (closeButton || (!e.target.closest(`.${this.options.classes.popupContent}`) && this.isOpen)) { 2636// e.preventDefault(); 2637// this.close(); 2638// } 2639// }); 2640 2641// document.addEventListener("keydown", (e) => { 2642// if (this.options.closeEsc && e.key === "Escape" && this.isOpen) { 2643// e.preventDefault(); 2644// this.close(); 2645// } 2646// if (this.options.focusCatch && e.key === "Tab" && this.isOpen) { 2647// this._focusCatch(e); 2648// } 2649// }); 2650// } 2651 2652// _updateVkContent(vkId) { 2653// const vkPlace = this.targetOpen.element.querySelector(`[${this.vkPlaceAttribute}]`); 2654// if (vkPlace) { 2655// vkPlace.innerHTML = ''; 2656// if (vkId) { 2657// const [oid, id] = vkId.split('_'); 2658// const iframe = document.createElement('iframe'); 2659// iframe.src = `https://vk.com/video_ext.php?oid=${oid}&id=${id}&autoplay=1`; 2660// iframe.width = "640"; 2661// iframe.height = "360"; 2662// iframe.frameBorder = "0"; 2663// iframe.allow = "autoplay; encrypted-media"; 2664// iframe.allowFullscreen = true; 2665// vkPlace.appendChild(iframe); 2666// } 2667// } 2668// } 2669 2670// open() { 2671// this.options.on.beforeOpen(this); 2672// this.targetOpen.element.classList.add(this.options.classes.popupActive); 2673// document.documentElement.classList.add(this.options.classes.bodyActive); 2674 2675// if (this.options.bodyLock) { 2676// bodyLock(); 2677// } 2678 2679// this.isOpen = true; 2680 2681// setTimeout(() => { 2682// this._focusTrap(); 2683// }, 50); 2684 2685// this.options.on.afterOpen(this); 2686// } 2687 2688// close() { 2689// this.options.on.beforeClose(this); 2690// this.targetOpen.element.classList.remove(this.options.classes.popupActive); 2691// document.documentElement.classList.remove(this.options.classes.bodyActive); 2692 2693// if (this.options.bodyLock) { 2694// bodyUnlock(); 2695// } 2696 2697// const vkPlace = this.targetOpen.element.querySelector(`[${this.vkPlaceAttribute}]`); 2698// if (vkPlace) { 2699// vkPlace.innerHTML = ''; 2700// } 2701 2702// this.isOpen = false; 2703// this.options.on.afterClose(this); 2704// } 2705 2706// _focusCatch(e) { 2707// const focusable = this.targetOpen.element.querySelectorAll(this._focusEl); 2708// const index = Array.prototype.indexOf.call(focusable, document.activeElement); 2709 2710// if (e.shiftKey && index === 0) {
2711// focusable[focusable.length - 1].focus(); 2712// e.preventDefault(); 2713// } else if (!e.shiftKey && index === focusable.length - 1) { 2714// focusable[0].focus(); 2715// e.preventDefault(); 2716// } 2717// } 2718 2719// _focusTrap() { 2720// const focusable = this.targetOpen.element.querySelectorAll(this._focusEl); 2721// if (focusable.length) focusable[0].focus(); 2722// } 2723// } 2724 2725// const popup = new Popup(); 2726 2727 2728 2729//====== СбÑÐ¾Ñ ÑлеменÑов ÑоÑм ================================================================================================================================================== 2730 2731function resetFormFields(form) { 2732 if (!form) return; 2733 2734 const inputs = form.querySelectorAll('input'); 2735 inputs.forEach(input => { 2736 if (input.matches('[data-agreement-checkbox], .product__modal-checkbox input[type="checkbox"]')) { 2737 input.checked = false; 2738 } else if (input.type === 'checkbox' || input.type === 'radio') { 2739 const group = form.querySelectorAll(`input[name="${input.name}"]`); 2740 if (group.length > 0) { 2741 group[0].checked = true; 2742 } 2743 } else { 2744 input.value = ''; 2745 } 2746 }); 2747 2748 const selects = form.querySelectorAll('select'); 2749 selects.forEach(select => { 2750 select.selectedIndex = 0; 2751 const defaultValue = select.dataset.default || ''; 2752 2753 const customSelect = select.nextElementSibling; 2754 if (customSelect && customSelect.classList.contains('select__item')) { 2755 const valueElement = customSelect.querySelector('.select__value span'); 2756 const options = customSelect.querySelectorAll('.select__option'); 2757 2758 valueElement.textContent = select.options[0].textContent; 2759 2760 options.forEach(option => { 2761 option.style.display = option.dataset.value === '' ? 'none' : 'grid'; 2762 }); 2763 } 2764 }); 2765 2766 const errorFields = form.querySelectorAll('.error'); 2767 errorFields.forEach(field => field.classList.remove('error')); 2768} 2769 2770document.addEventListener('click', event => { 2771 const button = event.target.closest('[data-reset-fields]'); 2772 if (button) { 2773 const form = button.closest('form'); 2774 resetFormFields(form); 2775 } 2776}); 2777 2778 2779 2780//===== da ================================================================================================================================================== 2781 2782class DynamicAdapt { 2783 constructor(type) { 2784 this.type = type 2785 } 2786 init() { 2787 // маÑÑив обÑекÑов 2788 this.оbjects = [] 2789 this.daClassname = '_dynamic_adapt_' 2790 // маÑÑив ÑлеменÑов DOM 2791 this.nodes = [...document.querySelectorAll('[data-da]')] 2792 2793 // наполнение objects обÑекÑами 2794 this.nodes.forEach((node) => { 2795 const data = node.dataset.da.trim() 2796 const dataArray = data.split(',') 2797 const оbject = {} 2798 оbject.element = node 2799 оbject.parent = node.parentNode 2800 оbject.destination = document.querySelector(`${dataArray[0].trim()}`) 2801 оbject.breakpoint = dataArray[1] ? dataArray[1].trim() : '767' 2802 оbject.place = dataArray[2] ? dataArray[2].trim() : 'last' 2803 оbject.index = this.indexInParent(оbject.parent, оbject.element) 2804 this.оbjects.push(оbject) 2805 }) 2806 2807 this.arraySort(this.оbjects) 2808 2809 // маÑÑив ÑникалÑнÑÑ Ð¼ÐµÐ´Ð¸Ð°-запÑоÑов 2810 this.mediaQueries = this.оbjects 2811 .map(({ breakpoint }) => `(${this.type}-width: ${breakpoint}px),${breakpoint}`) 2812 .filter((item, index, self) => self.indexOf(item) === index) 2813 2814 // навеÑивание ÑлÑÑаÑÐµÐ»Ñ Ð½Ð° медиа-запÑÐ¾Ñ 2815 // и вÑзов обÑабоÑÑика пÑи пеÑвом запÑÑке 2816 this.mediaQueries.forEach((media) => { 2817 const mediaSplit = media.split(',') 2818 const matchMedia = window.matchMedia(mediaSplit[0]) 2819 const mediaBreakpoint = mediaSplit[1] 2820 2821 // маÑÑив обÑекÑов Ñ ÑооÑвеÑÑÑвÑÑÑим бÑейкпоинÑом 2822 const оbjectsFilter = this.оbjects.filter(({ breakpoint }) => breakpoint === mediaBreakpoint) 2823 matchMedia.addEventListener('change', () => { 2824 this.mediaHandler(matchMedia, оbjectsFilter) 2825 }) 2826 this.mediaHandler(matchMedia, оbjectsFilter) 2827 }) 2828 } 2829 // ÐÑÐ½Ð¾Ð²Ð½Ð°Ñ ÑÑнкÑÐ¸Ñ 2830 mediaHandler(matchMedia, оbjects) { 2831 if (matchMedia.matches) {
2832 оbjects.forEach((оbject) => { 2833 // оbject.index = this.indexInParent(оbject.parent, оbject.element); 2834 this.moveTo(оbject.place, оbject.element, оbject.destination) 2835 }) 2836 } else { 2837 оbjects.forEach(({ parent, element, index }) => { 2838 if (element.classList.contains(this.daClassname)) { 2839 this.moveBack(parent, element, index) 2840 } 2841 }) 2842 } 2843 } 2844 // ФÑнкÑÐ¸Ñ Ð¿ÐµÑемеÑÐµÐ½Ð¸Ñ 2845 moveTo(place, element, destination) { 2846 element.classList.add(this.daClassname) 2847 if (place === 'last' || place >= destination.children.length) { 2848 destination.append(element) 2849 return 2850 } 2851 if (place === 'first') { 2852 destination.prepend(element) 2853 return 2854 } 2855 destination.children[place].before(element) 2856 } 2857 // ФÑнкÑÐ¸Ñ Ð²Ð¾Ð·Ð²ÑаÑа 2858 moveBack(parent, element, index) { 2859 element.classList.remove(this.daClassname) 2860 if (parent.children[index] !== undefined) { 2861 parent.children[index].before(element) 2862 } else { 2863 parent.append(element) 2864 } 2865 } 2866 // ФÑнкÑÐ¸Ñ Ð¿Ð¾Ð»ÑÑÐµÐ½Ð¸Ñ Ð¸Ð½Ð´ÐµÐºÑа внÑÑÑи ÑодиÑелÑÑкого ÑлеменÑа 2867 indexInParent(parent, element) { 2868 return [...parent.children].indexOf(element) 2869 } 2870 // ФÑнкÑÐ¸Ñ ÑоÑÑиÑовки маÑÑива по breakpoint и place 2871 // по возÑаÑÑÐ°Ð½Ð¸Ñ Ð´Ð»Ñ this.type = min 2872 // по ÑбÑÐ²Ð°Ð½Ð¸Ñ Ð´Ð»Ñ this.type = max 2873 arraySort(arr) { 2874 if (this.type === 'min') { 2875 arr.sort((a, b) => { 2876 if (a.breakpoint === b.breakpoint) { 2877 if (a.place === b.place) { 2878 return 0 2879 } 2880 if (a.place === 'first' || b.place === 'last') { 2881 return -1 2882 } 2883 if (a.place === 'last' || b.place === 'first') { 2884 return 1 2885 } 2886 return 0 2887 } 2888 return a.breakpoint - b.breakpoint 2889 }) 2890 } else { 2891 arr.sort((a, b) => { 2892 if (a.breakpoint === b.breakpoint) { 2893 if (a.place === b.place) { 2894 return 0 2895 } 2896 if (a.place === 'first' || b.place === 'last') { 2897 return 1 2898 } 2899 if (a.place === 'last' || b.place === 'first') { 2900 return -1 2901 } 2902 return 0 2903 } 2904 return b.breakpoint - a.breakpoint 2905 }) 2906 return 2907 } 2908 } 2909} 2910const da = new DynamicAdapt("max"); 2911da.init(); 2912 2913//==== quantity ==================================================================================================================================================== 2914 2915document.addEventListener('DOMContentLoaded', () => { 2916 const quantityElements = document.querySelectorAll('[data-quantity]'); 2917 2918 quantityElements.forEach(quantity => { 2919 const prevButton = quantity.querySelector('[data-quantity-prev]'); 2920 const nextButton = quantity.querySelector('[data-quantity-next]'); 2921 const numberDisplay = quantity.querySelector('[data-quantity-number]'); 2922
2923 if (!prevButton || !nextButton || !numberDisplay) { 2924 console.warn('ÐекоÑоÑÑе ÑлеменÑÑ Ð´Ð»Ñ Ð±Ð»Ð¾ÐºÐ° quantity оÑÑÑÑÑÑвÑÑÑ'); 2925 return; 2926 } 2927 2928 let currentValue = parseInt(numberDisplay.textContent, 10) || 1; 2929 2930 prevButton.addEventListener('click', () => { 2931 if (currentValue > 1) { 2932 currentValue--; 2933 numberDisplay.textContent = currentValue; 2934 } 2935 }); 2936 2937 nextButton.addEventListener('click', () => { 2938 if (currentValue < 9) { 2939 currentValue++; 2940 numberDisplay.textContent = currentValue; 2941 } 2942 }); 2943 }); 2944}); 2945 2946//==== open table ==================================================================================================================================================== 2947 2948document.addEventListener('DOMContentLoaded', () => { 2949 const searchAnalogueElements = document.querySelectorAll('[data-search-analogue]'); 2950 2951 if (searchAnalogueElements.length > 0) { 2952 searchAnalogueElements.forEach(element => { 2953 element.addEventListener('click', () => { 2954 const parentBlock = element.closest('[data-search-analogue-block]'); 2955 2956 if (parentBlock) { 2957 parentBlock.classList.add('_open-table'); 2958 } 2959 }); 2960 }); 2961 } 2962}); 2963 2964 2965//======= ÐобавиÑÑ ÑÑаÑÑника ================================================================================================================================================= 2966 2967const addParticipantButtons = document.querySelectorAll('[data-add-participant]'); 2968const participantBlocks = document.querySelectorAll('[data-participant-block]'); 2969 2970function activate_participant() { 2971 document.addEventListener('DOMContentLoaded', function() { 2972 // ÐÑполÑзÑем делегиÑование ÑобÑÑий Ð´Ð»Ñ Ð´Ð¸Ð½Ð°Ð¼Ð¸ÑеÑÐºÐ¸Ñ ÑлеменÑов 2973 document.addEventListener('click', function(e) { 2974 // ÐÑовеÑÑем, ÑÑо клик бÑл по наÑÐµÐ¼Ñ Ð±Ð»Ð¾ÐºÑ Ð¸Ð»Ð¸ его ÑодеÑÐ¶Ð¸Ð¼Ð¾Ð¼Ñ 2975 const removeBlock = e.target.closest('.remove_participant'); 2976 2977 if (removeBlock) { 2978 // ÐÐ°Ñ Ð¾Ð´Ð¸Ð¼ два пÑедÑдÑÑÐ¸Ñ ÑлеменÑа 2979 const prevElement1 = removeBlock.previousElementSibling; 2980 const prevElement2 = prevElement1 ? prevElement1.previousElementSibling : null; 2981 2982 // УдалÑем ÑлеменÑÑ, еÑли они ÑÑÑеÑÑвÑÑÑ 2983 if (prevElement2) prevElement2.remove(); 2984 if (prevElement1) prevElement1.remove(); 2985 2986 // УдалÑем Ñам блок 2987 removeBlock.remove(); 2988 } 2989 }); 2990 }); 2991} 2992 2993if (addParticipantButtons.length > 0 && participantBlocks.length > 0) { 2994 activate_participant(); 2995 addParticipantButtons.forEach((button) => { 2996 button.addEventListener('click', (event) => { 2997 const participantBlock = button.closest('.form-training__line-top')?.querySelector('[data-participant-block]'); 2998 2999 if (participantBlock) { 3000 if (event.target.closest('[data-add-participant]')) { 3001 3002 const nameBlock = document.createElement('div'); 3003 nameBlock.className = 'form-training__item item-params-calc'; 3004 nameBlock.setAttribute('data-participant-name', ''); 3005 nameBlock.innerHTML = ` 3006 <div class="item-params-calc__name">ФÐÐ</div> 3007 <div class="item-params-calc__input-wrap"> 3008 <input data-required autocomplete="off" type="text" name="full-name" placeholder="ÐведиÑе знаÑение" class="item-params-calc__input input"> 3009 </div>`; 3010 3011 const postBlock = document.createElement('div'); 3012 postBlock.className = 'form-training__item item-params-calc'; 3013 postBlock.setAttribute('data-participant-post', ''); 3014 postBlock.innerHTML = ` 3015 <div class="item-params-calc__name">ÐолжноÑÑÑ</div> 3016 <div class="item-params-calc__input-wrap"> 3017 <input data-required autocomplete="off" type="text" name="post" placeholder="ÐведиÑе знаÑение" class="item-params-calc__input input"> 3018 </div>`; 3019 3020 const closeBlock = document.createElement('div'); 3021 closeBlock.className = 'form-training__item item-params-calc remove_participant'; 3022 closeBlock.innerHTML = `
3023 <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg"> 3024 <circle cx="13.5" cy="13.5" r="13.5" fill="#D3D3D3"/> 3025 <path d="M9 9L18 18M18 9L9 18" stroke="white" stroke-linecap="round"/> 3026 </svg>`; 3027 3028 participantBlock.appendChild(nameBlock); 3029 participantBlock.appendChild(postBlock); 3030 participantBlock.appendChild(closeBlock); 3031 3032 3033 /*document.querySelectorAll('.remove_participant:not(.active)').forEach(element => { 3034 element.classList.add('active'); 3035 element.addEventListener("click", (event) => { 3036 event.preventDefault(); 3037 3038 nameBlock.remove(); 3039 postBlock.remove(); 3040 closeBlock.remove(); 3041 }); 3042 });*/ 3043 3044 } 3045 } 3046 }); 3047 }); 3048} 3049 3050//====== ÐаÑка tel ================================================================================================================================================== 3051 3052document.addEventListener('DOMContentLoaded', () => { 3053 const phoneInputs = document.querySelectorAll('input[name="tel"]'); 3054 const form = document.querySelector('form'); 3055 3056 if (phoneInputs.length > 0) { 3057 phoneInputs.forEach(input => { 3058 Inputmask({ 3059 mask: '+7 (999) 999-99-99', 3060 placeholder: '_', 3061 clearMaskOnLostFocus: true, 3062 }).mask(input); 3063 3064 input.addEventListener('input', () => { 3065 if (input.inputmask && input.inputmask.unmaskedvalue().length === 10) { 3066 input.setCustomValidity(''); 3067 } else { 3068 input.setCustomValidity('ÐведиÑе Ð½Ð¾Ð¼ÐµÑ ÑелеÑона полноÑÑÑÑ'); 3069 } 3070 }); 3071 }); 3072 } 3073 3074 if (form) { 3075 form.addEventListener('submit', (event) => { 3076 const invalidInputs = document.querySelectorAll('input[name="tel"]:invalid'); 3077 if (invalidInputs.length > 0) { 3078 event.preventDefault(); 3079 alert('ÐожалÑйÑÑа, иÑпÑавÑÑе оÑибки в ÑоÑме.'); 3080 } 3081 }); 3082 } 3083}); 3084 3085//========== ÐалендаÑÑ ============================================================================================================================================== 3086 3087if (document.querySelector('[data-datepicker]')) { 3088 const picker = datepicker('[data-datepicker]', { 3089 customDays: ["Ðн", "ÐÑ", "СÑ", "ЧÑ", "ÐÑ", "Сб", "ÐÑ"], 3090 customMonths: ["Янв", "Фев", "ÐаÑÑ", "ÐпÑ", "Ðай", "ÐÑнÑ", "ÐÑлÑ", "Ðвг", "СенÑ", "ÐкÑ", "ÐоÑ", "Ðек"], 3091 overlayButton: 'ÐÑименÑÑÑ', 3092 overlayPlaceholder: 'Ðод (4 ÑиÑÑÑ)', 3093 startDay: 1, 3094 formatter: (input, date, instance) => { 3095 const value = date.toLocaleDateString() 3096 input.value = value; 3097 }, 3098 onSelect: function (input, instance, date) { 3099 } 3100 }); 3101} 3102 3103//===== Ðазвание загÑÑженного Ñайла =================================================================================================================================================== 3104 3105document.addEventListener('DOMContentLoaded', () => { 3106 const fileInputs = document.querySelectorAll('[data-btn-download]'); 3107 3108 if (fileInputs.length > 0) { 3109 fileInputs.forEach((fileInput) => { 3110 const fileNameDisplay = document.querySelector(`[data-name-file="${fileInput.dataset.btnDownload}"]`); 3111 3112 if (fileNameDisplay) { 3113 const updateContentClass = () => { 3114 if (fileNameDisplay.children.length > 0) { 3115 fileNameDisplay.classList.add('_with-content'); 3116 } else { 3117 fileNameDisplay.classList.remove('_with-content'); 3118 } 3119 }; 3120 3121 fileInput.addEventListener('change', (event) => { 3122 const files = event.target.files; 3123 fileNameDisplay.innerHTML = ''; 3124 3125 if (files.length > 0) {
3126 Array.from(files).forEach((file) => { 3127 const fileNameSpan = document.createElement('span'); 3128 fileNameSpan.textContent = `${file.name}`; 3129 fileNameDisplay.appendChild(fileNameSpan); 3130 }); 3131 } 3132 3133 updateContentClass(); 3134 }); 3135 3136 updateContentClass(); 3137 } 3138 }); 3139 } 3140}); 3141 3142 3143//=========== ÐÑпÑавка ÑоÑÐ¼Ñ ============================================================================================================================================= 3144 3145// function formSubmit() { 3146// const forms = document.forms; 3147 3148// if (forms.length) { 3149// for (const form of forms) { 3150// form.addEventListener('submit', function (e) { 3151// e.preventDefault(); 3152// if (formValidate(form)) { 3153// formSubmitAction(form); 3154// } 3155// }); 3156// } 3157// } 3158 3159// async function formSubmitAction(form) { 3160// const popupContent = form.closest('.popup')?.querySelector('.popup__content'); 3161// popupContent?.classList.add('_sending'); 3162 3163// const ajax = form.hasAttribute('data-ajax'); 3164// if (ajax) { 3165// const formAction = form.getAttribute('action') ? form.getAttribute('action').trim() : '#'; 3166// const formMethod = form.getAttribute('method') ? form.getAttribute('method').trim() : 'GET'; 3167// const formData = new FormData(form); 3168 3169// try { 3170// const response = await fetch(formAction, { 3171// method: formMethod, 3172// body: formData 3173// }); 3174 3175// if (response.ok) { 3176// popupContent?.classList.remove('_sending'); 3177// form.reset(); 3178// formSent(form); 3179// } 3180// } catch (error) { 3181// alert('ÐÑибка оÑпÑавки даннÑÑ .'); 3182// } 3183// } else if (form.hasAttribute('data-dev')) { 3184// popupContent?.classList.remove('_sending'); 3185// formSent(form); 3186// } 3187// } 3188 3189// function formSent(form) { 3190// document.dispatchEvent(new CustomEvent("formSent", { 3191// detail: { 3192// form: form 3193// } 3194// })); 3195 3196// const popupSelector = form.dataset.popupMessage; 3197// const currentPopup = form.closest('.popup'); 3198 3199// if (popupSelector) { 3200// if (currentPopup && typeof popup?.close === 'function') { 3201// popup.close(currentPopup); // ÐакÑÑваем ÑекÑÑий попап 3202// } 3203// if (typeof popup?.open === 'function') { 3204// popup.open(popupSelector); // ÐÑкÑÑваем вÑоÑой попап 3205// } 3206// } 3207 3208// form.reset(); 3209// } 3210// } 3211 3212// function formValidate(form) { 3213// let isValid = true; 3214 3215// // ÐÑовеÑка вÑÐµÑ Ð¾Ð±ÑзаÑелÑнÑÑ Ð¸Ð½Ð¿ÑÑов внÑÑÑи ÑоÑÐ¼Ñ 3216// const requiredInputs = form.querySelectorAll('input[data-required], textarea[data-required]'); 3217// requiredInputs?.forEach(input => { 3218// if (!input.value.trim()) { 3219// input.classList.add('_error'); 3220// isValid = false; 3221// } else { 3222// input.classList.remove('_error'); 3223// } 3224// }); 3225 3226// // ÐÑовеÑка вÑÐµÑ ÑекбокÑов data-agreement-checkbox внÑÑÑи ÑоÑÐ¼Ñ 3227// const checkboxes = form.querySelectorAll('[data-agreement-checkbox]'); 3228// checkboxes?.forEach(checkbox => { 3229// if (!checkbox.checked) { 3230// checkbox.classList.add('_error'); 3231// isValid = false; 3232// } else { 3233// checkbox.classList.remove('_error'); 3234// } 3235// }); 3236 3237// return isValid; 3238// } 3239 3240// document.addEventListener('DOMContentLoaded', () => { 3241// // УдалÑем оÑÐ¸Ð±ÐºÑ Ð¿Ñи вводе ÑекÑÑа в обÑзаÑелÑнÑе Ð¿Ð¾Ð»Ñ 3242// const inputs = document.querySelectorAll('input[data-required], textarea[data-required]'); 3243// inputs?.forEach(input => { 3244// input.addEventListener('input', () => { 3245// if (input.value.trim()) { 3246// input.classList.remove('_error'); 3247// } 3248// }); 3249// }); 3250 3251// // УдалÑем оÑÐ¸Ð±ÐºÑ Ð¿Ñи изменении ÑоÑÑоÑÐ½Ð¸Ñ ÑекбокÑов 3252// const checkboxes = document.querySelectorAll('[data-agreement-checkbox]'); 3253// checkboxes?.forEach(checkbox => { 3254// checkbox.addEventListener('change', () => { 3255// if (checkbox.checked) { 3256// checkbox.classList.remove('_error'); 3257// } 3258// }); 3259// }); 3260 3261// // ÐниÑиализаÑÐ¸Ñ ÑоÑм 3262// const formsExist = document.forms.length > 0; 3263// if (formsExist) { 3264// formSubmit(); 3265// } 3266// }); 3267 3268 3269 3270 3271//======= Ðидео из VK ================================================================================================================================================= 3272 3273document.addEventListener("DOMContentLoaded", () => {
3274 const videoButtons = document.querySelectorAll("[data-video-btn]"); 3275 3276 if (!videoButtons.length) { 3277 return; 3278 } 3279 3280 videoButtons.forEach((button) => { 3281 button.addEventListener("click", () => { 3282 const videoLink = button.getAttribute("data-video-link"); 3283 if (!videoLink) { 3284 return; 3285 } 3286 3287 const videoContainer = button.closest("[data-video-inner]"); 3288 const videoBlock = button.closest("[data-video]"); 3289 3290 if (!videoContainer) { 3291 return; 3292 } 3293 3294 if (!videoBlock) { 3295 return; 3296 } 3297 3298 if (videoContainer.querySelector("iframe")) { 3299 return; 3300 } 3301 3302 const iframe = document.createElement("iframe"); 3303 iframe.src = videoLink; 3304 iframe.allow = "autoplay; encrypted-media"; 3305 iframe.allowFullscreen = true; 3306 iframe.style.width = "100%"; 3307 iframe.style.height = "100%"; 3308 3309 videoContainer.innerHTML = ""; 3310 3311 videoBlock.classList.add("_video-playing"); 3312 3313 videoContainer.appendChild(iframe); 3314 }); 3315 }); 3316}); 3317 3318//========== ÐÐ¾Ð´Ð¼ÐµÐ½Ñ ============================================================================================================================================== 3319 3320document.addEventListener("DOMContentLoaded", () => { 3321 const titleMenu = document.querySelectorAll("[data-menu-title]"); 3322 const submenu = document.querySelectorAll("[data-submenu]"); 3323 const submenuChangeCity = document.querySelector("[data-submenu-change-city]"); 3324 3325 if (titleMenu.length === 0 || submenu.length === 0) { 3326 return; 3327 } 3328 3329 // Ðогика Ð´Ð»Ñ Ð¾ÑкÑÑÑиÑ/закÑÑÑÐ¸Ñ submenu 3330 titleMenu.forEach((cityBlock, index) => { 3331 const textBlock = submenu[index]; 3332 if (!textBlock) { 3333 return; 3334 } 3335 3336 cityBlock.addEventListener("click", (event) => { 3337 event.stopPropagation(); 3338 3339 // ÐÑовеÑÑем, еÑÑÑ Ð»Ð¸ оÑкÑÑÑÑе submenu или submenuChangeCity 3340 const anySubmenuOpen = Array.from(submenu).some((block) => block.classList.contains("_visible")) || 3341 (submenuChangeCity && submenuChangeCity.classList.contains("_visible")); 3342 if (anySubmenuOpen) { 3343 return; // Ðе оÑкÑÑваем новое submenu, еÑли какое-либо Ñже оÑкÑÑÑо 3344 } 3345 3346 textBlock.classList.toggle("_visible"); 3347 }); 3348 }); 3349 3350 // Ðогика Ð´Ð»Ñ ÐºÐ½Ð¾Ð¿Ð¾Ðº внÑÑÑи submenu 3351 submenu.forEach((textBlock) => { 3352 const yesButton = textBlock.querySelector("[data-submenu-yes]"); 3353 const noButton = textBlock.querySelector("[data-submenu-no]"); 3354 3355 if (yesButton) { 3356 yesButton.addEventListener("click", (event) => { 3357 event.stopPropagation(); 3358 textBlock.classList.remove("_visible"); 3359 }); 3360 } 3361 3362 if (noButton) { 3363 noButton.addEventListener("click", (event) => { 3364 event.stopPropagation(); 3365 textBlock.classList.remove("_visible"); 3366 if (submenuChangeCity) { 3367 submenuChangeCity.classList.add("_visible"); 3368 } 3369 }); 3370 } 3371 }); 3372 3373 // ÐакÑÑÑие submenu и submenuChangeCity пÑи клике вне Ð¸Ñ Ð¾Ð±Ð»Ð°ÑÑи 3374 document.addEventListener("click", (event) => { 3375 submenu.forEach((textBlock) => { 3376 if (textBlock.classList.contains("_visible") && !textBlock.contains(event.target)) { 3377 textBlock.classList.remove("_visible"); 3378 } 3379 }); 3380 3381 if ( 3382 submenuChangeCity && 3383 submenuChangeCity.classList.contains("_visible") && 3384 !submenuChangeCity.contains(event.target) 3385 ) { 3386 submenuChangeCity.classList.remove("_visible"); 3387 } 3388 }); 3389}); 3390 3391 3392//=========== ФилÑÑÑÑ Ð² каÑалоге ============================================================================================================================================= 3393 3394/* 3395document.addEventListener('DOMContentLoaded', () => { 3396 const checkboxes = document.querySelectorAll('.category__filter-item input[type="checkbox"]'); 3397
3398 checkboxes.forEach(checkbox => { 3399 checkbox.addEventListener('change', handleFilterChange); 3400 }); 3401 3402 function handleFilterChange() { 3403 const selectedFilters = Array.from(checkboxes) 3404 .filter(checkbox => checkbox.checked) 3405 .map(checkbox => checkbox.id); 3406 3407 fetch('/your-api-endpoint', { 3408 method: 'POST', 3409 headers: { 3410 'Content-Type': 'application/json', 3411 }, 3412 body: JSON.stringify({ filters: selectedFilters }), 3413 }) 3414 .then(response => response.json()) 3415 .then(data => { 3416 updateContent(data); 3417 }) 3418 .catch(error => { 3419 console.error('ÐÑибка пÑи обÑабоÑке ÑилÑÑÑов:', error); 3420 }); 3421 } 3422 3423 function updateContent(data) { 3424 const contentContainer = document.querySelector('#content-container'); 3425 if (contentContainer) { 3426 contentContainer.innerHTML = ''; 3427 data.forEach(item => { 3428 const itemElement = document.createElement('div'); 3429 itemElement.className = 'content-item'; 3430 itemElement.textContent = item.name; 3431 contentContainer.appendChild(itemElement); 3432 }); 3433 } 3434 } 3435}); 3436 3437*/ 3438//========= ÐоказаÑÑ ÐµÑе =============================================================================================================================================== 3439 3440document.addEventListener("DOMContentLoaded", () => { 3441 const container = document.getElementById("category-container");
3442 const loadMoreButton = document.getElementById("load-more"); 3443 3444 // ÐÑовеÑÑем налиÑие конÑейнеÑа и кнопки пеÑед вÑполнением опеÑаÑий 3445 if (!container || !loadMoreButton) { 3446 return; 3447 } 3448 3449 let currentIndex = 0; 3450 const initialLoad = 8; // ÐолиÑеÑÑво каÑÑоÑек Ð´Ð»Ñ Ð½Ð°ÑалÑной загÑÑзки 3451 const itemsPerPage = 4; // ÐолиÑеÑÑво каÑÑоÑек Ð´Ð»Ñ Ð¿Ð¾ÑледÑÑÑÐ¸Ñ Ð·Ð°Ð³ÑÑзок 3452 3453 function createCard(item) { 3454 let cardTemplate = ""; 3455 3456 cardTemplate += `<div class="list-item mini-cart category-item">`; 3457 3458 // Тег 3459 if (item.tag) { 3460 cardTemplate += `<span class="item-tag">${item.tag}</span>`; 3461 } 3462 3463 // ÐзобÑажение 3464 if (item.image) { 3465 cardTemplate += ` 3466 <a href="#" class="mini-cart__image"> 3467 <img class="mini-cart__img" src="${item.image}" alt=""> 3468 </a> 3469 `; 3470 } 3471 3472 // Ðазвание 3473 if (item.name) { 3474 cardTemplate += `<a href="#" class="mini-cart__name font16-700-mob">${item.name}</a>`; 3475 } 3476 3477 // Ðлок ÑÐµÐ½Ñ Ð¸ аÑÑикÑла 3478 cardTemplate += `<div class="mini-cart__bot">`; 3479 if (item.price) { 3480 cardTemplate += `<p class="mini-cart__price">${item.price}</p>`; 3481 } 3482 if (item.art) { 3483 cardTemplate += `<p class="mini-cart__art">ÐÑÑикÑл: ${item.art}</p>`; 3484 } 3485 cardTemplate += `</div>`; 3486 3487 // Ðнопки 3488 cardTemplate += `<div class="mini-cart__btns">`; 3489 3490 // СÑеÑÑики 3491 cardTemplate += `<div class="mini-cart_btns-item">`; 3492 cardTemplate += ` 3493 <button class="mini-cart__input btn btn-decrement"> 3494 <svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"> 3495 <line x1="0" y1="1.1" x2="16" y2="1.1" stroke="#354E9E" stroke-width="1.8"></line> 3496 </svg> 3497 </button> 3498 `; 3499 cardTemplate += `<input type="number" class="mini-cart__input num" value="1" min="1">`; 3500 cardTemplate += ` 3501 <button class="mini-cart__input btn btn-increment"> 3502 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 3503 <line x1="0" y1="7.5" x2="16" y2="7.5" stroke="#354E9E" stroke-width="1.8"></line> 3504 <line x1="8.5" y1="0" x2="8.5" y2="16" stroke="#354E9E" stroke-width="1.8"></line> 3505 </svg> 3506 </button> 3507 `; 3508 cardTemplate += `</div>`; 3509 3510 // Ðнопка Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ñ Ð² коÑÐ·Ð¸Ð½Ñ 3511 cardTemplate += `<div class="mini-cart_btns-add-cart">`; 3512 cardTemplate += ` 3513 <button type="button" class="mini-cart__add-cart bg-blue"> 3514 <svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg"> 3515 <path d="M10.7534 8.80602H12.8377V5.6268H15.966V3.5061H12.8377V0.323242H10.7534V3.50246H7.62506V5.62316H10.7534M6.58472 18.3437C5.43889 18.3437 4.5004 19.2967 4.5004 20.4644C4.5004 21.632 5.43889 22.5851 6.58472 22.5851C7.73055 22.5851 8.66904 21.632 8.66904 20.4644C8.66904 19.2967 7.73055 18.3437 6.58472 18.3437ZM17.0099 18.3437C15.8641 18.3437 14.9256 19.2967 14.9256 20.4644C14.9256 21.632 15.8641 22.5851 17.0099 22.5851C18.1558 22.5851 19.0943 21.632 19.0943 20.4644C19.0943 19.2967 18.1558 18.3437 17.0099 18.3437ZM6.79206 14.9498V14.8444L7.73055 13.0438H15.4458C16.1769 13.0438 16.9045 12.6182 17.2173 11.9852L21.2841 4.56463L19.5126 3.5061L15.4458 10.9267H8.14887L3.76925 1.38177H0.328125V3.50246H2.41244L6.1664 11.5596L4.70774 14.1023C4.60225 14.4188 4.5004 14.7389 4.5004 15.1608C4.5004 16.3285 5.43889 17.2815 6.58472 17.2815H19.0943V15.1608H6.9994C6.89391 15.1608 6.79206 15.0553 6.79206 14.9498Z" fill="white"></path> 3516 </svg> 3517 </button> 3518 `; 3519 cardTemplate += `</div>`; 3520 3521 cardTemplate += `</div></div>`; // ÐакÑÑваем кнопки и каÑÑоÑÐºÑ 3522 return cardTemplate; 3523 } 3524 3525 async function loadCards(loadCount = itemsPerPage) { 3526 try { 3527 const response = await fetch("data.json"); 3528 const data = await response.json(); 3529 const itemsToShow = data.slice(currentIndex, currentIndex + loadCount); 3530 3531 itemsToShow.forEach(item => { 3532 container.insertAdjacentHTML("beforeend", createCard(item)); 3533 }); 3534 3535 currentIndex += loadCount; 3536 3537 if (currentIndex >= data.length) {
3538 loadMoreButton.style.display = "none"; 3539 } 3540 3541 initializeCounters(); 3542 } catch (error) { 3543 console.error("ÐÑибка загÑÑзки даннÑÑ :", error); 3544 } 3545 } 3546 3547 function initializeCounters() { 3548 const newDecrementButtons = container.querySelectorAll(".btn-decrement:not(.initialized)"); 3549 const newIncrementButtons = container.querySelectorAll(".btn-increment:not(.initialized)"); 3550 3551 newDecrementButtons.forEach(button => { 3552 button.classList.add("initialized"); 3553 button.addEventListener("click", (e) => { 3554 const input = e.target.closest(".mini-cart_btns-item").querySelector(".num"); 3555 const currentValue = parseInt(input.value, 10) || 0; 3556 if (currentValue > 1) { 3557 //input.value = currentValue - 1; 3558 } 3559 }); 3560 }); 3561 3562 newIncrementButtons.forEach(button => { 3563 button.classList.add("initialized"); 3564 button.addEventListener("click", (e) => { 3565 const input = e.target.closest(".mini-cart_btns-item").querySelector(".num"); 3566 const currentValue = parseInt(input.value, 10) || 0; 3567 //input.value = currentValue + 1; 3568 }); 3569 }); 3570 } 3571 3572 loadMoreButton.addEventListener("click", () => loadCards()); 3573 loadCards(initialLoad); 3574}); 3575 3576 3577//======================================================================================================================================================== 3578 3579document.addEventListener('DOMContentLoaded', function () { 3580 // Ð²Ð¸Ð´Ð¶ÐµÑ "ÐеловÑе линии" 3581 const businessLinesWidgets = document.querySelectorAll('.widget-business-lines'); 3582 if (businessLinesWidgets.length > 0) { 3583 businessLinesWidgets.forEach(widget => { 3584 const iframeBusinessLines = document.createElement('iframe'); 3585 iframeBusinessLines.align = "left"; 3586 iframeBusinessLines.src = "https://widgets.dellin.ru/calculator/?derival_to_door=on&arrival_to_door=off&disabled_calculation=off&insurance=0&package=1"; 3587 iframeBusinessLines.width = "100%"; 3588 iframeBusinessLines.height = "390"; 3589 iframeBusinessLines.scrolling = "no"; 3590 iframeBusinessLines.frameBorder = "0"; 3591 3592 const updateHeight = () => { 3593 if (window.innerWidth <= 991.98) { 3594 iframeBusinessLines.height = "365"; 3595 } else { 3596 iframeBusinessLines.height = "390"; 3597 } 3598 }; 3599 3600 updateHeight(); 3601 3602 window.addEventListener('resize', updateHeight); 3603 3604 widget.appendChild(iframeBusinessLines); 3605 }); 3606 } 3607 3608 // Ð²Ð¸Ð´Ð¶ÐµÑ "ÐÐÐ" 3609 const pekWidgets = document.querySelectorAll('.widget-pek'); 3610 if (pekWidgets.length > 0) { 3611 pekWidgets.forEach(widget => { 3612 const iframePek = document.createElement('iframe'); 3613 iframePek.allowTransparency = "true"; 3614 iframePek.frameBorder = "0"; 3615 iframePek.width = "250px"; 3616 iframePek.height = "345"; 3617 iframePek.scrolling = "no"; 3618 iframePek.style.border = "1px solid #ededed"; 3619 iframePek.src = "https://pecom.ru/ru/newcalc/"; 3620 widget.appendChild(iframePek); 3621 }); 3622 } 3623 3624 // Ð²Ð¸Ð´Ð¶ÐµÑ "CDEK" 3625 const cdekWidgets = document.querySelectorAll('.cdek'); 3626 if (cdekWidgets.length > 0) { 3627 cdekWidgets.forEach(widget => { 3628 const iframeCdek = document.createElement('iframe'); 3629 iframeCdek.id = "cdek-calc"; 3630 iframeCdek.src = "https://cdek-online.ru/construct_form.php"; 3631 iframeCdek.scrolling = "no"; 3632 iframeCdek.frameBorder = "0"; 3633 iframeCdek.height = "375"; 3634 iframeCdek.width = "300"; 3635 widget.appendChild(iframeCdek); 3636 }); 3637 } 3638}); 3639 3640 3641 3642//======================================================================================================================================================== 3643 3644document.addEventListener("DOMContentLoaded", () => { 3645 const dropdowns = document.querySelectorAll("[data-dropdown-toggle]"); 3646 3647 dropdowns.forEach((dropdown) => { 3648 const dropdownToggle = dropdown; 3649 const dropdownContainer = dropdown.closest(".dropdown"); 3650 const dropdownList = dropdownContainer?.querySelector("[data-dropdown-list]"); 3651 const dropdownArrow = dropdownContainer?.querySelector("[data-dropdown-arrow]"); 3652 const dropdownItems = dropdownContainer?.querySelectorAll(".dropdown-item"); 3653 const tabs = document.querySelectorAll(".tabs-info-cart__body"); 3654 3655 if (!dropdownList || !dropdownItems || !dropdownArrow || !tabs) return; 3656 3657 const activeItem = dropdownContainer.querySelector(".dropdown-item[data-active]"); 3658 if (activeItem) { 3659 activateItem(activeItem.dataset.value); 3660 dropdownToggle.textContent = activeItem.textContent; 3661 dropdownToggle.appendChild(dropdownArrow); 3662 } 3663 3664 function activateItem(value) {
3665 dropdownItems.forEach((item) => { 3666 item.classList.toggle("active", item.dataset.value === value); 3667 }); 3668 3669 tabs.forEach((tab) => { 3670 tab.classList.toggle("active", tab.dataset.dropdown === value); 3671 }); 3672 } 3673 3674 dropdownToggle.addEventListener("click", () => { 3675 dropdownList.classList.toggle("active"); 3676 }); 3677 3678 dropdownItems.forEach((item) => { 3679 item.addEventListener("click", (event) => { 3680 const value = event.target.dataset.value; 3681 activateItem(value); 3682 dropdownToggle.textContent = event.target.textContent; 3683 dropdownToggle.appendChild(dropdownArrow); 3684 dropdownList.classList.remove("active"); 3685 }); 3686 }); 3687 3688 document.addEventListener("click", (event) => { 3689 if (!event.target.closest(".dropdown")) { 3690 dropdownList.classList.remove("active"); 3691 } 3692 }); 3693 }); 3694 }); 3695 3696
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.