only show delete confirmation when no input or textarea is focussed

This commit is contained in:
Maurits Lourens 2021-08-31 15:46:30 +02:00
parent 7173be59c6
commit 378760074f
1 changed files with 30 additions and 27 deletions

View File

@ -95,39 +95,42 @@
{ once: true } { once: true }
) )
// Add listener for events sent by cliebt library in preview // Add listener for events sent by client library in preview
iframe.contentWindow.addEventListener("bb-event", event => { iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
const { type, data } = event.detail iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
confirmDeleteComponent(data.id)
} else if (type === "preview-loaded") {
// Wait for this event to show the client library if intelligent
// loading is supported
loading = false
} else {
console.warning(`Client sent unknown event type: ${type}`)
}
})
iframe.contentWindow.addEventListener("keydown", event => {
if ((event.key === "Delete" || event.key === "Backspace") && selectedComponentId) {
confirmDeleteComponent(selectedComponentId);
}
})
}) })
// remove all iframe event listeners on component destroy // remove all iframe event listeners on component destroy
onDestroy(() => { onDestroy(() => {
iframe.contentWindow.removeEventListener("ready") iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
iframe.contentWindow.removeEventListener("error") iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
iframe.contentWindow.removeEventListener("bb-event")
iframe.contentWindow.removeEventListener("keydown")
}) })
const handleBudibaseEvent = event => {
const { type, data } = event.detail
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
} else if (type === "update-prop") {
store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
confirmDeleteComponent(data.id)
} else if (type === "preview-loaded") {
// Wait for this event to show the client library if intelligent
// loading is supported
loading = false
} else {
console.warning(`Client sent unknown event type: ${type}`)
}
};
const handleKeydownEvent = event => {
if ((event.key === "Delete" || event.key === "Backspace") &&
selectedComponentId &&
['input', 'textarea'].indexOf(iframe.contentWindow.document.activeElement?.tagName.toLowerCase()) === -1) {
confirmDeleteComponent(selectedComponentId);
}
}
const confirmDeleteComponent = (componentId) => { const confirmDeleteComponent = (componentId) => {
idToDelete = componentId idToDelete = componentId
confirmDeleteDialog.show() confirmDeleteDialog.show()