Skip to content

Commit 0837602

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 55ebef2 commit 0837602

1 file changed

Lines changed: 290 additions & 0 deletions

File tree

‎html/help-file/help-file.html‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
2+
3+
<help-file>
4+
5+
<template shadowrootmode=open>
6+
7+
<link rel=stylesheet href='https://ext-code.com/css/github-markdown-light.css'>
8+
9+
<style id=style-icon>
10+
11+
#icon-root
12+
{border:1px solid lightgray;border-radius:5px;display:inline-flex;flex-direction:column;align-items:center;padding:1px 7px;cursor:pointer;background:buttonface}
13+
#icon
14+
{width:20px;height:20px;
15+
content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAA1VBMVEVHcEzd7fBllKlslKVjk6lilazg7/Bqlqlolaljlq7a6+/o8fLb6+9ik6pjlavk8PHi7/Di7/Hj7/Hm8PJik6nd6+3k7/Fjk6jl8PFmlKhllKni7/Hi7/Di7/Bik6ni7/Bhk6pik6l5rciuz97i7/Bjk6ji8PHj8PFjlKni7/Df7vDj8PHh7/HY6++92+jW6e6x1eWu0+W42efS6O3i7/HB3um11+bH4evL4+zR5u2q0eRrn7lnm7R1q8eJvtp9uNhupcB5stHO5eyey+F3qMB/sMibxNhx7PXbAAAAKnRSTlMA/koGlfnnFB/pWwSI3rcsrqJ3CdQnDn8YKjXHa46F2MuurPhDXlIdcr7oUGvUAAABi0lEQVQoz82SWXfaQAyFGQMGJ+w0bfatWyppNnvs8YzBgCH5/z+pJobTnKZ9z33TfEeae3XUan0s/fwxuP78Pzi+uWMGTv4N59chIZM0OX37enqo5gOGLFUpheM/42bTyWQ6OBnPWzPAyscSgWZHen5FZNAQhL8GIea+IhfHcHU0dxYSOJdwQExTEFIqbblh3xraH31FKWKllZCJBqq8Jagc3Rzw8JkbRAJpE9AJUw6szpy5O294pxCYZyoTOadUEJMqq72xY/Sg+0LSJc4K5RIPTNn6M52baRO2d/8sUVpbSQ6kHUgQPuVE4VnTflvE6MTenYA0Rq5ijojgDtMvoxcwwDiTFUgPeUoIVm3Lx/Yrbo+WztisjpZK0BUZyrflallEF0370yKrgwFzIuP1dBLlZr3ofur0GnwRlfXK9iKUnmWbomZB77j19sMuzoX2XsdW+u0yesP2+r5YlavVZrNcF7vdIgr+OoL+cF2TRXc4uu3cPwTvjqTTrdGXoF9H6bXf39Dl0yv6UPoNCgFBRlIKMJUAAAAASUVORK5CYII=);
16+
}
17+
#txt
18+
{color:blue}
19+
</style>
20+
21+
<style>
22+
23+
:host
24+
{display:flex;flex-direction:column}
25+
26+
#view
27+
{flex:1;padding:10px}
28+
29+
.icon
30+
{width:32px;height:32px;border:1px solid gray !important;border-radius:3px;box-sizing:border-box}
31+
32+
33+
</style>
34+
35+
<div id=icon-root style='dislay:none'>
36+
<img id=icon src=>
37+
<div id=txt>
38+
help
39+
</div>
40+
</div>
41+
42+
<div id=view class=markdown-body>
43+
</div>
44+
45+
</template>
46+
47+
<script>
48+
49+
(function({mod,host}){
50+
51+
var obj = {
52+
version : 'v1.0.0',
53+
};
54+
55+
var df=true,did='help-file';
56+
57+
var $,debug,vm;
58+
59+
obj.initmod = function(...params){
60+
61+
params.forEach(params=>{
62+
63+
$ = mod.rd(params,'$',$);
64+
debug = mod.rd(params,'debug',debug);
65+
vm = mod.rd(params,'vm',vm);
66+
67+
base = mod.rd(params,'base',base);
68+
69+
});
70+
71+
}//initmod
72+
73+
74+
//:
75+
76+
77+
var base = document.baseURI;
78+
var target = host;
79+
80+
var md;
81+
82+
var view;
83+
84+
var rd = {};
85+
rd.attr = {};
86+
var btn = {};
87+
88+
89+
//:
90+
91+
92+
obj.init = async function(){
93+
debug=eval(debug.mod);
94+
debug('init');
95+
await libs();
96+
97+
await rd.attr.src();
98+
99+
100+
}//init
101+
102+
103+
rd.attr.src = async function(){
104+
105+
if(!target.hasAttribute('src'))return;
106+
var src = target.getAttribute('src');
107+
var url = resolve(src);
108+
debug('src',url);
109+
var {txt,error} = await get(url);
110+
if(error){
111+
txt = error;
112+
}
113+
md = txt;
114+
115+
}//src
116+
117+
118+
function libs(){
119+
120+
var resolve,promise=new Promise(res=>resolve=res);
121+
var ct = 0;
122+
var total = 1;
123+
124+
if(typeof markdownit=='undefined'){
125+
total++;
126+
var script = document.createElement('script');
127+
script.src = 'https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js';
128+
script.onload = onload;
129+
document.head.append(script);
130+
}
131+
132+
if(typeof markdownItAttrs=='undefined'){
133+
total++;
134+
var script = document.createElement('script');
135+
script.src = 'https://cdn.jsdelivr.net/npm/markdown-it-attrs@4.3.1/markdown-it-attrs.browser.min.js';
136+
script.onload = onload;
137+
document.head.append(script);
138+
}
139+
140+
onload();
141+
142+
return promise;
143+
144+
145+
function onload(){
146+
147+
ct++;
148+
if(ct!=total)return;
149+
resolve();
150+
151+
}//onload
152+
153+
}//libs
154+
155+
156+
//:
157+
158+
159+
obj.initdom = async function(){
160+
debug('initdom');
161+
var shadow = host.shadowRoot;
162+
163+
var icon = $(shadow,'#icon-root');
164+
icon.style.display = '';
165+
icon.onclick = btn.icon;
166+
var style = $(shadow,'#style-icon');
167+
var div = document.createElement('div');
168+
div.setAttribute('slot','help');
169+
var shadow2 = div.attachShadow({mode:'open'});
170+
shadow2.append(style,icon);
171+
host.before(div);
172+
173+
viewport = await vm.new({initmod:{config:{icons:{close:false}}}});
174+
viewport.pos({x:20,y:20,w:500,h:500});
175+
viewport.body.append(host);
176+
viewport.hide();
177+
178+
179+
view = $(shadow,'#view');
180+
181+
display(md);
182+
183+
}//initdom
184+
185+
186+
//:
187+
188+
189+
btn.icon = function(){
190+
191+
if(viewport.status=='hidden'){
192+
viewport.show();
193+
}else{
194+
viewport.hide();
195+
}
196+
197+
}//icon
198+
199+
//:
200+
201+
202+
obj.show = function(){
203+
204+
viewport.show();
205+
206+
}//show
207+
208+
209+
obj.hide = function(){
210+
211+
viewport.hide();
212+
213+
}//hide
214+
215+
216+
function display(txt){
217+
debug('display');
218+
txt ||= '';
219+
220+
var opts = {
221+
linkTarget : '_blank',
222+
};
223+
opts.html = true;
224+
opts.breaks = false;
225+
opts.linkify = true;
226+
debug.json(opts);
227+
var md = markdownit(opts);
228+
md.use(markdownItAttrs,{leftDelimiter:'{',rightDelimiter:'}',allowedAttributes:['id','class',/^data-.*$/]});
229+
230+
var html = md.render(txt);
231+
view.innerHTML = html;
232+
233+
}//display
234+
235+
236+
//:
237+
238+
239+
function resolve(url){
240+
//debug('resolve',url);
241+
url = new URL(url,base);
242+
url = url.toString();
243+
//debug(url);
244+
return url;
245+
246+
}//resolve
247+
248+
249+
async function get(url){
250+
251+
var err;
252+
try{
253+
254+
var res = await fetch(url);
255+
256+
}//try
257+
catch(err2){
258+
259+
err = err2;
260+
261+
}//catch
262+
if(err){
263+
var error = err.message;
264+
return {error};
265+
}
266+
if(!res.ok){
267+
var error = await res.text();
268+
return {error};
269+
}
270+
271+
var txt = await res.text();
272+
return {txt};
273+
274+
}//get
275+
276+
277+
//:
278+
279+
280+
return obj;
281+
282+
//help-file
283+
})
284+
285+
</script>
286+
287+
</help-file>
288+
289+
290+

0 commit comments

Comments
 (0)