playground.mjs

TLDR

This file is part of the Demo Projects project and serves as an animation playground. It contains a function called playground that handles the animation logic.

Methods

clearAll

This method removes a specified className from a list of items.

setEndListener

This method sets an event listener on a target element that listens for the animationend event. When the event is triggered, it updates the class of the target element and removes the "isPlaying" class from the document element.

Classes

None

/**
  Animation playground
*/

const clearAll = (items = [], className = 'active') => {
  items.forEach((item) => item.classList.remove(className));
};

const setEndListener = (target, defaultClass) => {
  target.addEventListener('animationend', (e) => {
    target.setAttribute('class', defaultClass);
    document.documentElement.classList.remove('isPlaying');
  });
};

const playground = (
  container = '.animation-list',
  item = '.animation-item',
  target = '.callout-title',
) => {
  const containerEl = document.querySelector(container);
  const items = [...containerEl.querySelectorAll(item)];
  const targetEl = document.querySelector(target);

  setEndListener(targetEl, target.replace('.', ''));

  containerEl.addEventListener('click', (e) => {
    const el = e.target

    if(el.classList.contains('animation-item--title')) {
      clearAll(items);
      const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;

      targetEl.classList.add('animate__animated', animation);
      document.documentElement.classList.add('isPlaying');
      document.documentElement.classList.remove('animationList-active');
    }

    if (el.classList.contains('copy-icon')) {
      const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
      navigator.clipboard.writeText(animation);
    }
  });
};

export default playground;