mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Swipe down for closing carousel

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-28 19:43:02 +08:00
parent 86df9fd9f8
commit 7200acc2a7
3 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
package-lock.json generated
View file

@ -20,6 +20,7 @@
"preact-router": "~4.1.0",
"react-intersection-observer": "~9.4.1",
"string-length": "~5.0.1",
"swiped-events": "~1.1.7",
"toastify-js": "~1.12.0",
"use-resize-observer": "~9.1.0",
"valtio": "~1.8.0"
@ -5041,6 +5042,11 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/swiped-events": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz",
"integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg=="
},
"node_modules/temp-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@ -9395,6 +9401,11 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"devOptional": true
},
"swiped-events": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz",
"integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg=="
},
"temp-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",

1
package.json
View file

@ -22,6 +22,7 @@
"preact-router": "~4.1.0",
"react-intersection-observer": "~9.4.1",
"string-length": "~5.0.1",
"swiped-events": "~1.1.7",
"toastify-js": "~1.12.0",
"use-resize-observer": "~9.1.0",
"valtio": "~1.8.0"

16
src/components/status.jsx
View file

@ -10,6 +10,7 @@ import {
useState,
} from 'preact/hooks';
import { InView } from 'react-intersection-observer';
import 'swiped-events';
import useResizeObserver from 'use-resize-observer';
import { useSnapshot } from 'valtio';
@ -1270,10 +1271,25 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
const [showControls, setShowControls] = useState(false);
useEffect(() => {
let handleSwipe = () => {
onClose();
};
if (carouselRef.current) {
carouselRef.current.addEventListener('swiped-down', handleSwipe);
}
return () => {
if (carouselRef.current) {
carouselRef.current.removeEventListener('swiped-down', handleSwipe);
}
};
}, []);
return (
<>
<div
ref={carouselRef}
data-swipe-threshold="44"
class="carousel"
onClick={(e) => {
if (