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