mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-13 18:16:19 +02:00
Code Issues Releases Wiki Activity

add basic detached preview mode. fixes #92

Browse Source
This commit is contained in:
Kushagra Gour
2017-09-04 03:17:26 +05:30
parent 83e28635d0
commit 90f50f5502
5 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/detached-window.js Normal file
View File

@ -0,0 +1,3 @@
window.addEventListener('message', e => {
document.querySelector('iframe').src = e.data;
});

6
src/index.html
View File

@ -194,6 +194,12 @@
<rect x="0" y="0" width="100" height="100" /> <rect x="0" y="0" width="100" height="100" />
</svg> </svg>
</a> </a>
<a class="mode-btn hint--top-left hint--rounded" aria-label="Detach Preview" d-click="openDetachedPreview">
<svg viewBox="0 0 24 24">
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
</svg>
</a>
<div class="footer__separator"></div> <div class="footer__separator"></div>

9
src/preview.html Normal file
View File

@ -0,0 +1,9 @@
<link rel="stylesheet" href="style.css">
<body>
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
<script src="detached-window.js"></script>
</body>

22
src/script.js
View File

@ -1038,6 +1038,9 @@ customEditorFontInput
chrome.i18n.getMessage('@@extension_id') + chrome.i18n.getMessage('@@extension_id') +
'/temporary/' + '/temporary/' +
'preview.html'; 'preview.html';
if (scope.detachedWindow) {
scope.detachedWindow.postMessage(frame.src, '*');
}
}); });
}); });
} }
@ -1805,6 +1808,25 @@ customEditorFontInput
}); });
} }
scope.openDetachedPreview = function() {
document.body.classList.add('is-detached-mode');
scope.detachedWindow = window.open(
'./preview.html',
'Web Maker',
'width=420,height=230,resizable,scrollbars=yes,status=1'
);
setTimeout(() => {
scope.detachedWindow.postMessage(frame.src, '*');
}, 1000);
function checkWindow() {
if (scope.detachedWindow && scope.detachedWindow.closed) {
clearInterval(intervalID);
document.body.classList.remove('is-detached-mode');
}
}
var intervalID = window.setInterval(checkWindow, 500);
};
function init() { function init() {
var lastCode; var lastCode;

19
src/style.css
View File

@ -886,6 +886,25 @@ li.CodeMirror-hint-active {
cursor: ns-resize; cursor: ns-resize;
} }
.is-detached-mode .demo-side {
display: none;
}
.is-detached-mode .code-side {
width: 100% !important;
}
.layout-4 .code-side {
display: none;
}
.layout-4 .code-side + .gutter {
display: none;
}
.layout-4 .demo-side {
width: 100% !important;
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */ while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; } .cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }