|
10 | 10 | <meta charset=utf-8> |
11 | 11 |
|
12 | 12 | <title> |
13 | | - html component : file-mod |
| 13 | + file-mod |
14 | 14 | </title> |
15 | 15 |
|
16 | 16 | <meta name=description content=''> |
17 | 17 |
|
18 | 18 | <base href='https://ext-code.com/html-components/list/file-mod/file-mod.html'> |
19 | 19 | <link rel=canonical href='https://ext-code.com/html-components/list/file-mod/file-mod.html'> |
20 | | - |
21 | 20 | <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'> |
28 | 21 |
|
29 | 22 |
|
30 | 23 | <script src='https://libs.ext-code.com/js/dom/component/v3.0/component.js?hdr'></script> |
31 | 24 |
|
32 | 25 | <script> |
33 | 26 |
|
34 | | - |
35 | | - |
36 | 27 | var component = 'file-mod'; |
37 | | - var date = '2026-02-09'; |
| 28 | + var date = '2026-02-17'; |
38 | 29 | var files = { |
39 | 30 | 'source' : { |
40 | 31 | 'v2.0' : null, |
|
45 | 36 | }, |
46 | 37 | }; |
47 | 38 |
|
48 | | - |
49 | | - |
50 | | - var df=true,did='html' |
51 | | - ; |
52 | | - |
53 | | - var base = 'https://libs.ext-code.com/html/'; |
54 | | - |
55 | | - var ace; |
56 | | - var md; |
57 | | - var dirtree; |
58 | | - var snippet; |
59 | | - var editor; |
60 | | - var log; |
61 | | - |
62 | | - |
63 | | - async function init(){ |
64 | | - debug('init'); |
65 | | - |
66 | | - md = markdownit({ |
67 | | - html : true, |
68 | | - breaks : false, |
69 | | - linkify : true, |
70 | | - linkTarget : '_blank', |
71 | | - }); |
72 | | - |
73 | | - |
74 | | - dirtree = mod['dir-tree']; |
75 | | - snippet = mod['snippet-html-console']; |
76 | | - editor = mod['web-editor']; |
77 | | - log = mod['log-mod']; |
78 | | - |
79 | | - |
80 | | - await Promise.all([ |
81 | | - load(), |
82 | | - mod.auto(), |
83 | | - ]); |
84 | | - |
85 | | - |
86 | | - initdom(); |
87 | | - |
88 | | - |
89 | | - }//init |
90 | | - |
91 | | - |
92 | | - async function load(){ |
93 | | - |
94 | | - var {error,txt} = await get(base+component+'/readme.md'); |
95 | | - |
96 | | - if(error){ |
97 | | - md_txt = error; |
98 | | - }else{ |
99 | | - md_txt = txt; |
100 | | - } |
101 | | - |
102 | | - }//load |
103 | | - |
104 | | - |
105 | 39 | </script> |
106 | 40 |
|
107 | | - |
108 | | - <link rel=stylesheet href='../css/component.css' crossorigin=anonymous> |
109 | | - |
110 | | - <style> |
111 | | - </style> |
112 | | - |
113 | 41 | </head> |
114 | 42 |
|
115 | 43 | <body> |
116 | 44 |
|
117 | | - |
118 | | - <html-components-hdr v2.0 component=grp1> |
119 | | - <h2 slot=title> |
120 | | - file-mod |
121 | | - </h2> |
122 | | - <time slot=date datetime=2026-02-10> |
123 | | - 10 Feb 2026 |
124 | | - </time> |
125 | | - </html-components-hdr> |
126 | | - <script> |
127 | | -/* |
128 | | - { |
129 | | - let hdr = document.querySelector('html-components-hdr'); |
130 | | - hdr.querySelector('h2').textContent = component; |
131 | | - hdr.querySelector('time').setAttribute('datetime',date); |
132 | | - let d = new Date(date); |
133 | | - let formatted = d.toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'}); |
134 | | - hdr.querySelector('time').textContent = formatted; |
135 | | - } |
136 | | -*/ |
137 | | - </script> |
138 | | - |
139 | | - |
140 | | - <div id=readme class=markdown-body></div> |
141 | | - |
142 | | - <hr> |
143 | | - |
144 | | - <section> |
145 | | - |
146 | | - <h3> |
147 | | - files |
148 | | - </h3> |
149 | | - <div> |
150 | | - ( click to view ) |
151 | | - </div> |
152 | | - |
153 | | - <dir-tree component></dir-tree> |
154 | | - |
155 | | - </section> |
156 | | - |
157 | | - <div id=view-hdr> |
158 | | - </div> |
159 | | - |
160 | | - <div id=view style='display:none'> |
161 | | - <snippet-html-console component></snippet-html-console> |
162 | | - <web-editor component fullsize></web-editor> |
163 | | - </div> |
164 | | - |
165 | | - |
166 | | - <log-mod component></log-mod> |
| 45 | + <page-html v1.0 component=grp style='display:block'></page-html> |
167 | 46 |
|
168 | 47 | </body> |
169 | 48 |
|
170 | | - <script> |
171 | | - |
172 | | - |
173 | | - var md_txt; |
174 | | - var cache = {}; |
175 | | - |
176 | | - |
177 | | - var callback = {}; |
178 | | - var show = {}; |
179 | | - |
180 | | - |
181 | | - |
182 | | - //: |
183 | | - |
184 | | - |
185 | | - async function initdom(){ |
186 | | - debug('initdom'); |
187 | | - |
188 | | - var html = md.render(md_txt); |
189 | | - $('#readme').innerHTML = html; |
190 | | - |
191 | | - |
192 | | - //var node = $('#demo-tree'); |
193 | | - |
194 | | - files = dirtree.build(files); |
195 | | - dirtree.display(files,{callback}); |
196 | | - |
197 | | - |
198 | | - await show.examples('filemod-v2.0-test.html'); |
199 | | - $('#view').style.display = ''; |
200 | | - |
201 | | - |
202 | | - }//initdom |
203 | | - |
204 | | - |
205 | | - //: |
206 | | - |
207 | | - |
208 | | - callback.file = function(name,o){ |
209 | | - |
210 | | - var par = o.parent.name; |
211 | | - debug(par,name); |
212 | | - switch(par){ |
213 | | - |
214 | | - case 'source' : show.source(name); break; |
215 | | - case 'examples' : show.examples(name); break; |
216 | | - |
217 | | - }//switch |
218 | | - |
219 | | - }//show |
220 | | - |
221 | | - |
222 | | - show.source = async function(file){ |
223 | | - |
224 | | - $('#view-hdr').textContent = 'source : '+file; |
225 | | - $('web-editor').style.display = ''; |
226 | | - $('snippet-html-console').style.display = 'none'; |
227 | | - |
228 | | - var url = base+component+'/'; |
229 | | - if(file=='latest'){ |
230 | | - url += `${component}.html`; |
231 | | - }else{ |
232 | | - url += `${file}/${component}-${file}.html`; |
233 | | - } |
234 | | - |
235 | | - var {txt} = await get(url); |
236 | | - if(!txt)return; |
237 | | - editor.setvalue(txt); |
238 | | - editor.filename(file); |
239 | | - editor.mode = 'html'; |
240 | | - |
241 | | - }//source |
242 | | - |
243 | | - |
244 | | - show.examples = async function(file){ |
245 | | - |
246 | | - $('#view-hdr').textContent = 'examples : '+file; |
247 | | - $('web-editor').style.display = 'none'; |
248 | | - $('snippet-html-console').style.display = ''; |
249 | | - |
250 | | - var url = base+component+'/examples/'+file; |
251 | | - var {txt} = await get(url); |
252 | | - if(!txt)return; |
253 | | - |
254 | | - snippet.editor.setvalue(txt); |
255 | | - snippet.editor.filename(file); |
256 | | - snippet.clear(); |
257 | | - |
258 | | - }//example |
259 | | - |
260 | | - |
261 | | - async function get(url){ |
262 | | - debug('get',url); |
263 | | - if(cache[url]){ |
264 | | - debug('cache'); |
265 | | - return {txt:cache[url]}; |
266 | | - } |
267 | | - |
268 | | - var err; |
269 | | - try{ |
270 | | - |
271 | | - var res = await fetch(url); |
272 | | - |
273 | | - }//try |
274 | | - catch(err2){ |
275 | | - |
276 | | - err = err2; |
277 | | - |
278 | | - }//catch |
279 | | - if(err){ |
280 | | - var error = err.toString(); |
281 | | - log.red(error); |
282 | | - return {error}; |
283 | | - } |
284 | | - if(!res.ok){ |
285 | | - var error = await res.text(); |
286 | | - log.red(error); |
287 | | - return {error}; |
288 | | - } |
289 | | - |
290 | | - var txt = await res.text(); |
291 | | - cache[url] = txt; |
292 | | - return {txt}; |
293 | | - |
294 | | - }//get |
295 | | - |
296 | | - |
297 | | - |
298 | | - |
299 | | - |
300 | | - |
301 | | - </script> |
302 | | - |
303 | 49 | </html> |
304 | 50 |
|
305 | 51 |
|
0 commit comments