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 => { window.addEventListener('message', e => {
// Recieving from app window // 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'); 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; frame.src = frame.src;
setTimeout(() => { setTimeout(() => {
frame.contentDocument.open(); frame.contentDocument.open();
@@ -9,6 +19,7 @@ window.addEventListener('message', e => {
frame.contentDocument.close(); frame.contentDocument.close();
}, 10); }, 10);
} }
// for files mode
if (e.data && e.data.url && e.data.url.match(/index\.html/)) { if (e.data && e.data.url && e.data.url.match(/index\.html/)) {
document.querySelector('iframe').src = e.data.url; 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), // If just CSS was changed (and everything shudn't be empty),
// change the styles inside the iframe. // change the styles inside the iframe.
if ( if (
false &&
!isForced && !isForced &&
currentCode.html === this.codeInPreview.html && currentCode.html === this.codeInPreview.html &&
currentCode.js === this.codeInPreview.js && currentCode.js === this.codeInPreview.js
false
) { ) {
computeCss( computeCss(
cssMode === CssModes.ACSS ? currentCode.html : currentCode.css, cssMode === CssModes.ACSS ? currentCode.html : currentCode.css,
@@ -262,11 +260,11 @@ export default class ContentWrap extends Component {
if (cssMode === CssModes.ACSS) { if (cssMode === CssModes.ACSS) {
this.cm.css.setValue(result.code || ''); this.cm.css.setValue(result.code || '');
} }
if (targetFrame.contentDocument.querySelector('#webmakerstyle')) {
targetFrame.contentDocument.querySelector( this.frame.contentWindow.postMessage(
'#webmakerstyle' { isCssOnly: true, css: result.code || '' },
).textContent = result.code || ''; '*'
} );
}); });
} else { } else {
var htmlPromise = computeHtml( var htmlPromise = computeHtml(

15
src/indexpm.html
View File

@@ -1,11 +1,18 @@
<script> <script>
function callback(e) { function callback(e) {
// console.log('post message recvd', e.data); // console.log('post message recvd', e.data);
window.document.open();
const { contents } = e.data; const { contents, isCssOnly } = e.data;
window.document.write(e.data.contents);
window.document.close(); 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);
} }
window.addEventListener('message', callback); window.addEventListener('message', callback);