rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: take velocity into account for mobile popover gesture [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-11-03 17:45:09 +05:30
parent 5ff795d636
commit d9630c99c7
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
View File

@@ -72,6 +72,7 @@ const MobilePopoverContent = ({
let elementY = 0 let elementY = 0
let startY = 0 let startY = 0
let startTimestamp = Date.now()
let closestScrollContainerScrollTop = 0 let closestScrollContainerScrollTop = 0
let isClosestScrollContainerScrolledAtStart = false let isClosestScrollContainerScrolledAtStart = false
let containerScrollChangedAfterTouchStart = false let containerScrollChangedAfterTouchStart = false
@@ -79,6 +80,7 @@ const MobilePopoverContent = ({
const touchStartHandler = (e: TouchEvent) => { const touchStartHandler = (e: TouchEvent) => {
startY = e.touches[0].clientY startY = e.touches[0].clientY
elementY = element.getBoundingClientRect().y elementY = element.getBoundingClientRect().y
startTimestamp = Date.now()
closestScrollContainerScrollTop = closestScrollContainer?.scrollTop || 0 closestScrollContainerScrollTop = closestScrollContainer?.scrollTop || 0
isClosestScrollContainerScrolledAtStart = !!closestScrollContainer && closestScrollContainerScrollTop > 0 isClosestScrollContainerScrolledAtStart = !!closestScrollContainer && closestScrollContainerScrollTop > 0
containerScrollChangedAfterTouchStart = false containerScrollChangedAfterTouchStart = false
@@ -117,11 +119,17 @@ const MobilePopoverContent = ({
}, },
) )
} }
const touchEndHandler = () => { const touchEndHandler = (event: TouchEvent) => {
const y = element.getBoundingClientRect().y const y = element.getBoundingClientRect().y
const threshold = window.innerHeight * 0.75 const threshold = window.innerHeight * 0.75
if (y > threshold && !isClosestScrollContainerScrolledAtStart) { const endTimestamp = Date.now()
const deltaY = event.changedTouches[0].clientY - startY
const velocity = deltaY / (endTimestamp - startTimestamp)
if (y < threshold && velocity > 2) {
requestClose()
} else if (y > threshold && !isClosestScrollContainerScrolledAtStart) {
requestClose() requestClose()
} else { } else {
element.animate( element.animate(