save file

Author: javascript-2020

utils/editors/html-editor/html/output-html/output-html.html

@@ -0,0 +1,161 @@
+
+
+<output-html>
+
+      <template shadowrootmode=open>
+      
+            <style>
+            
+  :host
+    {display:flex;flex-direction:column;height:100%}
+
+  #hdr
+    {display:flex}
+  
+  #hldr
+    {flex:1;box-sizing:border-box;position:relative}
+  iframe
+    {width:100%;height:100%}
+  #glass
+    {position:absolute;left:0;top:0;width:100%;height:100%;display:none}
+                  
+            </style>
+            
+            <div id=hdr>
+                  <div style='flex:1'></div>
+                  <button id=kill style='margin-right:20px'>kill</button>
+            </div>
+            
+            <div id=hldr>
+                  <iframe></iframe>
+                  <div id=glass></div>
+            </div>
+            
+      </template>
+      
+      <script>
+      
+(function output_html({mod,dom,host}){
+
+  var obj   = {
+        version   : 'v2.0',
+  };
+
+        var ext,$;
+        
+        obj.initmod=function(params){
+        
+              ext   = params.ext;
+              $     = params.$;
+              
+        }//initmod
+
+      
+  //vars:-
+
+        var hldr;      
+        var iframe;
+        var glass;
+  
+        
+        var btn   = {};
+
+
+  //:
+
+  
+        obj.init    = async function(){
+        }//init
+
+      
+  //:
+
+  
+        obj.initdom   = function(rootnode){
+        
+              shadow          = host.shadowRoot;
+              
+              var style       = $(shadow,'style');
+              $.stylesheet.insert(style,'button','.icon');
+  
+              
+              var hdr         = $(shadow,'#hdr');
+              
+              $(hdr,'#kill').onclick    = btn.kill;
+  
+              
+              hldr            = $(shadow,'#hldr');
+              iframe          = $(shadow,'iframe');
+              glass           = $(shadow,'#glass');
+              
+              
+        }//initdom
+
+
+  //:
+  
+  
+        btn.kill    = function(){
+        
+              kill();
+              
+        }//kill
+  
+    
+        obj.glass   = function(show=true){
+  
+              var display     = 'none';
+              if(show){
+                    display   = 'block';
+              }
+              glass.style.display    = display;
+        
+        }//glass
+      
+      
+        obj.horiz   = function(){
+        
+              iframe.style.width     = '100%';
+              iframe.style.height    = '50%';
+              
+        }//horiz
+        
+  
+        obj.vert    = function(){
+  
+              iframe.style.width    = '50%';
+              iframe.style.height   = '100%';
+            
+        }//vert
+  
+  
+  
+        obj.srcdoc    = function(html){
+        
+              iframe.srcdoc   = html;
+              
+        }//srcdoc
+  
+  
+        obj.kill    = function(){return kill()}    //d
+        
+        function kill(){
+        
+              var niframe       = iframe.cloneNode(true);
+              niframe.srcdoc    = null;
+              hldr.replaceChild(niframe,iframe);
+              iframe            = niframe;
+        
+        }//kill
+        
+      
+
+      
+  return obj;
+  
+})//output_html
+            
+      </script>
+      
+</output-html>
+