2019-08-20 08:18:23 +12:00
|
|
|
<script>
|
2020-02-03 22:50:30 +13:00
|
|
|
import { store } from "../builderStore"
|
|
|
|
|
import { map, join } from "lodash/fp"
|
|
|
|
|
import { pipe } from "../common/core"
|
2019-09-03 21:42:19 +12:00
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
let iframe
|
2020-02-01 05:01:58 +13:00
|
|
|
|
2020-02-11 04:51:09 +13:00
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
$: iframe &&
|
|
|
|
|
console.log(
|
|
|
|
|
iframe.contentDocument.head.insertAdjacentHTML(
|
|
|
|
|
"beforeend",
|
2020-02-11 04:51:09 +13:00
|
|
|
`<\style></style>`
|
2020-02-03 22:50:30 +13:00
|
|
|
)
|
|
|
|
|
)
|
2020-02-11 04:51:09 +13:00
|
|
|
$: hasComponent = !!$store.currentPreviewItem
|
|
|
|
|
$: styles = hasComponent ? $store.currentPreviewItem._css : ""
|
2019-08-20 08:18:23 +12:00
|
|
|
|
2020-02-11 04:51:09 +13:00
|
|
|
$: stylesheetLinks = pipe(
|
|
|
|
|
$store.pages.stylesheets,
|
|
|
|
|
[map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
|
|
|
|
|
)
|
2020-01-29 10:17:04 +13:00
|
|
|
|
2020-02-11 10:35:51 +13:00
|
|
|
$: frontendDefinition = {
|
2020-02-03 22:50:30 +13:00
|
|
|
componentLibraries: $store.loadLibraryUrls(),
|
2020-02-11 10:35:51 +13:00
|
|
|
page: $store.currentPreviewItem,
|
|
|
|
|
screens: [],
|
2020-02-03 22:50:30 +13:00
|
|
|
appRootPath: "",
|
|
|
|
|
}
|
2020-02-11 10:35:51 +13:00
|
|
|
|
|
|
|
|
$: backendDefinition = {
|
|
|
|
|
hierarchy: $store.hierarchy,
|
|
|
|
|
}
|
|
|
|
|
|
2019-08-20 08:18:23 +12:00
|
|
|
</script>
|
|
|
|
|
|
2019-10-03 18:12:13 +13:00
|
|
|
<div class="component-container">
|
2020-02-11 04:51:09 +13:00
|
|
|
{#if hasComponent && $store.currentPreviewItem}
|
2020-02-03 22:50:30 +13:00
|
|
|
<iframe
|
|
|
|
|
style="height: 100%; width: 100%"
|
|
|
|
|
title="componentPreview"
|
|
|
|
|
bind:this={iframe}
|
|
|
|
|
srcdoc={`<html>
|
2020-02-11 04:51:09 +13:00
|
|
|
<head>
|
2019-08-27 18:32:56 +12:00
|
|
|
${stylesheetLinks}
|
2020-02-11 04:51:09 +13:00
|
|
|
<style>
|
|
|
|
|
${styles || ''}
|
|
|
|
|
body, html {
|
|
|
|
|
height: 100%!important;
|
|
|
|
|
}
|
|
|
|
|
<\/style>
|
|
|
|
|
<\script>
|
2020-02-11 10:35:51 +13:00
|
|
|
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)};
|
|
|
|
|
window["##BUDIBASE_BACKEND_DEFINITION##"] = ${JSON.stringify(backendDefinition)};
|
|
|
|
|
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentScreenFunctions};
|
2020-02-11 04:51:09 +13:00
|
|
|
|
|
|
|
|
import('/_builder/budibase-client.esm.mjs')
|
|
|
|
|
.then(module => {
|
|
|
|
|
module.loadBudibase({ window, localStorage });
|
|
|
|
|
})
|
|
|
|
|
<\/script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
</body>
|
2020-02-03 22:50:30 +13:00
|
|
|
</html>`} />
|
|
|
|
|
{/if}
|
2019-08-20 08:18:23 +12:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
2020-02-03 22:50:30 +13:00
|
|
|
.component-container {
|
|
|
|
|
grid-row-start: middle;
|
|
|
|
|
grid-column-start: middle;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding-top: 56.25%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
}
|
2020-01-29 10:17:04 +13:00
|
|
|
|
2020-02-03 22:50:30 +13:00
|
|
|
.component-container iframe {
|
|
|
|
|
border: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
left: 0;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
2020-01-25 00:32:13 +13:00
|
|
|
</style>
|
