58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
|
import { createElement } from '../main.js'
|
||
|
|
|
||
|
|
export function Dialog(options) {
|
||
|
|
const element = createElement({
|
||
|
|
tabIndex: 0,
|
||
|
|
style: {
|
||
|
|
position: 'fixed',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
zIndex: 1000,
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
backdropFilter: 'blur(5px)',
|
||
|
|
duration: '0.5s',
|
||
|
|
transition: 'all 0.5s'
|
||
|
|
},
|
||
|
|
onclick: async event => {
|
||
|
|
if (event.target !== event.currentTarget) return
|
||
|
|
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
||
|
|
await event.target.remove()
|
||
|
|
},
|
||
|
|
onkeydown: async event => {
|
||
|
|
if (event.key !== 'Escape') return
|
||
|
|
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
||
|
|
await event.target.remove()
|
||
|
|
},
|
||
|
|
children: [
|
||
|
|
createElement({
|
||
|
|
...options,
|
||
|
|
style: {
|
||
|
|
position: 'fixed',
|
||
|
|
top: '50%',
|
||
|
|
left: '50%',
|
||
|
|
transform: 'translate(-50%, -50%)',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
borderRadius: '150px',
|
||
|
|
boxShadow: '0 0 1em #ccc',
|
||
|
|
overflow: 'hidden',
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'center',
|
||
|
|
...options.style,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
]
|
||
|
|
})
|
||
|
|
const observer = new MutationObserver(mutationsList => {
|
||
|
|
for (const mutation of mutationsList) {
|
||
|
|
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
|
||
|
|
element.focus()
|
||
|
|
element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
|
||
|
|
return observer.disconnect()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
observer.observe(document.body, { childList: true, subtree: true })
|
||
|
|
return element
|
||
|
|
}
|