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