Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Overview
| Comment: | chat: reintegrated partial changes from [b0ab6cbd3] and [670732a6]: remove skin-induced div.content margins in chat-only mode and cap image preview size to avoid screen overflow. Moved #dbgMessage element out of the way at app startup to avoid it potentially influencing our flexbox layout, and include that element in the to-hide list for chat-only mode. Edit: Martin G. reports that this one also causes Grief with Safari, but in different ways that before. |
|---|---|
| Downloads: | Tarball | ZIP archive |
| Timelines: | family | ancestors | no-joy |
| Files: | files | file ages | folders |
| SHA3-256: |
7c3cf7a189f075ab34786c340535d35a |
| User & Date: | stephan 2020-12-27 04:50:13.849 |
| Original Comment: | chat: reintegrated partial changes from [b0ab6cbd3] and [670732a6]: remove skin-induced div.content margins in chat-only mode and cap image preview size to avoid screen overflow. Moved #dbgMessage element out of the way at app startup to avoid it potentially influencing our flexbox layout, and include that element in the to-hide list for chat-only mode. |
Context
|
2020-12-27
| ||
| 04:50 | chat: reintegrated partial changes from [b0ab6cbd3] and [670732a6]: remove skin-induced div.content margins in chat-only mode and cap image preview size to avoid screen overflow. Moved #dbgMessage element out of the way at app startup to avoid it potentially influencing our flexbox layout, and include that element in the to-hide list for chat-only mode. Edit: Martin G. reports that this one also causes Grief with Safari, but in different ways that before. ... (Closed-Leaf check-in: 7c3cf7a189 user: stephan tags: no-joy) | |
| 04:30 | chat: re-integrated JS-based div.content resizer to do approximately what the preferred 'vh' CSS units would, but upon which Safari apparently chokes. Message area now gets a scrollbar. This works reasonably well on FF/Chrome on both Linux and Android. The jury is still out on Safari. Edit: Martin G. confirmed this one also suffers from the "collapsing messages" problem on Safari. ... (check-in: d488f5c66c user: stephan tags: no-joy) | |
Changes
Changes to src/chat.js.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/**
This file contains the client-side implementation of fossil's /chat
application.
*/
(function(){
const F = window.fossil, D = F.dom;
const E1 = function(selector){
const e = document.querySelector(selector);
if(!e) throw new Error("missing required DOM element: "+selector);
return e;
};
const isInViewport = function(e) {
const rect = e.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
| > > > > > > > > > > | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/**
This file contains the client-side implementation of fossil's /chat
application.
*/
(function(){
const F = window.fossil, D = F.dom;
const E1 = function(selector){
const e = document.querySelector(selector);
if(!e) throw new Error("missing required DOM element: "+selector);
return e;
};
(function(){
let dbg = document.querySelector('#debugMsg');
if(dbg){
/* This can inadvertently influence our flexbox layouts, so move
it out of the way. */
D.append(document.body,dbg);
}
})();
const isInViewport = function(e) {
const rect = e.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
|
| ︙ | ︙ | |||
28 29 30 31 32 33 34 |
causing the input area to move off-screen. */
const contentArea = E1('div.content'),
bcl = document.body.classList;
const resized = function(){
const wh = window.innerHeight,
mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
contentArea.style.maxHeight = (wh * mult)+"px";
| | | 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
causing the input area to move off-screen. */
const contentArea = E1('div.content'),
bcl = document.body.classList;
const resized = function(){
const wh = window.innerHeight,
mult = bcl.contains('chat-only-mode') ? 0.95 : 0.85;
contentArea.style.maxHeight = (wh * mult)+"px";
//console.debug("resized.",wh, mult, window.getComputedStyle(contentArea).maxHeight);
};
var doit;
window.addEventListener('resize',function(ev){
clearTimeout(doit);
doit = setTimeout(resized, 100);
}, false);
resized();
|
| ︙ | ︙ | |||
177 178 179 180 181 182 183 |
footer, leaving only the chat application visible to the
user.
*/
chatOnlyMode: function f(yes){
if(undefined === f.elemsToToggle){
f.elemsToToggle = [];
document.querySelectorAll(
| > | > > | 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 |
footer, leaving only the chat application visible to the
user.
*/
chatOnlyMode: function f(yes){
if(undefined === f.elemsToToggle){
f.elemsToToggle = [];
document.querySelectorAll(
["body > div.header",
"body > div.mainmenu",
"body > div.footer",
"#debugMsg"].join(',')
).forEach((e)=>f.elemsToToggle.push(e));
}
if(!arguments.length) yes = true;
if(yes === this.isChatOnlyMode()) return this;
if(yes){
D.addClass(f.elemsToToggle, 'hidden');
D.addClass(document.body, 'chat-only-mode');
|
| ︙ | ︙ |
Changes to src/default.css.
| ︙ | ︙ | |||
1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 |
the BOTTOM in bottom-up chat mode, such that they scroll up
instead of down, we have to use column-reverse layout, which
changes #chat-messages-wrapper's "gravity" for purposes of
scrolling! If we instead use flex-direction:column then each new
message pushes #chat-input-area down further off the screen!
*/
align-items: stretch;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
display: flex;
flex-direction: column;
padding: 0.5em 1em;
border-bottom: none;
border-top: 1px solid black;
margin-bottom: 0;
margin-top: 0.5em;
| > > > > > > > > < < | 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 |
the BOTTOM in bottom-up chat mode, such that they scroll up
instead of down, we have to use column-reverse layout, which
changes #chat-messages-wrapper's "gravity" for purposes of
scrolling! If we instead use flex-direction:column then each new
message pushes #chat-input-area down further off the screen!
*/
align-items: stretch;
}
body.chat.chat-only-mode div.content {
/*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/;
/* Some skins set margins and a max-width on div.content, but we
needn't(?) honor those in chat-only mode. */
margin: 0;
width: 100%;
max-width: 100%;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
display: flex;
flex-direction: column;
padding: 0.5em 1em;
border-bottom: none;
border-top: 1px solid black;
margin-bottom: 0;
margin-top: 0.5em;
}
/* Widget holding the chat message input field, send button, and
settings button. */
body.chat #chat-input-line {
display: flex;
flex-direction: row;
margin-bottom: 0.25em;
|
| ︙ | ︙ | |||
1718 1719 1720 1721 1722 1723 1724 1725 |
/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
flex: 0 1 auto;
padding: 0.5em 1em;
margin-left: 0.5em;
white-space: pre;
font-family: monospace;
}
| > > > > | 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 |
/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
flex: 0 1 auto;
padding: 0.5em 1em;
margin-left: 0.5em;
white-space: pre;
font-family: monospace;
}
body.chat #chat-drop-details img {
max-width: 45%;
max-height: 45%;
}
|