save file

Author: javascript-2020

html-components/list/template/template.html

@@ -15,8 +15,8 @@
 
             <meta name=description content=''>
 
-            <base href='https://ext-code.com/html-components/list/dir-tree/'>
-            <link rel=canonical href='https://ext-code.com/html-components/list/dir-tree/dir-tree.html'>
+            <base href='https://ext-code.com/html-components/list/'>
+            <link rel=canonical href='https://ext-code.com/html-components/list/'>
 
             <meta name=viewport content='width=device-width, initial-scale=1'>
             <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='>
@@ -31,11 +31,26 @@
 
             <script>
 
+            
+            
+        var component   = 'file-mod';
+        var date        = '2026-02-09';
+        var files       = {
+                                'source'    : {
+                                      'v2.0'      : null,
+                                      'latest'    : null,
+                                },
+                                'examples'    : {
+                                      'filemod-v2.0-test.html'    : null,
+                                },
+                          };
+                          
+                          
+                          
         var df=true,did='html'
         ;
 
         var base        = 'https://libs.ext-code.com/html/';
-        var component   = 'dir-tree';
 
         var ace;
         var md;
@@ -46,19 +61,26 @@
 
 
         async function init(){
-                                                                                console.log('init');
+                                                                                debug('init');
 
-              md    = markdownit();
+              md    = markdownit({
+                    html          : true,
+                    breaks        : false,
+                    linkify       : true,
+                    linkTarget    : '_blank',
+              });
 
-              await load();
 
               dirtree       = mod['dir-tree'];
               snippet       = mod['snippet-html-console'];
               editor        = mod['web-editor'];
               log           = mod['log-mod'];
 
 
-              await mod.auto();
+              await Promise.all([
+                    load(),
+                    mod.auto(),
+              ]);
 
 
               initdom();
@@ -82,57 +104,16 @@
 
             </script>
 
-            <style>
 
+            <link rel=stylesheet href='../css/component.css'>
+            
+            <style>
 
-  html
-    {height:100%;font-family:arial}
-    
-    
   body
-    {/*height:calc(100% - 40px);*/display:flex;flex-direction:column;gap:20px;align-items:center;margin:20px;padding-bottom:200px}
-    
-    
-  body>*
-    {max-width:1400px;width:100%;padding:0 20px;}
-    
-  [component],config
-    {display:none}
-    
-  input
-    {font-size:16px;padding:5px 10px}
-  input[type=button]
-    {cursor:pointer}
-  input[type=checkbox]
-    {width:15px;height:15px;margin:0}
-    
-    
-  #demo-tree
-    {margin:20px 0;height:auto !important;overflow:visible;box-sizing:border-box;outline:none;border-radius:5px;
-      border:none !important;
-      /*border:1px solid lightgray !important;*/
-    }
-    
-  #view-hdr
-    {padding:10px;font-weight:bold;background:rgba(173,216,230,0.5);border:1px solid lightgray;border-radius:5px}
-    
-  #view
-    {border:1px solid lightgray;border-radius:5px;padding:10px}
-  web-editor
-    {}
-    
-    
-  .wunderbaum .wb-expander
-    {opacity:1 !important;transition:none !important}
-  .wb-row
-    {cursor:pointer}
-    
-    
-  .icon
-    {border:1px solid gray;border-radius:3px;box-sizing:border-box;width:30px;height:30px;cursor:pointer}
-  .spc
-    {flex:1;max-width:200px}
+    {margin-top:90px}
 
+  html-components-hdr
+    {position:fixed;z-index:1;background:white;top:0px;padding-top:20px}
 
             </style>
 
@@ -142,9 +123,23 @@
 
 
             <html-components-hdr v2.0 component=grp1>
-                  <h2 class=title style='top:20px'>dir-tree</h2>
-                  <time slot=date datetime=2026-01-08>08 Jan 2026</time>
+                  <h2 slot=title>
+                  </h2>
+                  <time slot=date datetime=2026-02-10>
+                  </time>
             </html-components-hdr>
+            <script>
+/*
+        {
+              let hdr   = document.querySelector('html-components-hdr');
+              hdr.querySelector('h2').textContent   = component;
+              hdr.querySelector('time').setAttribute('datetime',date);
+              let d           = new Date(date);
+              let formatted   = d.toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'});
+              hdr.querySelector('time').textContent   = formatted;
+        }
+*/
+            </script>
 
 
             <div id=readme class=markdown-body></div>
@@ -155,6 +150,9 @@ <h2 class=title style='top:20px'>dir-tree</h2>
 
                   <h3>
                         files
+                        <span style='font-size:16px;font-weight:normal'>
+                              ( click to view )
+                        </span>
                   </h3>
 
                   <dir-tree component></dir-tree>
@@ -186,18 +184,6 @@ <h3>
 
 
 
-        var files    = {
-              'source'    : {
-                    'latest'    : null,
-              },
-              'examples'    : {
-                    'dir-tree-min.html'       : null,
-                    'dir-tree-simple.html'    : null,
-              },
-        };
-        
-        
-        
   //:
 
 
@@ -208,13 +194,11 @@ <h3>
               $('#readme').innerHTML        = html;
 
 
-              var node    = $('#demo-tree');
-              
               files   = dirtree.build(files);
               dirtree.display(files,{callback});
 
 
-              await show.examples('dir-tree-min.html');
+              await show.examples('filemod-v2.0-test.html');
               $('#view').style.display    = '';
 
 
@@ -255,6 +239,7 @@ <h3>
               if(!txt)return;
               editor.setvalue(txt);
               editor.filename(file);
+              editor.mode   = 'html';
 
         }//source