save file

Author: javascript-2020

utils/github/html/github-hdr/github-hdr.html

@@ -0,0 +1,155 @@
+
+
+<github-hdr>
+
+      <template shadowrootmode=open>
+      
+            <style>
+            
+  section {
+        margin                      : 0;
+        box-sizing                  : border-box;
+        display                     : flex;
+        align-items                 : center;
+        gap                         : 10px;
+  }
+  
+  .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;
+  }
+                  
+            
+            </style>
+            
+            <section>
+
+                  <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>
+
+                  <slot></slot>
+                
+                  <div class=date>
+                        <slot name=date></slot>
+                  </div>
+                
+            </section>
+            
+      </template>
+
+      
+      <script>
+
+      
+(function github_hdr({mod,dom,host}){
+
+  var obj   = {
+        version   : 'v2.0',
+  };
+  
+      var df=true
+      ;
+
+                                                            
+      var $,menu
+      ;
+        
+      obj.initmod   = function(params){
+        
+            $         = params.$;
+            menu      = params.menu;
+            
+      }//initmod
+
+
+  //:
+
+  
+      var top;
+
+      
+      obj.init    = async function(){
+      
+            top    = mod['top-menu']
+            
+            top.initmod({$,menu});
+            
+            top.init();
+
+            
+      }//init
+
+
+  //:
+  
+        
+      obj.initdom   = function(rootnode){
+        
+            var shadow          = host.shadowRoot;
+            
+            top.initdom(shadow);
+            
+            
+      }//initdom
+
+      
+      
+  return obj;
+  
+})//github_hdr
+
+            
+      </script>
+      
+</github-hdr>
+