272 lines
8.5 KiB
JavaScript
272 lines
8.5 KiB
JavaScript
/*
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const header = document.getElementById('site-header');
|
||
const main = document.getElementById('main-content');
|
||
|
||
function updateMainPadding() {
|
||
const headerHeight = header.offsetHeight;
|
||
main.style.paddingTop = headerHeight + 'px';
|
||
|
||
// Показываем контент с плавной анимацией
|
||
main.classList.remove('opacity-0');
|
||
}
|
||
|
||
updateMainPadding();
|
||
window.addEventListener('resize', updateMainPadding);
|
||
});*/
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
function smoothScrollTo(element, options = {}) {
|
||
const {
|
||
offset = 80,
|
||
behavior = 'smooth',
|
||
block = 'start'
|
||
} = options;
|
||
|
||
if (element) {
|
||
const elementPosition = element.offsetTop;
|
||
const offsetPosition = Math.max(0, elementPosition - offset);
|
||
|
||
window.scrollTo({
|
||
top: offsetPosition,
|
||
behavior: behavior
|
||
});
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('[data-scroll-to]').forEach(function(button) {
|
||
button.addEventListener('click', function() {
|
||
const scrollTarget = this.getAttribute('data-scroll-to');
|
||
|
||
if (scrollTarget) {
|
||
|
||
const targetSection = document.querySelector(`[data-scroll-section="${scrollTarget}"]`);
|
||
|
||
if (targetSection) {
|
||
|
||
const scrollOptions = {
|
||
offset: 80,
|
||
behavior: 'smooth'
|
||
};
|
||
|
||
smoothScrollTo(targetSection, scrollOptions);
|
||
|
||
|
||
document.querySelectorAll('[data-scroll-section]').forEach(section => {
|
||
section.classList.remove('scroll-active');
|
||
});
|
||
targetSection.classList.add('scroll-active');
|
||
} else {
|
||
console.warn(`Секция с data-scroll-section="${scrollTarget}" не найдена`);
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
function updateActiveSection() {
|
||
const sections = document.querySelectorAll('[data-scroll-section]');
|
||
const scrollPosition = window.scrollY + 100;
|
||
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionBottom = sectionTop + section.offsetHeight;
|
||
|
||
if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
|
||
sections.forEach(s => s.classList.remove('scroll-current'));
|
||
section.classList.add('scroll-current');
|
||
}
|
||
});
|
||
}
|
||
let scrollTimeout;
|
||
window.addEventListener('scroll', function() {
|
||
clearTimeout(scrollTimeout);
|
||
scrollTimeout = setTimeout(updateActiveSection, 100);
|
||
});
|
||
});
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
document.addEventListener('focus', function(e) {
|
||
if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
|
||
const group = e.target.closest('.ff-el-group');
|
||
if (group) group.classList.add('focused');
|
||
}
|
||
}, true);
|
||
|
||
document.addEventListener('blur', function(e) {
|
||
if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
|
||
const group = e.target.closest('.ff-el-group');
|
||
if (group) group.classList.remove('focused');
|
||
}
|
||
}, true);
|
||
|
||
document.addEventListener('input', function(e) {
|
||
if (e.target.matches('#fluentform_4 .ff-el-form-control')) {
|
||
const group = e.target.closest('.ff-el-group');
|
||
if (group) {
|
||
if (e.target.value.trim() !== '') {
|
||
group.classList.add('has-value');
|
||
} else {
|
||
group.classList.remove('has-value');
|
||
}
|
||
}
|
||
}
|
||
|
||
if (e.target.matches('#fluentform_4 .ff-el-phone')) {
|
||
formatPhoneNumber(e);
|
||
}
|
||
});
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.target.matches('#fluentform_4 .ff-el-phone')) {
|
||
handlePhoneKeydown(e);
|
||
}
|
||
});
|
||
|
||
function formatPhoneNumber(e) {
|
||
let value = e.target.value.replace(/\D/g, '');
|
||
|
||
if (value.startsWith('8')) {
|
||
value = '7' + value.slice(1);
|
||
}
|
||
|
||
if (!value.startsWith('7') && value.length > 0) {
|
||
value = '7' + value;
|
||
}
|
||
|
||
let formattedValue = '';
|
||
|
||
if (value.length > 0) {
|
||
formattedValue = '+7';
|
||
|
||
if (value.length > 1) {
|
||
formattedValue += ' (' + value.slice(1, 4);
|
||
|
||
if (value.length > 4) {
|
||
formattedValue += ') ' + value.slice(4, 7);
|
||
|
||
if (value.length > 7) {
|
||
formattedValue += '-' + value.slice(7, 9);
|
||
|
||
if (value.length > 9) {
|
||
formattedValue += '-' + value.slice(9, 11);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
e.target.value = formattedValue;
|
||
}
|
||
|
||
function handlePhoneKeydown(e) {
|
||
if (e.key === 'Backspace' || e.key === 'Delete') {
|
||
const cursorPos = e.target.selectionStart;
|
||
const value = e.target.value;
|
||
|
||
if (cursorPos > 0 && [' ', '(', ')', '-'].includes(value[cursorPos - 1])) {
|
||
setTimeout(() => {
|
||
e.target.setSelectionRange(cursorPos - 1, cursorPos - 1);
|
||
}, 0);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
const MenuSystem = {
|
||
burger: null,
|
||
overlay: null,
|
||
container: null,
|
||
isOpen: false,
|
||
|
||
init() {
|
||
this.burger = document.getElementById('burger');
|
||
this.overlay = document.getElementById('menu-overlay');
|
||
this.container = document.getElementById('menu-container');
|
||
|
||
if (!this.burger || !this.overlay || !this.container) {
|
||
return;
|
||
}
|
||
|
||
this.bindEvents();
|
||
},
|
||
|
||
bindEvents() {
|
||
this.burger.addEventListener('click', () => {
|
||
if (this.isOpen) {
|
||
this.close();
|
||
} else {
|
||
this.open();
|
||
}
|
||
});
|
||
|
||
this.overlay.addEventListener('click', (e) => {
|
||
if (e.target === this.overlay) {
|
||
this.close();
|
||
}
|
||
});
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && this.isOpen) {
|
||
this.close();
|
||
}
|
||
});
|
||
},
|
||
|
||
open() {
|
||
if (this.isOpen) return;
|
||
|
||
this.isOpen = true;
|
||
this.animateBurger(true);
|
||
this.showMenu();
|
||
},
|
||
|
||
close() {
|
||
if (!this.isOpen) return;
|
||
|
||
this.isOpen = false;
|
||
this.animateBurger(false);
|
||
this.hideMenu();
|
||
},
|
||
|
||
animateBurger(toClose) {
|
||
const line1 = this.burger.querySelector('.line-1');
|
||
const line2 = this.burger.querySelector('.line-2');
|
||
const line3 = this.burger.querySelector('.line-3');
|
||
|
||
if (toClose) {
|
||
line1.classList.remove('-translate-y-[6px]');
|
||
line1.classList.add('rotate-[45deg]');
|
||
line2.classList.add('opacity-[0]');
|
||
line3.classList.remove('translate-y-[6px]');
|
||
line3.classList.add('-rotate-[45deg]');
|
||
} else {
|
||
line1.classList.add('-translate-y-[6px]');
|
||
line1.classList.remove('rotate-[45deg]');
|
||
line2.classList.remove('opacity-[0]');
|
||
line3.classList.add('translate-y-[6px]');
|
||
line3.classList.remove('-rotate-[45deg]');
|
||
}
|
||
},
|
||
|
||
showMenu() {
|
||
document.body.style.overflow = 'hidden';
|
||
this.overlay.classList.remove('opacity-[0]', 'invisible');
|
||
this.overlay.classList.add('opacity-[1]', 'visible');
|
||
this.container.classList.remove('translate-x-full');
|
||
this.container.classList.add('translate-x-[0]');
|
||
},
|
||
|
||
hideMenu() {
|
||
document.body.style.overflow = '';
|
||
this.container.classList.remove('translate-x-[0]');
|
||
this.container.classList.add('translate-x-full');
|
||
this.overlay.classList.remove('opacity-[1]', 'visible');
|
||
this.overlay.classList.add('opacity-[0]', 'invisible');
|
||
}
|
||
};
|
||
|
||
MenuSystem.init();
|
||
window.MenuSystem = MenuSystem;
|
||
}); |