redo main/register page

public/resources/animate.css-main/docs/modules/buildDocsIndex.mjs

@@ -0,0 +1,37 @@
+/**
+  Docs index
+*/
+
+const indexItemTemplate = (item = '', id) => `
+  <li class="docs-indexItem"><a href="#${id}" title="${item}">${item}</a></li>
+`
+
+const indexList = (sections = [], container = '.sidebar', heading = 'h2') => {
+  const containerEl = document.querySelector(container)
+  const list = document.createElement('ul')
+
+  const children = sections.map(section => {
+    const title = section.querySelector(heading)
+    const id = section.getAttribute('id')
+
+    return title && indexItemTemplate(title.innerText, id)
+  })
+
+  list.classList.add('docs-index')
+  list.innerHTML = children.join('\n')
+
+  containerEl.insertAdjacentElement('beforeend', list)
+
+  return list
+}
+
+const buildDocsIndex = (docs = '#documentation', docSection = '[class*="docSection-"]', titles = 'h2') => {
+  const docsEl = document.querySelector(docs)
+  const sections = [...docsEl.querySelectorAll(docSection)]
+
+  const list = indexList(sections)
+
+  return list
+}
+
+export default buildDocsIndex

public/resources/animate.css-main/docs/modules/playground.mjs

@@ -0,0 +1,46 @@
+/**
+  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;

public/resources/animate.css-main/docs/modules/slowDownAnimations.mjs

@@ -0,0 +1,18 @@
+/**
+  Slows animations
+*/
+
+const slowDownAnimations = (target) => {
+  const targetEl = document.querySelector(target)
+  const doc = document.documentElement
+
+  targetEl.addEventListener('click', () => {
+    const currentDuration = getComputedStyle(document.documentElement)
+      .getPropertyValue('--animate-duration')
+    const newDuration = currentDuration === '1s' ? '2s' : '1s'
+
+    document.documentElement.style.setProperty('--animate-duration', newDuration);
+  })
+}
+
+export default slowDownAnimations

public/resources/animate.css-main/docs/modules/startAnimations.mjs

@@ -0,0 +1,23 @@
+/**
+  Intro animation
+*/
+
+const startAnimation = () => {
+  const title = document.querySelector('.callout-title')
+  const subTitle = document.querySelector('.callout-subtitle')
+  const sidebar = document.querySelector('.animation-list')
+  const button = document.querySelector('.callout-showList')
+
+
+  const titleAnimation = 'zoomInDown'
+  const subTitleAnimation = 'zoomInDown'
+  const buttonAnimation = 'zoomInUp'
+  const sidebarAnimation = 'fadeInRight'
+
+  title.classList.add('animate__animated', `animate__${titleAnimation}`)
+  subTitle.classList.add('animate__animated', `animate__${subTitleAnimation}`)
+  button.classList.add('animate__animated', `animate__${buttonAnimation}`)
+  sidebar.classList.add('animate__animated', `animate__${sidebarAnimation}`)
+}
+
+export default startAnimation

public/resources/animate.css-main/docs/modules/toggle.mjs

@@ -0,0 +1,14 @@
+/**
+  Mobile animation list
+*/
+
+const toggleOnClick = (el, target, className) => {
+  const element = document.querySelector(el)
+  const targetEl = document.querySelector(target)
+
+  element.addEventListener('click', e => {
+    targetEl.classList.toggle(className)
+  })
+}
+
+export default toggleOnClick