bulma/docs/_javascript/main.js

document.addEventListener('DOMContentLoaded', () => {
  // Search

  const setSearchToggle = () => {
    const icon = document.getElementById('searchIcon');
    const search = document.getElementById('search');
    const input = document.getElementById('algoliaSearch');

    if (!icon) {
      return;
    }

    icon.addEventListener('click', (event) => {
      search.classList.toggle('bd-is-visible');

      if (search.classList.contains('bd-is-visible')) {
        algoliaSearch.focus();
      }
    });

    window.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') {
        return search.classList.remove('bd-is-visible');
      }
    });
  };

  setSearchToggle();

  // Navbar

  const setNavbarVisibility = () => {
    const navbar = document.getElementById('navbar');

    if (!navbar) {
      return;
    }

    const cs = getComputedStyle(navbar);
    const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
    const brand = navbar.querySelector('.navbar-brand');
    const end = navbar.querySelector('.navbar-end');
    const search = navbar.querySelector('.bd-search');
    const original = document.getElementById('navbarStartOriginal');
    const clone = document.getElementById('navbarStartClone');

    const rest =
      navbar.clientWidth -
      paddingX -
      brand.clientWidth -
      end.clientWidth -
      search.clientWidth;

    const space = original.clientWidth;
    const all = document.querySelectorAll(
      '#navbarStartClone > .bd-navbar-item'
    );
    const base = document.querySelectorAll(
      '#navbarStartClone > .bd-navbar-item-base'
    );
    const more = document.querySelectorAll(
      '#navbarStartOriginal > .bd-navbar-item-more'
    );
    const dropdown = document.querySelectorAll(
      '#navbarStartOriginal .bd-navbar-dropdown > .navbar-item'
    );

    let count = 0;
    let totalWidth = 0;

    const showMore = () => {};

    const hideMore = () => {};

    for (const item of all) {
      totalWidth += item.offsetWidth;

      if (totalWidth > rest) {
        break;
      }

      count++;
    }

    const howManyMore = Math.max(0, count - base.length);

    if (howManyMore > 0) {
      for (let i = 0; i < howManyMore; i++) {
        more[i].classList.add('bd-is-visible');
        dropdown[i].classList.add('bd-is-hidden');
      }
    }

    for (let j = howManyMore; j < more.length; j++) {
      more[j].classList.remove('bd-is-visible');
    }

    for (let k = howManyMore; k < dropdown.length; k++) {
      dropdown[k].classList.remove('bd-is-hidden');
    }
  };

  setNavbarVisibility();

  // Cookies

  const cookieBookModalName = 'bulma_closed_book_modal';
  const cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;

  // Dropdowns

  const $dropdowns = getAll('.dropdown:not(.is-hoverable)');

  if ($dropdowns.length > 0) {
    $dropdowns.forEach(($el) => {
      $el.addEventListener('click', (event) => {
        event.stopPropagation();
        $el.classList.toggle('is-active');
      });
    });

    document.addEventListener('click', (event) => {
      closeDropdowns();
    });
  }

  function closeDropdowns() {
    $dropdowns.forEach(($el) => {
      $el.classList.remove('is-active');
    });
  }

  // Toggles

  const $burgers = getAll('.navbar-burger');

  if ($burgers.length > 0) {
    $burgers.forEach(($el) => {
      if (!$el.dataset.target) {
        return;
      }

      $el.addEventListener('click', () => {
        const target = $el.dataset.target;
        const $target = document.getElementById(target);
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }

  // Modals

  const rootEl = document.documentElement;
  const $modals = getAll('.modal');
  const $modalButtons = getAll('.modal-button');
  const $modalCloses = getAll(
    '.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button'
  );

  if ($modalButtons.length > 0) {
    $modalButtons.forEach(($el) => {
      $el.addEventListener('click', () => {
        const target = $el.dataset.target;
        openModal(target);
      });
    });
  }

  if ($modalCloses.length > 0) {
    $modalCloses.forEach(($el) => {
      $el.addEventListener('click', () => {
        closeModals();
      });
    });
  }

  function openModal(target) {
    const $target = document.getElementById(target);
    rootEl.classList.add('is-clipped');
    $target.classList.add('is-active');
  }

  function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(($el) => {
      $el.classList.remove('is-active');
    });
  }

  document.addEventListener('keydown', (event) => {
    const e = event || window.event;

    if (e.keyCode === 27) {
      closeModals();
      closeDropdowns();
    }
  });

  // Clipboard

  const $highlights = getAll('.highlight');
  let itemsProcessed = 0;

  if ($highlights.length > 0) {
    $highlights.forEach(($el) => {
      const copyEl = '<button class="button bd-copy">Copy</button>';
      const expandEl =
        '<button class="button is-small bd-expand">Expand</button>';
      $el.insertAdjacentHTML('beforeend', copyEl);

      const $parent = $el.parentNode;

      if ($parent && $parent.classList.contains('bd-is-more')) {
        const showEl =
          '<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>';
        $parent.insertAdjacentHTML('afterbegin', showEl);
      } else if (
        $el.firstElementChild.scrollHeight > 480 &&
        $el.firstElementChild.clientHeight <= 480
      ) {
        $el.insertAdjacentHTML('beforeend', expandEl);
      }

      itemsProcessed++;

      if (itemsProcessed === $highlights.length) {
        addHighlightControls();
      }
    });
  }

  function addHighlightControls() {
    const $highlightButtons = getAll(
      '.highlight .bd-copy, .highlight .bd-expand'
    );

    $highlightButtons.forEach(($el) => {
      $el.addEventListener('mouseenter', () => {
        $el.parentNode.classList.add('bd-is-hovering');
        $el.parentNode.parentNode.classList.add('bd-is-hovering');
      });

      $el.addEventListener('mouseleave', () => {
        $el.parentNode.classList.remove('bd-is-hovering');
        $el.parentNode.parentNode.classList.remove('bd-is-hovering');
      });
    });

    const $highlightExpands = getAll('.bd-snippet .bd-expand');

    $highlightExpands.forEach(($el) => {
      $el.addEventListener('click', () => {
        $el.parentNode.firstElementChild.style.maxHeight = 'none';
      });
    });

    const $highlightShows = getAll('.bd-snippet .bd-show');

    $highlightShows.forEach(($el) => {
      $el.addEventListener('click', () => {
        const text = $el.querySelector('strong').textContent;
        const newText = text === 'Show code' ? 'Hide code' : 'Show code';
        $el.querySelector('strong').textContent = newText;
        $el.parentNode.classList.toggle('bd-is-more-clipped');
      });
    });
  }

  setTimeout(() => {
    new Clipboard('.bd-copy', {
      target: (trigger) => {
        return trigger.previousElementSibling.firstElementChild;
      },
    });
  }, 100);

  // Events

  let resizeTimer;

  function handleResize() {
    window.clearTimeout(resizeTimer);

    resizeTimer = window.setTimeout(function () {
      setNavbarVisibility();
    }, 10);
  }

  window.addEventListener('resize', handleResize);

  // Utils

  function getAll(selector, parent = document) {
    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
  }
});