save file

Author: javascript-2020

utils/misc/html/misc-hdr/misc-hdr.html

@@ -1,162 +1,197 @@
 
 
-<misc-hdr style='position:relative'>
+<misc-hdr v2.0>
 
       <template shadowrootmode=open>
 
             <style>
 
+  :host
+    {position:relative}
+    
   section
     {margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;
       padding-bottom:20px;border-bottom:1px solid lightgray;
     }
-  
-  .icon {
-        cursor                      : pointer;
-        border-radius               : 3px;
-        border                      : 1px solid gray;
-        box-sizing                  : border-box;
-        width                       : 38px;
-        height                      : 38px;
-  }
-  
-  .item {
-        display                     : inline-flex;
-        align-items                 : center;
-        text-align                  : center;
-        background                  : buttonface;
-        border-radius               : 3px;
-        border                      : 1px solid lightgray;
-        padding                     : 5px 7px;
-  }
-  
-  .item-label {
-  }
-  
-  ::slotted(.title) {
-        text-align                  : center;
-        position                    : absolute;
-        left                        : 0;
-        right                       : 0;
-        top                         : 0px;
-        z-index                     : -1;
-        margin                      : 0 auto;
-  }
-
-  
-  .date {
-        position                    : absolute;
-        top                         : 5px;
-        right                       : 5px;
-  }
-  
-  a {
-        color                       : blue;
-  }
-  a:visited {
-        color                       : blue;
-  }
-                  
-            
+    
+  .icon
+    {cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;
+      width:38px;height:38px}
+      
+  .item
+    {display:inline-flex;align-items:center;text-align:center;background:buttonface;
+      border-radius:3px;border:1px solid lightgray;padding:5px 7px}
+      
+  .item-label
+    {}
+    
+  ::slotted([slot=title])
+    {text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto}
+    
+  page-source
+    {margin-right:20px}
+    
+  ::slotted([slot=version]), [name=version]
+    {font-weight:bold;color:blue;margin-right:10px}
+    
+  .date
+    {}
+    
+  .spc
+    {flex:1}
+    
+  a
+    {color:blue}
+  a:visited
+    {color:blue}
+    
+    
             </style>
 
             <section>
-
+            
+                  <slot name=title></slot>
+                  
+                  
                   <!--
                   <img id=help class=icon style='padding:2px' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABANJREFUSEvNl2tsVEUUx39n224pEVNsTcGqAYM1gYYP0mCUaILGLqVptzVGKZCArxIU2VYTYpQapU2Mj9jWR9H6wUesUdcGWoRSJIQYjUhETUkkRUVIoGztLqB9bOm2OzL7urtst3eXhsT77c495/+bOXPmzLlCEk9JydOZKsNi8ws2QYqAW4DskOsF4IRC/WRRdIvP393V9fZFM1mZyqC0dONsX8aMZ0SpjUCOmVjou0eJbM/wjb65e/f284l8YsCqbNN8JK0Ii5JeJXN2IXVjkJskMMbMCu4yVP1tolyBD4ohrNftF+dLY/o1AlbljsUIh4CsKwEl5aPoks7mlbFg++bnQF5JSmA6RlbLTHE2eo0V22teANUwHc2kfK2+WeJsGYqABysc9dcotiblPB2jaLDO3rXp1uOrrjCRUpmH02ed+9Ce112BFRdX1NavVmrrOlRQ4/nH4YN2GDgP826AiuXQ1AY1a2B+vsE5dBRO9UF+Hjj3GeMr7wbbncH3f4fB+Q30HA+8Voml4fOdjXWii4PfmnamCnIi4A+3wcvvwck+WFwAj1WC41Vo2gKdB+HYX0HRwWG4747gZJo+NcCPVEBWJuw4AIULYF0ZrK+D8QkeQDyjYxP5sqLcUa5EOqqApMAfdcCvvQbEvnxy8MQEfLILROCrN+CJbXDuHyoRRpWyS7Hd8a4gT8aB/zwNwyOQfS1kzzJWrEPr8sDX3wZXnAicZoEvu6HwVtjwIDz6Ikz4A+ARVIvY7DU/AkvjwB93wlk3LLgJiu8ywEd+g1Nn4fBRGB1LDL7n9mCOXBiE9v3QezIQJQ32wmENHgByr1qoL0v5ENitwT4gPWnwd7/AidNBuf5LIS9aBEsWws4DwTGXG2zLILzHk4PHJwfrLNbh0WGamwv3LoW2PbC2FG7MM6R6foczf0PJMmPs52Mw7AW/H37oiTvioRUHwPGhTqUipGgbHer45EpRLBXzSHKFj9MqYH24cqWilKJtRSCrVUukgBQCr6GwpCiUirkumpsRRBeQcMnUrc1CYFF0dxClOhtFpQmlD9hr9BYx1l7goK6y4LHokqm/6ktClDK9Eh0oShLA9ZmsRfjDZHJKpGGfviS0nb4Wx9MzdSSm7K8ygWYU8yYRb0HoNI+7O338YoFuAiONgM1euxpUm5nvzcBbKGZEGX4P1CcIcayerOnuaPxMj8V0mSvKa95XQrUZ/P5Le/Vs6AT0A08hDJk4iaJ1b2fThrBZDHhJdXVGTn/WF4KY5VFgrwtQtCOECmhCtELt8OR5Hz7S2qpTIfDENfQafr1r5jvJrNwsMgGAonVgzsimaOik4LBYaM+bzRJuCrgbxBHe08vt/h+/MIlmfzV+2v4DHQu0lKRbJa4AAAAASUVORK5CYII='>
                   -->
-                      
+                  
+                  
                   <div class=item>
-                                  
+                  
                         <!--
                         <top-menu component=grp v2.0></top-menu>
                         -->
 
                         <a id=home class=item-label href='/'>
                               home
                         </a>
-                      
+                        
                   </div>
-
+                  
                   <div class=item>
-                                  
-                        <a id=home class=item-label href='/utils/misc/index.html'>
+                  
+                        <a id=home class=item-label href='/utils/misc/index.html' target=_blank>
                               misc
                         </a>
-                      
+                        
                   </div>
-
-
-                  <slot></slot>
-
-                
+                  
+                  
+                  <div class=spc></div>
+                  
+                  
+                  <page-source v2.0 component></page-source>
+                  
+                  
+                  <slot name=filename></slot>
+                  
+                  <slot name=version></slot>
+                  
+                  
                   <div class=date>
                         <slot name=date></slot>
                   </div>
-
-                
+                  
+                  
             </section>
 
       </template>
 
       <script>
 
-(function misc_hdr({mod,dom,host}){
-                                                                                
+(function misc_hdr({mod,host}){
+
   var obj   = {
         version   : 'v2.0',
   };
 
-        var df=true
+        var df=true,did='misc-hdr'
         ;
-                                                              
+        
+        
         var ext,$,menu
         ;
-          
+        
         obj.initmod=function(params){
-          
-              ext       = params.ext;
-              $         = params.$;
-              menu      = params.menu;
+        
+              ext       = mod.rd(params,'ext',ext);
+              $         = mod.rd(params,'$',$);
+              menu      = mod.rd(params,'menu',menu);
 
         }//initmod
-
 
-  //:    
-
+        
+  //:
+  
+  
         var top;
 
+        var shadow;
+        
+        
+        var set   = {};
+        obj.set   = set;
+        
+        
+  //:
+  
         obj.init    = async function(){
 
-              //top       = mod['top-menu'];
-              
-              //top.initmod({$,menu});
-              
-              //await top.init();
-    
+              await mod.auto();
 
         }//init
-    
-
+        
+        
   //:
 
 
         obj.initdom   = function(){
-          
-              //var root            = $.$(rootnode,'misc-hdr');
-              var shadow          = host.shadowRoot;
-              
-              //top.initdom(shadow);
+        
+              shadow          = host.shadowRoot;
 
+              set.filename();
+              if(typeof version!=='undefined'){
+                    set.version(version);
+              }
 
         }//initdom
-      
-
-      
+        
+        
+  //:
+  
+  
+        obj.set.version   = function(v){
+        
+              $(shadow,'[name=version]').textContent    = v;
+              
+        }//version
+        
+        
+        obj.set.filename    = function(fn){
+        
+              if(!fn){
+                    var str       = window.location.toString();
+                    var i         = str.lastIndexOf('/');
+                    fn            = str.slice(i+1);
+              }
+              $(shadow,'[name=filename]').textContent   = fn;
+              
+        }//filename
+        
+        
+        
+        
+        
+        
+        
+        
   return obj;
 
-})//misc-hdr
-            
+//misc-hdr
+})
+
       </script>
 
 </misc-hdr>