Scenario generator for vore roleplay and story ideas. https://scenario-generator.deliciousreya.net/responses
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

34 lines
1.2 KiB

import { type MutableRef, useCallback, useRef } from 'preact/hooks';
export function usePopup<T extends HTMLElement>(): [hostRef: MutableRef<T|null>, triggerPopup: (text: string, className?: 'success'|'info'|'warning'|'error') => Promise<boolean>] {
const hostRef = useRef<T|null>(null)
const showPopup = useCallback(async (text: string, className?: 'success'|'info'|'warning'|'error'): Promise<boolean> => {
const host = hostRef.current
if (!host) {
return false
}
if (!host.classList.contains("jsPopupHost")) {
throw Error("host must be jsPopupHost")
}
const container = host.ownerDocument.createElement("div")
container.classList.add("jsPopupContainer")
host.appendChild(container)
const popup = host.ownerDocument.createElement("div")
popup.classList.add("jsPopup")
if (className) {
popup.classList.add(className)
}
popup.innerText = text
container.appendChild(popup)
return new Promise((resolve) => {
const removePopup = () => {
container.removeChild(popup)
host.removeChild(container)
resolve(true)
}
popup.addEventListener('animationend', removePopup)
popup.addEventListener('animationcancel', removePopup)
})
}, [hostRef])
return [hostRef, showPopup]
}