Fakel-Gym/resources/js/app.js

/*
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;
});