CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 10:08:09 +13:00
Code Issues Projects Releases Wiki Activity

Merge pull request #344 from mjashanks/master

Browse source 
app preview improvements
This commit is contained in:
Michael Shanks 2020-06-09 11:50:48 +01:00 committed by GitHub
commit bacf4c8f41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 108 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -21,42 +21,7 @@
return componentName || "element" return componentName || "element"
} }
$: iframe && const screenPlaceholder = {
console.log(
iframe.contentDocument.head.insertAdjacentHTML(
"beforeend",
`<\style></style>`
)
)
$: hasComponent = !!$store.currentPreviewItem
$: {
styles = ""
// Apply the CSS from the currently selected page and its screens
const currentPage = $store.pages[$store.currentPageName]
styles += currentPage._css
for (let screen of currentPage._screens) {
styles += screen._css
}
styles = styles
}
$: stylesheetLinks = pipe($store.pages.stylesheets, [
map(s => `<link rel="stylesheet" href="${s}"/>`),
join("\n"),
])
$: screensExist =
$store.currentPreviewItem._screens &&
$store.currentPreviewItem._screens.length > 0
$: frontendDefinition = {
appId: $store.appId,
libraries: $store.libraries,
page: $store.currentPreviewItem,
screens: screensExist
? $store.currentPreviewItem._screens
: [
{
name: "Screen Placeholder", name: "Screen Placeholder",
route: "*", route: "*",
props: { props: {
@ -93,7 +58,39 @@
}, },
], ],
}, },
}, }
$: hasComponent = !!$store.currentPreviewItem
$: {
styles = ""
// Apply the CSS from the currently selected page and its screens
const currentPage = $store.pages[$store.currentPageName]
styles += currentPage._css
for (let screen of currentPage._screens) {
styles += screen._css
}
styles = styles
}
$: stylesheetLinks = pipe($store.pages.stylesheets, [
map(s => `<link rel="stylesheet" href="${s}"/>`),
join("\n"),
])
$: screensExist =
$store.currentPreviewItem._screens &&
$store.currentPreviewItem._screens.length > 0
$: frontendDefinition = {
appId: $store.appId,
libraries: $store.libraries,
page: $store.pages[$store.currentPageName],
screens: [
$store.currentFrontEndType === "page"
? screenPlaceholder
: $store.currentPreviewItem,
], ],
appRootPath: "", appRootPath: "",
} }
@ -103,6 +100,22 @@
$: selectedComponentId = $store.currentComponentInfo $: selectedComponentId = $store.currentComponentInfo
? $store.currentComponentInfo._id ? $store.currentComponentInfo._id
: "" : ""
const refreshContent = () => {
iframe.contentWindow.postMessage(JSON.stringify({
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition,
}))
}
$: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
$: if(iframe && frontendDefinition) {
refreshContent()
}
</script> </script>
<div class="component-container"> <div class="component-container">
@ -111,13 +124,7 @@
style="height: 100%; width: 100%" style="height: 100%; width: 100%"
title="componentPreview" title="componentPreview"
bind:this={iframe} bind:this={iframe}
srcdoc={iframeTemplate({ srcdoc={iframeTemplate} />
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition: JSON.stringify(frontendDefinition),
})} />
{/if} {/if}
</div> </div>

58
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View file

@ -1,20 +1,6 @@
export default ({ export default `<html>
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition,
}) => `<html>
<head> <head>
${stylesheetLinks}
<style> <style>
${styles || ""}
.${selectedComponentType}-${selectedComponentId} {
border: 2px solid #0055ff;
}
body, html { body, html {
height: 100%!important; height: 100%!important;
font-family: Roboto !important; font-family: Roboto !important;
@ -35,11 +21,49 @@ export default ({
} }
</style> </style>
<script> <script>
window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition}; function receiveMessage(event) {
if (!event.data) return
const data = JSON.parse(event.data)
try {
if (styles) document.head.removeChild(styles)
} catch(_) { }
try {
if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
} catch(_) { }
selectedComponentStyle = document.createElement('style');
document.head.appendChild(selectedComponentStyle)
var selectedCss = '.' + data.selectedComponentType + '-' + data.selectedComponentId + '{ border: 2px solid #0055ff; }'
selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
styles = document.createElement('style')
document.head.appendChild(styles)
styles.appendChild(document.createTextNode(data.styles))
window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
if (clientModule) {
clientModule.loadBudibase({ window, localStorage })
}
}
let clientModule
let styles
let selectedComponentStyle
document.addEventListener("click", function(e) {
e.preventDefault()
e.stopPropagation()
return false;
}, true)
import('/_builder/budibase-client.esm.mjs') import('/_builder/budibase-client.esm.mjs')
.then(module => { .then(module => {
module.loadBudibase({ window, localStorage }); clientModule = module
window.addEventListener('message', receiveMessage)
window.dispatchEvent(new Event('bb-ready'))
}) })
</script> </script>
</head> </head>