Skip to content

Commit b40091d

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 26aa586 commit b40091d

File tree

1 file changed

+15
-291
lines changed

1 file changed

+15
-291
lines changed

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

Lines changed: 15 additions & 291 deletions
Original file line numberDiff line numberDiff line change
@@ -10,318 +10,42 @@
1010
<meta charset=utf-8>
1111

1212
<title>
13-
html component :
13+
dir-tree
1414
</title>
1515

1616
<meta name=description content=''>
1717

18-
<base href='https://ext-code.com/html-components/list/dir-tree/'>
19-
<link rel=canonical href='https://ext-code.com/html-components/list/dir-tree/dir-tree.html'>
20-
18+
<base href='https://ext-code.com/html-components/list/dir-tree/dir-tree.html'>
19+
<link rel=canonical href='https://ext-code.com/html-components/list/web-editor/web-editor.html'>
2120
<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'>
2821

2922

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

3225
<script>
3326

34-
var df=true,did='html'
35-
;
36-
37-
var base = 'https://libs.ext-code.com/html/';
3827
var component = 'dir-tree';
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-
28+
var date = '2026-02-17';
29+
var files = {
30+
'source' : {
31+
'latest' : null,
32+
},
33+
'examples' : {
34+
'dir-tree-min.html' : null,
35+
'dir-tree-simple.html' : null,
36+
},
37+
};
38+
8339
</script>
8440

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-
13941
</head>
14042

14143
<body>
14244

143-
144-
<html-components-hdr v2.0 component=grp1>
145-
<h2 class=title style='top:20px'>
146-
dir-tree
147-
</h2>
148-
<time slot=date datetime=2026-01-08>
149-
08 Jan 2026
150-
</time>
151-
</html-components-hdr>
152-
153-
154-
<div id=readme class=markdown-body></div>
155-
156-
<hr>
157-
158-
<section>
159-
160-
<h3>
161-
files
162-
</h3>
163-
164-
<dir-tree component></dir-tree>
165-
166-
</section>
167-
168-
<div id=view-hdr>
169-
</div>
170-
171-
<div id=view style='display:none'>
172-
<snippet-html-console component></snippet-html-console>
173-
<web-editor component fullsize></web-editor>
174-
</div>
175-
176-
177-
<log-mod component></log-mod>
45+
<page-html v1.0 component=grp style='display:block'></page-html>
17846

17947
</body>
18048

181-
<script>
182-
183-
184-
var md_txt;
185-
var cache = {};
186-
187-
188-
var callback = {};
189-
var show = {};
190-
191-
192-
193-
var files = {
194-
'source' : {
195-
'latest' : null,
196-
},
197-
'examples' : {
198-
'dir-tree-min.html' : null,
199-
'dir-tree-simple.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('dir-tree-min.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 += `${component}.html`;
254-
}else{
255-
url += `${file}/${component}-${file}.html`;
256-
}
257-
258-
var {txt} = await get(url);
259-
if(!txt)return;
260-
editor.setvalue(txt);
261-
editor.filename(file);
262-
263-
}//source
264-
265-
266-
show.examples = async function(file){
267-
268-
$('#view-hdr').textContent = 'examples : '+file;
269-
$('web-editor').style.display = 'none';
270-
$('snippet-html-console').style.display = '';
271-
272-
var url = base+component+'/examples/'+file;
273-
var {txt} = await get(url);
274-
if(!txt)return;
275-
276-
snippet.editor.setvalue(txt);
277-
snippet.editor.filename(file);
278-
snippet.clear();
279-
280-
}//example
281-
282-
283-
async function get(url){
284-
debug('get',url);
285-
if(cache[url]){
286-
debug('cache');
287-
return {txt:cache[url]};
288-
}
289-
290-
var err;
291-
try{
292-
293-
var res = await fetch(url);
294-
295-
}//try
296-
catch(err2){
297-
298-
err = err2;
299-
300-
}//catch
301-
if(err){
302-
var error = err.toString();
303-
log.red(error);
304-
return {error};
305-
}
306-
if(!res.ok){
307-
var error = await res.text();
308-
log.red(error);
309-
return {error};
310-
}
311-
312-
var txt = await res.text();
313-
cache[url] = txt;
314-
return {txt};
315-
316-
}//get
317-
318-
319-
320-
321-
322-
323-
</script>
324-
32549
</html>
32650

32751

0 commit comments

Comments
 (0)