Skip to content

Commit 8d34dec

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

File tree

1 file changed

+75
-107
lines changed

1 file changed

+75
-107
lines changed

‎utils/editors/js-console/js-console.html‎

Lines changed: 75 additions & 107 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>
@@ -40,39 +35,39 @@
4035
}
4136
</script>
4237

38+
<!--https://www.opengraph.xyz/-->
39+
<meta property=og:title content='JS Console'>
40+
<meta property=og:description content='Run, test, and debug JavaScript instantly in your browser. A fast, lightweight online JS console built for developers who value speed and simplicity.'>
41+
<meta property=og:image:width content=1280>
42+
<meta property=og:image:height content=720>
43+
<meta property=og:url content='https://ext-code.com/utils/editors/js-console/js-console.html'>
44+
<meta property=og:type content=website>
45+
<meta property=og:site_name content=ext-code.com>
46+
<!--
47+
<meta property=og:image content='https://ext-code.com/utils/editors/html-editor/images/og-image.webp'>
48+
-->
49+
4350

4451
<script src='https://cdn.jsdelivr.net/npm/ace-builds@1.37.0/src-min-noconflict/ace.js'></script>
4552
<script src="https://cdn.jsdelivr.net/npm/prettier@2.8.8/standalone.js"></script>
4653
<script src="https://cdn.jsdelivr.net/npm/prettier@2.8.8/parser-babel.js"></script>
4754
<script src="https://cdn.jsdelivr.net/npm/terser/dist/bundle.min.js"></script>
55+
<script src='https://ext-code.com/libs/js/external/espree/espree.js'></script>
4856

57+
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js?hdr'></script>
4958

50-
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
51-
52-
<script init>
53-
console.clear();
54-
console.log('js-console-v2.0.html');
55-
console.log();
56-
console.json=v=>console.log(JSON.stringify(v,null,4));
57-
var version='v2.0';
59+
<script>
60+
console.log('js-console-v3.0.html');
61+
var version='v3.0';
5862
var df=true,did='js-console';
5963

6064
var ace;
6165
var obfuscator;
6266
var espree;
6367

64-
var ext;
65-
var $;
66-
var datatype;
67-
var menumod;
68-
var keydown;
69-
var debug;
70-
var ls;
71-
7268
var menu;
7369

7470
var hdr;
75-
var mainmenu;
7671
var filemod;
7772
var autosave;
7873
var publish;
@@ -86,51 +81,25 @@
8681

8782
async function init(){
8883
debug('init',version);
89-
//keydown = keydown();
90-
menu = menumod();
91-
92-
93-
mod.base.add({ext,$,datatype,keydown,menu,menumod,ace,ls});
94-
95-
84+
debug('crossOriginIsolated',window.crossOriginIsolated);
9685
hdr = mod['editors-hdr'];
97-
mainmenu = mod['main-menu'];
9886
filemod = mod['file-mod'];
9987
autosave = mod['auto-save'];
10088
publish = mod['publish-ui'];
10189
editor = mod['web-editor'];
102-
output = mod['output-console']
90+
output = mod['output-console'];
10391
log = mod['log-mod'];
10492

93+
mod.base.add({filemod,complete,source,focus});
10594

106-
menu.initmod({keydown});
95+
autosave.initmod({save:btn.save});
96+
editor.initmod({on,mode:'javascript'});
10797

108-
hdr.initmod({ext,$,menu});
109-
mainmenu.initmod({ext,$,menu,editor,filemod});
110-
filemod.initmod({ext,$,menu,menumod,complete,source,focus,log});
111-
autosave.initmod({$,menu,keydown,log,save:btn.save});
112-
publish.initmod({ext,$,ui,menu,source,complete,log});
113-
editor.initmod({ext,$,menu,ace,on});
114-
output.initmod({ext,$});
115-
log.initmod({ext,$});
98+
await mod.auto();
11699

100+
hdr['page-source'].url('v3.0/js-console-v3.0.html');
117101

118-
await Promise.all([
119-
mainmenu.init(),
120-
hdr.init(),
121-
filemod.init(),
122-
autosave.init(),
123-
publish.init(),
124-
editor.init(),
125-
output.init(),
126-
log.init(),
127-
]);
128-
129-
130-
//:
131-
132-
133-
icon.def = $('[rel*=icon]').href;
102+
icon.def = $('[rel*=icon]').href;
134103

135104
window.onfocus = ()=>editor && editor.focus();
136105
keydown.add(kd);
@@ -146,35 +115,7 @@
146115
}//init
147116

148117

149-
//:
150-
151-
152-
(async()=>{
153-
154-
mod.stack.add;
155-
156-
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
157-
158-
var lsmod;
159-
160-
var promise = ext.load.libs(
161-
'js/dom/$.js',
162-
'js/core/datatype.js',
163-
'js/dom/menumod/menumod.js',
164-
'js/dom/keydown/keydown.js',
165-
'js/debug/debug.js',
166-
'js/core/ls-mod/ls-mod.js',
167-
);
168-
[$,datatype,menumod,keydown,debug,lsmod] = await promise;
169-
170-
ls = lsmod();
171-
172-
mod.stack.complete;
173-
174-
})();
175-
176-
177-
</script init>
118+
</script>
178119

179120

180121
<link rel=stylesheet href='/utils/css/utils.css' crossorigin=anonymous>
@@ -216,13 +157,13 @@
216157
}
217158

218159
#run
219-
{color:blue;font-weight:bold}
160+
{color:blue;font-weight:bold;margin-left:20px}
220161
#iframe-root
221162
{border:1px solid lightgray;padding:5px 10px;display:flex;align-items:center;border-radius:5px}
222163
#iframe-root input
223164
{margin-left:10px}
224165
#async-root
225-
{border:1px solid lightgray;padding:5px 10px;display:flex;align-items:center;border-radius:5px}
166+
{border:1px solid lightgray;padding:5px 10px;display:flex;align-items:center;border-radius:5px;cursor:pointer;margin-right:20px}
226167
#async-root input
227168
{margin-left:10px}
228169

@@ -257,8 +198,10 @@
257198
<body>
258199

259200
<editors-hdr component=grp>
260-
<img class=title src='images/js-console.png' style='top:5px;height:35px'>
261-
<time slot=date datetime=2025-10-30>30 Oct 2025</time>
201+
<img slot=title src='images/js-console.png' style='top:-10px;height:75px'>
202+
<h1 slot=seo-hdr class=visually-hidden>html editor</h1>
203+
<h4 slot=version>v3.0</h4>
204+
<time slot=date datetime=2026-01-24>24 Jan 2026</time>
262205
</editors-hdr>
263206

264207

@@ -275,14 +218,7 @@
275218

276219
<publish-ui component></publish-ui>
277220

278-
<button id=run>run</button>
279-
280-
<div id=iframe-root>
281-
<span>
282-
iframe
283-
</span>
284-
<input id=iframe type=checkbox checked>
285-
</div>
221+
<button id=run title='ctrl+enter'>run</button>
286222

287223
<div id=async-root>
288224
<span>
@@ -309,7 +245,7 @@
309245

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

312-
<output-console component=page></output-console>
248+
<output-console v3.0 component=page></output-console>
313249

314250
</div>
315251

@@ -347,12 +283,18 @@
347283

348284

349285
async function initdom(rootnode){ //c
350-
console.log('initdom');
286+
debug('initdom');
351287
root = rootnode;
352288

353289
keydown.initdom();
354290
menu.add.style();
355291

292+
var btn1 = document.createElement('input');
293+
btn1.type = 'button';
294+
btn1.value = 'isolate';
295+
$(hdr.__host.shadowRoot,'#btns').append(btn1);
296+
btn1.onclick = btn.isolate;
297+
356298

357299
$(root,'#save').onclick = btn.save;
358300

@@ -366,8 +308,7 @@
366308

367309

368310
$(root,'#run').onclick = run;
369-
mode.iframe = $(root,'#iframe');
370-
mode.async = $(root,'#async');
311+
mode.async = $.chkbox(root,'#async-root');
371312

372313
$(root,'#syntax-chk').onclick = btn.syntax;
373314
$(root,'#prettier').onclick = btn.prettier;
@@ -385,7 +326,7 @@
385326

386327
slider.node = $.slider('web-editor','#page-slider','output-console',slider,ui);
387328

388-
329+
/*
389330
await Promise.all([
390331
hdr.initdom(),
391332
mainmenu.initdom(root),
@@ -396,6 +337,7 @@
396337
output.initdom(root),
397338
log.initdom(),
398339
]);
340+
*/
399341

400342

401343

@@ -426,7 +368,6 @@
426368
var url = new URL(window.location);
427369
var params = url.searchParams;
428370

429-
mode.iframe.checked = params.has('iframe');
430371
mode.async.checked = params.has('async');
431372

432373
}//query
@@ -463,6 +404,20 @@
463404
//:
464405

465406

407+
btn.isolate = function(){
408+
409+
var url = window.location.toString();
410+
var i1 = url.indexOf('?');
411+
if(i1!=-1){
412+
url = urls.lice(0,i1);
413+
}else{
414+
url += '?isolate';
415+
}
416+
window.location = url;
417+
418+
}//isolate
419+
420+
466421
btn.save = function(e){
467422

468423
filemod.save();
@@ -471,7 +426,7 @@
471426

472427

473428
btn.syntax = function(){
474-
429+
debug('btn.syntax');
475430
var js = editor.getValue();
476431
var result = syntax(js);
477432
var str = JSON.stringify(result,null,4);
@@ -485,7 +440,7 @@
485440

486441

487442
btn.prettier = function(){
488-
443+
debug('btn.prettier');
489444
var js = editor.getvalue();
490445

491446
var options = {
@@ -522,7 +477,7 @@
522477

523478

524479
btn.terser = async function(){
525-
480+
debug('btn.terser');
526481
var js = editor.getvalue();
527482

528483
var options = {
@@ -562,7 +517,7 @@
562517

563518

564519
btn.obfuscator = function(){
565-
520+
debug('btn.obfuscator');
566521
var js = editor.getvalue();
567522

568523
var err;
@@ -610,6 +565,19 @@
610565

611566
}//title
612567

568+
//:
569+
570+
571+
window.addEventListener('message',e=>{console.log(e);
572+
573+
var json = e.data;
574+
if(json.sandbox){
575+
output.on.message(json);
576+
}
577+
578+
});
579+
580+
613581
//:
614582

615583

0 commit comments

Comments
 (0)