diff --git a/gulpfile.js b/gulpfile.js index dd2b30f..eba46c4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -24,6 +24,8 @@ gulp.task('copyFiles', [], function() { gulp.src('src/lib/transpilers/*').pipe(gulp.dest('app/lib/transpilers')); gulp.src('src/partials/*').pipe(gulp.dest('app/partials')); gulp.src('src/lib/screenlog.js').pipe(gulp.dest('app/lib')); + gulp.src('src/preview.html').pipe(gulp.dest('app')); + gulp.src('src/detached-window.js').pipe(gulp.dest('app')); gulp.src('src/icon-48.png').pipe(gulp.dest('app')); gulp.src('src/icon-128.png').pipe(gulp.dest('app')); gulp diff --git a/src/detached-window.js b/src/detached-window.js index 42e3258..e06aa27 100644 --- a/src/detached-window.js +++ b/src/detached-window.js @@ -1,3 +1,13 @@ window.addEventListener('message', e => { - document.querySelector('iframe').src = e.data; + if (e.data && e.data.contents) { + const frame = document.querySelector('iframe'); + frame.src = frame.src; + setTimeout(() => { + frame.contentDocument.open(); + frame.contentDocument.write(e.data.contents); + frame.contentDocument.close(); + }, 10); + } else { + document.querySelector('iframe').src = e.data; + } }); diff --git a/src/script.js b/src/script.js index d75891b..31191e0 100644 --- a/src/script.js +++ b/src/script.js @@ -1132,12 +1132,17 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn } if (shouldInlineJs) { - frame.src = frame.src; - setTimeout(() => { - frame.contentDocument.open(); - frame.contentDocument.write(contents); - frame.contentDocument.close(); - }, 10); + if (scope.detachedWindow) { + utils.log('✉️ Sending message to detached window'); + scope.detachedWindow.postMessage({ contents }, '*'); + } else { + frame.src = frame.src; + setTimeout(() => { + frame.contentDocument.open(); + frame.contentDocument.write(contents); + frame.contentDocument.close(); + }, 10); + } } else { // we need to store user script in external JS file to prevent inline-script // CSP from affecting it. @@ -2007,16 +2012,18 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn 'Web Maker', `width=${iframeWidth},height=${iframeHeight},resizable,scrollbars=yes,status=1` ); + // Trigger initial render in detached window setTimeout(() => { - scope.detachedWindow.postMessage(frame.src, '*'); - }, 1000); + scope.setPreviewContent(true); + }, 1500); function checkWindow() { if (scope.detachedWindow && scope.detachedWindow.closed) { clearInterval(intervalID); document.body.classList.remove('is-detached-mode'); $('#js-demo-side').insertBefore(consoleEl, null); scope.detachedWindow = null; - // Update main frame preview + // Update main frame preview to get latest changes (which were not + // getting reflected while detached window was open) scope.setPreviewContent(true); } }