save file

Author: javascript-2020

utils/editors/html/top-menu/top-menu.html

@@ -0,0 +1,134 @@
+
+
+<top-menu style='position:relative'>
+
+      <template shadowrootmode=open>
+
+
+            <style>
+            
+  #icon
+    {width:15px;height:22px;padding:2px;margin-left:10px;background:white;border:1px solid lightgray;border-radius:3px;box-sizing:border-box;cursor:pointer}
+  .menu
+    {position:absolute;left:0;top:35px;width:150px}
+    
+  a
+    {text-decoration:none;color:blue}
+            
+            </style>
+
+
+            <img id=icon src='data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAt1BMVEVHcEwbmPYcgfMchvQbsfkay/wbtvkbnfccefMayfwbmfYch/QchvQbtfkbmfYa1P0ddfIcivQcl/Ycj/Ubp/gcmfYdbPEbrvkazPwcmfYbqfgayfwayPwbv/sbvvobsvkazPwbqvga0fwbvPobtvocjvUbofcbpvccfPMcgPMcgvMdafAdbfEckfUbtvka0PwcfPIaxvsbwfsbvPodb/EcnPYclvYckfUbpvccjPQdd/IbofcbrPiPy8D0AAAAMHRSTlMAA/79/v7+5ycVZ3Y3h0xhu9jp8kFeF9OkVfQOrZi+Mh1z/iUJQ+/dx4fOYq7hybzs5xU1AAABIklEQVQ4y+2Ux3aDMBBFpTR6M92AwYB7S6EG/v+7MsJJnBBKVsnGdwHozT1HQgxC6MrfEkiSM+Y4khSgUxhazLDHWGF4QveAO2gyLnGQ9QS4wcDaXGJYiPGegVnU50UzUvdgTsd7AfrMaEaqXvO+sfAAHP0uzz+SmhCfR7FwB5gdpm+SyoeHEJ5P67o2tbanmRBP5/iSgFkUxaplaisIv3kAu6yqihK/RiIF0ZJtT6NTaZpS9iWwm0D/uXB7kmXZ5LOgN0O7ayvEQ57nKtssCbMqDA5i9+YulLIsVQ5MzKnwqCz6Phev3AIcxhy5K3x/A/DbG2CzIdctP9RS9PrxnTU92KOYll8bZHqs7Wk5AcY9hIx9kuyN3/xuxm5nXA+df+cNJSAgjMbiFSoAAAAASUVORK5CYII='>
+            
+            <div class=menu style='display:none'>
+                  <div id=editor class=menu-opt>
+                        <a href='../editor/editor.html' target=_blank>
+                              editor
+                        </a>
+                  </div>
+                  <div id=js-console class=menu-opt>
+                        <a href='../js-console/js-console.html' target=_blank>
+                              js console
+                        </a>
+                  </div>
+                  <div id=html-editor class=menu-opt>
+                        <a href='../html-editor/html-editor.html' target=_blank>
+                              html editor
+                        </a>
+                  </div>
+                  <div id=markdown-editor class=menu-opt>
+                        <a href='../markdown-editor/markdown-editor.html' target=_blank>
+                              markdown editor
+                        </a>
+                  </div>
+                  <div id=srcdoc class=menu-opt>
+                        <a href='../srcdoc/srcdoc.html' target=_blank>
+                              srcdoc
+                        </a>
+                  </div>
+                  <div id=text-diff class=menu-opt>
+                        <a href='../text-diff/text-diff.html' target=_blank>
+                              text diff
+                        </a>
+                  </div>
+                  <div id=stackblitz class=menu-opt>
+                        <a href='../../misc/stackblitz/stackblitz.html' target=_blank>
+                              stackblitz
+                        </a>
+                  </div>
+            </div>
+
+      
+      </template>
+
+      
+      <script>
+      
+(function top_menu({mod,dom,host}){
+
+  var obj   = {
+        version   : 'v2.0'
+  };
+              
+        var df=false,did='top-menu';
+                                                                                
+        var ext,$,menu
+        ;
+                  
+        obj.initmod   = function(params){
+          
+              ext       = params.ext;
+              $         = params.$;
+              menu      = params.menu;
+              
+        }//initmod
+                  
+              
+  //vars:-
+
+
+  //
+  
+  
+        obj.init    = async function(){
+                                                                                debug('init',obj.version);
+        }//init
+
+                  
+  //:
+
+              
+        obj.initdom   = function(rootnode){
+        
+              var shadow                      = host.shadowRoot;
+
+              menu.add.style(shadow);
+              
+              
+              var card                        = $(shadow,'.menu');
+              $(shadow,'#icon').onclick       = menu.click(card,false,false);
+
+              
+        }//initdom
+        
+
+  //:
+  
+
+        function debug(){
+          
+              if(!df && !obj.df)return;
+              var str   = [...arguments].join(' ');
+              console.log(`[ ${did} ]`,str);
+              
+        }//debug
+  
+
+
+  return obj;
+  
+})//top_menu
+                  
+      </script>
+      
+</top-menu>