Skip to content

Commit 29e90cf

Browse files
javascript-2020javascript-2020
committed
save file
1 parent a576d0c commit 29e90cf

File tree

1 file changed

+331
-0
lines changed

1 file changed

+331
-0
lines changed

‎html-components/list/template/template.html‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
2+
3+
4+
<!DOCTYPE html>
5+
6+
7+
<html lang=en>
8+
9+
<head>
10+
<meta charset=utf-8>
11+
12+
<title>
13+
html component : web-editor
14+
</title>
15+
16+
<meta name=description content=''>
17+
18+
<base href='https://ext-code.com/html-components/list/web-console/'>
19+
<link rel=canonical href='https://ext-code.com/html-components/list/web-console/web-console.html'>
20+
21+
<meta name=viewport content='width=device-width, initial-scale=1'>
22+
<link rel=icon href=''>
23+
24+
25+
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
26+
<script src='https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js'></script>
27+
<link rel=stylesheet href='/css/github-markdown-light.css'>
28+
29+
/*
30+
<link rel=stylesheet href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css'>
31+
<link rel=stylesheet href='https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css'>
32+
<script src='https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js'></script>
33+
*/
34+
35+
36+
<script src='https://libs.ext-code.com/js/dom/component/v2.0/component.js?init'></script>
37+
38+
<script>
39+
40+
var df=true,did='html'
41+
;
42+
43+
var ace;
44+
var md;
45+
var dirtree;
46+
var snippet;
47+
var editor;
48+
var log;
49+
50+
51+
async function init(){
52+
console.log('init');
53+
54+
md = markdownit();
55+
56+
await load();
57+
58+
dirtree = mod['dir-tree'];
59+
snippet = mod['snippet-html-console'];
60+
editor = mod['web-editor'];
61+
log = mod['log-mod'];
62+
63+
64+
await mod.auto();
65+
66+
67+
initdom();
68+
69+
70+
}//init
71+
72+
73+
async function load(){
74+
75+
var {error,txt} = await get('https://libs.ext-code.com/html/web-console/readme.md');
76+
77+
if(error){
78+
md_txt = error;
79+
}else{
80+
md_txt = txt;
81+
}
82+
83+
}//load
84+
85+
86+
</script>
87+
88+
<style>
89+
90+
91+
html
92+
{height:100%;font-family:arial}
93+
94+
95+
body
96+
{/*height:calc(100% - 40px);*/display:flex;flex-direction:column;gap:20px;align-items:center;margin:20px;padding-bottom:200px}
97+
98+
99+
body>*
100+
{max-width:1400px;width:100%;padding:0 20px;}
101+
102+
[component],config
103+
{display:none}
104+
105+
input
106+
{font-size:16px;padding:5px 10px}
107+
input[type=button]
108+
{cursor:pointer}
109+
input[type=checkbox]
110+
{width:15px;height:15px;margin:0}
111+
112+
113+
#demo-tree
114+
{margin:20px 0;height:auto !important;overflow:visible;box-sizing:border-box;outline:none;border-radius:5px;
115+
border:none !important;
116+
/*border:1px solid lightgray !important;*/
117+
}
118+
119+
#view-hdr
120+
{padding:10px;font-weight:bold;background:rgba(173,216,230,0.5);border:1px solid lightgray;border-radius:5px}
121+
122+
#view
123+
{border:1px solid lightgray;border-radius:5px;padding:10px}
124+
web-editor
125+
{}
126+
127+
128+
.wunderbaum .wb-expander
129+
{opacity:1 !important;transition:none !important}
130+
.wb-row
131+
{cursor:pointer}
132+
133+
134+
.icon
135+
{border:1px solid gray;border-radius:3px;box-sizing:border-box;width:30px;height:30px;cursor:pointer}
136+
.spc
137+
{flex:1;max-width:200px}
138+
139+
140+
</style>
141+
142+
</head>
143+
144+
<body>
145+
146+
147+
<html-components-hdr component=grp1>
148+
<h2 class=title style='top:10px'>web-console</h2>
149+
<time slot=date datetime=2026-01-04>04 Jan 2026</time>
150+
</html-components-hdr>
151+
152+
153+
<div id=readme class=markdown-body></div>
154+
155+
<hr>
156+
157+
<section>
158+
159+
<h3>
160+
files
161+
<span style='font-weight:normal;margin-left:20px'>
162+
( click to view )
163+
</span>
164+
</h3>
165+
166+
<dir-tree component></dir-tree>
167+
168+
</section>
169+
170+
<div id=view-hdr>
171+
</div>
172+
173+
<div id=view style='display:none'>
174+
<snippet-html-console component></snippet-html-console>
175+
<web-editor component fullsize></web-editor>
176+
</div>
177+
178+
179+
<log-mod component></log-mod>
180+
181+
</body>
182+
183+
<script>
184+
185+
186+
var md_txt;
187+
var cache = {};
188+
189+
190+
var callback = {};
191+
var show = {};
192+
193+
194+
//:
195+
196+
197+
async function initdom(){
198+
debug('initdom');
199+
200+
var html = md.render(md_txt);
201+
$('#readme').innerHTML = html;
202+
203+
204+
var node = $('#demo-tree');
205+
206+
/*
207+
var tree = new mar10.Wunderbaum({
208+
element:node,
209+
source: files,
210+
init:e=>{e.tree.setFocus()},
211+
activate:show
212+
});
213+
*/
214+
files = dirtree.build(files);
215+
dirtree.display(files,{callback});
216+
217+
218+
await show.examples('web-console-v2.0-test-2.html');
219+
$('#view').style.display = '';
220+
221+
}//initdom
222+
223+
224+
//:
225+
226+
227+
callback.file = function(name,o){
228+
229+
var par = o.parent.name;
230+
debug(par,name);
231+
switch(par){
232+
233+
case 'source' : show.source(name); break;
234+
case 'examples' : show.examples(name); break;
235+
236+
}//switch
237+
238+
}//show
239+
240+
241+
show.source = async function(file){
242+
243+
$('#view-hdr').textContent = 'source : '+file;
244+
$('web-editor').style.display = '';
245+
$('snippet-html-console').style.display = 'none';
246+
247+
var url = 'https://libs.ext-code.com/html/web-console/';
248+
if(file=='latest'){
249+
url += 'web-console.html';
250+
}else{
251+
url += `${file}/web-console-${file}.html`;
252+
}
253+
254+
var {txt} = await get(url);
255+
if(!txt)return;
256+
editor.setvalue(txt);
257+
258+
}//source
259+
260+
261+
show.examples = async function(file){
262+
263+
$('#view-hdr').textContent = 'examples : '+file;
264+
$('web-editor').style.display = 'none';
265+
$('snippet-html-console').style.display = '';
266+
267+
var url = 'https://libs.ext-code.com/html/web-console/test/'+file;
268+
var {txt} = await get(url);
269+
if(!txt)return;
270+
console.log(1);
271+
snippet.editor.setvalue(txt);
272+
273+
}//example
274+
275+
276+
async function get(url){
277+
debug('get',url);
278+
if(cache[url]){
279+
debug('cache');
280+
return {txt:cache[url]};
281+
}
282+
283+
var err;
284+
try{
285+
286+
var res = await fetch(url);
287+
288+
}//try
289+
catch(err2){
290+
291+
err = err2;
292+
293+
}//catch
294+
if(err){
295+
var error = err.toString();
296+
log.red(error);
297+
return {error};
298+
}
299+
if(!res.ok){
300+
var error = await res.text();
301+
log.red(error);
302+
return {error};
303+
}
304+
305+
var txt = await res.text();
306+
cache[url] = txt;
307+
return {txt};
308+
309+
}//get
310+
311+
312+
313+
314+
var files = {
315+
'source' : {
316+
'latest' : null,
317+
'v2.0' : null,
318+
},
319+
'examples' : {
320+
'web-console-v2.0-test-1.html':null,
321+
'web-console-v2.0-test-2.html':null,
322+
},
323+
};
324+
325+
326+
327+
</script>
328+
329+
</html>
330+
331+

0 commit comments

Comments
 (0)