Created build-dev script to only build 1 css file for quicker testing enviroment. Added accordion javascript for slide effect. modified the notification scss, and added more demos.

This commit is contained in:
Yohn 2024-11-12 00:35:16 -05:00
parent b1fcd44b73
commit 26e82a693d
246 changed files with 1716 additions and 2269 deletions

35
demo/js/accordion.js Normal file
View file

@ -0,0 +1,35 @@
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('details').forEach(el => {
let anim = null, opening = false, closing = false
let summ = el.querySelector('summary')
const runAnim = (height, targetHeight, callback) => {
anim?.cancel()
anim = el.animate({ height: [`${height}px`,`${targetHeight}px`] },{
duration: 400,
easing: 'ease-out'
})
anim.onfinish = () => {
anim = null
el.style.height = el.style.overflow = ''
opening = closing = false
callback?.()
}
}
summ.addEventListener('click', ev => {
ev.preventDefault()
el.style.overflow = 'hidden'
if(!el.open || closing) {
el.style.height = `${el.offsetHeight}px`
el.open = opening = true
runAnim(el.offsetHeight, [...el.children].reduce((a,c) => a+c.offsetHeight, 0))
anim.oncancel = () => opening = false
} else if(el.open || opening) {
closing = true
runAnim(el.offsetHeight, summ.offsetHeight, () => el.open = false)
anim.oncancel = () => closing = false
}
})
})
})