2019-08-20 08:18:23 +12:00
|
|
|
<script>
|
|
|
|
|
import { store } from "../builderStore";
|
2019-08-27 18:32:56 +12:00
|
|
|
import { makeLibraryUrl } from "../builderStore/loadComponentLibraries";
|
2019-08-20 08:18:23 +12:00
|
|
|
import {
|
|
|
|
|
last,
|
2019-08-20 19:24:07 +12:00
|
|
|
split,
|
|
|
|
|
map,
|
|
|
|
|
join
|
2019-08-20 08:18:23 +12:00
|
|
|
} from "lodash/fp";
|
|
|
|
|
import { pipe } from "../common/core";
|
|
|
|
|
import { splitName } from "./pagesParsing/splitRootComponentName"
|
2019-08-20 19:24:07 +12:00
|
|
|
import { afterUpdate } from 'svelte';
|
2019-09-03 21:42:19 +12:00
|
|
|
import { getRootComponent } from "./pagesParsing/getRootComponent";
|
|
|
|
|
|
|
|
|
|
if(!window.budibaseIframeConnector) {
|
|
|
|
|
window.budibaseIframeConnector = {
|
|
|
|
|
initialiseComponent(props, htmlElement) {
|
|
|
|
|
const rootComponent = getRootComponent(
|
|
|
|
|
props._component, allComponents);
|
|
|
|
|
|
|
|
|
|
const {componentName, libName} = splitName(
|
|
|
|
|
rootComponent.name);
|
|
|
|
|
|
|
|
|
|
new (libraries[libName][componentName])({
|
|
|
|
|
target: htmlElement,
|
|
|
|
|
props: {...props, _app: window.budibaseIframeConnector}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-08-20 08:18:23 +12:00
|
|
|
|
|
|
|
|
let component;
|
2019-08-20 19:24:07 +12:00
|
|
|
let stylesheetLinks = "";
|
|
|
|
|
let componentHtml = "";
|
2019-08-22 18:57:56 +12:00
|
|
|
let props;
|
2019-08-27 18:32:56 +12:00
|
|
|
let componentLibraryUrl = "";
|
|
|
|
|
let rootComponentName = "";
|
|
|
|
|
let iframe;
|
2019-09-03 21:42:19 +12:00
|
|
|
let libraries;
|
|
|
|
|
let allComponents;
|
|
|
|
|
|
2019-08-20 08:18:23 +12:00
|
|
|
|
|
|
|
|
store.subscribe(s => {
|
|
|
|
|
const {componentName, libName} = splitName(
|
|
|
|
|
s.currentComponentInfo.rootComponent.name);
|
|
|
|
|
|
2019-08-27 18:32:56 +12:00
|
|
|
rootComponentName = componentName;
|
2019-08-22 18:57:56 +12:00
|
|
|
props = s.currentComponentInfo.fullProps;
|
2019-08-20 08:18:23 +12:00
|
|
|
component = s.libraries[libName][componentName];
|
2019-08-20 19:24:07 +12:00
|
|
|
stylesheetLinks = pipe(s.pages.stylesheets, [
|
|
|
|
|
map(s => `<link rel="stylesheet" href="${s}"/>`),
|
|
|
|
|
join("\n")
|
2019-08-27 18:32:56 +12:00
|
|
|
]);
|
|
|
|
|
componentLibraryUrl = makeLibraryUrl(s.appname, libName);
|
2019-09-03 21:42:19 +12:00
|
|
|
libraries = s.libraries;
|
|
|
|
|
allComponents = s.allComponents;
|
2019-08-20 08:18:23 +12:00
|
|
|
});
|
|
|
|
|
|
2019-08-27 18:32:56 +12:00
|
|
|
/*
|
2019-08-20 19:24:07 +12:00
|
|
|
afterUpdate(() => {
|
2019-08-27 18:32:56 +12:00
|
|
|
if(iframe) iframeLoaded();
|
2019-08-20 19:24:07 +12:00
|
|
|
});
|
2019-08-27 18:32:56 +12:00
|
|
|
*/
|
2019-08-20 19:24:07 +12:00
|
|
|
|
2019-08-27 18:32:56 +12:00
|
|
|
const iframeLoaded = () => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 1).toString() + "px";
|
|
|
|
|
iframe.style.width = (iframe.contentWindow.document.body.scrollWidth + 1).toString() + "px";
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
2019-08-20 19:24:07 +12:00
|
|
|
|
2019-08-20 08:18:23 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="component-preview" >
|
|
|
|
|
<div class="component-container">
|
2019-08-27 18:32:56 +12:00
|
|
|
<iframe bind:this={iframe}
|
|
|
|
|
on:load={iframeLoaded}
|
|
|
|
|
title="componentPreview"
|
|
|
|
|
srcdoc={
|
|
|
|
|
`<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
${stylesheetLinks}
|
|
|
|
|
<script>
|
2019-08-20 19:24:07 +12:00
|
|
|
|
2019-08-27 18:32:56 +12:00
|
|
|
import('${componentLibraryUrl}')
|
|
|
|
|
.then(module => {
|
|
|
|
|
const componentClass = module['${rootComponentName}'];
|
|
|
|
|
const instance = new componentClass({
|
|
|
|
|
target: document.body,
|
2019-09-03 21:42:19 +12:00
|
|
|
props: {...${JSON.stringify(props)}, _app: window.parent.budibaseIframeConnector}
|
2019-08-27 18:32:56 +12:00
|
|
|
}) ;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
</body>
|
|
|
|
|
</html>`}>
|
2019-08-20 08:18:23 +12:00
|
|
|
</iframe>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.component-preview {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-rows: [top] 1fr [middle] auto [bottom] 1fr;
|
|
|
|
|
grid-template-columns: [left] 1fr [middle] auto [right] 1fr;
|
|
|
|
|
grid-column-start: preview;
|
|
|
|
|
height:100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.component-container {
|
|
|
|
|
grid-row-start: middle;
|
|
|
|
|
grid-column-start: middle;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
