diff --git a/package-lock.json b/package-lock.json index 14d07fae..83ad2962 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "fast-deep-equal": "~3.1.3", "idb-keyval": "~6.2.0", "just-debounce-it": "~3.2.0", - "long-press-event": "~2.4.6", "masto": "~5.10.0", "mem": "~9.0.2", "p-retry": "~5.1.2", @@ -32,6 +31,7 @@ "toastify-js": "~1.12.0", "uid": "~2.0.1", "use-debounce": "~9.0.3", + "use-long-press": "~2.0.3", "use-resize-observer": "~9.1.0", "valtio": "1.9.0" }, @@ -4665,11 +4665,6 @@ "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==", "dev": true }, - "node_modules/long-press-event": { - "version": "2.4.6", - "resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz", - "integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ==" - }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -6570,6 +6565,18 @@ "react": ">=16.8.0" } }, + "node_modules/use-long-press": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-2.0.3.tgz", + "integrity": "sha512-n3cfv90Y1ldNt+hhXzxnxuLZmgLOOC/+qfLGoeEBgOxmnokPPt39MPF3KmvKriq5VMoJ7uQdVjHejCdHBt9anw==", + "engines": { + "node": ">=10", + "npm": ">=5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", @@ -10341,11 +10348,6 @@ "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==", "dev": true }, - "long-press-event": { - "version": "2.4.6", - "resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz", - "integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ==" - }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -11620,6 +11622,12 @@ "integrity": "sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==", "requires": {} }, + "use-long-press": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/use-long-press/-/use-long-press-2.0.3.tgz", + "integrity": "sha512-n3cfv90Y1ldNt+hhXzxnxuLZmgLOOC/+qfLGoeEBgOxmnokPPt39MPF3KmvKriq5VMoJ7uQdVjHejCdHBt9anw==", + "requires": {} + }, "use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", diff --git a/package.json b/package.json index 460f02d3..60eb769e 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "fast-deep-equal": "~3.1.3", "idb-keyval": "~6.2.0", "just-debounce-it": "~3.2.0", - "long-press-event": "~2.4.6", "masto": "~5.10.0", "mem": "~9.0.2", "p-retry": "~5.1.2", @@ -34,6 +33,7 @@ "toastify-js": "~1.12.0", "uid": "~2.0.1", "use-debounce": "~9.0.3", + "use-long-press": "~2.0.3", "use-resize-observer": "~9.1.0", "valtio": "1.9.0" }, diff --git a/src/app.css b/src/app.css index beae550b..a2fcb7d2 100644 --- a/src/app.css +++ b/src/app.css @@ -537,6 +537,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { transition: background-color 0.2s ease-out; -webkit-tap-highlight-color: transparent; animation: appear 0.2s ease-out; + -webkit-touch-callout: none; } :is(.status-link, .status-focus):is(:focus, .is-active) { background-color: var(--link-bg-hover-color); @@ -1051,6 +1052,11 @@ body:has(.status-deck) .media-post-link { /* MENU POPUP */ +.szh-menu-container { + user-select: none; + -webkit-touch-callout: none; + -webkit-user-drag: none; +} .szh-menu-container:has(.szh-menu--state-open) { inset: 0; inset: env(safe-area-inset-top) env(safe-area-inset-right) diff --git a/src/components/status.jsx b/src/components/status.jsx index 85312b8c..a6ad82a5 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -7,12 +7,12 @@ import { MenuHeader, MenuItem, } from '@szhsin/react-menu'; -import 'long-press-event'; import mem from 'mem'; import pThrottle from 'p-throttle'; import { memo } from 'preact/compat'; import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import 'swiped-events'; +import { useLongPress } from 'use-long-press'; import useResizeObserver from 'use-resize-observer'; import { useSnapshot } from 'valtio'; @@ -507,25 +507,27 @@ function Status({ ); + const contextMenuRef = useRef(); const [isContextMenuOpen, setIsContextMenuOpen] = useState(false); const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({ x: 0, y: 0, }); - useEffect(() => { - function openContextMenu(e) { - e.preventDefault(); + const bindLongPress = useLongPress( + (e) => { + const { clientX, clientY } = e.touches?.[0] || e; setContextMenuAnchorPoint({ - x: e.clientX, - y: e.clientY, + x: clientX, + y: clientY, }); setIsContextMenuOpen(true); - } - statusRef.current?.addEventListener?.('long-press', openContextMenu); - return () => { - statusRef.current?.removeEventListener?.('long-press', openContextMenu); - }; - }, []); + }, + { + captureEvent: true, + detect: 'touch', + cancelOnMovement: true, + }, + ); return (
{size !== 'l' && ( { + contextMenuRef.current?.closeMenu?.(); + }, }} overflow="auto" boundingBoxPadding="8 8 8 8"