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
46
47
48
49
50
51
52
53
54
55
56
57
58
|
export const sidebar = document.getElementById('sidebar')!
export const backdrop = document.getElementById('sidebar-backdrop')!
export const toggle = document.getElementById('sidebar-toggle')!
export const close = document.getElementById('sidebar-close')!
export const openSidebar = () => {
sidebar.classList.add('open')
backdrop.classList.add('open')
toggle.setAttribute('aria-expanded', 'true')
document.body.style.overflow = 'hidden'
}
export const closeSidebar = () => {
sidebar.classList.remove('open')
backdrop.classList.remove('open')
toggle.setAttribute('aria-expanded', 'false')
document.body.style.overflow = ''
}
toggle.addEventListener('click', () => sidebar.classList.contains('open') ? closeSidebar() : openSidebar())
close.addEventListener('click', closeSidebar)
backdrop.addEventListener('click', closeSidebar)
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSidebar() })
window.addEventListener('resize', () => { if (window.innerWidth > 680) closeSidebar() })
document.querySelectorAll('s-item').forEach(item => {
item.addEventListener('click', function () {
document.querySelectorAll('s-item').forEach(i => i.removeAttribute('active'))
//@ts-expect-error
this.setAttribute('active', '')
if (window.innerWidth <= 680) closeSidebar()
})
})
export const showModal = () => {
document.getElementById('modal-backdrop')!.classList.add('modal-open')
document.getElementById('modal-el')!.focus()
}
export const hideModal = () => { document.getElementById('modal-backdrop')!.classList.remove('modal-open') }
export const setModalHTML = (html: string) => {
document.getElementById('modal-el')!.innerHTML = html
showModal()
}
export const getModal = () => document.getElementById('modal-el')
// document.getElementById('modal-backdrop')!.addEventListener('click', e => { if (e.target === document.getElementById('modal-backdrop')) hideModal() })
export const createPillHTML = (label: string, html: string, fullWidth = false) =>
`<pill${fullWidth ? ' full' : ''}><p>${label}</p><elm>${html}</elm></pill>`
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('input[type="range"]').forEach(slider => {
const valEl = slider.parentElement?.querySelector('val')
if (valEl) {
valEl.textContent = (slider as any).value
slider.addEventListener('input', () => valEl.textContent = (slider as any).value)
}
})
})
|
