diff --git a/src/components/big_picture.tsx b/src/components/big_picture.tsx index 2bd47ae..76215b4 100644 --- a/src/components/big_picture.tsx +++ b/src/components/big_picture.tsx @@ -6,19 +6,34 @@ import * as React from "react"; export interface Props { image: Model.Image; onClose: () => void; + showNext: () => void; + showPrevious: () => void; width: number; } -export class BigPicture extends React.PureComponent { +interface TouchStart { + x: number; + y: number; +} + +export interface State { + touchStart?: TouchStart | null; +} + +export class BigPicture extends React.PureComponent { static displayName = "BigPicture"; componentDidMount() { window.addEventListener("keyup", this._onEscape as any); + window.addEventListener("touchstart", this._onTouchStart as any); + window.addEventListener("touchend", this._onTouchEnd as any); document.body.classList.add("no-scroll"); } componentWillUnmount() { window.removeEventListener("keyup", this._onEscape as any); + window.removeEventListener("touchstart", this._onTouchStart as any); + window.removeEventListener("touchend", this._onTouchEnd as any); document.body.classList.remove("no-scroll"); } @@ -68,4 +83,27 @@ export class BigPicture extends React.PureComponent { this.props.onClose(); } }; + + private _onTouchStart = (e: React.TouchEvent) => { + const touch = e.touches[0]; + this.setState({ touchStart: { x: touch.screenX, y: touch.screenY }}); + } + + private _onTouchEnd = (e: React.TouchEvent) => { + console.debug("Event", e); + const touch = e.changedTouches[0]; + const touchStart = this.state.touchStart as TouchStart; + + const dx = touch.screenX - touchStart.x; + + if (Math.abs(dx) / window.innerWidth > 0.05) { + if (dx < 0) { + this.props.showNext(); + } else { + this.props.showPrevious(); + } + } + + this.setState({ touchStart: null }); + } } diff --git a/src/components/root.tsx b/src/components/root.tsx index a68a616..6ea1624 100644 --- a/src/components/root.tsx +++ b/src/components/root.tsx @@ -121,6 +121,8 @@ export class Root extends React.PureComponent { ) : null; @@ -189,6 +191,20 @@ export class Root extends React.PureComponent { this._onSetSelected(this.state.selectedSet as Model.ImageSet); }; + private _showNextBigPicture = () => { + const images: Model.Image[] = this.state.selectedSet?.images as Model.Image[]; + const current = images.indexOf(this.state.selectedImage as Model.Image); + const next = current + 1 >= images.length ? 0 : current + 1; + this._onImageSelected(images[next]); + } + + private _showPreviousBigPicture = () => { + const images: Model.Image[] = this.state.selectedSet?.images as Model.Image[]; + const current = images.indexOf(this.state.selectedImage as Model.Image); + const previous = current - 1 < 0 ? images.length - 1 : current - 1; + this._onImageSelected(images[previous]); + } + private _setGridHeight = (grid: number) => (height: number) => { if (this.state.gridHeights[grid] === height) { return;