100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
const ignoredClasses = [
|
|
".download-js-link",
|
|
".spectrum-Menu",
|
|
".date-time-popover",
|
|
]
|
|
const conditionallyIgnoredClasses = [
|
|
".spectrum-Underlay",
|
|
".drawer-wrapper",
|
|
".spectrum-Popover",
|
|
]
|
|
let clickHandlers = []
|
|
|
|
/**
|
|
* Handle a body click event
|
|
*/
|
|
const handleClick = event => {
|
|
// Treat right clicks (context menu events) as normal clicks
|
|
const eventType = event.type === "contextmenu" ? "click" : event.type
|
|
|
|
// Ignore click if this is an ignored class
|
|
if (event.target.closest('[data-ignore-click-outside="true"]')) {
|
|
return
|
|
}
|
|
for (let className of ignoredClasses) {
|
|
if (event.target.closest(className)) {
|
|
return
|
|
}
|
|
}
|
|
|
|
// Process handlers
|
|
clickHandlers.forEach(handler => {
|
|
// Check that we're the right kind of click event
|
|
if (handler.allowedType && eventType !== handler.allowedType) {
|
|
return
|
|
}
|
|
|
|
// Check that the click isn't inside the target
|
|
if (handler.element.contains(event.target)) {
|
|
return
|
|
}
|
|
|
|
// Ignore clicks for certain classes unless we're nested inside them
|
|
for (let className of conditionallyIgnoredClasses) {
|
|
const sourceInside = handler.anchor.closest(className) != null
|
|
const clickInside = event.target.closest(className) != null
|
|
if (clickInside && !sourceInside) {
|
|
return
|
|
}
|
|
}
|
|
|
|
handler.callback?.(event)
|
|
})
|
|
}
|
|
document.documentElement.addEventListener("click", handleClick, true)
|
|
document.documentElement.addEventListener("mousedown", handleClick, true)
|
|
document.documentElement.addEventListener("contextmenu", handleClick, true)
|
|
|
|
/**
|
|
* Adds or updates a click handler
|
|
*/
|
|
const updateHandler = (id, element, anchor, callback, allowedType) => {
|
|
let existingHandler = clickHandlers.find(x => x.id === id)
|
|
if (!existingHandler) {
|
|
clickHandlers.push({ id, element, anchor, callback, allowedType })
|
|
} else {
|
|
existingHandler.callback = callback
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Removes a click handler
|
|
*/
|
|
const removeHandler = id => {
|
|
clickHandlers = clickHandlers.filter(x => x.id !== id)
|
|
}
|
|
|
|
/**
|
|
* Svelte action to apply a click outside handler for a certain element
|
|
* opts.anchor is an optional param specifying the real root source of the
|
|
* component being observed. This is required for things like popovers, where
|
|
* the element using the clickoutside action is the popover, but the popover is
|
|
* rendered at the root of the DOM somewhere, whereas the popover anchor is the
|
|
* element we actually want to consider when determining the source component.
|
|
*/
|
|
export default (element, opts) => {
|
|
const id = Math.random()
|
|
const update = newOpts => {
|
|
const callback =
|
|
newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
|
|
const anchor = newOpts?.anchor || element
|
|
const allowedType = newOpts?.allowedType || "click"
|
|
updateHandler(id, element, anchor, callback, allowedType)
|
|
}
|
|
update(opts)
|
|
return {
|
|
update,
|
|
destroy: () => removeHandler(id),
|
|
}
|
|
}
|