Fossil SCM

chat: added buttons to jump to top/bottom of message list. Added a huge margin under the input area because Safari demands it. Improved the div.content auto-resize calculation to get a more precise fit.

stephan 2020-12-27 08:32 trunk
Commit 24080827600388c6d8fb23d9d399dfe2e3f3c2b448f5b95dcc1d0525b795a54d
Parent 6c28d7d6cb59346…
3 files changed +2 +56 -6 +18 -4
~ src/chat.c ~ src/chat.js ~ src/default.css
M src/chat.c
+2
--- src/chat.c
+++ src/chat.c
@@ -120,10 +120,12 @@
120120
 @ <input type="text" name="msg" id="chat-input-single" \
121121
 @ placeholder="Type message here." autocomplete="off">
122122
 @ <textarea rows="8" id="chat-input-multi" \
123123
 @ placeholder="Type message here" class="hidden"></textarea>
124124
 @ <input type="submit" value="Send" id="chat-message-submit">
125
+ @ <button id="chat-scroll-bottom">&darr;</button>
126
+ @ <button id="chat-scroll-top">&uarr;</button>
125127
 @ <span id="chat-settings-button" class="settings-icon"></span>
126128
 @ </div>
127129
 @ <div id='chat-input-file-area'>
128130
 @ <div class='file-selection-wrapper'>
129131
 @ <div class='help-buttonlet'>
130132
--- src/chat.c
+++ src/chat.c
@@ -120,10 +120,12 @@
120 @ <input type="text" name="msg" id="chat-input-single" \
121 @ placeholder="Type message here." autocomplete="off">
122 @ <textarea rows="8" id="chat-input-multi" \
123 @ placeholder="Type message here" class="hidden"></textarea>
124 @ <input type="submit" value="Send" id="chat-message-submit">
 
 
125 @ <span id="chat-settings-button" class="settings-icon"></span>
126 @ </div>
127 @ <div id='chat-input-file-area'>
128 @ <div class='file-selection-wrapper'>
129 @ <div class='help-buttonlet'>
130
--- src/chat.c
+++ src/chat.c
@@ -120,10 +120,12 @@
120 @ <input type="text" name="msg" id="chat-input-single" \
121 @ placeholder="Type message here." autocomplete="off">
122 @ <textarea rows="8" id="chat-input-multi" \
123 @ placeholder="Type message here" class="hidden"></textarea>
124 @ <input type="submit" value="Send" id="chat-message-submit">
125 @ <button id="chat-scroll-bottom">&darr;</button>
126 @ <button id="chat-scroll-top">&uarr;</button>
127 @ <span id="chat-settings-button" class="settings-icon"></span>
128 @ </div>
129 @ <div id='chat-input-file-area'>
130 @ <div class='file-selection-wrapper'>
131 @ <div class='help-buttonlet'>
132
M src/chat.js
+56 -6
--- src/chat.js
+++ src/chat.js
@@ -25,24 +25,49 @@
2525
 /* This can inadvertently influence our flexbox layouts, so move
2626
 it out of the way. */
2727
 D.append(document.body,dbg);
2828
 }
2929
 })();
30
- const ForceResizeKludge = 0 ? function(){} : (function(){
30
+ const ForceResizeKludge = 0 ? function(){} : (function f(){
3131
 /* Workaround for Safari mayhem regarding use of vh CSS units....
3232
 We tried to use vh units to set the content area size for the
3333
 chat layout, but Safari chokes on that, so we calculate that
3434
 height here: 85% when in "normal" mode and 95% in chat-only
3535
 mode. Larger than ~95% is too big for Firefox on Android,
3636
 causing the input area to move off-screen. */
37
- const contentArea = E1('div.content'),
38
- bcl = document.body.classList;
37
+ if(!f.eHead){
38
+ f.eHead = document.querySelector('body > div.header');
39
+ f.eMenu = document.querySelector('body > div.mainmenu');
40
+ f.eFoot = document.querySelector('body > div.footer');
41
+ f.contentArea = E1('div.content');
42
+ f.extra = 0;
43
+ f.measure = function(e){
44
+ if(e){
45
+ const m = window.getComputedStyle(e);
46
+ f.extra += parseFloat(m.height);
47
+ }
48
+ };
49
+ }
50
+ const bcl = document.body.classList;
3951
 const resized = function(){
4052
 const wh = window.innerHeight,
41
- mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
42
- contentArea.style.height = contentArea.style.maxHeight = (wh * mult)+"px";
43
- //console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
53
+ com = bcl.contains('chat-only-mode');
54
+ var ht;
55
+ if(com){
56
+ ht = wh - 10/*fudge value*/;
57
+ }else{
58
+ f.extra = 0;
59
+ [f.eHead, f.eMenu, f.eFoot].forEach(f.measure);
60
+ ht = wh - f.extra - 10/*fudge value*/;
61
+ }
62
+ f.contentArea.style.height =
63
+ f.contentArea.style.maxHeight = (ht>=100 ? ht : 100)+"px";
64
+ if(false){
65
+ console.debug("resized.",wh, f.extra, ht,
66
+ window.getComputedStyle(f.contentArea).maxHeight,
67
+ f.contentArea);
68
+ }
4469
 };
4570
 var doit;
4671
 window.addEventListener('resize',function(ev){
4772
 clearTimeout(doit);
4873
 doit = setTimeout(resized, 100);
@@ -254,10 +279,23 @@
254279
 D.removeClass(f.elemsToToggle, 'hidden');
255280
 D.removeClass(document.body, 'chat-only-mode');
256281
 }
257282
 ForceResizeKludge();
258283
 return this;
284
+ },
285
+ /** Tries to scroll the message area to...
286
+ <0 = top of the message list, >1 = bottom of the message list,
287
+ 0 == the newest message (normally the same position as >1).
288
+ */
289
+ scrollMessagesTo: function(where){
290
+ if(where<0){
291
+ Chat.e.messagesWrapper.scrollTop = 0;
292
+ }else if(where>0){
293
+ Chat.e.messagesWrapper.scrollTop = Chat.e.messagesWrapper.scrollHeight;
294
+ }else if(Chat.e.newestMessage){
295
+ Chat.e.newestMessage.scrollIntoView();
296
+ }
259297
 },
260298
 toggleChatOnlyMode: function(){
261299
 return this.chatOnlyMode(!this.isChatOnlyMode());
262300
 },
263301
 settings:{
@@ -813,10 +851,22 @@
813851
 const rect = settingsButton.getBoundingClientRect();
814852
 return rect.top - popupSize.height -2;
815853
 };
816854
 })()/*#chat-settings-button setup*/;
817855
856
+ (function(){ /* buttons to scroll to the begin/end of the messages. */
857
+ E1('#chat-scroll-bottom').addEventListener('click',function(ev){
858
+ ev.preventDefault();
859
+ Chat.scrollMessagesTo(1);
860
+ return false;
861
+ });
862
+ E1('#chat-scroll-top').addEventListener('click',function(ev){
863
+ ev.preventDefault();
864
+ Chat.scrollMessagesTo(-1);
865
+ return false;
866
+ });
867
+ })();
818868
819869
 /** Callback for poll() to inject new content into the page. jx ==
820870
 the response from /chat-poll. If atEnd is true, the message is
821871
 appended to the end of the chat list, else the beginning (the
822872
 default). */
823873
--- src/chat.js
+++ src/chat.js
@@ -25,24 +25,49 @@
25 /* This can inadvertently influence our flexbox layouts, so move
26 it out of the way. */
27 D.append(document.body,dbg);
28 }
29 })();
30 const ForceResizeKludge = 0 ? function(){} : (function(){
31 /* Workaround for Safari mayhem regarding use of vh CSS units....
32 We tried to use vh units to set the content area size for the
33 chat layout, but Safari chokes on that, so we calculate that
34 height here: 85% when in "normal" mode and 95% in chat-only
35 mode. Larger than ~95% is too big for Firefox on Android,
36 causing the input area to move off-screen. */
37 const contentArea = E1('div.content'),
38 bcl = document.body.classList;
 
 
 
 
 
 
 
 
 
 
 
 
39 const resized = function(){
40 const wh = window.innerHeight,
41 mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
42 contentArea.style.height = contentArea.style.maxHeight = (wh * mult)+"px";
43 //console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
 
 
 
 
 
 
 
 
 
 
 
 
 
44 };
45 var doit;
46 window.addEventListener('resize',function(ev){
47 clearTimeout(doit);
48 doit = setTimeout(resized, 100);
@@ -254,10 +279,23 @@
254 D.removeClass(f.elemsToToggle, 'hidden');
255 D.removeClass(document.body, 'chat-only-mode');
256 }
257 ForceResizeKludge();
258 return this;
 
 
 
 
 
 
 
 
 
 
 
 
 
259 },
260 toggleChatOnlyMode: function(){
261 return this.chatOnlyMode(!this.isChatOnlyMode());
262 },
263 settings:{
@@ -813,10 +851,22 @@
813 const rect = settingsButton.getBoundingClientRect();
814 return rect.top - popupSize.height -2;
815 };
816 })()/*#chat-settings-button setup*/;
817
 
 
 
 
 
 
 
 
 
 
 
 
818
819 /** Callback for poll() to inject new content into the page. jx ==
820 the response from /chat-poll. If atEnd is true, the message is
821 appended to the end of the chat list, else the beginning (the
822 default). */
823
--- src/chat.js
+++ src/chat.js
@@ -25,24 +25,49 @@
25 /* This can inadvertently influence our flexbox layouts, so move
26 it out of the way. */
27 D.append(document.body,dbg);
28 }
29 })();
30 const ForceResizeKludge = 0 ? function(){} : (function f(){
31 /* Workaround for Safari mayhem regarding use of vh CSS units....
32 We tried to use vh units to set the content area size for the
33 chat layout, but Safari chokes on that, so we calculate that
34 height here: 85% when in "normal" mode and 95% in chat-only
35 mode. Larger than ~95% is too big for Firefox on Android,
36 causing the input area to move off-screen. */
37 if(!f.eHead){
38 f.eHead = document.querySelector('body > div.header');
39 f.eMenu = document.querySelector('body > div.mainmenu');
40 f.eFoot = document.querySelector('body > div.footer');
41 f.contentArea = E1('div.content');
42 f.extra = 0;
43 f.measure = function(e){
44 if(e){
45 const m = window.getComputedStyle(e);
46 f.extra += parseFloat(m.height);
47 }
48 };
49 }
50 const bcl = document.body.classList;
51 const resized = function(){
52 const wh = window.innerHeight,
53 com = bcl.contains('chat-only-mode');
54 var ht;
55 if(com){
56 ht = wh - 10/*fudge value*/;
57 }else{
58 f.extra = 0;
59 [f.eHead, f.eMenu, f.eFoot].forEach(f.measure);
60 ht = wh - f.extra - 10/*fudge value*/;
61 }
62 f.contentArea.style.height =
63 f.contentArea.style.maxHeight = (ht>=100 ? ht : 100)+"px";
64 if(false){
65 console.debug("resized.",wh, f.extra, ht,
66 window.getComputedStyle(f.contentArea).maxHeight,
67 f.contentArea);
68 }
69 };
70 var doit;
71 window.addEventListener('resize',function(ev){
72 clearTimeout(doit);
73 doit = setTimeout(resized, 100);
@@ -254,10 +279,23 @@
279 D.removeClass(f.elemsToToggle, 'hidden');
280 D.removeClass(document.body, 'chat-only-mode');
281 }
282 ForceResizeKludge();
283 return this;
284 },
285 /** Tries to scroll the message area to...
286 <0 = top of the message list, >1 = bottom of the message list,
287 0 == the newest message (normally the same position as >1).
288 */
289 scrollMessagesTo: function(where){
290 if(where<0){
291 Chat.e.messagesWrapper.scrollTop = 0;
292 }else if(where>0){
293 Chat.e.messagesWrapper.scrollTop = Chat.e.messagesWrapper.scrollHeight;
294 }else if(Chat.e.newestMessage){
295 Chat.e.newestMessage.scrollIntoView();
296 }
297 },
298 toggleChatOnlyMode: function(){
299 return this.chatOnlyMode(!this.isChatOnlyMode());
300 },
301 settings:{
@@ -813,10 +851,22 @@
851 const rect = settingsButton.getBoundingClientRect();
852 return rect.top - popupSize.height -2;
853 };
854 })()/*#chat-settings-button setup*/;
855
856 (function(){ /* buttons to scroll to the begin/end of the messages. */
857 E1('#chat-scroll-bottom').addEventListener('click',function(ev){
858 ev.preventDefault();
859 Chat.scrollMessagesTo(1);
860 return false;
861 });
862 E1('#chat-scroll-top').addEventListener('click',function(ev){
863 ev.preventDefault();
864 Chat.scrollMessagesTo(-1);
865 return false;
866 });
867 })();
868
869 /** Callback for poll() to inject new content into the page. jx ==
870 the response from /chat-poll. If atEnd is true, the message is
871 appended to the end of the chat list, else the beginning (the
872 default). */
873
M src/default.css
+18 -4
--- src/default.css
+++ src/default.css
@@ -1661,27 +1661,41 @@
16611661
 display: flex;
16621662
 flex-direction: column;
16631663
 padding: 0.5em 1em;
16641664
 border-bottom: none;
16651665
 border-top: 1px solid black;
1666
- margin-bottom: 0.25em;
1667
- margin-top: 0.5em;
1666
+ margin: 0.5em 1em 0 1em;
16681667
 position: initial /*sticky currently disabled due to scrolling-related issues*/;
16691668
 bottom: 0;
16701669
 }
1670
+body.chat:not(.chat-only-mode) #chat-input-area{
1671
+ /* Safari user reports that 2em is necessary to keep the file selection
1672
+ widget from overlapping the page footer, whereas a margin of 0 is fine
1673
+ for FF/Chrome (and 2em is a *huge* waste of space for those). */
1674
+ margin-bottom: 2em;
1675
+}
1676
+
16711677
 /* Widget holding the chat message input field, send button, and
16721678
 settings button. */
16731679
 body.chat #chat-input-line {
16741680
 display: flex;
16751681
 flex-direction: row;
16761682
 margin-bottom: 0.25em;
16771683
 align-items: flex-start;
16781684
 }
1679
-body.chat #chat-input-line > input[type=submit] {
1685
+body.chat #chat-input-line > input[type=submit],
1686
+body.chat #chat-input-line > #chat-settings-button,
1687
+body.chat #chat-input-line > button {
16801688
 flex: 1 5 auto;
16811689
 max-width: 6em;
1682
- margin: 0 1em;
1690
+ margin: 0 0.25em;
1691
+}
1692
+body.chat #chat-input-line > button {
1693
+ max-width: 4em;
1694
+}
1695
+body.chat #chat-input-line > #chat-settings-button{
1696
+ margin: 0 0 0 0.25em;
16831697
 }
16841698
 body.chat #chat-input-line > input[type=text],
16851699
 body.chat #chat-input-line > textarea {
16861700
 flex: 5 1 auto;
16871701
 }
16881702
--- src/default.css
+++ src/default.css
@@ -1661,27 +1661,41 @@
1661 display: flex;
1662 flex-direction: column;
1663 padding: 0.5em 1em;
1664 border-bottom: none;
1665 border-top: 1px solid black;
1666 margin-bottom: 0.25em;
1667 margin-top: 0.5em;
1668 position: initial /*sticky currently disabled due to scrolling-related issues*/;
1669 bottom: 0;
1670 }
 
 
 
 
 
 
 
1671 /* Widget holding the chat message input field, send button, and
1672 settings button. */
1673 body.chat #chat-input-line {
1674 display: flex;
1675 flex-direction: row;
1676 margin-bottom: 0.25em;
1677 align-items: flex-start;
1678 }
1679 body.chat #chat-input-line > input[type=submit] {
 
 
1680 flex: 1 5 auto;
1681 max-width: 6em;
1682 margin: 0 1em;
 
 
 
 
 
 
1683 }
1684 body.chat #chat-input-line > input[type=text],
1685 body.chat #chat-input-line > textarea {
1686 flex: 5 1 auto;
1687 }
1688
--- src/default.css
+++ src/default.css
@@ -1661,27 +1661,41 @@
1661 display: flex;
1662 flex-direction: column;
1663 padding: 0.5em 1em;
1664 border-bottom: none;
1665 border-top: 1px solid black;
1666 margin: 0.5em 1em 0 1em;
 
1667 position: initial /*sticky currently disabled due to scrolling-related issues*/;
1668 bottom: 0;
1669 }
1670 body.chat:not(.chat-only-mode) #chat-input-area{
1671 /* Safari user reports that 2em is necessary to keep the file selection
1672 widget from overlapping the page footer, whereas a margin of 0 is fine
1673 for FF/Chrome (and 2em is a *huge* waste of space for those). */
1674 margin-bottom: 2em;
1675 }
1676
1677 /* Widget holding the chat message input field, send button, and
1678 settings button. */
1679 body.chat #chat-input-line {
1680 display: flex;
1681 flex-direction: row;
1682 margin-bottom: 0.25em;
1683 align-items: flex-start;
1684 }
1685 body.chat #chat-input-line > input[type=submit],
1686 body.chat #chat-input-line > #chat-settings-button,
1687 body.chat #chat-input-line > button {
1688 flex: 1 5 auto;
1689 max-width: 6em;
1690 margin: 0 0.25em;
1691 }
1692 body.chat #chat-input-line > button {
1693 max-width: 4em;
1694 }
1695 body.chat #chat-input-line > #chat-settings-button{
1696 margin: 0 0 0 0.25em;
1697 }
1698 body.chat #chat-input-line > input[type=text],
1699 body.chat #chat-input-line > textarea {
1700 flex: 5 1 auto;
1701 }
1702

Keyboard Shortcuts

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