Fossil

Check-in [cdc6dec7c7]
Login

Check-in [cdc6dec7c7]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:chat: reworked the auto-resize algorithm to account for elements which "incorrectly" report a height of 0. Experimentally removed the 2em bottom gap at the end of the message reportedly required by Safari.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: cdc6dec7c78aedfa7c2cf5812514316c46f06ad4b211c1d48aa1b69a7e53b200
User & Date: stephan 2020-12-27 20:33:23.079
Context
2020-12-27
21:00
Put the <form> outside of the chat-input-area <div>. Safari requires this. ... (check-in: ca60df9238 user: drh tags: trunk)
20:33
chat: reworked the auto-resize algorithm to account for elements which "incorrectly" report a height of 0. Experimentally removed the 2em bottom gap at the end of the message reportedly required by Safari. ... (check-in: cdc6dec7c7 user: stephan tags: trunk)
18:56
chat: improved the 'is previous message currently visible' calculation for the 'should we scroll?' heuristic. ... (check-in: b3f2eee546 user: stephan tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.js.
︙︙
46
47
48
49
50
51
52
53

54
55

56

57
58
59
60
61











62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

  const ForceResizeKludge = 0 ? function(){} : (function f(){
    /* Workaround for Safari mayhem regarding use of vh CSS units....
       We tried to use vh units to set the content area size for the
       chat layout, but Safari chokes on that, so we calculate that
       height here: 85% when in "normal" mode and 95% in chat-only
       mode. Larger than ~95% is too big for Firefox on Android,
       causing the input area to move off-screen. */
    if(!f.eHead){

      f.eHead = document.querySelector('body > div.header');
      f.eMenu = document.querySelector('body > div.mainmenu');

      f.eFoot = document.querySelector('body > div.footer');

      f.contentArea = E1('div.content');
      f.extra = 0;
      f.measure = function(e){
        if(e){
          const m = window.getComputedStyle(e);











          f.extra += parseFloat(m.height);
        }
      };
    }
    const bcl = document.body.classList;
    const resized = function(){
      const wh = window.innerHeight,
            com = bcl.contains('chat-only-mode');
      var ht;
      if(com){
        ht = wh;
      }else{
        f.extra = 0;
        [f.eHead, f.eMenu, f.eFoot].forEach(f.measure);
        ht = wh - f.extra;
      }
      f.contentArea.style.height =
        f.contentArea.style.maxHeight = [
          "calc(", (ht>=100 ? ht : 100), "px",
          " - 1em"/*fudge value*/,")"
        ].join('');








|
>
|
|
>
|
>


|
|
|
>
>
>
>
>
>
>
>
>
>
>
|












|








46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

  const ForceResizeKludge = 0 ? function(){} : (function f(){
    /* Workaround for Safari mayhem regarding use of vh CSS units....
       We tried to use vh units to set the content area size for the
       chat layout, but Safari chokes on that, so we calculate that
       height here: 85% when in "normal" mode and 95% in chat-only
       mode. Larger than ~95% is too big for Firefox on Android,
       causing the input area to move off-screen. */
    if(!f.elemsToCount){
      f.elemsToCount = [
        document.querySelector('body > div.header'),
        document.querySelector('body > div.mainmenu'),
        document.querySelector('body > #hbdrop'),
        document.querySelector('body > div.footer')
      ];
      f.contentArea = E1('div.content');
      f.extra = 0;
      f.measure = function callee(e,depth){
        if(!e) return;
        const m = e.getBoundingClientRect();
        //console.debug("level-"+depth+" rect",e.className,m.top,m.bottom);
        if(0===depth){
          callee.top = m.top;
          callee.bottom = m.bottom;
        }else{
          callee.top = m.top ? Math.min(callee.top, m.top) : callee.top;
          callee.bottom = Math.max(callee.bottom, m.bottom);
        }
        Array.prototype.forEach.call(e.children,(e)=>callee(e,depth+1));
        if(0===depth){
          //console.debug("measure() height:",e.className, callee.top, callee.bottom, (callee.bottom - callee.top));
          f.extra += callee.bottom - callee.top;
        }
      };
    }
    const bcl = document.body.classList;
    const resized = function(){
      const wh = window.innerHeight,
            com = bcl.contains('chat-only-mode');
      var ht;
      if(com){
        ht = wh;
      }else{
        f.extra = 0;
        f.elemsToCount.forEach((e)=>e ? f.measure(e,0) : false);
        ht = wh - f.extra;
      }
      f.contentArea.style.height =
        f.contentArea.style.maxHeight = [
          "calc(", (ht>=100 ? ht : 100), "px",
          " - 1em"/*fudge value*/,")"
        ].join('');
︙︙
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

    window.addEventListener('resize',function(ev){
      clearTimeout(doit);
      doit = setTimeout(resized, 100);
    }, false);
    resized();
    return resized;
  })();

  const Chat = (function(){
    const cs = {
      e:{/*map of certain DOM elements.*/
        messageInjectPoint: E1('#message-inject-point'),
        pageTitle: E1('head title'),
        loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
        inputWrapper: E1("#chat-input-area"),








|








104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

    window.addEventListener('resize',function(ev){
      clearTimeout(doit);
      doit = setTimeout(resized, 100);
    }, false);
    resized();
    return resized;
  })();
  fossil.FRK = ForceResizeKludge/*for debugging*/;
  const Chat = (function(){
    const cs = {
      e:{/*map of certain DOM elements.*/
        messageInjectPoint: E1('#message-inject-point'),
        pageTitle: E1('head title'),
        loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
        inputWrapper: E1("#chat-input-area"),
︙︙
Changes to src/default.css.
︙︙
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687

  position: initial /*sticky currently disabled due to scrolling-related issues*/;
  bottom: 0;
}
body.chat:not(.chat-only-mode) #chat-input-area{
  /* Safari user reports that 2em is necessary to keep the file selection
     widget from overlapping the page footer, whereas a margin of 0 is fine
     for FF/Chrome (and 2em is a *huge* waste of space for those). */
  margin-bottom: 2em;
}

/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;








|








1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687

  position: initial /*sticky currently disabled due to scrolling-related issues*/;
  bottom: 0;
}
body.chat:not(.chat-only-mode) #chat-input-area{
  /* Safari user reports that 2em is necessary to keep the file selection
     widget from overlapping the page footer, whereas a margin of 0 is fine
     for FF/Chrome (and 2em is a *huge* waste of space for those). */
  margin-bottom: 0;
}

/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
︙︙