Many hyperlinks are disabled.
Use anonymous login
to enable hyperlinks.
Changes In Branch chat-safari-experiments Excluding Merge-Ins
This is equivalent to a diff from a6650eb776 to 8747d85ea0
2020-12-27
| ||
01:58 | chat: Safari has a severe allergic reaction to CSS vh units, so calculate the size of the affected DOM element in JS code at app startup and when the window resizes. Closed-Leaf check-in: 8747d85ea0 user: stephan tags: chat-safari-breaks-here, chat-safari-experiments | |
01:07 | CSS tweaks to attempt to counter some Safari message spacing problems - cannot test locally. Also limit the chat image preview to 40% of the viewport width/height, to avoid it taking up the whole screen for a large image. check-in: 670732a68f user: stephan tags: chat-safari-breaks-here, chat-safari-experiments | |
00:32 | Force bottom-up chat mode, now that the toggle is removed but it might still be set in some localStorage storage. Closed-Leaf check-in: a6650eb776 user: stephan tags: chat-safari-breaks-here | |
00:27 | Remove skin-installed div.content max-width limitations when running in chat-only mode, and expand to the full width. check-in: b0ab6cbd3b user: stephan tags: chat-safari-breaks-here | |
Changes to src/chat.js.
︙ | ︙ | |||
14 15 16 17 18 19 20 21 22 23 24 25 26 27 | return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; //document.body.classList.add('chat-only-mode'); const Chat = (function(){ const cs = { e:{/*map of certain DOM elements.*/ messageInjectPoint: E1('#message-inject-point'), pageTitle: E1('head title'), loadToolbar: undefined /* the load-posts toolbar (dynamically created) */, | > > > > > > > > > > > > > > > > > > > > > > > > | 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; const ForceResizeKludge = (function(){ /* 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. */ const contentArea = E1('div.content'); const resized = function(){ const wh = window.innerHeight, mult = document.body.classList.contains('chat-only-mode') ? 0.95 : 0.85; contentArea.style.maxHeight = (wh * mult)+"px"; //console.debug("resized.",wh, window.getComputedStyle(contentArea).maxHeight); }; var doit; window.addEventListener('resize',function(ev){ clearTimeout(doit); doit = setTimeout(resized, 100); }, false); resized(); return resized; })(); //document.body.classList.add('chat-only-mode'); const Chat = (function(){ const cs = { e:{/*map of certain DOM elements.*/ messageInjectPoint: E1('#message-inject-point'), pageTitle: E1('head title'), loadToolbar: undefined /* the load-posts toolbar (dynamically created) */, |
︙ | ︙ | |||
168 169 170 171 172 173 174 175 176 177 178 179 180 181 | document.body.scroll(0,document.body.height); }else{ D.removeClass(f.elemsToToggle, 'hidden'); D.removeClass(document.body, 'chat-only-mode'); } const msg = document.querySelector('.message-widget'); if(msg) setTimeout(()=>msg.scrollIntoView(),0); return this; }, toggleChatOnlyMode: function(){ return this.chatOnlyMode(!this.isChatOnlyMode()); }, settings:{ get: (k,dflt)=>F.storage.get(k,dflt), | > | 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 | document.body.scroll(0,document.body.height); }else{ D.removeClass(f.elemsToToggle, 'hidden'); D.removeClass(document.body, 'chat-only-mode'); } const msg = document.querySelector('.message-widget'); if(msg) setTimeout(()=>msg.scrollIntoView(),0); ForceResizeKludge(); return this; }, toggleChatOnlyMode: function(){ return this.chatOnlyMode(!this.isChatOnlyMode()); }, settings:{ get: (k,dflt)=>F.storage.get(k,dflt), |
︙ | ︙ | |||
654 655 656 657 658 659 660 | } },{ label: "Left-align my posts", boolValue: ()=>!document.body.classList.contains('my-messages-right'), callback: function f(){ document.body.classList.toggle('my-messages-right'); } | | > | > | 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 | } },{ label: "Left-align my posts", boolValue: ()=>!document.body.classList.contains('my-messages-right'), callback: function f(){ document.body.classList.toggle('my-messages-right'); } },{ label: "Bottom-up chat", disable: true, boolValue: ()=>document.body.classList.contains('chat-bottom-up'), callback: function(){ document.body.classList.toggle('chat-bottom-up'); Chat.settings.set('bottom-up', document.body.classList.contains('chat-bottom-up')); setTimeout(()=>Chat.e.inputWrapper.scrollIntoView(), 0); } },{ label: "Images inline", boolValue: ()=>Chat.settings.getBool('images-inline'), callback: function(){ const v = Chat.settings.getBool('images-inline',true); Chat.settings.set('images-inline', !v); F.toast.message("Image mode set to "+(v ? "hyperlink" : "inline")+"."); } }]; /** Rebuild the menu each time it's shown so that the toggles can show their current values. */ settingsPopup.options.refresh = function(){ D.clearElement(this.e); settingsOps.forEach(function(op){ if(op.disable) return; const line = D.addClass(D.span(), 'menu-entry'); const btn = D.append(D.addClass(D.span(), 'button'), op.label); D.attr(btn, 'role', 'button'); const callback = function(ev){ settingsPopup.hide(); op.callback.call(this,ev); }; |
︙ | ︙ |
Changes to src/default.css.
︙ | ︙ | |||
1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 | border: 1px solid rgba(0,0,0,0.2); box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); padding: 0.25em 0.5em; margin-top: 0; min-width: 9em /*avoid unsightly "underlap" with the neighboring .message-widget-tab element*/; white-space: pre-wrap/*needed for multi-line edits*/; } body.chat.monospace-messages .message-widget-content, body.chat.monospace-messages textarea, body.chat.monospace-messages input[type=text]{ font-family: monospace; } /* User name and timestamp (a LEGEND-like element) */ body.chat .message-widget .message-widget-tab { border-radius: 0.25em 0.25em 0 0; | > | | 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 | border: 1px solid rgba(0,0,0,0.2); box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); padding: 0.25em 0.5em; margin-top: 0; min-width: 9em /*avoid unsightly "underlap" with the neighboring .message-widget-tab element*/; white-space: pre-wrap/*needed for multi-line edits*/; flex: 1 1 auto; } body.chat.monospace-messages .message-widget-content, body.chat.monospace-messages textarea, body.chat.monospace-messages input[type=text]{ font-family: monospace; } /* User name and timestamp (a LEGEND-like element) */ body.chat .message-widget .message-widget-tab { border-radius: 0.25em 0.25em 0 0; margin: 0.25em 0.25em 0em 0.15em; padding: 0 0.5em 0.15em 0.5em; cursor: pointer; white-space: nowrap; } body.chat .fossil-tooltip.help-buttonlet-content { font-size: 80%; } |
︙ | ︙ | |||
1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 | /** Container for the list of /chat messages. */ body.chat #chat-messages-wrapper { display: flex; flex-direction: column; overflow: auto; width: 100%; flex: 1 1 auto; } body.chat.chat-bottom-up #chat-messages-wrapper { flex-direction: column-reverse; z-index: 99 /* so that it scrolls under input area. If it's lower than div.content then mouse events to it are blocked!*/; } body.chat.chat-only-mode #chat-message-wrapper { } body.chat div.content { padding: 0; | > < | > | > | | 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 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 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 | /** Container for the list of /chat messages. */ body.chat #chat-messages-wrapper { display: flex; flex-direction: column; overflow: auto; width: 100%; flex: 1 1 auto; justify-content: flex-start; } body.chat.chat-bottom-up #chat-messages-wrapper { flex-direction: column-reverse; z-index: 99 /* so that it scrolls under input area. If it's lower than div.content then mouse events to it are blocked!*/; } body.chat.chat-only-mode #chat-message-wrapper { } body.chat div.content { padding: 0; display: flex; flex-direction: column; align-items: stretch; /*max-height: 85vh*/ /* rough approximate */ /* ^^^^ This breaks Safari badly - we'll have to calc this from JS */; } body.chat.chat-bottom-up div.content { flex-direction: column-reverse; } body.chat.chat-only-mode div.content { /*max-height: 95vh*//*larger than approx. this is too big for Firefox on Android*/; /* ^^^^ Safari hates this: we re-calc it in JS */ /* 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; border-bottom: 1px solid black; padding: 0.5em 1em 0 0.5em; margin-bottom: 0.5em; z-index: 100 /* see notes in #chat-messages-wrapper. The various popups require a z-index higher than this one. */; flex: 1 1 auto; } body.chat.chat-bottom-up #chat-input-area { border-bottom: none; border-top: 1px solid black; margin-bottom: 0; margin-top: 0.5em; } |
︙ | ︙ | |||
1739 1740 1741 1742 1743 1744 1745 1746 | /* 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; } | > > > > > > | 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 | /* 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 { /* If we don't artificially limit the img preview size, they can be so big that the user cannot navigate to the buttons. */ max-height: 40vh; max-width: 40vw; } |