update

Author: javascript-2020

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

@@ -0,0 +1,142 @@
+
+
+<output-root>
+
+      <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(){
+                                                                                  true && console.log('output');
+              var obj   = {};
+            
+            
+                  obj.initmod=function(params){
+                  }//initmod
+                  
+              //vars:-
+            
+                  var hldr;      
+                  var iframe;
+                  var glass;
+
+                  
+                  var btn   = {};
+
+              //:
+              
+                  obj.init=function(){
+                  }//init
+                  
+              //:
+              
+                  obj.initdom=function(rootnode){
+                  
+                        root            = $.$(rootnode,'output-root');
+                        shadow          = root.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
+            
+      </script>
+      
+</output-root>
+

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

@@ -0,0 +1,162 @@
+
+
+<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){
+        
+              root            = $.$(rootnode,'output-root');
+              shadow          = root.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>
+