save file

Author: javascript-2020

html/chat-room/html/chat-room-tmp/chat-room-tmp.html

@@ -0,0 +1,121 @@
+
+
+<chat-room-tmp>
+
+      <template shadowrootmode=open>
+      
+            <style>
+            
+  #user-root
+    {height:150px;display:flex;gap:20px;border-top:1px solid lightgray;padding-top:10px}
+  #txt
+    {height:100%;border:1px solid lightgray;border-radius:5px;padding:10px;flex:1;box-sizing:border-box;resize:none}
+  #info
+    {display:flex;flex-direction:column;gap:10px}
+  #show-password
+    {cursor:pointer}
+  #show-password > *
+    {vertical-align:middle;cursor:pointer}
+  .label
+    {display:inline-block;width:100px;text-align:right;margin-right:20px}
+    
+  [value=send]
+    {margin-right:20px;min-width:80px}
+  #pause
+    {min-width:80px}
+    
+            </style>
+            
+            <section id=user-root>
+            
+                  <div id=info>
+                        <div>
+                              <span class=label>
+                                    user
+                              </span>
+                              <input id=user value=test>
+                        </div>
+                        <div>
+                              <span class=label>
+                                    password
+                              </span>
+                              <input id=password type=password value=abc-123>
+                        </div>
+                        <div id=show-password>
+                              <span class=label>
+                                    show
+                              </span>
+                              <input type=checkbox>
+                        </div>
+                        
+                  </div>
+                  
+                  <textarea id=txt></textarea>
+                  
+                  <div id=btns>
+                        <input value=send type=button title=ctrl+enter>
+                        <input id=pause value=pause type=button>
+                  </div>
+                  
+            </section>
+            
+      </template>
+      
+      <script>
+      
+(function({mod,host}){
+
+  var obj   = {};
+  
+        var df=true,did='chat-room-tmp';
+        
+        
+        var debug
+        ;
+        
+        obj.initmod   = function(params){
+        
+              debug   = mod.rd(params,'debug',debug);
+              
+        }//initmod
+        
+        
+  //:
+  
+        var ui    = {};
+        
+        
+        obj.init    = async function(){
+                                                                                debug=eval(debug.mod);
+                                                                                debug('init');
+        }//init
+        
+        
+        obj.initdom   = async function(){
+        
+              var info                                    = $(shadow,'#info');
+              
+              $.chkbox(info,'#show-password',btn.password);
+              
+              $(shadow,'#txt').onkeydown                  = kd.user;
+              $(shadow,'#txt').focus();
+              
+              $(shadow,'[value=send]').onclick            = btn.send;
+              ui.pause                                    = $(shadow,'[value=pause]');
+              ui.pause.onclick                            = btn.pause;
+              
+              
+        }//initdom
+        
+        
+        
+  //:
+  
+  
+  
+})
+
+</chat-room-tmp>
+
+
+