animate/demo.js at master · itsyjs/animate · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { Move } from './src/move.js'
import { Accordion } from './src/accordion.js'

/** @type {HTMLElement} */
const tb = window.tb
/** @type {HTMLElement} */
const left = window.left
/** @type {HTMLElement} */
const center = window.center
/** @type {HTMLElement} */
const content = window.content

/** @type {HTMLButtonElement} */
const toggle= window.toggle
/** @type {HTMLButtonElement} */
const toggleExpand = window.toggleExpand
/** @type {HTMLButtonElement} */
const toggleExpandWhen = window.toggleExpandWhen

const move = new Move(center)
toggle.addEventListener('click', () => {
  move.when(() => {
    tb.classList.toggle('centered')
    left.classList.toggle('hidden')
  })
})


const accordion = new Accordion(content)
toggleExpand.addEventListener('click', () => {
  const isExpanded = content.dataset.expanded === 'true'
  accordion[isExpanded ? 'collapse' : 'expand']()
  content.dataset.expanded = !isExpanded
  toggleExpandWhen.disabled = isExpanded
})

toggleExpandWhen.addEventListener('click', () => {
  accordion.when(() => {
    content.classList.toggle('collapsed')
    // only demo-button functionality, not needed for the expansion
    const isExpanded = content.dataset.expanded === 'true'
    content.dataset.expanded = !isExpanded
    toggleExpand.disabled = isExpanded
  })
})