src/scripts/main.js - master - vgik/vgik.ru-web

src/scripts/main.js
193 строки6 KB
bsn24
Готовые страницы двух этапов верстки
03 мар 2026, 10:18
03 мар 2026, 10:185f2c567
import {getCookie, setCookie} from '@scripts/helpers/_cookie.js';
import {mainNavToggle, stickyHeader} from "@scripts/components/_header.js";
import {sliders} from '@scripts/components/_sliders.js';
import {tabs} from '@scripts/components/_tabs.js';
import {slideUp, slideToggle} from "@scripts/vendors/slide-toggle.js";
import AOS from 'aos';
import {select} from "@scripts/components/_select.js";
import '@scripts/components/_assets.js';

document.addEventListener('DOMContentLoaded', () => {
  stickyHeader();
  sliders();
  tabs();
  mainNavToggle();
  select();

  AOS.init({
    disable: 'phone',
    duration: 450,
    easing: 'linear',
    once: true,
  });

  (() => {
    const NOTE_COOKIE_NAME = 'mainHeaderNoteClosed';
    const NOTE_COOKIE_LIFETIME_DAYS = 14;

    const note = document.querySelector('.main-header__note');
    const closeBtn = note?.querySelector('.main-header__note-close');

    if (!note || !closeBtn) {
      return;
    }

    const isNoteHidden = Boolean(getCookie(NOTE_COOKIE_NAME));

    if (!isNoteHidden) {
      note.classList.remove('main-header__note--hidden');
    }

    closeBtn.addEventListener('click', () => {
      setCookie(NOTE_COOKIE_NAME, '1', NOTE_COOKIE_LIFETIME_DAYS);
      note.classList.add('main-header__note--hidden');
    });
  })();

  (() => {
    const menuBtn = document.querySelector('.btn-menu');
    const header = document.querySelector('.main-header');
    const root = document.querySelector('.page');

    if (menuBtn && header) {
      menuBtn.addEventListener('click', () => {
        menuBtn.classList.toggle('btn-menu--open');
        header.classList.toggle('main-header--menu-open');
        root.classList.toggle('lock');
      });
    }
  })();

  (() => {
    const contactsItems = document.querySelectorAll('.footer-contacts__item');

    if (!contactsItems.length) return;

    contactsItems.forEach((item, index) => {
      const btn = item.querySelector('.footer-contacts__title-btn');
      const content = item.querySelector('.footer-contacts__wrap');

      if (!btn || !content) return;

      // Устанавливаем начальные ARIA атрибуты
      const contentId = `footer-contacts-content-${index}`;
      btn.setAttribute('aria-controls', contentId);
      btn.setAttribute('aria-expanded', 'false');
      content.setAttribute('id', contentId);

      btn.addEventListener('click', () => {
        const isOpen = btn.getAttribute('aria-expanded') === 'true';

        // Закрываем все остальные открытые аккордеоны
        contactsItems.forEach((otherItem) => {
          const otherBtn = otherItem.querySelector('.footer-contacts__title-btn');
          const otherContent = otherItem.querySelector('.footer-contacts__wrap');

          if (otherBtn && otherBtn !== btn && otherBtn.getAttribute('aria-expanded') === 'true') {
            otherBtn.setAttribute('aria-expanded', 'false');
            otherBtn.classList.remove('footer-contacts__title-btn--active');
            slideUp(otherContent, 300);
          }
        });

        // Переключаем текущий
        if (isOpen) {
          btn.setAttribute('aria-expanded', 'false');
          btn.classList.remove('footer-contacts__title-btn--active');
          slideUp(content, 300);
        } else {
          btn.setAttribute('aria-expanded', 'true');
          btn.classList.add('footer-contacts__title-btn--active');
          slideToggle(content, 300);
        }
      });
    });
  })();

  (() => {
    const filterBtn = document.querySelector('.filter-toggle');
    const filter = document.querySelector('.filter');

    if (!filterBtn || !filter) return;

    filterBtn.addEventListener('click', () => {
      filterBtn.classList.toggle('filter-toggle--active');
      slideToggle(filter, 300);
    });
  })();

  (() => {
    const article = document.querySelector('.article__body');

    if (!article) return;

    const tables = article.querySelectorAll('table');

    tables?.forEach(table => {
      // если таблица уже обёрнута — пропускаем
      if (table.parentElement.classList.contains('table-wrap')) return;

      const wrap = document.createElement('div');
      wrap.className = 'table-wrap';

      table.parentNode.insertBefore(wrap, table);
      wrap.appendChild(table);
    });

  })();

  (() => {
    const scrollNavEl = document.querySelector('[data-scroll-nav]');

    if (!scrollNavEl) return;

    const scrollNavList = scrollNavEl.querySelector('ul');
    const linkActive = scrollNavEl.querySelector('a.pages-nav__link--active');

    const linkActiveX = linkActive?.offsetLeft;

    if (window.matchMedia("(max-width: 992px)").matches) {
      scrollNavEl.scrollBy({
        left: linkActiveX - 100
      });
    }
  })();

  const bviButton = document.querySelectorAll('.bvi-open');

  bviButton?.forEach(button => {

    const handleFirstClick = async (event) => {
      event.preventDefault();

      // Удаляем обработчик "первого клика", чтобы не загружать модуль повторно
      button.removeEventListener('click', handleFirstClick);

      // Динамический импорт: создает отдельный чанк bvi-loader.[hash].js
      const { default: initBviLoader } = await import('@scripts/components/_bvi-loader.js');

      // Запускаем инициализацию
      await initBviLoader(event);
    };

    button.addEventListener('click', handleFirstClick);

  });

  (() => {
    const lightboxEls = document.querySelectorAll('.lightbox');

    // Если на странице нет элементов для лайтбокса — ничего не грузим
    if (!lightboxEls.length) return;

    // Динамический импорт: создаёт отдельный чанк _lightbox.[hash].js
    import('@scripts/components/_lightbox.js')
        .then(({ lightbox }) => {
          lightbox();
        })
        .catch((err) => {
          console.error('Lightbox init error:', err);
        });
  })();

});