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

This reverts commit 6d326e2db4.

packages/web/package.json

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

packages/web/src/javascripts/Components/ContentListView/ListItemTags.tsx

@@ -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"

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -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',

packages/web/src/javascripts/Components/Panes/usePaneGesture.ts

@@ -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(() =>
+  const [isEnabled, setIsEnabled] = useState(() => application.getPreference(PrefKey.PaneGesturesEnabled, false))
-    application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
-  )
   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
+    const pointerListener = new PointerListener(element, {
-    let clientX = 0
+      supportedGestures: [panRecognizer],
-    let closestScrollContainer: HTMLElement | null
+    })
-    let scrollContainerAxis: 'x' | 'y' | null = null
-    let canceled = false
 
-    const TouchMoveThreshold = 15
+    function onPan(e: unknown) {
-    const SwipeFinishThreshold = 40 + TouchMoveThreshold
+      const event = e as CustomEvent<GestureEventData>
+      if (!element) {
+        return
+      }
 
-    const scrollListener = () => {
+      const x = event.detail.global.deltaX
-      canceled = true
+      requestElementUpdate(x)
     }
 
-    const touchStartListener = (event: TouchEvent) => {
+    let ticking = false
-      closestScrollContainer = getScrollParent(event.target as HTMLElement)
-      if (closestScrollContainer) {
-        closestScrollContainer.addEventListener('scroll', scrollListener)
 
-        if (closestScrollContainer.scrollWidth > closestScrollContainer.clientWidth) {
+    function onPanEnd(e: unknown) {
-          scrollContainerAxis = 'x'
+      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]
+        if (direction === 'right' && event.detail.global.deltaX > 40) {
-      startX = touch.clientX
+          onSwipeEndRef.current(element)
+        } else if (direction === 'left' && event.detail.global.deltaX < -40) {
+          onSwipeEndRef.current(element)
+        } else {
+          requestElementUpdate(0)
+        }
 
-      canceled = false
+        if (overlayElementRef.current) {
-
+          overlayElementRef.current
-      element.style.willChange = 'transform'
+            .animate([{ opacity: 0 }], {
-    }
+              duration: 5,
-
+              fill: 'forwards',
-    const updateElement = (x: number) => {
+            })
-      if (!underlayElementRef.current) {
+            .finished.then(() => {
-        const underlayElement = document.createElement('div')
+              if (overlayElementRef.current) {
-        underlayElement.style.position = 'fixed'
+                overlayElementRef.current.remove()
-        underlayElement.style.top = '0'
+                overlayElementRef.current = null
-        underlayElement.style.left = '0'
+              }
-        underlayElement.style.width = '100%'
+            })
-        underlayElement.style.height = '100%'
+            .catch(console.error)
-        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)
       }
     }
 
-    const touchEndListener = () => {
+    function requestElementUpdate(x: number) {
-      if (closestScrollContainer) {
+      if (!ticking) {
-        closestScrollContainer.removeEventListener('scroll', scrollListener)
+        requestAnimationFrame(function () {
-        closestScrollContainer.style.touchAction = ''
+          if (!element) {
-      }
+            return
+          }
 
-      if (canceled) {
+          if (!overlayElementRef.current) {
-        updateElement(0)
+            const overlayElement = document.createElement('div')
-        return
+            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 (
+          const percent = Math.min(window.innerWidth / newLeft / 10, 0.45)
-        (direction === 'right' && deltaX > SwipeFinishThreshold) ||
+          overlayElementRef.current.animate([{ opacity: percent }], {
-        (direction === 'left' && deltaX < -SwipeFinishThreshold)
+            duration: 0,
-      ) {
-        onSwipeEndRef.current(element)
-      } else {
-        updateElement(0)
-      }
-
-      if (underlayElementRef.current) {
-        underlayElementRef.current
-          .animate([{ opacity: 0 }], {
-            easing: 'cubic-bezier(.36,.66,.04,1)',
-            duration: 500,
             fill: 'forwards',
           })
-          .finished.then(() => {
+
-            if (underlayElementRef.current) {
+          ticking = false
-              underlayElementRef.current.remove()
+        })
-              underlayElementRef.current = null
+
-            }
+        ticking = true
-          })
-          .catch(console.error)
       }
     }
 
-    element.addEventListener('touchstart', touchStartListener, supportsPassive ? { passive: true } : false)
+    if (gesture === 'pan') {
-    element.addEventListener('touchmove', touchMoveListener, supportsPassive ? { passive: true } : false)
+      element.addEventListener('panleft', onPan)
-    element.addEventListener('touchend', touchEndListener, supportsPassive ? { passive: true } : false)
+      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)
+      pointerListener.destroy()
-      element.removeEventListener('touchmove', touchMoveListener)
+      if (gesture === 'pan') {
-      element.removeEventListener('touchend', touchEndListener)
+        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])
 

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

@@ -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(
+      setIsPaneGesturesEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
-        application.getPreference(PrefKey.PaneGesturesEnabled, PrefDefaults[PrefKey.PaneGesturesEnabled]),
-      )
     })
   }, [application])
 

packages/web/src/javascripts/Constants/PrefDefaults.ts

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

packages/web/src/javascripts/Controllers/Moments/PhotoRecorder.ts

@@ -12,9 +12,6 @@ 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

packages/web/web.webpack.config.js

@@ -76,7 +76,8 @@ 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|webextension-polyfill))/,
+          exclude:
+            /node_modules\/(?!(@standardnotes\/common|@standardnotes\/domain-core|contactjs|webextension-polyfill))/,
           use: [
             'babel-loader',
             {

yarn.lock

@@ -5547,6 +5547,7 @@ __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
@@ -9630,6 +9631,13 @@ __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"