MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use clickoutside library to stop mouseup closing side panel (#13193) 

* Use clickoutside library to stop mouseup closing side panel

* Revert "Use clickoutside library to stop mouseup closing side panel"

This reverts commit fbe574812e.

* Use mousedown

* Add allowedType for clickoutside event

* Remove contextmenu listener

---------

Co-authored-by: Martin McKeaveney <martin@budibase.com>
This commit is contained in:
melohagan 2024-03-20 15:16:19 +00:00 committed by GitHub
parent 3788d67e8d
commit e4e6447cf6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/bbui/src/Actions/click_outside.js
View File

@ -39,19 +39,23 @@ const handleClick = event => {
return return
} }
if (handler.allowedType && event.type !== handler.allowedType) {
return
}
handler.callback?.(event) handler.callback?.(event)
}) })
} }
document.documentElement.addEventListener("click", handleClick, true) document.documentElement.addEventListener("click", handleClick, true)
document.documentElement.addEventListener("contextmenu", handleClick, true) document.documentElement.addEventListener("mousedown", handleClick, true)
/** /**
* Adds or updates a click handler * Adds or updates a click handler
*/ */
const updateHandler = (id, element, anchor, callback) => { const updateHandler = (id, element, anchor, callback, allowedType) => {
let existingHandler = clickHandlers.find(x => x.id === id) let existingHandler = clickHandlers.find(x => x.id === id)
if (!existingHandler) { if (!existingHandler) {
clickHandlers.push({ id, element, anchor, callback }) clickHandlers.push({ id, element, anchor, callback, allowedType })
} else { } else {
existingHandler.callback = callback existingHandler.callback = callback
} }
@ -77,7 +81,8 @@ export default (element, opts) => {
const update = newOpts => { const update = newOpts => {
const callback = newOpts?.callback || newOpts const callback = newOpts?.callback || newOpts
const anchor = newOpts?.anchor || element const anchor = newOpts?.anchor || element
updateHandler(id, element, anchor, callback) const allowedType = newOpts?.allowedType || "click"
updateHandler(id, element, anchor, callback, allowedType)
} }
update(opts) update(opts)
return { return {

5
packages/client/src/components/app/Layout.svelte
View File

@ -291,7 +291,10 @@
<div <div
id="side-panel-container" id="side-panel-container"
class:open={$sidePanelStore.open} class:open={$sidePanelStore.open}
use:clickOutside={autoCloseSidePanel ? sidePanelStore.actions.close : null} use:clickOutside={{
callback: autoCloseSidePanel ? sidePanelStore.actions.close : null,
allowedType: "mousedown",
}}
class:builder={$builderStore.inBuilder} class:builder={$builderStore.inBuilder}
> >
<div class="side-panel-header"> <div class="side-panel-header">