diff options
Diffstat (limited to 'src/components/chat/chat_layout_utils.js')
| -rw-r--r-- | src/components/chat/chat_layout_utils.js | 27 |
1 files changed, 27 insertions, 0 deletions
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js new file mode 100644 index 00000000..f07ba2a1 --- /dev/null +++ b/src/components/chat/chat_layout_utils.js @@ -0,0 +1,27 @@ +// Captures a scroll position +export const getScrollPosition = (el) => { + return { + scrollTop: el.scrollTop, + scrollHeight: el.scrollHeight, + offsetHeight: el.offsetHeight + } +} + +// A helper function that is used to keep the scroll position fixed as the new elements are added to the top +// Takes two scroll positions, before and after the update. +export const getNewTopPosition = (previousPosition, newPosition) => { + return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight) +} + +export const isBottomedOut = (el, offset = 0) => { + if (!el) { return } + const scrollHeight = el.scrollTop + offset + const totalHeight = el.scrollHeight - el.offsetHeight + return totalHeight <= scrollHeight +} + +// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form. +export const scrollableContainerHeight = (inner, header, footer) => { + const height = parseFloat(getComputedStyle(inner, null).height.replace('px', '')) + return height - header.clientHeight - footer.clientHeight +} |
