Skip to content

Commit 4591060

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 13de7d0 commit 4591060

File tree

1 file changed

+365
-0
lines changed

1 file changed

+365
-0
lines changed

‎code/html/page-html/v1.0/page-html-v1.0.html‎

Lines changed: 365 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,365 @@
1+
2+
3+
<script src='https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js'></script>
4+
<script src='https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js'></script>
5+
<script src='https://cdn.jsdelivr.net/npm/markdown-it-attrs@4.3.1/markdown-it-attrs.browser.min.js'></script>
6+
<script src='https://cdn.jsdelivr.net/npm/markdown-it-container@4.0.0/dist/markdown-it-container.min.js'></script>
7+
8+
9+
<script setup>
10+
11+
var base = document.createElement('base');
12+
base.setAttribute('href','https://ext-code.com/html-components/list/web-editor/web-editor.html');
13+
document.head.append(base);
14+
15+
var link = document.createElement('link');
16+
link.setAttribute('rel','icon');
17+
link.setAttribute('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=');
18+
document.head.append(link);
19+
20+
var link = document.createElement('link');
21+
link.setAttribute('rel','stylesheet');
22+
link.setAttribute('href','/css/github-markdown-light.css');
23+
link.setAttribute('crossorigin','anonymous');
24+
document.head.append(link);
25+
26+
var link = document.createElement('link');
27+
link.setAttribute('rel','stylesheet');
28+
link.setAttribute('href','../css/component.css');
29+
link.setAttribute('crossorigin','anonymous');
30+
document.head.append(link);
31+
32+
33+
34+
/*
35+
36+
<base href='https://ext-code.com/html-components/list/web-editor/web-editor.html'>
37+
<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='>
38+
39+
<link rel=stylesheet href='/css/github-markdown-light.css' crossorigin=anonymous>
40+
<link rel=stylesheet href='../css/component.css' crossorigin=anonymous>
41+
42+
*/
43+
44+
</script>
45+
46+
47+
<script>
48+
49+
var df=true,did='html';
50+
51+
var base = 'https://libs.ext-code.com/html/';
52+
53+
var ace;
54+
var md;
55+
var dirtree;
56+
var snippet;
57+
var editor;
58+
var log;
59+
60+
61+
async function ready(){
62+
debug('init');
63+
64+
md = markdownit({
65+
html : true,
66+
breaks : false,
67+
linkify : true,
68+
linkTarget : '_blank',
69+
});
70+
md.use(markdownItAttrs,{leftDelimiter:'{',rightDelimiter:'}',allowedAttributes:['id','class',/^data-.*$/]});
71+
72+
var mod2 = mod.child.find(o=>o.name=='page-html');
73+
74+
dirtree = mod2['dir-tree'];
75+
snippet = mod2['snippet-html-console'];
76+
editor = mod2['web-editor'];
77+
log = mod2['log-mod'];
78+
79+
80+
await Promise.all([
81+
load(),
82+
mod2.auto(),
83+
]);
84+
85+
86+
initdom();
87+
88+
89+
}//init
90+
91+
92+
async function load(){
93+
94+
var list = [];
95+
list.push(get(base+component+'/readme.md'));
96+
list.push(get(base+component+'/api.md'));
97+
var result = await Promise.all(list);
98+
99+
var {error,txt} = result[0];
100+
mdtxt.readme = txt||error;
101+
102+
var {error,txt} = result[1];
103+
mdtxt.api = txt||error;
104+
105+
}//load
106+
107+
108+
</script>
109+
110+
111+
112+
<style>
113+
114+
#tabs
115+
{display:flex;margin-bottom:20px}
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+
128+
129+
130+
<html-components-hdr v2.0 component=grp1>
131+
<h2 slot=title>
132+
web-editor-x
133+
</h2>
134+
<time slot=date datetime=2026-02-10>
135+
10 Feb 2026-x
136+
</time>
137+
</html-components-hdr>
138+
139+
<script>
140+
{
141+
let $ = css=>document.querySelector(css);
142+
$('[slot=title]').textContent = component;
143+
$('time').setAttribute('datetime',date);
144+
var str = new Date(date).toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'});
145+
$('time').textContent = str;
146+
}
147+
</script>
148+
149+
<div id=tabs>
150+
<div id=readme class='tab active'>
151+
readme
152+
</div>
153+
<div id=api class='tab inactive'>
154+
api
155+
</div>
156+
<div id=files class='tab inactive'>
157+
files / examples
158+
</div>
159+
</div>
160+
161+
<div id=view>
162+
163+
<div id=readme class=markdown-body></div>
164+
165+
<div id=api class=markdown-body style='display:none'></div>
166+
167+
<section id=files style='display:none'>
168+
169+
<h3>
170+
files
171+
<span style='font-size:16px;font-weight:normal'>
172+
( click to view )
173+
</span>
174+
</h3>
175+
176+
<dir-tree component></dir-tree>
177+
178+
<div id=files-view-hdr>
179+
</div>
180+
181+
<div id=files-view>
182+
<snippet-html-console component></snippet-html-console>
183+
<web-editor component fullsize></web-editor>
184+
</div>
185+
186+
</section>
187+
188+
</div>
189+
190+
191+
<log-mod component></log-mod>
192+
193+
194+
195+
<script>
196+
197+
198+
var mdtxt = {};
199+
mdtxt.readme = '';
200+
mdtxt.api = '';
201+
202+
var cache = {};
203+
204+
205+
var btn = {};
206+
var callback = {};
207+
var show = {};
208+
209+
210+
211+
//:
212+
213+
214+
async function initdom(){
215+
debug('initdom');
216+
217+
$('#tabs').onclick = btn.tabs;
218+
219+
var html = md.render(mdtxt.readme);
220+
$('#view #readme').innerHTML = html;
221+
222+
var html = md.render(mdtxt.api);
223+
$('#view #api').innerHTML = html;
224+
225+
226+
var files2 = dirtree.build(files);
227+
dirtree.display(files2,{callback});
228+
229+
230+
var keys = Object.keys(files.examples);
231+
var initial = keys[0];
232+
await show.examples(initial);
233+
234+
235+
}//initdom
236+
237+
238+
//:
239+
240+
241+
btn.tabs = function(e){
242+
243+
var tab = e.target;
244+
245+
var list = $.all('#tabs .tab');
246+
list.forEach(tab2=>{
247+
248+
if(tab.id!==tab2.id){
249+
tab2.classList.remove('active');
250+
tab2.classList.add('inactive');
251+
$(`#view #${tab2.id}`).style.display = 'none';
252+
}
253+
254+
});
255+
256+
tab.classList.remove('inactive');
257+
tab.classList.add('active');
258+
$(`#view #${tab.id}`).style.display = '';
259+
260+
}//tabss
261+
262+
//:
263+
264+
265+
callback.file = function(name,o){
266+
267+
var par = o.parent.name;
268+
debug(par,name);
269+
switch(par){
270+
271+
case 'source' : show.source(name); break;
272+
case 'examples' : show.examples(name); break;
273+
274+
}//switch
275+
276+
}//show
277+
278+
279+
show.source = async function(file){
280+
281+
$('#files-view-hdr').textContent = 'source : '+file;
282+
$('web-editor').style.display = '';
283+
$('snippet-html-console').style.display = 'none';
284+
285+
var url = base+component+'/';
286+
if(file=='latest'){
287+
url += `${component}.html`;
288+
}else{
289+
url += `${file}/${component}-${file}.html`;
290+
}
291+
292+
var {txt} = await get(url);
293+
if(!txt)return;
294+
editor.setvalue(txt);
295+
editor.filename(file);
296+
editor.mode = 'html';
297+
298+
}//source
299+
300+
301+
show.examples = async function(file){
302+
303+
$('#files-view-hdr').textContent = 'examples : '+file;
304+
$('web-editor').style.display = 'none';
305+
$('snippet-html-console').style.display = '';
306+
307+
var url = base+component+'/examples/'+file;
308+
var {txt} = await get(url);
309+
if(!txt)return;
310+
311+
snippet.editor.setvalue(txt);
312+
snippet.editor.filename(file);
313+
snippet.clear();
314+
315+
}//example
316+
317+
318+
async function get(url){
319+
debug('get',url);
320+
if(cache[url]){
321+
debug('cache');
322+
return {txt:cache[url]};
323+
}
324+
325+
var err;
326+
try{
327+
328+
var res = await fetch(url);
329+
330+
}//try
331+
catch(err2){
332+
333+
err = err2;
334+
335+
}//catch
336+
if(err){
337+
var error = err.toString();
338+
log.red(error);
339+
return {error};
340+
}
341+
if(!res.ok){
342+
error = `( ${res.status} ) ${res.statusText}`;
343+
cache[url] = error;
344+
//var error = await res.text();
345+
//log.red(error);
346+
return {error};
347+
}
348+
349+
var txt = await res.text();
350+
cache[url] = txt;
351+
return {txt};
352+
353+
}//get
354+
355+
356+
357+
358+
0;
359+
360+
</script>
361+
362+
363+
364+
365+

0 commit comments

Comments
 (0)