mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-23 15:01:14 +02:00
Code Issues Releases Wiki Activity

get back code to do inline style replacement when only css changes, instead of refreshing the page DOM

Browse Source
This commit is contained in:
Kushagra Gour
2025-07-21 19:34:23 +05:30
parent 0d4ba6314d
commit 83d346ee3c
3 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
preview/detached-window.js
View File

@@ -1,7 +1,17 @@
window.addEventListener('message', e => {
// Recieving from app window
if (e.data && e.data.contents && e.data.contents.match(/<html/)) {
if (e.data && e.data.isCssOnly) {
const frame = document.querySelector('iframe');
if (
frame.contentDocument &&
frame.contentDocument.querySelector('#webmakerstyle')
) {
frame.contentDocument.querySelector('#webmakerstyle').textContent =
e.data.css;
}
} else if (e.data && e.data.contents && e.data.contents.match(/<html/)) {
const frame = document.querySelector('iframe');
frame.src = frame.src;
setTimeout(() => {
frame.contentDocument.open();
@@ -9,6 +19,7 @@ window.addEventListener('message', e => {
frame.contentDocument.close();
}, 10);
}
// for files mode
if (e.data && e.data.url && e.data.url.match(/index\.html/)) {
document.querySelector('iframe').src = e.data.url;
}

14
src/components/ContentWrap.jsx
View File

@@ -248,11 +248,9 @@ export default class ContentWrap extends Component {
// If just CSS was changed (and everything shudn't be empty),
// change the styles inside the iframe.
if (
false &&
!isForced &&
currentCode.html === this.codeInPreview.html &&
currentCode.js === this.codeInPreview.js &&
false
currentCode.js === this.codeInPreview.js
) {
computeCss(
cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
@@ -262,11 +260,11 @@ export default class ContentWrap extends Component {
if (cssMode === CssModes.ACSS) {
this.cm.css.setValue(result.code || '');
}
if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
targetFrame.contentDocument.querySelector(
'#webmakerstyle'
).textContent = result.code || '';
}
this.frame.contentWindow.postMessage(
{ isCssOnly: true, css: result.code || '' },
'*'
);
});
} else {
var htmlPromise = computeHtml(

15
src/indexpm.html
View File

@@ -1,11 +1,18 @@
<script>
function callback(e) {
// console.log('post message recvd', e.data);
window.document.open();
const { contents } = e.data;
window.document.write(e.data.contents);
window.document.close();
const { contents, isCssOnly } = e.data;
if (isCssOnly) {
if (document.querySelector('#webmakerstyle')) {
document.querySelector('#webmakerstyle').textContent = e.data.css;
}
} else {
window.document.open();
window.document.write(e.data.contents);
window.document.close();
}
window.addEventListener('message', callback);
}
window.addEventListener('message', callback);