290 lines
9.6 KiB
JavaScript
290 lines
9.6 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; // флаг режима
|
||
|
||
// === СОЗДАНИЕ ТОЧЕК ===
|
||
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'));
|
||
dots[index].classList.add('active');
|
||
}
|
||
|
||
// === АКТИВАЦИЯ СЛАЙДЕРА НА МОБИЛЬНОМ ===
|
||
function enableSlider() {
|
||
isMobile = true;
|
||
items.forEach(item => item.classList.add('active')); // все раскрыты
|
||
createDots();
|
||
let currentIndex = 0;
|
||
showSlide(currentIndex);
|
||
|
||
dots.forEach((dot, i) => {
|
||
dot.addEventListener('click', () => {
|
||
currentIndex = i;
|
||
showSlide(currentIndex);
|
||
});
|
||
});
|
||
|
||
dotsContainer.style.display = 'flex';
|
||
}
|
||
|
||
// === ОТКЛЮЧЕНИЕ СЛАЙДЕРА НА ДЕСКТОПЕ ===
|
||
function disableSlider() {
|
||
isMobile = false;
|
||
dotsContainer.style.display = 'none';
|
||
|
||
// Убираем все active
|
||
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() {
|
||
// если ширина > 900 — отключаем слайдер
|
||
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; // с учётом gap
|
||
slider.style.transform = `translateX(-${index * slideWidth}px)`;
|
||
updateDots();
|
||
}
|
||
|
||
function updateDots() {
|
||
if (!dots) return;
|
||
dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
|
||
}
|
||
|
||
// пересоздаём слайдер при изменении ширины
|
||
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() {
|
||
dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
|
||
}
|
||
|
||
window.addEventListener('resize', initServicesSlider);
|
||
initServicesSlider();
|
||
}); |