save file

Author: javascript-2020

html/help-file/help-file.html

@@ -6,18 +6,6 @@
 
             <link rel=stylesheet href='https://ext-code.com/css/github-markdown-light.css'>
 
-            <style id=style-icon>
-            
-  #icon-root
-    {border:1px solid lightgray;border-radius:5px;display:inline-flex;flex-direction:column;align-items:center;padding:1px 7px;cursor:pointer;background:buttonface}
-  #icon
-    {width:20px;height:20px;
-      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=);
-    }
-  #txt
-    {color:blue}
-            </style>
-            
             <style>
 
   :host
@@ -32,10 +20,12 @@
 
             </style>
 
-            <div id=icon-root style='dislay:none'>
-                  <img id=icon src=>
-                  <div id=txt>
-                        help
+            <div id=icon-root class=item slot=help style='display:none'>
+                  <div class=item-icon>
+                        <img class=icon src='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='>
+                        <div class=item-label>
+                              help
+                        </div>
                   </div>
             </div>
 
@@ -65,6 +55,7 @@
                     vm            = mod.rd(params,'vm',vm);
 
                     base          = mod.rd(params,'base',base);
+                    src           = mod.rd(params,'src',src);
 
               });
 
@@ -77,6 +68,7 @@
         var base          = document.baseURI;
         var target        = host;
 
+        var src           = 'docs/help.md';
         var md;
 
         var view;
@@ -103,15 +95,9 @@
         rd.attr.src   = async function(){
 
               if(!target.hasAttribute('src'))return;
-              var src   = target.getAttribute('src');
-              var url   = resolve(src);
+              var attr    = target.getAttribute('src');
+              src         = resolve(attr);
                                                                                 debug('src',url);
-              var {txt,error}   = await get(url);
-              if(error){
-                    txt   = error;
-              }
-              md    = txt;
-              
         }//src
 
 
@@ -163,12 +149,13 @@
               var icon                = $(shadow,'#icon-root');
               icon.style.display      = '';
               icon.onclick            = btn.icon;
-              var style               = $(shadow,'#style-icon');
+              /*
               var div                 = document.createElement('div');
               div.setAttribute('slot','help');
               var shadow2             = div.attachShadow({mode:'open'});
               shadow2.append(style,icon);
-              host.before(div);
+              */
+              host.before(icon);
 
               viewport                = await vm.new({initmod:{config:{icons:{close:false}}}});
               viewport.pos({x:20,y:20,w:500,h:500});
@@ -178,7 +165,7 @@
 
               view                    = $(shadow,'#view');
 
-              display(md);
+              await load();
 
         }//initdom
 
@@ -196,6 +183,22 @@
 
         }//icon
 
+        
+  //:
+  
+  
+        async function load(){
+        
+              var {txt,error}   = await get(src);
+              if(error){
+                    txt   = error;
+              }
+              md    = txt;
+              display(md);
+              
+        }//load
+        
+        
   //: