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

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 commit is contained in:
Aman Harwara
2023-05-01 18:59:05 +05:30
committed by GitHub
parent 9fe88c6c10
commit 6d326e2db4
10 changed files with 177 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.yarn/cache/contactjs-npm-2.1.5-c7bb4524ec-5be3d66835.zip vendored
View File

Binary file not shown.

3
packages/web/package.json
View File

@@ -109,7 +109,6 @@
"dependencies": {
"@ariakit/react": "^0.1.2",
"@lexical/headless": "0.10.0",
"@radix-ui/react-slot": "^1.0.1",
"contactjs": "2.1.5"
"@radix-ui/react-slot": "^1.0.1"
}
}

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 text-sm lg:text-xs">
<div className="mt-1.5 flex flex-wrap gap-2 overflow-hidden 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 text-tex flex w-full cursor-pointer items-stretch',
'content-list-item flex w-full cursor-pointer items-stretch text-text',
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',

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

@@ -1,9 +1,37 @@
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',
@@ -12,16 +40,18 @@ export const usePaneSwipeGesture = (
) => {
const application = useApplication()
const overlayElementRef = useRef<HTMLElement | null>(null)
const underlayElementRef = 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, false))
const [isEnabled, setIsEnabled] = useState(() =>
application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
)
useEffect(() => {
return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
setIsEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
setIsEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]))
})
}, [application])
@@ -38,126 +68,159 @@ export const usePaneSwipeGesture = (
return
}
const panRecognizer = new Pan(element, {
supportedDirections: direction === 'left' ? [Direction.Left] : [Direction.Right],
})
underlayElementRef.current = element.parentElement?.querySelector(`[data-pane-underlay="${element.id}"]`) || null
const pointerListener = new PointerListener(element, {
supportedGestures: [panRecognizer],
})
let startX = 0
let clientX = 0
let closestScrollContainer: HTMLElement | null
let scrollContainerAxis: 'x' | 'y' | null = null
let canceled = false
function onPan(e: unknown) {
const event = e as CustomEvent<GestureEventData>
if (!element) {
const TouchMoveThreshold = 15
const SwipeFinishThreshold = 40 + TouchMoveThreshold
const scrollListener = () => {
canceled = true
}
const touchStartListener = (event: TouchEvent) => {
closestScrollContainer = getScrollParent(event.target as HTMLElement)
if (closestScrollContainer) {
closestScrollContainer.addEventListener('scroll', scrollListener)
if (closestScrollContainer.scrollWidth > closestScrollContainer.clientWidth) {
scrollContainerAxis = 'x'
}
} else {
scrollContainerAxis = null
}
const touch = event.touches[0]
startX = touch.clientX
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
}
const x = event.detail.global.deltaX
requestElementUpdate(x)
}
let ticking = false
function onPanEnd(e: unknown) {
const event = e as CustomEvent<GestureEventData>
if (ticking) {
setTimeout(function () {
onPanEnd(event)
}, 100)
} else {
if (!element) {
if (canceled) {
return
}
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)
const touch = event.touches[0]
clientX = touch.clientX
const deltaX = clientX - startX
if (Math.abs(deltaX) < TouchMoveThreshold) {
return
}
if (overlayElementRef.current) {
overlayElementRef.current
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)
}
}
const touchEndListener = () => {
if (closestScrollContainer) {
closestScrollContainer.removeEventListener('scroll', scrollListener)
closestScrollContainer.style.touchAction = ''
}
if (canceled) {
updateElement(0)
return
}
const deltaX = clientX - startX
element.style.willChange = ''
if (
(direction === 'right' && deltaX > SwipeFinishThreshold) ||
(direction === 'left' && deltaX < -SwipeFinishThreshold)
) {
onSwipeEndRef.current(element)
} else {
updateElement(0)
}
if (underlayElementRef.current) {
underlayElementRef.current
.animate([{ opacity: 0 }], {
duration: 5,
easing: 'cubic-bezier(.36,.66,.04,1)',
duration: 500,
fill: 'forwards',
})
.finished.then(() => {
if (overlayElementRef.current) {
overlayElementRef.current.remove()
overlayElementRef.current = null
if (underlayElementRef.current) {
underlayElementRef.current.remove()
underlayElementRef.current = null
}
})
.catch(console.error)
}
}
}
function requestElementUpdate(x: number) {
if (!ticking) {
requestAnimationFrame(function () {
if (!element) {
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'
element.before(overlayElement)
overlayElementRef.current = overlayElement
}
const newLeft = direction === 'right' ? Math.max(x, 0) : Math.min(x, 0)
element.animate([{ transform: `translate3d(${newLeft}px,0,0)` }], { duration: 0, fill: 'forwards' })
const percent = Math.min(window.innerWidth / newLeft / 10, 0.45)
overlayElementRef.current.animate([{ opacity: percent }], {
duration: 0,
fill: 'forwards',
})
ticking = false
})
ticking = true
}
}
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)
}
}
element.addEventListener('touchstart', touchStartListener, supportsPassive ? { passive: true } : false)
element.addEventListener('touchmove', touchMoveListener, supportsPassive ? { passive: true } : false)
element.addEventListener('touchend', touchEndListener, supportsPassive ? { passive: true } : false)
return () => {
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)
}
}
element.removeEventListener('touchstart', touchStartListener)
element.removeEventListener('touchmove', touchMoveListener)
element.removeEventListener('touchend', touchEndListener)
}
}, [direction, element, gesture, isMobileScreen, onSwipeEndRef, isEnabled])

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

@@ -8,6 +8,7 @@ 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
@@ -30,11 +31,13 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
const [isPaneGesturesEnabled, setIsPaneGesturesEnabled] = useState(() =>
application.getPreference(PrefKey.PaneGesturesEnabled, false),
application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
)
useEffect(() => {
return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
setIsPaneGesturesEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
setIsPaneGesturesEnabled(
application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
)
})
}, [application])

1
packages/web/src/javascripts/Constants/PrefDefaults.ts
View File

@@ -29,4 +29,5 @@ export const PrefDefaults = {
[PrefKey.CustomNoteTitleFormat]: 'YYYY-MM-DD [at] hh:mm A',
[PrefKey.UpdateSavingStatusIndicator]: true,
[PrefKey.DarkMode]: false,
[PrefKey.PaneGesturesEnabled]: true,
} as const

3
packages/web/src/javascripts/Controllers/Moments/PhotoRecorder.ts
View File

@@ -12,6 +12,9 @@ export class PhotoRecorder {
constructor() {}
public static async isSupported(): Promise<boolean> {
if (!navigator.mediaDevices) {
return false
}
const devices = await navigator.mediaDevices.enumerateDevices()
const hasCamera = devices.some((device) => device.kind === 'videoinput')
return hasCamera

3
packages/web/web.webpack.config.js
View File

@@ -76,8 +76,7 @@ module.exports = (env) => {
* Exclude all node_modules, except for those we need to run through our babel rules because
* they may contain class properties and other ES6+ syntax.
*/
exclude:
/node_modules\/(?!(@standardnotes\/common|@standardnotes\/domain-core|contactjs|webextension-polyfill))/,
exclude: /node_modules\/(?!(@standardnotes\/common|@standardnotes\/domain-core|webextension-polyfill))/,
use: [
'babel-loader',
{

8
yarn.lock
View File

@@ -5547,7 +5547,6 @@ __metadata:
autoprefixer: ^10.4.13
babel-loader: ^9.1.0
circular-dependency-plugin: ^5.2.2
contactjs: 2.1.5
copy-webpack-plugin: ^11.0.0
css-loader: "*"
dayjs: ^1.11.7
@@ -9631,13 +9630,6 @@ __metadata:
languageName: node
linkType: hard
"contactjs@npm:2.1.5":
version: 2.1.5
resolution: "contactjs@npm:2.1.5"
checksum: 5be3d66835e5a78a16abe6cdbf0c2f4a44471086e313ef8550c6747026cca9e7ff5144fdaaf6b4307cb296baf0fd394ca63758354e58099f1fde3c6756a390c3
languageName: node
linkType: hard
"content-disposition@npm:0.5.4":
version: 0.5.4
resolution: "content-disposition@npm:0.5.4"