Skip to content

Commit 6c71780

Browse files
javascript-2020javascript-2020
committed
save file
1 parent d953cd0 commit 6c71780

1 file changed

Lines changed: 64 additions & 17 deletions

File tree

‎utils/editors/html-editor/html-editor.html‎

Lines changed: 64 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11

22

3-
<!-- headers
4-
cross-origin-isolate
5-
-->
6-
7-
83
<!DOCTYPE html>
94

105
<html lang=en>
@@ -58,7 +53,7 @@
5853
<script src='https://cdn.jsdelivr.net/npm/prettier@2.8.8/parser-html.js'></script>
5954

6055

61-
<script src='https://libs.ext-code.com/js/dom/component/v2.0/component.js?init'></script>
56+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js?hdr'></script>
6257

6358

6459

@@ -99,12 +94,12 @@
9994

10095

10196

102-
<script init>
97+
<script>
10398
console.log('html-editor-v3.0.html');
10499
var version='v3.0';
105100
var df=true,did='html-editor';
106101

107-
102+
var hdr;
108103
var filemod;
109104
var autosave;
110105
var publish;
@@ -115,19 +110,25 @@
115110

116111
async function init(){
117112
debug('init',version);
113+
hdr = mod['editors-hdr'];
118114
log = mod['log-mod'];
119115
filemod = mod['file-mod'];
120116
autosave = mod['auto-save'];
121117
publish = mod['publish-ui'];
122118
editor = mod['web-editor'];
123119
output = mod['output-html'];
120+
output.df = true;
124121

125122
editor.initmod({mode:'html',on});
126123
autosave.initmod({save:btn.save});
127124

128125
mod.base.add({log,complete,source,focus,editor,filemod});
126+
129127
await mod.auto();
130128

129+
130+
hdr['page-source'].url('v3.0/html-editor-v3.0.html');
131+
131132
window.onfocus = focus;
132133
keydown.add(kd);
133134
menu.on.close = focus;
@@ -137,10 +138,11 @@
137138

138139
publish.query();
139140

141+
140142
}//init
141143

142144

143-
</script init>
145+
</script>
144146

145147

146148
<link rel=stylesheet href='/utils/css/utils.css' crossorigin=anonymous>
@@ -201,9 +203,10 @@
201203
<body>
202204

203205
<editors-hdr component=grp>
204-
<img class=title src='images/html-editor.png' style='top:-5px;height:55px' alt='html editor'>
206+
<img slot=title src='images/html-editor.png' style='top:-5px;height:55px' alt='html editor'>
205207
<h1 slot=seo-hdr class=visually-hidden>html editor</h1>
206-
<time slot=date datetime=2026-01-04>04 Jan 2026</time>
208+
<h4 slot=version>v3.0</h4>
209+
<time slot=date datetime=2026-01-24>24 Jan 2026</time>
207210
</editors-hdr>
208211

209212

@@ -220,7 +223,8 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
220223

221224
<publish-ui component></publish-ui>
222225

223-
<button id=run>run</button>
226+
<button id=run title='ctrl+enter'>run</button>
227+
224228
<img id=prettier class=icon title=prettier>
225229

226230
<span class=spc></span>
@@ -236,7 +240,7 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
236240

237241
<div id=page-slider style='width:10px;cursor:ew-resize'></div>
238242

239-
<output-html component=page></output-html>
243+
<output-html v2.0 component=page></output-html>
240244

241245
</div>
242246

@@ -269,6 +273,13 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
269273

270274
menu.add.style();
271275

276+
var btn1 = document.createElement('input');
277+
btn1.type = 'button';
278+
btn1.value = 'isolate';
279+
$(hdr.__host.shadowRoot,'#btns').append(btn1);
280+
btn1.onclick = btn.isolate;
281+
282+
272283
$(root,'#save').onclick = btn.save;
273284
$('#run').onclick = btn.run;
274285
$(root,'#prettier').onclick = btn.prettier;
@@ -297,7 +308,7 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
297308
//console.log('[ html-editor ]','kd');
298309
if(e.key=='Enter' && e.ctrlKey){
299310
e.preventDefault();
300-
run();
311+
btn.run();
301312
}
302313

303314
if(e.key==' ' && e.ctrlKey){
@@ -318,6 +329,20 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
318329
}//keydown
319330

320331

332+
btn.isolate = function(){
333+
334+
var url = window.location.toString();
335+
var i1 = url.indexOf('?');
336+
if(i1!=-1){
337+
url = urls.lice(0,i1);
338+
}else{
339+
url += '?isolate';
340+
}
341+
window.location = url;
342+
343+
}//isolate
344+
345+
321346
btn.save = function(e){
322347

323348
filemod.save();
@@ -326,8 +351,8 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
326351

327352

328353
btn.run = function(){
329-
330-
run();
354+
debug('btn.run');
355+
run.sandbox();
331356

332357
}//run
333358

@@ -377,6 +402,19 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
377402
}//change
378403

379404

405+
//:
406+
407+
408+
window.addEventListener('message',e=>{
409+
410+
var json = e.data;
411+
if(json.sandbox){
412+
output.on.message(json);
413+
}
414+
415+
});
416+
417+
380418
//:
381419

382420

@@ -415,7 +453,7 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
415453

416454
var txt = await blob.text();
417455
editor.clear();
418-
output.kill();
456+
//output.kill();
419457
editor.setValue(txt,-1);
420458
complete(file);
421459

@@ -501,6 +539,15 @@ <h1 slot=seo-hdr class=visually-hidden>html editor</h1>
501539
}//run
502540

503541

542+
run.sandbox = function(){
543+
debug('run.sandbox');
544+
var html = editor.getValue();
545+
output.sandbox(html);
546+
547+
}//sandbox
548+
549+
550+
504551
//:
505552

506553

0 commit comments

Comments
 (0)