Merge pull request #3294 from Budibase/fix/feature-flag-safari
Fix/feature flag safari
This commit is contained in:
commit
bbf3b04d17
|
@ -44,6 +44,7 @@ const INITIAL_FRONTEND_STATE = {
|
|||
state: false,
|
||||
customThemes: false,
|
||||
devicePreview: false,
|
||||
messagePassing: false,
|
||||
},
|
||||
currentFrontEndType: "none",
|
||||
selectedScreenId: "",
|
||||
|
|
|
@ -96,7 +96,9 @@
|
|||
// Initialise the app when mounted
|
||||
// Display preview immediately if the intelligent loading feature
|
||||
// is not supported
|
||||
if (!loading) return
|
||||
if ($store.clientFeatures.messagePassing) {
|
||||
if (!loading) return
|
||||
}
|
||||
|
||||
if (!$store.clientFeatures.intelligentLoading) {
|
||||
loading = false
|
||||
|
@ -116,18 +118,37 @@
|
|||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener("message", receiveMessage)
|
||||
if ($store.clientFeatures.messagePassing) {
|
||||
window.addEventListener("message", receiveMessage)
|
||||
} else {
|
||||
// Legacy - remove in later versions of BB
|
||||
iframe.contentWindow.addEventListener("ready", () => {
|
||||
receiveMessage({ data: { type: MessageTypes.READY }})
|
||||
}, { once: true })
|
||||
iframe.contentWindow.addEventListener("error", event => {
|
||||
receiveMessage({ data: { type: MessageTypes.ERROR, error: event.detail }})
|
||||
}, { once: true })
|
||||
// Add listener for events sent by client library in preview
|
||||
iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
|
||||
iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
|
||||
}
|
||||
})
|
||||
|
||||
// Remove all iframe event listeners on component destroy
|
||||
onDestroy(() => {
|
||||
if (iframe.contentWindow) {
|
||||
window.removeEventListener("message", receiveMessage) //
|
||||
if ($store.clientFeatures.messagePassing) {
|
||||
window.removeEventListener("message", receiveMessage)
|
||||
} else {
|
||||
// Legacy - remove in later versions of BB
|
||||
iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
|
||||
iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handleBudibaseEvent = event => {
|
||||
const { type, data } = event.data
|
||||
const { type, data } = event.data || event.detail
|
||||
if (type === "select-component" && data.id) {
|
||||
store.actions.components.select({ _id: data.id })
|
||||
} else if (type === "update-prop") {
|
||||
|
@ -164,7 +185,7 @@
|
|||
}
|
||||
|
||||
const handleKeydownEvent = event => {
|
||||
const { key } = event.data
|
||||
const { key } = event.data || event
|
||||
if (
|
||||
(key === "Delete" || key === "Backspace") &&
|
||||
selectedComponentId &&
|
||||
|
|
|
@ -37,33 +37,33 @@
|
|||
<p class="detail">{template?.category?.toUpperCase()}</p>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="template start-from-scratch" on:click={() => onSelect(null)}>
|
||||
<div
|
||||
class="background-icon"
|
||||
style={`background: rgb(50, 50, 50); color: white;`}
|
||||
>
|
||||
<Icon name="Add" />
|
||||
</div>
|
||||
<Heading size="XS">Start from scratch</Heading>
|
||||
<p class="detail">BLANK</p>
|
||||
</div>
|
||||
<div
|
||||
class="template import"
|
||||
on:click={() => onSelect(null, { useImport: true })}
|
||||
>
|
||||
<div
|
||||
class="background-icon"
|
||||
style={`background: rgb(50, 50, 50); color: white;`}
|
||||
>
|
||||
<Icon name="Add" />
|
||||
</div>
|
||||
<Heading size="XS">Import an app</Heading>
|
||||
<p class="detail">BLANK</p>
|
||||
</div>
|
||||
</div>
|
||||
{:catch err}
|
||||
<h1 style="color:red">{err}</h1>
|
||||
{/await}
|
||||
<div class="template start-from-scratch" on:click={() => onSelect(null)}>
|
||||
<div
|
||||
class="background-icon"
|
||||
style={`background: rgb(50, 50, 50); color: white;`}
|
||||
>
|
||||
<Icon name="Add" />
|
||||
</div>
|
||||
<Heading size="XS">Start from scratch</Heading>
|
||||
<p class="detail">BLANK</p>
|
||||
</div>
|
||||
<div
|
||||
class="template import"
|
||||
on:click={() => onSelect(null, { useImport: true })}
|
||||
>
|
||||
<div
|
||||
class="background-icon"
|
||||
style={`background: rgb(50, 50, 50); color: white;`}
|
||||
>
|
||||
<Icon name="Add" />
|
||||
</div>
|
||||
<Heading size="XS">Import an app</Heading>
|
||||
<p class="detail">BLANK</p>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
"deviceAwareness": true,
|
||||
"state": true,
|
||||
"customThemes": true,
|
||||
"devicePreview": true
|
||||
"devicePreview": true,
|
||||
"messagePassing": true
|
||||
},
|
||||
"layout": {
|
||||
"name": "Layout",
|
||||
|
|
Loading…
Reference in New Issue