Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-10 23:36:14 -05:00
Code Issues Activity

Fixed calculating if reply form is in viewport

Browse source
This commit is contained in:
Simon Backx 2022-08-11 15:16:31 +02:00
parent e130c2edcd
commit 24f384b0a2
1 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
apps/comments-ui/src/components/Form.js
View file

@ -158,15 +158,22 @@ const Form = (props) => {
if (props.isReply) { if (props.isReply) {
timer = setTimeout(() => { timer = setTimeout(() => {
// Is the form already in view? // Is the form already in view?
const formHeight = 100; const formHeight = formEl.current.offsetHeight;
// Start y position of the form
const yMin = getScrollToPosition(); const yMin = getScrollToPosition();
// Y position of the end of the form
const yMax = yMin + formHeight; const yMax = yMin + formHeight;
// Trigger scrolling when yMin and yMax is closer than this to the border of the viewport
const offset = 64;
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
const viewPortYMin = window.scrollY; const viewPortYMin = window.scrollY;
const viewPortYMax = viewPortYMin + viewportHeight; const viewPortYMax = viewPortYMin + viewportHeight;
if (yMin < viewPortYMin || yMax > viewPortYMax) { if (yMin - offset < viewPortYMin || yMax + offset > viewPortYMax) {
// Center the form in the viewport // Center the form in the viewport
const yCenter = (yMin + yMax) / 2; const yCenter = (yMin + yMax) / 2;