Skip to content

Commit 555bc0a

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 0dd4c9a commit 555bc0a

File tree

1 file changed

+334
-0
lines changed

1 file changed

+334
-0
lines changed

‎html-components/list/html/page/v1.0/page-v1.0.html‎

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

0 commit comments

Comments
 (0)