merge from master
This commit is contained in:
Michael Shanks
commit
509a628581
|
|
@ -110,6 +110,7 @@
|
||||||
appId: $store.appId,
|
appId: $store.appId,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if (iframe)
|
$: if (iframe)
|
||||||
|
|
|
||||||
|
|
@ -1,161 +0,0 @@
|
||||||
<script>
|
|
||||||
import { store, backendUiStore } from "builderStore"
|
|
||||||
import { map, join } from "lodash/fp"
|
|
||||||
import iframeTemplate from "./iframeTemplate"
|
|
||||||
import { pipe } from "components/common/core"
|
|
||||||
|
|
||||||
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-z]*$/)
|
|
||||||
return componentName || "element"
|
|
||||||
}
|
|
||||||
|
|
||||||
const screenPlaceholder = {
|
|
||||||
name: "Screen Placeholder",
|
|
||||||
route: "*",
|
|
||||||
props: {
|
|
||||||
_component: "@budibase/standard-components/container",
|
|
||||||
type: "div",
|
|
||||||
_children: [
|
|
||||||
{
|
|
||||||
_component: "@budibase/standard-components/container",
|
|
||||||
_styles: { normal: {}, hover: {}, active: {}, selected: {} },
|
|
||||||
_id: "__screenslot__text",
|
|
||||||
_code: "",
|
|
||||||
className: "",
|
|
||||||
onLoad: [],
|
|
||||||
type: "div",
|
|
||||||
_children: [
|
|
||||||
{
|
|
||||||
_component: "@budibase/standard-components/text",
|
|
||||||
_styles: {
|
|
||||||
normal: {},
|
|
||||||
hover: {},
|
|
||||||
active: {},
|
|
||||||
selected: {},
|
|
||||||
},
|
|
||||||
_id: "__screenslot__text_2",
|
|
||||||
_code: "",
|
|
||||||
text: "content",
|
|
||||||
font: "",
|
|
||||||
color: "",
|
|
||||||
textAlign: "inline",
|
|
||||||
verticalAlign: "inline",
|
|
||||||
formattingTag: "none",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
$: 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,
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
$: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
|
|
||||||
|
|
||||||
$: selectedComponentId = $store.currentComponentInfo
|
|
||||||
? $store.currentComponentInfo._id
|
|
||||||
: ""
|
|
||||||
|
|
||||||
const refreshContent = () => {
|
|
||||||
<<<<<<< HEAD
|
|
||||||
iframe.contentWindow.postMessage(JSON.stringify({
|
|
||||||
styles,
|
|
||||||
stylesheetLinks,
|
|
||||||
selectedComponentType,
|
|
||||||
selectedComponentId,
|
|
||||||
frontendDefinition,
|
|
||||||
appId: $store.appId
|
|
||||||
}))
|
|
||||||
=======
|
|
||||||
iframe.contentWindow.postMessage(
|
|
||||||
JSON.stringify({
|
|
||||||
styles,
|
|
||||||
stylesheetLinks,
|
|
||||||
selectedComponentType,
|
|
||||||
selectedComponentId,
|
|
||||||
frontendDefinition,
|
|
||||||
})
|
|
||||||
)
|
|
||||||
>>>>>>> master
|
|
||||||
}
|
|
||||||
|
|
||||||
$: if (iframe)
|
|
||||||
iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
|
|
||||||
once: true,
|
|
||||||
})
|
|
||||||
|
|
||||||
$: if (iframe && frontendDefinition) {
|
|
||||||
refreshContent()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="component-container">
|
|
||||||
{#if hasComponent && $store.currentPreviewItem}
|
|
||||||
<iframe
|
|
||||||
style="height: 100%; width: 100%"
|
|
||||||
title="componentPreview"
|
|
||||||
bind:this={iframe}
|
|
||||||
srcdoc={iframeTemplate} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.component-container {
|
|
||||||
grid-row-start: middle;
|
|
||||||
grid-column-start: middle;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
margin: auto;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-container iframe {
|
|
||||||
border: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue