landing_page/qdrant-landing/themes/qdrant-2024/assets/js/index.js

import scrollHandler from './scroll-handler';
import { initTabSync } from './tab-sync';
import { XXL_BREAKPOINT } from './constants';
import { addUTMToLinks, initGoToTopButton, persistUTMParams } from './helpers';
import { handleSegmentReady } from './segment-helpers';
import { addOneTrustPreferencesToLinks, registerAndCall } from './onetrust-helpers';
import TableOfContents from './table-of-content';
import { DOCS_HEADER_OFFSET } from './constants';
import { scrollIntoViewWithOffset } from './helpers';

persistUTMParams();

// on document ready
document.addEventListener('DOMContentLoaded', function () {
  addUTMToLinks();

  const handleOneTrustLoaded = () => {
    // One Trust Loaded
    window.OneTrust.OnConsentChanged(async () => {
      // One Trust Preference Updated
      addOneTrustPreferencesToLinks();
      registerAndCall();

      await window.analytics.track('onetrust_consent_preference_updated', {
        onetrust_active_groups: window.OnetrustActiveGroups ?? '',
      });
    });

    handleSegmentReady();

    // Only called once ∴ remove once called
    document.removeEventListener('onetrust_loaded', handleOneTrustLoaded);
  };

  document.addEventListener('onetrust_loaded', handleOneTrustLoaded);

  // Top banner activation
  const topBanner = document.querySelector('.top-banner');
  if (topBanner) {
    const start = parseInt(topBanner.getAttribute('data-start'));
    const end = parseInt(topBanner.getAttribute('data-end'));
    const now = Math.floor(Date.now() / 1000);
    if (start && now > start && (end ? now < end : true)) {
      topBanner.style.display = 'flex';
    }
  }

  // Header scroll
  const body = document.querySelector('body');
  const header = document.querySelector('.site-header');
  const topBannerHeight = topBanner?.offsetHeight ?? 0;
  const mainMenuHeight = document.querySelector('.main-menu')?.offsetHeight ?? 0;
  const PADDING_PART_TO_HIDE = 24;
  let menuOffset = window.innerWidth >= 1400 ? PADDING_PART_TO_HIDE : 0; // 24px is a PART of padding-top which we want to scroll over

  function addScrollStateToPage() {
    if (!header) {
      return;
    }
    header.style.minHeight = `${header.offsetHeight}px`;
    body.classList.add('scrolled');
  }

  function removeScrollStateFromPage() {
    if (!header) {
      return;
    }
    header.style.minHeight = '';
    body.classList.remove('scrolled');
  }

  window.addEventListener('resize', function () {
    menuOffset = window.innerWidth >= XXL_BREAKPOINT ? PADDING_PART_TO_HIDE : 0;
  });

  if (window.scrollY > topBannerHeight + menuOffset) {
    addScrollStateToPage();
  }

  scrollHandler.onScrollDown((position) => {
    if (position > topBannerHeight + menuOffset) {
      addScrollStateToPage();
    }
  });

  scrollHandler.onScrollUp((position) => {
    if (position <= topBannerHeight + menuOffset) {
      removeScrollStateFromPage();
    }
  });

  // Mobile menu

  const closeBtn = document.querySelector('.menu-mobile__close');
  const menuTrigger = document.querySelector('.main-menu__trigger');
  const menu = document.querySelector('.menu-mobile');
  menuTrigger.addEventListener('click', () => {
    menu.classList.add('menu-mobile--visible');
    body.classList.add('no-scroll');
  });
  closeBtn.addEventListener('click', () => {
    menu.classList.remove('menu-mobile--visible');
    body.classList.remove('no-scroll');
  });
  function toggleMenu(id) {
    const menuItem = document.querySelector(`[data-path=${id}]`);
    if (menuItem) {
      menuItem.classList.toggle('menu-mobile__item--active');
    }
  }

  document.querySelectorAll('.menu-mobile__item').forEach((item) => {
    item.addEventListener('click', () => {
      toggleMenu(item.dataset.path);
    });
  });

  // close mobile menu on resize
  window.addEventListener('resize', () => {
    if (window.innerWidth >= XXL_BREAKPOINT) {
      menu.classList.remove('menu-mobile--visible');
    }
  });

  initGoToTopButton('#scrollToTopBtn');
  initTabSync();

  if (document.getElementById('TableOfContents') && document.querySelector('.qdrant-post__body')) {
    new TableOfContents('#TableOfContents', '.qdrant-post__body');
  }

  document.querySelectorAll('.card__content-link').forEach((link) => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      const url = link.dataset.href;
      window.history.pushState({}, '', url);
      window.location.href = url;
    });
  });

  function toggleAccordion() {
    this.parentElement.classList.toggle('active');
    const panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  }

  const accordionButtons = Array.from(document.getElementsByClassName('accordion__item-header'));
  accordionButtons.forEach((el) => {
    el.addEventListener('click', toggleAccordion);
  });

  const accordionDarkButtons = Array.from(document.getElementsByClassName('accordion-dark__item-header'));
  accordionDarkButtons.forEach((el) => {
    el.addEventListener('click', toggleAccordion);
  });

  // Pricing doors tabs
  const pricingDoorsTabs = document.querySelectorAll('.qdrant-pricing-doors-b__tab');
  const pricingDoorsContainers = document.querySelectorAll('[data-doors-tab]');
  pricingDoorsTabs.forEach((tab) => {
    tab.addEventListener('click', () => {
      pricingDoorsTabs.forEach((t) => t.classList.remove('qdrant-pricing-doors-b__tab--active'));
      tab.classList.add('qdrant-pricing-doors-b__tab--active');
      const targetTab = tab.dataset.tab;
      pricingDoorsContainers.forEach((container) => {
        container.classList.toggle('qdrant-pricing-doors-b__doors--hidden', container.dataset.doorsTab !== targetTab);
      });
    });
  });

  // scroll to anchors:
  let offset = DOCS_HEADER_OFFSET;

  if (window.location.hash) {
    scrollIntoViewWithOffset(window.location.hash.replace('#', ''), offset);
  }

  let allLinks = document.querySelectorAll('a[href^="#"]');

  allLinks.forEach((anchor) => {
    const target = anchor.getAttribute('href');
    anchor.addEventListener('click', function (e) {
      e.preventDefault();
      history.pushState(null, null, target);
      scrollIntoViewWithOffset(target.replace('#', ''), offset);
    });
  });
});