save file

javascript-2020 · javascript-2020 · commit 4872fd8606eb · 2026-01-04T14:14:12.000Z
diff --git a/html-components/list/web-console/web-console.html b/html-components/list/web-console/web-console.html
@@ -26,33 +26,110 @@
             <script src='https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js'></script>
             <link rel=stylesheet href='/css/github-markdown-light.css'>
             
+            <link rel=stylesheet href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css'>
+            <link rel=stylesheet href='https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.min.css'>
+            <script src='https://cdn.jsdelivr.net/npm/wunderbaum@0/dist/wunderbaum.umd.min.js'></script>
+            
             
             <script src='https://libs.ext-code.com/js/dom/component/component.js?init'></script>
             
             <script>
             
-            
-        async function init(){
+        var df=true,did='html'
+        ;
         
+        var ace;
+        var md;
+        var snippet;
+        var editor;
         
+        
+        async function init(){
+                                                                                console.log('init');
+                                                                                
+              md    = markdownit();
+              
+              await load();
+              
+              
+              snippet   = mod['snippet-html-console'];
+              editor    = mod['web-editor'];
+              
               await mod.auto();
               
               
+              initdom();
+              
               
         }//init
         
         
+        async function load(){
+        
+              txt   = await fetch('readme.md').then(res=>res.text());
+              
+        }//load
+        
+        
             </script>
             
             <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:50px 0;height:auto !important;border:none !important;overflow:visible;box-sizing:border-box;outline:none}
+    
+    
             </style>
             
       </head>
       
       <body>
       
-            <div id=output class=markdown-body>
+      
+            <html-components-hdr component=grp1>
+                  <h2 class=title style='top:10px'>web-console</h2>
+                  <time slot=date datetime=2026-01-04>04 Jan 2026</time>
+            </html-components-hdr>
+            
+            
+            <div id=readme class=markdown-body></div>
+            
+            <section>
+            
+                  <h3>
+                        files
+                  </h3>
+                  
+                  <div id=demo-tree class='wb-skeleton wb-initializing wb-fade-expander'></div>
+                  
+            </section>
+            
+            <div id=view style='display:none'>
+                  <snippet-html-console component></snippet-html-console>
+                  <web-editor component></web-editor>
             </div>
             
             
@@ -61,22 +138,92 @@
       <script>
       
       
+        var txt;
+        
+        
+  //:
+  
+  
         function initdom(){
+                                                                                debug('initdom');
+                                                                                
+              var html                      = md.render(txt);
+              $('#readme').innerHTML        = html;
+              
+              
+              var node    = $('#demo-tree');
+              var tree    = new mar10.Wunderbaum({
+                    element:node,
+                    source: files,
+                    init:e=>{e.tree.setFocus()},
+                    activate:show
+              });
+              
+              
         }//initdom
         
         
+  //:
+  
+  
+        function show(e){
+        
+              var depth   = e=>{
+              
+                    var c       = 0;
+                    var node    = e.node;
+                    
+                    while(node.parent){
+                    
+                          c++;
+                          node    = node.parent;
+                          
+                    }//while
+                    return c;
+                    
+              }//depth
+              
+              var d   = depth(e);
+              console.log(d,e.node.title);
+              console.log(`Thank you for activating ${e.node}.`);
+              
+              
+        }//show
+        
+        
       </script>
       
       
       <script>
       
-        var data    = {
-        };
+      
+      
+      
+        var files    = [
+        
+              {
+                    title: 'source',
+                    expanded: true,
+                    children: [
+                          {title:'latest'},
+                          {title:'v2.0'}
+                    ],
+              },
+              
+              {
+                    title: 'examples',
+                    expanded:true,
+                    children:[
+                          {title:'simple example'}
+                    ]
+              },
+              
+        ];
+        
         
-        data.readme   = `
-        `;
         
       </script>
+      
 </html>
 
 
