mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-26 08:11:17 +02:00
Code Issues Releases Wiki Activity

get preview running for extension

Browse Source
This commit is contained in:
Kushagra Gour
2024-05-03 16:14:08 +05:30
parent 7151cdf6a3
commit 03ec2d382c
1 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/ContentWrap.jsx
View File

@@ -181,7 +181,11 @@ export default class ContentWrap extends Component {
}) })
]).then(fn); ]).then(fn);
// Setting to blank string cause frame to reload // Setting to blank string cause frame to reload
this.frame.src = this.frame.src; if (window.IS_EXTENSION) {
this.frame.src = '';
} else {
this.frame.src = this.frame.src;
}
}; };
const writeInsideIframe = () => { const writeInsideIframe = () => {
if (!cachedSandboxAttribute && window.DEBUG) { if (!cachedSandboxAttribute && window.DEBUG) {
@@ -191,10 +195,13 @@ export default class ContentWrap extends Component {
// this.frame.setAttribute('sandbox', cachedSandboxAttribute); // this.frame.setAttribute('sandbox', cachedSandboxAttribute);
// this.frame.removeAttribute('sweet'); // this.frame.removeAttribute('sweet');
// console.log('sending postmessage'); // console.log('sending postmessage');
this.frame.contentWindow.postMessage({ contents }, '*'); if (window.IS_EXTENSION) {
// this.frame.contentDocument.open(); this.frame.contentDocument.open();
// this.frame.contentDocument.write(contents); this.frame.contentDocument.write(contents);
// this.frame.contentDocument.close(); this.frame.contentDocument.close();
} else {
this.frame.contentWindow.postMessage({ contents }, '*');
}
}; };
refreshAndDo(() => { refreshAndDo(() => {
cachedSandboxAttribute = this.frame.getAttribute('sandbox'); cachedSandboxAttribute = this.frame.getAttribute('sandbox');
@@ -561,11 +568,20 @@ export default class ContentWrap extends Component {
const iframeHeight = iframeBounds.height; const iframeHeight = iframeBounds.height;
document.body.classList.add('is-detached-mode'); document.body.classList.add('is-detached-mode');
this.detachedWindow = window.open( if (window.IS_EXTENSION) {
`${PREVIEW_FRAME_HOST}/preview.html`, this.detachedWindow = window.open(
'Web Maker', './preview.html',
`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1` 'Web Maker',
); `width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
);
} else {
this.detachedWindow = window.open(
`${PREVIEW_FRAME_HOST}/preview.html`,
'Web Maker',
`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
);
}
// Trigger initial render in detached window // Trigger initial render in detached window
setTimeout(() => { setTimeout(() => {
this.setPreviewContent(true); this.setPreviewContent(true);
@@ -929,16 +945,26 @@ export default class ContentWrap extends Component {
</div> </div>
</SplitPane> </SplitPane>
<div class="demo-side" id="js-demo-side" style=""> <div class="demo-side" id="js-demo-side" style="">
<iframe {window.IS_EXTENSION ? (
src={`./indexpm.html`} <iframe
ref={el => (this.frame = el)} ref={el => (this.frame = el)}
frameborder="0" frameborder="0"
id="demo-frame" id="demo-frame"
sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation" allowpaymentrequest="true"
allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share" allowfullscreen="true"
allowpaymentrequest="true" />
allowfullscreen="true" ) : (
/> <iframe
src={`./indexpm.html`}
ref={el => (this.frame = el)}
frameborder="0"
id="demo-frame"
sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"
allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"
allowpaymentrequest="true"
allowfullscreen="true"
/>
)}
<PreviewDimension ref={comp => (this.previewDimension = comp)} /> <PreviewDimension ref={comp => (this.previewDimension = comp)} />