350 lines
11 KiB
JavaScript
350 lines
11 KiB
JavaScript
// -----------------------------------------HEADER-----------------------------------------------------------
|
||
const headers = document.querySelectorAll('.header_top_item');
|
||
if(headers.length > 0) {
|
||
headers[0].classList.add('active');
|
||
}
|
||
document.querySelectorAll('.header_top_item').forEach((item) => {
|
||
|
||
item.addEventListener('click', (e) => {
|
||
e.preventDefault(); // если не нужно переходить со страницы
|
||
document.querySelectorAll('.header_top_item').forEach(el => el.classList.remove('active'));
|
||
item.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// -------------------------------ACCORDION-SLIDER-----------------------------------------------------------
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const accordion = document.querySelector('.accordion');
|
||
const items = document.querySelectorAll('.accordion-item');
|
||
const dotsContainer = document.createElement('div');
|
||
dotsContainer.classList.add('slider-dots');
|
||
accordion.after(dotsContainer);
|
||
|
||
let dots = [];
|
||
let isMobile = false;
|
||
let currentIndex = 0;
|
||
|
||
// Свайп
|
||
let startX = 0;
|
||
let endX = 0;
|
||
|
||
// === СОЗДАНИЕ ТОЧЕК ===
|
||
function createDots() {
|
||
dotsContainer.innerHTML = '';
|
||
items.forEach((_, index) => {
|
||
const dot = document.createElement('span');
|
||
dot.classList.add('dot');
|
||
if (index === 0) dot.classList.add('active');
|
||
dotsContainer.appendChild(dot);
|
||
});
|
||
dots = document.querySelectorAll('.dot');
|
||
}
|
||
|
||
// === ПОКАЗ СЛАЙДА ===
|
||
function showSlide(index) {
|
||
items.forEach((item, i) => {
|
||
if (i === index) {
|
||
item.style.display = 'flex';
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
dots.forEach(dot => dot.classList.remove('active'));
|
||
if (dots[index]) dots[index].classList.add('active');
|
||
}
|
||
|
||
// === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
|
||
function enableSlider() {
|
||
isMobile = true;
|
||
items.forEach(item => item.classList.add('active'));
|
||
createDots();
|
||
currentIndex = 0;
|
||
showSlide(currentIndex);
|
||
|
||
dots.forEach((dot, i) => {
|
||
dot.addEventListener('click', () => {
|
||
currentIndex = i;
|
||
showSlide(currentIndex);
|
||
});
|
||
});
|
||
|
||
// свайпы
|
||
accordion.addEventListener('touchstart', (e) => {
|
||
startX = e.touches[0].clientX;
|
||
});
|
||
|
||
accordion.addEventListener('touchmove', (e) => {
|
||
endX = e.touches[0].clientX;
|
||
});
|
||
|
||
accordion.addEventListener('touchend', () => {
|
||
if (!isMobile) return;
|
||
const diff = endX - startX;
|
||
if (Math.abs(diff) > 50) {
|
||
if (diff > 0) {
|
||
currentIndex = (currentIndex - 1 + items.length) % items.length;
|
||
} else {
|
||
currentIndex = (currentIndex + 1) % items.length;
|
||
}
|
||
showSlide(currentIndex);
|
||
}
|
||
});
|
||
|
||
dotsContainer.style.display = 'flex';
|
||
}
|
||
|
||
// === ОТКЛЮЧЕНИЕ СЛАЙДЕРА НА ДЕСКТОПЕ ===
|
||
function disableSlider() {
|
||
isMobile = false;
|
||
dotsContainer.style.display = 'none';
|
||
|
||
items.forEach(item => {
|
||
item.classList.remove('active');
|
||
item.style.display = 'flex';
|
||
});
|
||
|
||
if (items.length > 0) items[0].classList.add('active');
|
||
|
||
items.forEach(item => {
|
||
item.onclick = () => {
|
||
if (!isMobile) {
|
||
items.forEach(i => i.classList.remove('active'));
|
||
item.classList.add('active');
|
||
}
|
||
};
|
||
});
|
||
}
|
||
|
||
// === ПРОВЕРКА ШИРИНЫ ===
|
||
function checkWidth() {
|
||
if (window.innerWidth <= 600 && !isMobile) {
|
||
enableSlider();
|
||
} else if (window.innerWidth > 600 && isMobile) {
|
||
disableSlider();
|
||
} else if (window.innerWidth > 600 && !isMobile) {
|
||
disableSlider();
|
||
}
|
||
}
|
||
|
||
checkWidth();
|
||
window.addEventListener('resize', checkWidth);
|
||
});
|
||
|
||
// -----------------------------------------ACCORDION-SECOND----------------------------------------------
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const cards = document.querySelectorAll('.advantage_slider_item');
|
||
|
||
cards.forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
if (card.classList.contains('active')) {
|
||
card.classList.remove('active');
|
||
} else {
|
||
cards.forEach(c => c.classList.remove('active'));
|
||
card.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const sliderContainer = document.querySelector('.advantage_slider');
|
||
const slider = document.querySelector('.advantage_slider_items');
|
||
const slides = document.querySelectorAll('.advantage_slider_item');
|
||
let currentIndex = 0;
|
||
let dotsContainer, dots;
|
||
|
||
function initSlider() {
|
||
if (window.innerWidth > 900) {
|
||
slider.style.transform = '';
|
||
if (dotsContainer) dotsContainer.remove();
|
||
return;
|
||
}
|
||
|
||
if (!dotsContainer) {
|
||
dotsContainer = document.createElement('div');
|
||
dotsContainer.classList.add('slider_dots');
|
||
slides.forEach((_, i) => {
|
||
const dot = document.createElement('div');
|
||
dot.classList.add('slider_dot');
|
||
if (i === 0) dot.classList.add('active');
|
||
dot.addEventListener('click', () => moveToSlide(i));
|
||
dotsContainer.appendChild(dot);
|
||
});
|
||
sliderContainer.appendChild(dotsContainer);
|
||
dots = dotsContainer.querySelectorAll('.slider_dot');
|
||
}
|
||
|
||
moveToSlide(0);
|
||
}
|
||
|
||
function moveToSlide(index) {
|
||
if (window.innerWidth > 900) return;
|
||
if (index < 0) index = slides.length - 1;
|
||
if (index >= slides.length) index = 0;
|
||
currentIndex = index;
|
||
const slideWidth = slides[0].offsetWidth + 28;
|
||
slider.style.transform = `translateX(-${index * slideWidth}px)`;
|
||
updateDots();
|
||
}
|
||
|
||
function updateDots() {
|
||
if (!dots) return;
|
||
dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
|
||
}
|
||
|
||
// === свайп ===
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
sliderContainer.addEventListener('touchstart', e => {
|
||
touchStartX = e.changedTouches[0].screenX;
|
||
});
|
||
|
||
sliderContainer.addEventListener('touchend', e => {
|
||
touchEndX = e.changedTouches[0].screenX;
|
||
handleSwipe();
|
||
});
|
||
|
||
function handleSwipe() {
|
||
const diff = touchEndX - touchStartX;
|
||
if (Math.abs(diff) < 50) return; // минимальная дистанция свайпа
|
||
if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий
|
||
else moveToSlide(currentIndex + 1); // свайп влево → следующий
|
||
}
|
||
|
||
window.addEventListener('resize', initSlider);
|
||
initSlider();
|
||
});
|
||
|
||
|
||
// ----------------------------------------------------------ВЫПАДАЮЩЕЕ-МЕНЮ--------------------------------------------------------
|
||
|
||
document.querySelector('.header_nav_link-reverse').addEventListener('click', function() {
|
||
const dropdown = document.querySelector('.dropdown-list');
|
||
const text = this.querySelector('.link-text');
|
||
|
||
dropdown.classList.toggle('show');
|
||
|
||
// Меняем текст кнопки
|
||
if (dropdown.classList.contains('show')) {
|
||
text.textContent = 'Меньше услуг';
|
||
} else {
|
||
text.textContent = 'Больше услуг';
|
||
}
|
||
});
|
||
|
||
// -------------------------------------BURGER-MENU-TOP-----------------------------------------------------------------------------------
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const burgerBtn = document.querySelector('.burger_menu_btn');
|
||
const navWrapper = document.querySelector('.header_top_wrapper-open');
|
||
const navMenu = navWrapper.querySelector('.header_nav_top');
|
||
|
||
burgerBtn.addEventListener('click', () => {
|
||
navMenu.classList.toggle('active');
|
||
burgerBtn.classList.toggle('active');
|
||
document.body.classList.toggle('lock'); // блокируем скролл при открытом меню
|
||
});
|
||
|
||
// при клике по ссылке меню закрываем бургер
|
||
navWrapper.querySelectorAll('.header_top_link').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
navMenu.classList.remove('active');
|
||
burgerBtn.classList.remove('active');
|
||
document.body.classList.remove('lock');
|
||
});
|
||
});
|
||
});
|
||
|
||
// -----------------------------------------BURGER-MENU-----------------------------------------------------------------
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const toggleBtn = document.querySelector(".top_list_btn");
|
||
const menu = document.querySelector(".header_nav_burger");
|
||
|
||
toggleBtn.addEventListener("click", () => {
|
||
menu.classList.toggle("open");
|
||
});
|
||
});
|
||
|
||
// ---------------------------------------------SLIDER----------------------------------------------------
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const servicesContainer = document.querySelector('.our-services_row');
|
||
const slider = document.querySelector('.our-services_row_items');
|
||
const slides = document.querySelectorAll('.our-services_row_item');
|
||
let currentIndex = 0;
|
||
let dotsContainer, dots;
|
||
let isActive = false;
|
||
|
||
function initServicesSlider() {
|
||
if (window.innerWidth > 900) {
|
||
slider.style.transform = '';
|
||
if (dotsContainer) {
|
||
dotsContainer.remove();
|
||
dotsContainer = null;
|
||
}
|
||
isActive = false;
|
||
return;
|
||
}
|
||
|
||
if (isActive) return;
|
||
isActive = true;
|
||
|
||
// создаём контейнер для точек
|
||
dotsContainer = document.createElement('div');
|
||
dotsContainer.classList.add('our-services_dots');
|
||
slides.forEach((_, i) => {
|
||
const dot = document.createElement('div');
|
||
dot.classList.add('our-services_dot');
|
||
if (i === 0) dot.classList.add('active');
|
||
dot.addEventListener('click', () => moveToSlide(i));
|
||
dotsContainer.appendChild(dot);
|
||
});
|
||
servicesContainer.appendChild(dotsContainer);
|
||
dots = dotsContainer.querySelectorAll('.our-services_dot');
|
||
|
||
moveToSlide(0);
|
||
}
|
||
|
||
function moveToSlide(index) {
|
||
if (window.innerWidth > 900) return;
|
||
if (index < 0) index = slides.length - 1;
|
||
if (index >= slides.length) index = 0;
|
||
currentIndex = index;
|
||
const offset = index * servicesContainer.offsetWidth;
|
||
slider.style.transform = `translateX(-${offset}px)`;
|
||
updateDots();
|
||
}
|
||
|
||
function updateDots() {
|
||
if (!dots) return;
|
||
dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
|
||
}
|
||
|
||
// === свайп ===
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
slider.addEventListener('touchstart', e => {
|
||
touchStartX = e.changedTouches[0].screenX;
|
||
});
|
||
|
||
slider.addEventListener('touchend', e => {
|
||
touchEndX = e.changedTouches[0].screenX;
|
||
handleSwipe();
|
||
});
|
||
|
||
function handleSwipe() {
|
||
const diff = touchEndX - touchStartX;
|
||
if (Math.abs(diff) < 50) return; // минимальная длина свайпа
|
||
if (diff > 0) moveToSlide(currentIndex - 1); // свайп вправо → предыдущий
|
||
else moveToSlide(currentIndex + 1); // свайп влево → следующий
|
||
}
|
||
|
||
window.addEventListener('resize', initServicesSlider);
|
||
initServicesSlider();
|
||
});
|