Skip to content

Commit 929eb00

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 02c070d commit 929eb00

File tree

1 file changed

+4
-307
lines changed

1 file changed

+4
-307
lines changed

‎html-components/list/web-editor/web-editor.html‎

Lines changed: 4 additions & 307 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,13 @@
2121
<meta name=viewport content='width=device-width, initial-scale=1'>
2222
<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='>
2323

24+
<link rel=stylesheet href='/css/github-markdown-light.css' crossorigin=anonymous>
25+
<link rel=stylesheet href='../css/component.css' crossorigin=anonymous>
2426

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-
<script src='https://cdn.jsdelivr.net/npm/markdown-it-attrs@4.3.1/markdown-it-attrs.browser.min.js'></script>
28-
<script src='https://cdn.jsdelivr.net/npm/markdown-it-container@4.0.0/dist/markdown-it-container.min.js'></script>
29-
30-
<link rel=stylesheet href='/css/github-markdown-light.css'>
31-
32-
33-
<script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js?hdr'></script>
27+
<script src='https://libs.ext-code.com/js/dom/component/v4.0/component.js?hdr'></script>
3428

3529
<script>
3630

37-
3831
var component = 'web-editor';
3932
var date = '2026-02-10';
4033
var files = {
@@ -48,312 +41,16 @@
4841
},
4942
};
5043

51-
52-
53-
var df=true,did='html'
54-
;
55-
56-
var base = 'https://libs.ext-code.com/html/';
57-
58-
var ace;
59-
var md;
60-
var dirtree;
61-
var snippet;
62-
var editor;
63-
var log;
64-
65-
66-
async function init(){
67-
debug('init');
68-
69-
md = markdownit({
70-
html : true,
71-
breaks : false,
72-
linkify : true,
73-
linkTarget : '_blank',
74-
});
75-
md.use(markdownItAttrs,{leftDelimiter:'{',rightDelimiter:'}',allowedAttributes:['id','class',/^data-.*$/]});
76-
77-
78-
dirtree = mod['dir-tree'];
79-
snippet = mod['snippet-html-console'];
80-
editor = mod['web-editor'];
81-
log = mod['log-mod'];
82-
83-
84-
await Promise.all([
85-
load(),
86-
mod.auto(),
87-
]);
88-
89-
90-
initdom();
91-
92-
93-
}//init
94-
95-
96-
async function load(){
97-
98-
var {error,txt} = await get(base+component+'/readme.md');
99-
mdtxt.readme = txt||error;
100-
101-
var {error,txt} = await get(base+component+'/api.md');
102-
mdtxt.api = txt||error;
103-
104-
}//load
105-
106-
10744
</script>
10845

109-
110-
<link rel=stylesheet href='../css/component.css' crossorigin=anonymous>
111-
112-
<style>
113-
114-
#tabs
115-
{display:flex}
116-
117-
.tab
118-
{border-radius:5px 5px 0 0;cursor:pointer;flex:1;padding:5px 10px;border:1px solid transparent;text-align:center}
119-
120-
.active
121-
{background:lightyellow;border-color:lightblue}
122-
123-
.inactive
124-
{background:lightgray;border-color:gray}
125-
126-
</style>
127-
12846
</head>
12947

13048
<body>
13149

132-
133-
<html-components-hdr v2.0 component=grp1>
134-
<h2 slot=title>
135-
web-editor
136-
</h2>
137-
<time slot=date datetime=2026-02-10>
138-
10 Feb 2026
139-
</time>
140-
</html-components-hdr>
141-
142-
143-
<div id=tabs>
144-
<div id=readme class='tab active'>
145-
readme
146-
</div>
147-
<div id=api class='tab inactive'>
148-
api
149-
</div>
150-
<div id=files class='tab inactive'>
151-
files
152-
</div>
153-
</div>
154-
155-
<div id=view>
156-
157-
<div id=readme class=markdown-body></div>
158-
159-
<div id=api class=markdown-body style='display:none'></div>
160-
161-
<section id=files style='display:none'>
162-
163-
<h3>
164-
files
165-
<span style='font-size:16px;font-weight:normal'>
166-
( click to view )
167-
</span>
168-
</h3>
169-
170-
<dir-tree component></dir-tree>
171-
172-
<div id=files-view-hdr>
173-
</div>
174-
175-
<div id=files-view>
176-
<snippet-html-console component></snippet-html-console>
177-
<web-editor component fullsize></web-editor>
178-
</div>
179-
180-
</section>
181-
182-
</div>
183-
184-
185-
186-
<log-mod component></log-mod>
50+
<page-html v1.0 component=grp style='display:block'></page-html>
18751

18852
</body>
18953

190-
<script>
191-
192-
193-
var mdtxt = {};
194-
mdtxt.readme = '';
195-
mdtxt.api = '';
196-
197-
var cache = {};
198-
199-
200-
var btn = {};
201-
var callback = {};
202-
var show = {};
203-
204-
205-
206-
//:
207-
208-
209-
async function initdom(){
210-
debug('initdom');
211-
212-
$('#tabs').onclick = btn.tabs;
213-
214-
var html = md.render(mdtxt.readme);
215-
$('#view #readme').innerHTML = html;
216-
217-
var html = md.render(mdtxt.api);
218-
$('#view #api').innerHTML = html;
219-
220-
221-
var keys = Object.keys(files.examples);
222-
var initial = keys[0];
223-
224-
files = dirtree.build(files);
225-
dirtree.display(files,{callback});
226-
227-
await show.examples(initial);
228-
229-
230-
}//initdom
231-
232-
233-
//:
234-
235-
236-
btn.tabs = function(e){
237-
238-
var tab = e.target;
239-
240-
var list = $.all('#tabs .tab');
241-
list.forEach(tab2=>{
242-
243-
if(tab.id!==tab2.id){
244-
tab2.classList.remove('active');
245-
tab2.classList.add('inactive');
246-
$(`#view #${tab2.id}`).style.display = 'none';
247-
}
248-
249-
});
250-
251-
tab.classList.remove('inactive');
252-
tab.classList.add('active');
253-
$(`#view #${tab.id}`).style.display = '';
254-
255-
}//tabss
256-
257-
//:
258-
259-
260-
callback.file = function(name,o){
261-
262-
var par = o.parent.name;
263-
debug(par,name);
264-
switch(par){
265-
266-
case 'source' : show.source(name); break;
267-
case 'examples' : show.examples(name); break;
268-
269-
}//switch
270-
271-
}//show
272-
273-
274-
show.source = async function(file){
275-
276-
$('#files-view-hdr').textContent = 'source : '+file;
277-
$('web-editor').style.display = '';
278-
$('snippet-html-console').style.display = 'none';
279-
280-
var url = base+component+'/';
281-
if(file=='latest'){
282-
url += `${component}.html`;
283-
}else{
284-
url += `${file}/${component}-${file}.html`;
285-
}
286-
287-
var {txt} = await get(url);
288-
if(!txt)return;
289-
editor.setvalue(txt);
290-
editor.filename(file);
291-
editor.mode = 'html';
292-
293-
}//source
294-
295-
296-
show.examples = async function(file){
297-
298-
$('#files-view-hdr').textContent = 'examples : '+file;
299-
$('web-editor').style.display = 'none';
300-
$('snippet-html-console').style.display = '';
301-
302-
var url = base+component+'/examples/'+file;
303-
var {txt} = await get(url);
304-
if(!txt)return;
305-
306-
snippet.editor.setvalue(txt);
307-
snippet.editor.filename(file);
308-
snippet.clear();
309-
310-
}//example
311-
312-
313-
async function get(url){
314-
debug('get',url);
315-
if(cache[url]){
316-
debug('cache');
317-
return {txt:cache[url]};
318-
}
319-
320-
var err;
321-
try{
322-
323-
var res = await fetch(url);
324-
325-
}//try
326-
catch(err2){
327-
328-
err = err2;
329-
330-
}//catch
331-
if(err){
332-
var error = err.toString();
333-
log.red(error);
334-
return {error};
335-
}
336-
if(!res.ok){
337-
error = `( ${res.status} ) ${res.statusText}`;
338-
cache[url] = error;
339-
//var error = await res.text();
340-
//log.red(error);
341-
return {error};
342-
}
343-
344-
var txt = await res.text();
345-
cache[url] = txt;
346-
return {txt};
347-
348-
}//get
349-
350-
351-
352-
353-
354-
355-
</script>
356-
35754
</html>
35855

35956

0 commit comments

Comments
 (0)