From 3201eb5953a8e8b6c5cf4d2b3b6e357ae6062f38 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Thu, 11 Apr 2024 12:53:32 +0100 Subject: [PATCH 1/6] adds sidepanel open and close actions, and gives the user the option to disable click-outside closure of sidepanel --- packages/client/manifest.json | 22 +++++++++++++- .../client/src/components/app/Layout.svelte | 6 +++- .../src/components/app/SidePanel.svelte | 29 +++++++++++++++++++ packages/client/src/stores/sidePanel.js | 9 ++++++ 4 files changed, 64 insertions(+), 2 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 08d614391b..2f52085e38 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6487,7 +6487,27 @@ "illegalChildren": ["section", "sidepanel"], "showEmptyState": false, "draggable": false, - "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action." + "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.", + "sendEvents": true, + "settings": [ + { + "type": "boolean", + "key": "clickOutsideToClose", + "label": "Click away to close", + "defaultValue": true + }, + { + "type": "event", + "key": "sidePanelOpen", + "label": "Side Panel Open" + }, + { + "type": "event", + "key": "sidePanelClose", + "label": "Side Panel Close", + "info": "Side panel actions configured here will run after the 'Open side panel' action runs, and are not capable of preventing or stopping it. Any form validation should therefore be done before that action if invoked, and not here." + } + ] }, "rowexplorer": { "block": true, diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 992a166143..5b68171539 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -292,7 +292,11 @@ id="side-panel-container" class:open={$sidePanelStore.open} use:clickOutside={{ - callback: autoCloseSidePanel ? sidePanelStore.actions.close : null, + callback: + $sidePanelStore.clickOutsideToClose && autoCloseSidePanel + ? sidePanelStore.actions.close + : null, + allowedType: "mousedown", }} class:builder={$builderStore.inBuilder} diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 825b401bb8..48c84828b0 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,6 +5,13 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") + let handlingSidePanelOpen + let handlingSidePanelClose + + export let sidePanelOpen + export let sidePanelClose + export let clickOutsideToClose + // Automatically show and hide the side panel when inside the builder. // For some unknown reason, svelte reactivity breaks if we reference the // reactive variable "open" inside the following expression, or if we define @@ -26,6 +33,10 @@ } } + $: { + sidePanelStore.actions.setSidepanelState(clickOutsideToClose) + } + // Derive visibility $: open = $sidePanelStore.contentId === $component.id @@ -40,6 +51,22 @@ } } + const handleSidePanelOpen = async () => { + handlingSidePanelOpen = true + if (sidePanelOpen) { + await sidePanelOpen() + } + handlingSidePanelOpen = false + } + + const handleSidePanelClose = async () => { + handlingSidePanelClose = true + if (sidePanelClose) { + await sidePanelClose() + } + handlingSidePanelOpen = false + } + const showInSidePanel = (el, visible) => { const update = visible => { const target = document.getElementById("side-panel-container") @@ -47,10 +74,12 @@ if (visible) { if (!target.contains(node)) { target.appendChild(node) + handleSidePanelOpen() } } else { if (target.contains(node)) { target.removeChild(node) + handleSidePanelClose() } } } diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js index 3b3b9f5f4d..df66eca01c 100644 --- a/packages/client/src/stores/sidePanel.js +++ b/packages/client/src/stores/sidePanel.js @@ -3,6 +3,7 @@ import { writable, derived } from "svelte/store" export const createSidePanelStore = () => { const initialState = { contentId: null, + clickOutsideToClose: true, } const store = writable(initialState) const derivedStore = derived(store, $store => { @@ -32,11 +33,19 @@ export const createSidePanelStore = () => { }, 50) } + const setSidepanelState = bool => { + clearTimeout(timeout) + store.update(state => { + state.clickOutsideToClose = bool + return state + }) + } return { subscribe: derivedStore.subscribe, actions: { open, close, + setSidepanelState, }, } } From a7ec49613c635f95dbf650217efdb515f6e92cfb Mon Sep 17 00:00:00 2001 From: mikesealey Date: Thu, 11 Apr 2024 15:42:19 +0100 Subject: [PATCH 2/6] fixes typo, removes unused variables --- packages/bbui/src/Layout/Page.svelte | 10 +++++----- packages/client/manifest.json | 2 +- packages/client/src/components/app/SidePanel.svelte | 7 ------- 3 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2169a12459..62dd9cc909 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -7,11 +7,11 @@ export let narrower = false export let noPadding = false - let sidePanelVisble = false + let sidePanelVisible = false setContext("side-panel", { - open: () => (sidePanelVisble = true), - close: () => (sidePanelVisble = false), + open: () => (sidePanelVisible = true), + close: () => (sidePanelVisible = false), }) @@ -24,9 +24,9 @@
{ - sidePanelVisble = false + sidePanelVisible = false }} > diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 2f52085e38..f7d437a4fd 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6505,7 +6505,7 @@ "type": "event", "key": "sidePanelClose", "label": "Side Panel Close", - "info": "Side panel actions configured here will run after the 'Open side panel' action runs, and are not capable of preventing or stopping it. Any form validation should therefore be done before that action if invoked, and not here." + "info": "Side panel actions configured here will run after the 'Open side panel' action runs, and are not capable of preventing or stopping it. Any form validation should therefore be done before that action is invoked, and not here." } ] }, diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 48c84828b0..98398c4671 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,9 +5,6 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") - let handlingSidePanelOpen - let handlingSidePanelClose - export let sidePanelOpen export let sidePanelClose export let clickOutsideToClose @@ -52,19 +49,15 @@ } const handleSidePanelOpen = async () => { - handlingSidePanelOpen = true if (sidePanelOpen) { await sidePanelOpen() } - handlingSidePanelOpen = false } const handleSidePanelClose = async () => { - handlingSidePanelClose = true if (sidePanelClose) { await sidePanelClose() } - handlingSidePanelOpen = false } const showInSidePanel = (el, visible) => { From 859bda0a5128d74e4ddddd239129bfa7717af97b Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 12 Apr 2024 09:24:12 +0100 Subject: [PATCH 3/6] removes unecessary side-panel-open actions --- packages/client/manifest.json | 5 ----- packages/client/src/components/app/SidePanel.svelte | 2 -- 2 files changed, 7 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index bdcbdecb7c..622381847c 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6732,11 +6732,6 @@ "label": "Click away to close", "defaultValue": true }, - { - "type": "event", - "key": "sidePanelOpen", - "label": "Side Panel Open" - }, { "type": "event", "key": "sidePanelClose", diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 98398c4671..8e0dcd99e4 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,7 +5,6 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") - export let sidePanelOpen export let sidePanelClose export let clickOutsideToClose @@ -67,7 +66,6 @@ if (visible) { if (!target.contains(node)) { target.appendChild(node) - handleSidePanelOpen() } } else { if (target.contains(node)) { From 0514641f049285e6139b59a54744d1e79d103105 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 12 Apr 2024 13:24:21 +0100 Subject: [PATCH 4/6] removes unecessary on-sidepanel-open actions feature. --- packages/client/manifest.json | 2 +- packages/client/src/components/app/Layout.svelte | 11 +++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 622381847c..f370b67670 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6729,7 +6729,7 @@ { "type": "boolean", "key": "clickOutsideToClose", - "label": "Click away to close", + "label": "Click outside to close", "defaultValue": true }, { diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index acef8001a8..bae2bd0faf 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -73,7 +73,10 @@ $context.device.width, $context.device.height ) - $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open + $: autoCloseSidePanel = + !$builderStore.inBuilder && + $sidePanelStore.open && + $sidePanelStore.clickOutsideToClose $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" @@ -317,11 +320,7 @@ id="side-panel-container" class:open={$sidePanelStore.open} use:clickOutside={{ - callback: - $sidePanelStore.clickOutsideToClose && autoCloseSidePanel - ? sidePanelStore.actions.close - : null, - + callback: autoCloseSidePanel ? sidePanelStore.actions.close : null, allowedType: "mousedown", }} class:builder={$builderStore.inBuilder} From 1632c9d7a84f74e94fa07a0615517e49fd3cc992 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 12 Apr 2024 14:33:46 +0100 Subject: [PATCH 5/6] removes unused function --- packages/client/src/components/app/SidePanel.svelte | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 8e0dcd99e4..624617ad69 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -47,12 +47,6 @@ } } - const handleSidePanelOpen = async () => { - if (sidePanelOpen) { - await sidePanelOpen() - } - } - const handleSidePanelClose = async () => { if (sidePanelClose) { await sidePanelClose() From 565ee5f7dac0edee614ba841eeef49adf152dfe3 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 12 Apr 2024 15:23:24 +0100 Subject: [PATCH 6/6] brings key and label into line with standard practices. Removes unecessary info. --- packages/client/manifest.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index f370b67670..c9e28e202b 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6734,9 +6734,8 @@ }, { "type": "event", - "key": "sidePanelClose", - "label": "Side Panel Close", - "info": "Side panel actions configured here will run after the 'Open side panel' action runs, and are not capable of preventing or stopping it. Any form validation should therefore be done before that action is invoked, and not here." + "key": "onSidePanelClose", + "label": "On side panel close" } ] },