forked from tsai/budibase
Martin McKeaveney
7 years ago
9 changed files with 180 additions and 152 deletions
@ -1,85 +1,95 @@ |
|||
<script> |
|||
import { store } from "../builderStore"; |
|||
import { map, join } from "lodash/fp"; |
|||
import { pipe } from "../common/core"; |
|||
import { buildPropsHierarchy } from "./pagesParsing/buildPropsHierarchy"; |
|||
import { store } from "../builderStore" |
|||
import { map, join } from "lodash/fp" |
|||
import { pipe } from "../common/core" |
|||
|
|||
let iframe; |
|||
let iframe |
|||
|
|||
$: iframe && console.log(iframe.contentDocument.head.insertAdjacentHTML('beforeend', '<style></style>')) |
|||
$: hasComponent = !!$store.currentFrontEndItem; |
|||
$: styles = hasComponent ? $store.currentFrontEndItem._css : ''; |
|||
function transform_component(comp) { |
|||
const props = comp.props || comp |
|||
if (props && props._children && props._children.length) { |
|||
props._children = props._children.map(transform_component) |
|||
} |
|||
|
|||
$: stylesheetLinks = pipe($store.pages.stylesheets, [ |
|||
map(s => `<link rel="stylesheet" href="${s}"/>`), |
|||
join("\n") |
|||
]); |
|||
return props |
|||
} |
|||
|
|||
$: appDefinition = { |
|||
componentLibraries: $store.loadLibraryUrls(), |
|||
props: buildPropsHierarchy( |
|||
$store.components, |
|||
$store.screens, |
|||
$store.currentFrontEndItem), |
|||
hierarchy: $store.hierarchy, |
|||
appRootPath: "" |
|||
}; |
|||
|
|||
</script> |
|||
$: iframe && |
|||
console.log( |
|||
iframe.contentDocument.head.insertAdjacentHTML( |
|||
"beforeend", |
|||
`<\style></style>` |
|||
) |
|||
) |
|||
$: hasComponent = !!$store.currentPreviewItem |
|||
$: styles = hasComponent ? $store.currentPreviewItem._css : "" |
|||
|
|||
$: stylesheetLinks = pipe( |
|||
$store.pages.stylesheets, |
|||
[map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")] |
|||
) |
|||
|
|||
<div class="component-container"> |
|||
{#if hasComponent} |
|||
<iframe style="height: 100%; width: 100%" |
|||
title="componentPreview" |
|||
bind:this={iframe} |
|||
srcdoc={ |
|||
`<html> |
|||
$: frontendDefinition = { |
|||
componentLibraries: $store.loadLibraryUrls(), |
|||
page: $store.currentPreviewItem, |
|||
screens: [], |
|||
appRootPath: "", |
|||
} |
|||
|
|||
$: backendDefinition = { |
|||
hierarchy: $store.hierarchy, |
|||
} |
|||
|
|||
<head> |
|||
</script> |
|||
|
|||
<div class="component-container"> |
|||
{#if hasComponent && $store.currentPreviewItem} |
|||
<iframe |
|||
style="height: 100%; width: 100%" |
|||
title="componentPreview" |
|||
bind:this={iframe} |
|||
srcdoc={`<html> |
|||
<head> |
|||
${stylesheetLinks} |
|||
<script> |
|||
window["##BUDIBASE_APPDEFINITION##"] = ${JSON.stringify(appDefinition)}; |
|||
window["##BUDIBASE_UIFUNCTIONS"] = ${$store.currentScreenFunctions}; |
|||
|
|||
<style> |
|||
${styles || ''} |
|||
body, html { |
|||
height: 100%!important; |
|||
} |
|||
<\/style> |
|||
<\script> |
|||
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${JSON.stringify(frontendDefinition)}; |
|||
window["##BUDIBASE_BACKEND_DEFINITION##"] = ${JSON.stringify(backendDefinition)}; |
|||
window["##BUDIBASE_FRONTEND_FUNCTIONS##"] = ${$store.currentScreenFunctions}; |
|||
|
|||
import('/_builder/budibase-client.esm.mjs') |
|||
.then(module => { |
|||
module.loadBudibase({ window, localStorage }); |
|||
}) |
|||
</script> |
|||
<style> |
|||
|
|||
body { |
|||
box-sizing: border-box; |
|||
padding: 20px; |
|||
} |
|||
${styles} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
</body> |
|||
</html>`}> |
|||
</iframe> |
|||
{/if} |
|||
<\/script> |
|||
</head> |
|||
<body> |
|||
</body> |
|||
</html>`} /> |
|||
{/if} |
|||
</div> |
|||
|
|||
|
|||
<style> |
|||
.component-container { |
|||
grid-row-start: middle; |
|||
grid-column-start: middle; |
|||
position: relative; |
|||
overflow: hidden; |
|||
padding-top: 56.25%; |
|||
margin: auto; |
|||
} |
|||
.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%; |
|||
} |
|||
.component-container iframe { |
|||
border: 0; |
|||
height: 100%; |
|||
left: 0; |
|||
position: absolute; |
|||
top: 0; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue