|
|
|
@ -1,28 +1,13 @@ |
|
|
|
<script> |
|
|
|
import { store, backendUiStore } from "builderStore" |
|
|
|
import { map, join } from "lodash/fp" |
|
|
|
import { onMount } from "svelte" |
|
|
|
import { store } from "builderStore" |
|
|
|
import iframeTemplate from "./iframeTemplate" |
|
|
|
import { pipe } from "../../../helpers" |
|
|
|
import { Screen } from "../../../builderStore/store/screenTemplates/utils/Screen" |
|
|
|
import { Component } from "../../../builderStore/store/screenTemplates/utils/Component" |
|
|
|
import { Screen } from "builderStore/store/screenTemplates/utils/Screen" |
|
|
|
import { Component } from "builderStore/store/screenTemplates/utils/Component" |
|
|
|
|
|
|
|
let iframe |
|
|
|
let styles = "" |
|
|
|
|
|
|
|
function transform_component(comp) { |
|
|
|
const props = comp.props || comp |
|
|
|
if (props && props._children && props._children.length) { |
|
|
|
props._children = props._children.map(transform_component) |
|
|
|
} |
|
|
|
|
|
|
|
return props |
|
|
|
} |
|
|
|
|
|
|
|
const getComponentTypeName = component => { |
|
|
|
let [componentName] = component._component.match(/[a-zA-Z]*$/) |
|
|
|
return componentName || "element" |
|
|
|
} |
|
|
|
|
|
|
|
// Styles for screenslot placeholder |
|
|
|
const headingStyle = { |
|
|
|
width: "500px", |
|
|
|
padding: "8px", |
|
|
|
@ -70,71 +55,39 @@ |
|
|
|
// TODO: this ID is attached to how the screen slot is rendered, confusing, would be better a type etc |
|
|
|
screenPlaceholder.props._id = "screenslot-placeholder" |
|
|
|
|
|
|
|
$: hasComponent = !!$store.currentPreviewItem |
|
|
|
|
|
|
|
$: { |
|
|
|
styles = "" |
|
|
|
// Apply the CSS from the currently selected page and its screens |
|
|
|
const currentPage = $store.pages[$store.currentPageName] |
|
|
|
styles += currentPage._css |
|
|
|
for (let screen of currentPage._screens) { |
|
|
|
styles += screen._css |
|
|
|
} |
|
|
|
styles = styles |
|
|
|
} |
|
|
|
|
|
|
|
$: stylesheetLinks = pipe($store.pages.stylesheets, [ |
|
|
|
map(s => `<link rel="stylesheet" href="${s}"/>`), |
|
|
|
join("\n"), |
|
|
|
]) |
|
|
|
|
|
|
|
$: screensExist = |
|
|
|
$store.currentPreviewItem._screens && |
|
|
|
$store.currentPreviewItem._screens.length > 0 |
|
|
|
|
|
|
|
$: frontendDefinition = { |
|
|
|
appId: $store.appId, |
|
|
|
libraries: $store.libraries, |
|
|
|
page: $store.pages[$store.currentPageName], |
|
|
|
screens: [ |
|
|
|
$store.currentFrontEndType === "page" |
|
|
|
? screenPlaceholder |
|
|
|
: $store.currentPreviewItem, |
|
|
|
], |
|
|
|
// Extract data to pass to the iframe |
|
|
|
$: page = $store.pages[$store.currentPageName] |
|
|
|
$: screen = |
|
|
|
$store.currentFrontEndType === "page" |
|
|
|
? screenPlaceholder |
|
|
|
: $store.currentPreviewItem |
|
|
|
$: selectedComponentId = $store.currentComponentInfo?._id ?? "" |
|
|
|
$: previewData = { |
|
|
|
page, |
|
|
|
screen, |
|
|
|
selectedComponentId, |
|
|
|
} |
|
|
|
|
|
|
|
$: selectedComponentType = getComponentTypeName($store.currentComponentInfo) |
|
|
|
|
|
|
|
$: selectedComponentId = $store.currentComponentInfo |
|
|
|
? $store.currentComponentInfo._id |
|
|
|
: "" |
|
|
|
|
|
|
|
// Update the iframe with the builder info to render the correct preview |
|
|
|
const refreshContent = () => { |
|
|
|
iframe.contentWindow.postMessage( |
|
|
|
JSON.stringify({ |
|
|
|
styles, |
|
|
|
stylesheetLinks, |
|
|
|
selectedComponentType, |
|
|
|
selectedComponentId, |
|
|
|
frontendDefinition, |
|
|
|
appId: $store.appId, |
|
|
|
instanceId: $backendUiStore.selectedDatabase._id, |
|
|
|
}) |
|
|
|
) |
|
|
|
if (iframe) { |
|
|
|
iframe.contentWindow.postMessage(JSON.stringify(previewData)) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
$: if (iframe) |
|
|
|
// Refrech the preview when required |
|
|
|
$: refreshContent(previewData) |
|
|
|
|
|
|
|
// Initialise the app when mounted |
|
|
|
onMount(() => { |
|
|
|
iframe.contentWindow.addEventListener("bb-ready", refreshContent, { |
|
|
|
once: true, |
|
|
|
}) |
|
|
|
|
|
|
|
$: if (iframe && frontendDefinition) { |
|
|
|
refreshContent() |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<div class="component-container"> |
|
|
|
{#if hasComponent && $store.currentPreviewItem} |
|
|
|
{#if $store.currentPreviewItem} |
|
|
|
<iframe |
|
|
|
style="height: 100%; width: 100%" |
|
|
|
title="componentPreview" |
|
|
|
@ -152,7 +105,6 @@ |
|
|
|
margin: auto; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.component-container iframe { |
|
|
|
border: 0; |
|
|
|
left: 0; |
|
|
|
|
Andrew Kingston
6 years ago