save file

Author: javascript-2020

utils/editors/html/editors-hdr/v2.0/editors-hdr-v2.0.html

@@ -6,37 +6,39 @@
 
             <style>
 
-  section 
+  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;
     }
-
-  
+    
+  ::slotted([slot=version])
+    {color:green;font-weight:bold}
+    
   .date
     {position:absolute;top:5px;right:5px;}
-  
+    
   a
     {color:blue;}
   a:visited
     {color:blue;}
-
+    
   ::slotted(.visually-hidden)
     {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
 
@@ -46,36 +48,38 @@
             </style>
 
             <section>
-
+            
+                  <slot name=seo-hdr class=visually-hidden></slot>
+                  
                   <div class=item>
 
                         <a id=home class=item-label href='/'>
                               home
                         </a>
 
                         <top-menu component=grp></top-menu>
-                      
+                        
                   </div>
 
                   <input value=isolate type=button>
-
+                  
                   <slot></slot>
 
-                  <slot name=seo-hdr class=visually-hidden></slot>
-                
+                  <slot name=version></slot>
+                  
                   <div class=date>
                         <slot name=date></slot>
                   </div>
-                
+                  
             </section>
 
       </template>
-
+      
 
       <script>
 
 (function editors_hdr({mod,dom,host}){
-                                                                    
+
   var obj   = {
         version   : 'v2.0'
   };
@@ -85,39 +89,39 @@
 
       var ext,$,menu
       ;
-        
+      
       obj.initmod   = function(params){
-        
+      
             ext       = params.ext;
             $         = params.$;
             menu      = params.menu;
 
       }//initmod
 
-
+      
   //:
 
-      
+  
       var top;
 
-  
+      
       obj.init    = async function(){
                                                                                 debug('init',obj.version);
             top   = mod['top-menu'];
 
             top.initmod({ext,$,menu});
 
             await top.init();
-
+            
 
       }//init
-
-
+      
+      
   //:
 
 
       obj.initdom   = function(rootnode){
-        
+      
             var shadow          = host.shadowRoot;
 
             top.initdom(shadow);
@@ -127,12 +131,12 @@
 
       }//initdom
 
-
+      
   //:
 
 
         btn.isolate   = function(){
-          
+        
               var url   = window.location.toString();
 
               if(url.indexOf('?')!=-1){
@@ -143,25 +147,25 @@
               window.location   = url;
 
         }//isolate
-
-  
+        
+        
   //:
-
+  
 
         function debug(){
-          
+        
               if(!df && !obj.df)return;
               var str   = [...arguments].join(' ');
               console.log(`[ ${did} ]`,str);
 
         }//debug
-  
-  
+        
+        
   return obj;
 
 })//editors-hdr
 
-            
+
       </script>
 
 </editors-hdr>