Skip to content

Commit aec0d18

Browse files
javascript-2020javascript-2020
committed
update
1 parent d58d9e0 commit aec0d18

File tree

3 files changed

+878
-0
lines changed

3 files changed

+878
-0
lines changed

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

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
1+
2+
3+
<output-console>
4+
5+
<template shadowrootmode=open>
6+
7+
<style>
8+
9+
:host
10+
{font-family:arial}
11+
12+
#root
13+
{height:100%;display:flex;flex-direction:column}
14+
#hdr
15+
{display:flex;align-items:center;margin:0;margin-bottom:5px}
16+
17+
#spc
18+
{flex:1}
19+
20+
.ext-button
21+
{border:1px solid lightgray;padding:2px 5px;cursor:pointer;display:flex;align-items:center;margin-right:10px}
22+
.ext-button [type=checkbox]
23+
{margin:0;margin-left:5px;cursor:pointer}
24+
25+
button
26+
{font-size:16px;margin-right:10px}
27+
28+
#output
29+
{flex:1;
30+
overflow:auto;border:2px solid lightgray;box-sizing:border-box;
31+
padding:10px;margin:0;
32+
word-break:break-all;
33+
font-size:16px;line-height:1.5;
34+
}
35+
36+
</style>
37+
38+
<div id=root>
39+
<div id=hdr>
40+
<span id=spc></span>
41+
<div id=console-persist class=ext-button>console.persist<input type=checkbox></div>
42+
<div id=console-log class=ext-button>console.log<input type=checkbox checked></div>
43+
<div id=word-wrap class=ext-button>wrap<input type=checkbox checked></div>
44+
<button id=clear>clear</button>
45+
<button id=kill>kill</button>
46+
</div>
47+
48+
<pre id=output>
49+
</pre>
50+
</div>
51+
52+
</template>
53+
54+
<script>
55+
56+
(function output_console({mod,dom,node}){
57+
//console.log('output');
58+
var obj = {
59+
version : 'v2.0',
60+
};
61+
62+
63+
var ext,$
64+
;
65+
66+
obj.initmod = function(params){
67+
68+
ext = params.ext;
69+
$ = params.$;
70+
71+
}//initmod
72+
73+
74+
//vars:-
75+
76+
var inspect;
77+
78+
var con = {};
79+
con.log = console.log;
80+
con.clear = console.clear;
81+
con.error = console.error;
82+
83+
84+
var root;
85+
var shadow;
86+
87+
var output;
88+
var iframe;
89+
90+
91+
92+
var chk = {};
93+
var btn = {};
94+
95+
96+
//:
97+
98+
99+
obj.init = async function(){
100+
101+
libs();
102+
103+
}//init
104+
105+
106+
async function libs(){
107+
108+
[inspect] = await ext.load.libs('js/string/inspect.js');
109+
110+
}//libs
111+
112+
113+
//:
114+
115+
116+
obj.initdom = function(rootnode){
117+
118+
shadow = node.shadowRoot;
119+
120+
chk.persist = $.chkbox(shadow,'#console-persist',false);
121+
chk.log = $.chkbox(shadow,'#console-log',false);
122+
chk.wrap = $.chkbox(shadow,'#word-wrap',wrap);
123+
124+
$(shadow,'#clear').onclick = btn.clear;
125+
$(shadow,'#kill').onclick = btn.kill;
126+
127+
128+
output = $(shadow,'#output');
129+
130+
131+
wrap(chk.wrap.checked);
132+
133+
134+
}//initdom
135+
136+
137+
btn.kill = function(){
138+
139+
kill();
140+
141+
}//kill
142+
143+
144+
btn.clear = function(){
145+
146+
clear();
147+
148+
}//clear
149+
150+
151+
function wrap(chk){
152+
//console.log('wrap',v);
153+
if(chk.checked){
154+
output.style.whiteSpace = 'pre-wrap';
155+
}else{
156+
output.style.whiteSpace = '';
157+
}
158+
159+
}//wrap
160+
161+
162+
obj.run = async function(js,params){
163+
console.log('run');
164+
var sandbox = (()=>{
165+
166+
console.log = log;
167+
console.clear = clear;
168+
console.error = error;
169+
170+
171+
async function run(js){
172+
173+
if(!chk.persist){
174+
clear();
175+
}
176+
177+
if(params.async){
178+
js = '(async()=>{\n'+js+'\n})()';
179+
}
180+
181+
var result = await eval(js);
182+
return result;
183+
184+
}//run
185+
186+
187+
run.kill = function(){
188+
}//kill
189+
190+
191+
return run;
192+
193+
})();
194+
195+
var result = await sandbox(js);
196+
197+
if(result){
198+
console.log(result);
199+
}
200+
201+
console.log = con.log;
202+
console.clear = con.clear;
203+
console.error = con.error;
204+
205+
206+
}//run
207+
208+
209+
obj.run.iframe = async function(js,params){
210+
console.log('run.iframe');
211+
var resolve,promise=new Promise(res=>resolve=res);
212+
213+
if(iframe){
214+
iframe.remove();
215+
}
216+
217+
iframe = document.createElement('iframe');
218+
iframe.srcdoc = '';
219+
iframe.onload = onload;
220+
root.append(iframe);
221+
222+
return promise;
223+
224+
225+
async function onload(){
226+
227+
var win = iframe.contentWindow;
228+
win.focus();
229+
win.console.log = log;
230+
win.console.clear = clear;
231+
win.console.error = error;
232+
233+
if(!chk.persist){
234+
clear();
235+
}
236+
237+
if(params.async){
238+
js = '(async()=>{\n'+js+'\n})()';
239+
}
240+
var result = await win.eval(js);
241+
resolve(result);
242+
243+
//iframe.remove();
244+
245+
}//onload
246+
247+
}//iframe
248+
249+
250+
obj.kill = function(){return kill()}
251+
252+
function kill(){
253+
254+
if(!iframe)return;
255+
iframe.remove();
256+
257+
}//kill
258+
259+
260+
261+
//:
262+
263+
264+
265+
obj.clear = function(){return clear()}
266+
267+
function clear(){
268+
269+
if(chk.log.checked){
270+
con.clear.call(window.console);
271+
}
272+
273+
output.replaceChildren();
274+
275+
}//clear
276+
277+
278+
obj.log = function(){return log.apply(log,arguments)};
279+
280+
function log(){
281+
282+
if(chk.log.checked){
283+
con.log.apply(window.console,arguments);
284+
}
285+
286+
var str = '';
287+
var args = [...arguments];
288+
args = args.map(v=>{
289+
290+
var type = datatype(v);
291+
switch(type){
292+
293+
case 'function' :
294+
case 'asyncfunction' : str = v.toString(); break;
295+
case 'string' : str = v; break;
296+
default : str = inspect(v); break;
297+
298+
}//switch
299+
return str;
300+
301+
});
302+
303+
var txt = args.join(' ');
304+
var div = document.createElement('div');
305+
div.textContent = txt;
306+
output.append(div);
307+
308+
output.scrollTop = 999999999;
309+
310+
return div;
311+
312+
}//log
313+
314+
315+
obj.error = function(){return error.apply(null,arguments)}
316+
317+
function error(){
318+
319+
if(chk.log.checked){
320+
con.error.apply(window.console,arguments);
321+
}
322+
var node = log.apply(null,arguments);
323+
node.style.color = 'red';
324+
return node;
325+
326+
}//error
327+
328+
329+
330+
331+
332+
333+
return obj;
334+
335+
})//output_console
336+
337+
</script>
338+
339+
</output-console>
340+

0 commit comments

Comments
 (0)