Merge pull request #3294 from Budibase/fix/feature-flag-safari

Fix/feature flag safari
This commit is contained in:
Martin McKeaveney 2021-11-09 13:29:50 +01:00 committed by GitHub
commit bbf3b04d17
4 changed files with 52 additions and 29 deletions

View File

@ -44,6 +44,7 @@ const INITIAL_FRONTEND_STATE = {
state: false,
customThemes: false,
devicePreview: false,
messagePassing: false,
},
currentFrontEndType: "none",
selectedScreenId: "",

View File

@ -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 &&

View File

@ -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>

View File

@ -5,7 +5,8 @@
"deviceAwareness": true,
"state": true,
"customThemes": true,
"devicePreview": true
"devicePreview": true,
"messagePassing": true
},
"layout": {
"name": "Layout",