Skip to content

Commit 2ec9d2c

Browse files
javascript-2020javascript-2020
committed
save file
1 parent c008cb0 commit 2ec9d2c

File tree

1 file changed

+324
-0
lines changed

1 file changed

+324
-0
lines changed

‎html-components/list/dir-tree/dir-tree.html‎

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

0 commit comments

Comments
 (0)