Fossil SCM

chat: removed an extraneous layer of DOM elements. CSS tweaks.

stephan 2020-12-22 09:35 chatroom-dev
Commit ce988f94077314f1c952fb92ac57b17fecf5b2a0fd198023a8eb4465c1aeaa48
Parent ee53e449a5086a6…
1 file changed +17 -10
~ tools/chat.tcl
M tools/chat.tcl
+17 -10
--- tools/chat.tcl
+++ tools/chat.tcl
@@ -58,24 +58,29 @@
5858
 <hr>
5959
 <p>
6060
 <a href="chat/env">CGI environment</a> |
6161
 <a href="chat/self">Wapp script</a>
6262
 <style>
63
+.chat-message {/*style common to .chat-mx and .chat-ms*/
64
+ padding: 0.5em;
65
+ border-radius: 0.5em;
66
+ border: 1px solid black;
67
+ box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
68
+ /* Bob Ross might approve of... */
69
+ /*
70
+ background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
71
+ border-bottom: solid 3px #c58668;
72
+ */
73
+}
6374
 .chat-mx {
6475
 float: left;
6576
 margin-right: 3em;
66
- padding: 0.5em;
67
- border-radius: 1em;
68
- border: 1px solid black;
6977
 }
7078
 .chat-ms {
7179
 float: right;
7280
 margin-left: 3em;
73
- padding: 0.5em;
74
- border-radius: 1em;
7581
 background-color: #d2dde1;
76
- border: 1px solid black;
7782
 }
7883
 \#dialog {
7984
 width: 97%;
8085
 }
8186
 \#chat-input-area {
@@ -136,11 +141,13 @@
136141
 const rxUrl = /\\b(?:https?|ftp):\\/\\/\[a-z0-9-+&@\#\\/%?=~_|!:,.;]*\[a-z0-9-+&@\#\\/%=~_|]/gim;
137142
 const rxAtName = /@\\w+/gmi;
138143
 // ^^^ achtung, extra backslashes needed for the outer TCL.
139144
 // Converts a message string to a message-containing DOM element
140145
 // and returns that element, which may contain child elements.
141
- const messageToDOM = function f(str){
146
+ // If 2nd arg is passed, it must be a DOM element to which all
147
+ // child elements are appended.
148
+ const messageToDOM = function f(str, tgtElem){
142149
 "use strict";
143150
 if(!f.rxUrl){
144151
 f.rxUrl = rxUrl;
145152
 f.rxAt = rxAtName;
146153
 f.rxNS = /\\S/;
@@ -198,11 +205,11 @@
198205
 }
199206
 //console.debug("accum2 =",accum2);
200207
 });
201208
 delete f.accum;
202209
 //console.debug("accum2 =",accum2);
203
- const span = f.ce('span');
210
+ const span = tgtElem || f.ce('span');
204211
 accum2.forEach(function(e){
205212
 if('string'===typeof e) e = f.ct(e);
206213
 span.appendChild(e);
207214
 });
208215
 //console.debug("span =",span.innerHTML);
@@ -239,12 +246,12 @@
239246
 }
240247
 let br = document.createElement("br");
241248
 br.style.clear = "both";
242249
 span.appendChild(br);
243250
 }
244
- const dmsg = messageToDOM(m.xmsg || "??empty??");
245
- span.appendChild(dmsg);
251
+ messageToDOM(m.xmsg || "??empty??", span);
252
+ span.classList.add('chat-message');
246253
 if( m.xfrom!=_me ){
247254
 span.classList.add('chat-mx');
248255
 }else{
249256
 span.classList.add('chat-ms');
250257
 }
251258
--- tools/chat.tcl
+++ tools/chat.tcl
@@ -58,24 +58,29 @@
58 <hr>
59 <p>
60 <a href="chat/env">CGI environment</a> |
61 <a href="chat/self">Wapp script</a>
62 <style>
 
 
 
 
 
 
 
 
 
 
 
63 .chat-mx {
64 float: left;
65 margin-right: 3em;
66 padding: 0.5em;
67 border-radius: 1em;
68 border: 1px solid black;
69 }
70 .chat-ms {
71 float: right;
72 margin-left: 3em;
73 padding: 0.5em;
74 border-radius: 1em;
75 background-color: #d2dde1;
76 border: 1px solid black;
77 }
78 \#dialog {
79 width: 97%;
80 }
81 \#chat-input-area {
@@ -136,11 +141,13 @@
136 const rxUrl = /\\b(?:https?|ftp):\\/\\/\[a-z0-9-+&@\#\\/%?=~_|!:,.;]*\[a-z0-9-+&@\#\\/%=~_|]/gim;
137 const rxAtName = /@\\w+/gmi;
138 // ^^^ achtung, extra backslashes needed for the outer TCL.
139 // Converts a message string to a message-containing DOM element
140 // and returns that element, which may contain child elements.
141 const messageToDOM = function f(str){
 
 
142 "use strict";
143 if(!f.rxUrl){
144 f.rxUrl = rxUrl;
145 f.rxAt = rxAtName;
146 f.rxNS = /\\S/;
@@ -198,11 +205,11 @@
198 }
199 //console.debug("accum2 =",accum2);
200 });
201 delete f.accum;
202 //console.debug("accum2 =",accum2);
203 const span = f.ce('span');
204 accum2.forEach(function(e){
205 if('string'===typeof e) e = f.ct(e);
206 span.appendChild(e);
207 });
208 //console.debug("span =",span.innerHTML);
@@ -239,12 +246,12 @@
239 }
240 let br = document.createElement("br");
241 br.style.clear = "both";
242 span.appendChild(br);
243 }
244 const dmsg = messageToDOM(m.xmsg || "??empty??");
245 span.appendChild(dmsg);
246 if( m.xfrom!=_me ){
247 span.classList.add('chat-mx');
248 }else{
249 span.classList.add('chat-ms');
250 }
251
--- tools/chat.tcl
+++ tools/chat.tcl
@@ -58,24 +58,29 @@
58 <hr>
59 <p>
60 <a href="chat/env">CGI environment</a> |
61 <a href="chat/self">Wapp script</a>
62 <style>
63 .chat-message {/*style common to .chat-mx and .chat-ms*/
64 padding: 0.5em;
65 border-radius: 0.5em;
66 border: 1px solid black;
67 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
68 /* Bob Ross might approve of... */
69 /*
70 background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
71 border-bottom: solid 3px #c58668;
72 */
73 }
74 .chat-mx {
75 float: left;
76 margin-right: 3em;
 
 
 
77 }
78 .chat-ms {
79 float: right;
80 margin-left: 3em;
 
 
81 background-color: #d2dde1;
 
82 }
83 \#dialog {
84 width: 97%;
85 }
86 \#chat-input-area {
@@ -136,11 +141,13 @@
141 const rxUrl = /\\b(?:https?|ftp):\\/\\/\[a-z0-9-+&@\#\\/%?=~_|!:,.;]*\[a-z0-9-+&@\#\\/%=~_|]/gim;
142 const rxAtName = /@\\w+/gmi;
143 // ^^^ achtung, extra backslashes needed for the outer TCL.
144 // Converts a message string to a message-containing DOM element
145 // and returns that element, which may contain child elements.
146 // If 2nd arg is passed, it must be a DOM element to which all
147 // child elements are appended.
148 const messageToDOM = function f(str, tgtElem){
149 "use strict";
150 if(!f.rxUrl){
151 f.rxUrl = rxUrl;
152 f.rxAt = rxAtName;
153 f.rxNS = /\\S/;
@@ -198,11 +205,11 @@
205 }
206 //console.debug("accum2 =",accum2);
207 });
208 delete f.accum;
209 //console.debug("accum2 =",accum2);
210 const span = tgtElem || f.ce('span');
211 accum2.forEach(function(e){
212 if('string'===typeof e) e = f.ct(e);
213 span.appendChild(e);
214 });
215 //console.debug("span =",span.innerHTML);
@@ -239,12 +246,12 @@
246 }
247 let br = document.createElement("br");
248 br.style.clear = "both";
249 span.appendChild(br);
250 }
251 messageToDOM(m.xmsg || "??empty??", span);
252 span.classList.add('chat-message');
253 if( m.xfrom!=_me ){
254 span.classList.add('chat-mx');
255 }else{
256 span.classList.add('chat-ms');
257 }
258

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button