mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-12 12:40:53 +02:00
files mode detached mode working, separate domain and logging refactor
This commit is contained in:
@ -69,6 +69,11 @@ export default class ContentWrap extends Component {
|
|||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.onRef(this);
|
this.props.onRef(this);
|
||||||
|
window.addEventListener('message', e => {
|
||||||
|
if (e.data && e.data.logs) {
|
||||||
|
this.onMessageFromConsole(...e.data.logs);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onHtmlCodeChange(editor, change) {
|
onHtmlCodeChange(editor, change) {
|
||||||
@ -160,7 +165,7 @@ export default class ContentWrap extends Component {
|
|||||||
: `${location.origin}`;
|
: `${location.origin}`;
|
||||||
var src = `filesystem:${origin}/temporary/preview.html`;
|
var src = `filesystem:${origin}/temporary/preview.html`;
|
||||||
if (this.detachedWindow) {
|
if (this.detachedWindow) {
|
||||||
this.detachedWindow.postMessage(src, '*');
|
this.detachedWindow.postMessage({ url: src }, '*');
|
||||||
} else {
|
} else {
|
||||||
this.frame.src = src;
|
this.frame.src = src;
|
||||||
}
|
}
|
||||||
|
@ -22,6 +22,7 @@ import { commandPaletteService } from '../commandPaletteService';
|
|||||||
import { PreviewDimension } from './PreviewDimension';
|
import { PreviewDimension } from './PreviewDimension';
|
||||||
|
|
||||||
const minCodeWrapSize = 33;
|
const minCodeWrapSize = 33;
|
||||||
|
const PREVIEW_FRAME_HOST = window.DEBUG ? 'http://localhost:7888' : ' ';
|
||||||
|
|
||||||
/* global htmlCodeEl
|
/* global htmlCodeEl
|
||||||
*/
|
*/
|
||||||
@ -114,6 +115,11 @@ export default class ContentWrapFiles extends Component {
|
|||||||
}
|
}
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.props.onRef(this);
|
this.props.onRef(this);
|
||||||
|
window.addEventListener('message', e => {
|
||||||
|
if (e.data && e.data.logs) {
|
||||||
|
this.onMessageFromConsole(...e.data.logs);
|
||||||
|
}
|
||||||
|
});
|
||||||
this.commandPaletteSubscriptions = [];
|
this.commandPaletteSubscriptions = [];
|
||||||
this.commandPaletteSubscriptions.push(
|
this.commandPaletteSubscriptions.push(
|
||||||
commandPaletteService.subscribe(SWITCH_FILE_EVENT, file => {
|
commandPaletteService.subscribe(SWITCH_FILE_EVENT, file => {
|
||||||
@ -250,10 +256,13 @@ export default class ContentWrapFiles extends Component {
|
|||||||
|
|
||||||
if (this.detachedWindow) {
|
if (this.detachedWindow) {
|
||||||
log('✉️ Sending message to detached window');
|
log('✉️ Sending message to detached window');
|
||||||
this.detachedWindow.postMessage({ contents: '/user/index.html' }, '*');
|
this.detachedWindow.postMessage(
|
||||||
|
{ url: `${PREVIEW_FRAME_HOST}/index.html` },
|
||||||
|
'*'
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.frame.src = 'https://preview.webmaker.com:8083/index.html';
|
this.frame.src = `${PREVIEW_FRAME_HOST}/index.html`;
|
||||||
}, 10);
|
}, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -519,6 +528,38 @@ export default class ContentWrapFiles extends Component {
|
|||||||
this.editor.focus();
|
this.editor.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
detachPreview() {
|
||||||
|
if (this.detachedWindow) {
|
||||||
|
this.detachedWindow.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const iframeBounds = this.frame.getBoundingClientRect();
|
||||||
|
const iframeWidth = iframeBounds.width;
|
||||||
|
const iframeHeight = iframeBounds.height;
|
||||||
|
document.body.classList.add('is-detached-mode');
|
||||||
|
|
||||||
|
this.detachedWindow = window.open(
|
||||||
|
'./preview.html',
|
||||||
|
'Web Maker',
|
||||||
|
`width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1`
|
||||||
|
);
|
||||||
|
// Trigger initial render in detached window
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setPreviewContent(true);
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
var intervalID = window.setInterval(checkWindow => {
|
||||||
|
if (this.detachedWindow && this.detachedWindow.closed) {
|
||||||
|
clearInterval(intervalID);
|
||||||
|
document.body.classList.remove('is-detached-mode');
|
||||||
|
this.detachedWindow = null;
|
||||||
|
// Update main frame preview to get latest changes (which were not
|
||||||
|
// getting reflected while detached window was open)
|
||||||
|
this.setPreviewContent(true);
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
onMessageFromConsole() {
|
onMessageFromConsole() {
|
||||||
const logs = [...arguments].map(arg => {
|
const logs = [...arguments].map(arg => {
|
||||||
if (
|
if (
|
||||||
@ -653,15 +694,12 @@ export default class ContentWrapFiles extends Component {
|
|||||||
<div class="demo-side" id="js-demo-side" style="">
|
<div class="demo-side" id="js-demo-side" style="">
|
||||||
<iframe
|
<iframe
|
||||||
ref={el => (this.frame = el)}
|
ref={el => (this.frame = el)}
|
||||||
src="https://preview.webmaker.com:8083/index.html"
|
src={`${PREVIEW_FRAME_HOST}/index.html`}
|
||||||
frameborder="0"
|
frameborder="0"
|
||||||
id="demo-frame"
|
id="demo-frame"
|
||||||
allowfullscreen
|
allowfullscreen
|
||||||
/>
|
/>
|
||||||
<iframe
|
<iframe src={`${PREVIEW_FRAME_HOST}/talk.html`} id="talkFrame" />
|
||||||
src="https://preview.webmaker.com:8083/talk.html"
|
|
||||||
id="talkFrame"
|
|
||||||
/>
|
|
||||||
<PreviewDimension ref={comp => (this.previewDimension = comp)} />
|
<PreviewDimension ref={comp => (this.previewDimension = comp)} />
|
||||||
<Console
|
<Console
|
||||||
logs={this.state.logs}
|
logs={this.state.logs}
|
||||||
@ -676,3 +714,4 @@ export default class ContentWrapFiles extends Component {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
2;
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
window.addEventListener('message', e => {
|
window.addEventListener('message', e => {
|
||||||
|
// Recieving from app window
|
||||||
if (e.data && e.data.contents) {
|
if (e.data && e.data.contents) {
|
||||||
const frame = document.querySelector('iframe');
|
const frame = document.querySelector('iframe');
|
||||||
frame.src = frame.src;
|
frame.src = frame.src;
|
||||||
@ -7,7 +8,13 @@ window.addEventListener('message', e => {
|
|||||||
frame.contentDocument.write(e.data.contents);
|
frame.contentDocument.write(e.data.contents);
|
||||||
frame.contentDocument.close();
|
frame.contentDocument.close();
|
||||||
}, 10);
|
}, 10);
|
||||||
} else {
|
}
|
||||||
document.querySelector('iframe').src = e.data;
|
if (e.data && e.data.url) {
|
||||||
|
document.querySelector('iframe').src = e.data.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recieving from preview iframe
|
||||||
|
if (e.data && e.data.logs) {
|
||||||
|
window.opener.postMessage(e.data, '*');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,6 +1,28 @@
|
|||||||
var mainWindow = window.parent.onMessageFromConsole
|
let mainWindow = window.parent;
|
||||||
? window.parent
|
|
||||||
: window.parent.opener;
|
function sanitizeDomNode(node) {
|
||||||
|
const fakeNode = {
|
||||||
|
nodeName: node.nodeName,
|
||||||
|
nodeType: node.nodeType,
|
||||||
|
tagName: node.tagName,
|
||||||
|
childNodes: [...node.childNodes].map(child => sanitizeDomNode(child)),
|
||||||
|
textContent: node.textContent
|
||||||
|
}
|
||||||
|
if(node.attributes) {
|
||||||
|
fakeNode.attributes = [...node.attributes].map(attribute => ({name:attribute.name, value:attribute.value}))
|
||||||
|
}
|
||||||
|
return fakeNode;
|
||||||
|
}
|
||||||
|
function sendLog(...args) {
|
||||||
|
const sanitizedArgs = [...args].map(arg => {
|
||||||
|
if(arg && arg instanceof HTMLElement) {
|
||||||
|
return sanitizeDomNode(arg)
|
||||||
|
}
|
||||||
|
return arg;
|
||||||
|
})
|
||||||
|
mainWindow.postMessage({ logs: sanitizedArgs },"*");
|
||||||
|
}
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
var logEl,
|
var logEl,
|
||||||
isInitialized = false,
|
isInitialized = false,
|
||||||
@ -191,16 +213,16 @@ var mainWindow = window.parent.onMessageFromConsole
|
|||||||
})();
|
})();
|
||||||
screenLog.init({
|
screenLog.init({
|
||||||
noUi: true,
|
noUi: true,
|
||||||
proxyCallback: function() {
|
proxyCallback: function(...args) {
|
||||||
mainWindow.onMessageFromConsole.apply(null, arguments);
|
sendLog(...args);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
window._wmEvaluate = function _wmEvaluate(expr) {
|
window._wmEvaluate = function _wmEvaluate(expr) {
|
||||||
try {
|
try {
|
||||||
var result = eval(expr);
|
var result = eval(expr);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
mainWindow.onMessageFromConsole.call(null, e);
|
sendLog(e);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
mainWindow.onMessageFromConsole.call(null, result);
|
sendLog(result)
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user