2019-08-20 08:18:23 +12:00
|
|
|
<script>
|
2020-11-24 00:29:24 +13:00
|
|
|
import { onMount } from "svelte"
|
2020-11-26 06:56:09 +13:00
|
|
|
import { store, currentAsset } from "builderStore"
|
2020-05-07 21:53:34 +12:00
|
|
|
import iframeTemplate from "./iframeTemplate"
|
2020-11-24 00:29:24 +13:00
|
|
|
import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
|
2019-09-03 21:42:19 +12:00
|
|
|
|
2020-02-12 05:36:16 +13:00
|
|
|
let iframe
|
2020-05-26 02:23:56 +12:00
|
|
|
|
2020-11-24 03:27:45 +13:00
|
|
|
// Create screen slot placeholder for use when a page is selected rather
|
|
|
|
// than a screen
|
2020-11-20 05:55:59 +13:00
|
|
|
const screenPlaceholder = new Screen()
|
|
|
|
.name("Screen Placeholder")
|
|
|
|
.route("*")
|
2020-11-24 03:27:45 +13:00
|
|
|
.component("@budibase/standard-components/screenslotplaceholder")
|
2020-11-20 05:55:59 +13:00
|
|
|
.instanceName("Content Placeholder")
|
|
|
|
.json()
|
2020-06-09 08:13:19 +12:00
|
|
|
|
2020-11-24 00:29:24 +13:00
|
|
|
// Extract data to pass to the iframe
|
2020-11-28 05:36:31 +13:00
|
|
|
$: layout = $currentAsset
|
2020-11-24 00:29:24 +13:00
|
|
|
$: screen =
|
2020-11-26 06:56:09 +13:00
|
|
|
$store.currentFrontEndType === "layout"
|
2020-11-24 00:29:24 +13:00
|
|
|
? screenPlaceholder
|
|
|
|
: $store.currentPreviewItem
|
|
|
|
$: selectedComponentId = $store.currentComponentInfo?._id ?? ""
|
|
|
|
$: previewData = {
|
2020-11-26 06:56:09 +13:00
|
|
|
layout,
|
2020-11-24 00:29:24 +13:00
|
|
|
screen,
|
|
|
|
selectedComponentId,
|
2020-02-12 05:36:16 +13:00
|
|
|
}
|
|
|
|
|
2020-11-24 00:29:24 +13:00
|
|
|
// Update the iframe with the builder info to render the correct preview
|
2020-06-09 08:13:19 +12:00
|
|
|
const refreshContent = () => {
|
2020-11-24 00:29:24 +13:00
|
|
|
if (iframe) {
|
|
|
|
iframe.contentWindow.postMessage(JSON.stringify(previewData))
|
|
|
|
}
|
2020-06-09 08:13:19 +12:00
|
|
|
}
|
2020-06-09 17:22:00 +12:00
|
|
|
|
2020-11-24 03:27:45 +13:00
|
|
|
// Refresh the preview when required
|
2020-11-24 00:29:24 +13:00
|
|
|
$: refreshContent(previewData)
|
|
|
|
|
|
|
|
// Initialise the app when mounted
|
|
|
|
onMount(() => {
|
2020-06-13 07:42:55 +12:00
|
|
|
iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
|
|
|
|
once: true,
|
|
|
|
})
|
2020-11-24 00:29:24 +13:00
|
|
|
})
|
2020-02-12 05:36:16 +13:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="component-container">
|
2020-11-24 00:29:24 +13:00
|
|
|
{#if $store.currentPreviewItem}
|
2020-02-12 05:36:16 +13:00
|
|
|
<iframe
|
|
|
|
style="height: 100%; width: 100%"
|
|
|
|
title="componentPreview"
|
|
|
|
bind:this={iframe}
|
2020-06-09 08:13:19 +12:00
|
|
|
srcdoc={iframeTemplate} />
|
2020-02-12 05:36:16 +13:00
|
|
|
{/if}
|
2019-08-20 08:18:23 +12:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
2020-02-12 05:36:16 +13:00
|
|
|
.component-container {
|
|
|
|
grid-row-start: middle;
|
|
|
|
grid-column-start: middle;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
margin: auto;
|
2020-04-24 21:35:54 +12:00
|
|
|
height: 100%;
|
2020-02-12 05:36:16 +13:00
|
|
|
}
|
|
|
|
.component-container iframe {
|
|
|
|
border: 0;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
|
|
|
width: 100%;
|
|
|
|
}
|
2020-02-19 04:53:22 +13:00
|
|
|
</style>
|