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

Revert "feat: Swipe gestures on mobile are now enabled by default and have been improved. You can disable them from Preferences > General > Labs (#2319)"

Browse Source 
This reverts commit 6d326e2db4.
This commit is contained in:
Aman Harwara
2023-05-01 21:21:00 +05:30
parent 30c160f4b8
commit 880cceecd5
10 changed files with 117 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx
View File

@@ -14,7 +14,7 @@ const ListItemTags: FunctionComponent<Props> = ({ hideTags, tags }) => {
}
return (
<div className="mt-1.5 flex flex-wrap gap-2 overflow-hidden text-sm lg:text-xs">
<div className="mt-1.5 flex flex-wrap gap-2 text-sm lg:text-xs">
{tags.map((tag) => (
<span
className="inline-flex items-center rounded-sm bg-passive-4-opacity-variant py-1 px-1.5 text-foreground"

2
packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
View File

@@ -74,7 +74,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
<div
ref={listItemRef}
className={classNames(
'content-list-item flex w-full cursor-pointer items-stretch text-text',
'content-list-item text-tex flex w-full cursor-pointer items-stretch',
selected && `selected border-l-2 border-solid border-accessory-tint-${tint}`,
isPreviousItemTiled && 'mt-3 border-t border-solid border-t-border',
isNextItemTiled && 'mb-3 border-b border-solid border-b-border',

265
packages/web/src/javascripts/Components/Panes/usePaneGesture.ts
View File

@@ -1,37 +1,9 @@
import { useStateRef } from '@/Hooks/useStateRef'
import { useEffect, useRef, useState } from 'react'
import { Direction, Pan, PointerListener, type GestureEventData } from 'contactjs'
import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
import { useApplication } from '../ApplicationProvider'
import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
import { PrefDefaults } from '@/Constants/PrefDefaults'
function getScrollParent(node: HTMLElement | null): HTMLElement | null {
if (!node) {
return null
}
if (node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth) {
return node
} else {
return getScrollParent(node.parentElement)
}
}
const supportsPassive = (() => {
let supportsPassive = false
try {
const opts = Object.defineProperty({}, 'passive', {
get: () => {
supportsPassive = true
},
})
window.addEventListener('test', null as never, opts)
window.removeEventListener('test', null as never, opts)
} catch (e) {
/* empty */
}
return supportsPassive
})()
export const usePaneSwipeGesture = (
direction: 'left' | 'right',
@@ -40,18 +12,16 @@ export const usePaneSwipeGesture = (
) => {
const application = useApplication()
const underlayElementRef = useRef<HTMLElement | null>(null)
const overlayElementRef = useRef<HTMLElement | null>(null)
const [element, setElement] = useState<HTMLElement | null>(null)
const onSwipeEndRef = useStateRef(onSwipeEnd)
const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
const [isEnabled, setIsEnabled] = useState(() =>
application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
)
const [isEnabled, setIsEnabled] = useState(() => application.getPreference(PrefKey.PaneGesturesEnabled, false))
useEffect(() => {
return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
setIsEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]))
setIsEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
})
}, [application])
@@ -68,159 +38,126 @@ export const usePaneSwipeGesture = (
return
}
underlayElementRef.current = element.parentElement?.querySelector(`[data-pane-underlay="${element.id}"]`) || null
const panRecognizer = new Pan(element, {
supportedDirections: direction === 'left' ? [Direction.Left] : [Direction.Right],
})
let startX = 0
let clientX = 0
let closestScrollContainer: HTMLElement | null
let scrollContainerAxis: 'x' | 'y' | null = null
let canceled = false
const pointerListener = new PointerListener(element, {
supportedGestures: [panRecognizer],
})
const TouchMoveThreshold = 15
const SwipeFinishThreshold = 40 + TouchMoveThreshold
function onPan(e: unknown) {
const event = e as CustomEvent<GestureEventData>
if (!element) {
return
}
const scrollListener = () => {
canceled = true
const x = event.detail.global.deltaX
requestElementUpdate(x)
}
const touchStartListener = (event: TouchEvent) => {
closestScrollContainer = getScrollParent(event.target as HTMLElement)
if (closestScrollContainer) {
closestScrollContainer.addEventListener('scroll', scrollListener)
let ticking = false
if (closestScrollContainer.scrollWidth > closestScrollContainer.clientWidth) {
scrollContainerAxis = 'x'
function onPanEnd(e: unknown) {
const event = e as CustomEvent<GestureEventData>
if (ticking) {
setTimeout(function () {
onPanEnd(event)
}, 100)
} else {
if (!element) {
return
}
} else {
scrollContainerAxis = null
}
const touch = event.touches[0]
startX = touch.clientX
if (direction === 'right' && event.detail.global.deltaX > 40) {
onSwipeEndRef.current(element)
} else if (direction === 'left' && event.detail.global.deltaX < -40) {
onSwipeEndRef.current(element)
} else {
requestElementUpdate(0)
}
canceled = false
element.style.willChange = 'transform'
}
const updateElement = (x: number) => {
if (!underlayElementRef.current) {
const underlayElement = document.createElement('div')
underlayElement.style.position = 'fixed'
underlayElement.style.top = '0'
underlayElement.style.left = '0'
underlayElement.style.width = '100%'
underlayElement.style.height = '100%'
underlayElement.style.pointerEvents = 'none'
underlayElement.style.backgroundColor = '#000'
underlayElement.style.opacity = '0'
underlayElement.style.willChange = 'opacity'
underlayElement.setAttribute('role', 'presentation')
underlayElement.ariaHidden = 'true'
underlayElement.setAttribute('data-pane-underlay', element.id)
element.before(underlayElement)
underlayElementRef.current = underlayElement
}
element.animate(
[
{
transform: `translate3d(${x}px, 0, 0)`,
},
],
{
duration: 0,
fill: 'forwards',
},
)
const percent = Math.min(window.innerWidth / x / 10, 0.45)
underlayElementRef.current.animate([{ opacity: percent }], {
duration: 0,
fill: 'forwards',
})
}
const touchMoveListener = (event: TouchEvent) => {
if (scrollContainerAxis === 'x') {
return
}
if (canceled) {
return
}
const touch = event.touches[0]
clientX = touch.clientX
const deltaX = clientX - startX
if (Math.abs(deltaX) < TouchMoveThreshold) {
return
}
if (closestScrollContainer) {
closestScrollContainer.style.touchAction = 'none'
}
const x =
direction === 'right' ? Math.max(deltaX - TouchMoveThreshold, 0) : Math.min(deltaX + TouchMoveThreshold, 0)
if (gesture === 'pan') {
updateElement(x)
if (overlayElementRef.current) {
overlayElementRef.current
.animate([{ opacity: 0 }], {
duration: 5,
fill: 'forwards',
})
.finished.then(() => {
if (overlayElementRef.current) {
overlayElementRef.current.remove()
overlayElementRef.current = null
}
})
.catch(console.error)
}
}
}
const touchEndListener = () => {
if (closestScrollContainer) {
closestScrollContainer.removeEventListener('scroll', scrollListener)
closestScrollContainer.style.touchAction = ''
}
function requestElementUpdate(x: number) {
if (!ticking) {
requestAnimationFrame(function () {
if (!element) {
return
}
if (canceled) {
updateElement(0)
return
}
if (!overlayElementRef.current) {
const overlayElement = document.createElement('div')
overlayElement.style.position = 'fixed'
overlayElement.style.top = '0'
overlayElement.style.left = '0'
overlayElement.style.width = '100%'
overlayElement.style.height = '100%'
overlayElement.style.pointerEvents = 'none'
overlayElement.style.backgroundColor = '#000'
overlayElement.style.opacity = '0'
overlayElement.style.willChange = 'opacity'
const deltaX = clientX - startX
element.before(overlayElement)
overlayElementRef.current = overlayElement
}
element.style.willChange = ''
const newLeft = direction === 'right' ? Math.max(x, 0) : Math.min(x, 0)
element.animate([{ transform: `translate3d(${newLeft}px,0,0)` }], { duration: 0, fill: 'forwards' })
if (
(direction === 'right' && deltaX > SwipeFinishThreshold) ||
(direction === 'left' && deltaX < -SwipeFinishThreshold)
) {
onSwipeEndRef.current(element)
} else {
updateElement(0)
}
if (underlayElementRef.current) {
underlayElementRef.current
.animate([{ opacity: 0 }], {
easing: 'cubic-bezier(.36,.66,.04,1)',
duration: 500,
const percent = Math.min(window.innerWidth / newLeft / 10, 0.45)
overlayElementRef.current.animate([{ opacity: percent }], {
duration: 0,
fill: 'forwards',
})
.finished.then(() => {
if (underlayElementRef.current) {
underlayElementRef.current.remove()
underlayElementRef.current = null
}
})
.catch(console.error)
ticking = false
})
ticking = true
}
}
element.addEventListener('touchstart', touchStartListener, supportsPassive ? { passive: true } : false)
element.addEventListener('touchmove', touchMoveListener, supportsPassive ? { passive: true } : false)
element.addEventListener('touchend', touchEndListener, supportsPassive ? { passive: true } : false)
if (gesture === 'pan') {
element.addEventListener('panleft', onPan)
element.addEventListener('panright', onPan)
element.addEventListener('panend', onPanEnd)
} else {
if (direction === 'left') {
element.addEventListener('swipeleft', onPanEnd)
} else {
element.addEventListener('swiperight', onPanEnd)
}
}
return () => {
element.removeEventListener('touchstart', touchStartListener)
element.removeEventListener('touchmove', touchMoveListener)
element.removeEventListener('touchend', touchEndListener)
pointerListener.destroy()
if (gesture === 'pan') {
element.removeEventListener('panleft', onPan)
element.removeEventListener('panright', onPan)
element.removeEventListener('panend', onPanEnd)
} else {
if (direction === 'left') {
element.removeEventListener('swipeleft', onPanEnd)
} else {
element.removeEventListener('swiperight', onPanEnd)
}
}
}
}, [direction, element, gesture, isMobileScreen, onSwipeEndRef, isEnabled])

7
packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx
View File

@@ -8,7 +8,6 @@ import PreferencesSegment from '../../../PreferencesComponents/PreferencesSegmen
import LabsFeature from './LabsFeature'
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
import { PrefDefaults } from '@/Constants/PrefDefaults'
type ExperimentalFeatureItem = {
identifier: FeatureIdentifier
@@ -31,13 +30,11 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
const [isPaneGesturesEnabled, setIsPaneGesturesEnabled] = useState(() =>
application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
application.getPreference(PrefKey.PaneGesturesEnabled, false),
)
useEffect(() => {
return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
setIsPaneGesturesEnabled(
application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
)
setIsPaneGesturesEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
})
}, [application])