Skip to content
This repository was archived by the owner on Jan 19, 2023. It is now read-only.

Enable image pan with touch events #14

Merged
merged 3 commits into from
Jul 27, 2016
Merged

Enable image pan with touch events #14

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6958d43
fix scroll on touchscreen
Jul 25, 2016
210e934
Code style refactor
fritz-c Jul 27, 2016
37604cb
Move touch listeners to a more specific element
fritz-c Jul 27, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 57 additions & 13 deletions src/react-image-lightbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ class ReactImageLightbox extends Component {
this.handleOuterMouseDown = this.handleOuterMouseDown.bind(this);
this.handleOuterMouseMove = this.handleOuterMouseMove.bind(this);
this.handleOuterMousewheel = this.handleOuterMousewheel.bind(this);
this.handleOuterTouchStart = this.handleOuterTouchStart.bind(this);
this.handleOuterTouchMove = this.handleOuterTouchMove.bind(this);
this.handleWindowResize = this.handleWindowResize.bind(this);
this.handleZoomInButtonClick = this.handleZoomInButtonClick.bind(this);
this.handleZoomOutButtonClick = this.handleZoomOutButtonClick.bind(this);
Expand Down Expand Up @@ -154,11 +156,13 @@ class ReactImageLightbox extends Component {
document.addEventListener('keyup', this.handleKeyInput);
window.addEventListener('resize', this.handleWindowResize);
window.addEventListener('mouseup', this.handleMouseUp);
window.addEventListener('touchend', this.handleMouseUp);

// Have to add an extra mouseup handler to catch mouseup events outside of the window
// if the page containing the lightbox is displayed in an iframe
if (isInIframe()) {
window.top.addEventListener('mouseup', this.handleMouseUp);
window.top.addEventListener('touchend', this.handleMouseUp);
}

this.listenersAttached = true;
Expand Down Expand Up @@ -231,9 +235,11 @@ class ReactImageLightbox extends Component {
document.removeEventListener('keyup', this.handleKeyInput);
window.removeEventListener('resize', this.handleWindowResize);
window.removeEventListener('mouseup', this.handleMouseUp);
window.removeEventListener('touchend', this.handleMouseUp);

if (isInIframe()) {
window.top.removeEventListener('mouseup', this.handleMouseUp);
window.top.removeEventListener('touchend', this.handleMouseUp);
}

this.listenersAttached = false;
Expand Down Expand Up @@ -544,31 +550,48 @@ class ReactImageLightbox extends Component {
}
}

// Handle move start over the lightbox container
// This happens:
// - On a mouseDown event
// - On a touchstart event
handleMoveStart(clientX, clientY) {
// Only allow dragging when zoomed
if (this.state.zoomLevel <= MIN_ZOOM_LEVEL) {
return;
}

this.isDragging = true;
this.dragStartX = clientX;
this.dragStartY = clientY;
this.dragStartOffsetX = this.state.offsetX;
this.dragStartOffsetY = this.state.offsetY;
}

// Handle the mouse clicking down in the lightbox container
handleOuterMouseDown(event) {
event.preventDefault();
this.handleMoveStart(event.clientX, event.clientY);
}

// Allow dragging when zoomed
if (this.state.zoomLevel > MIN_ZOOM_LEVEL) {
this.isDragging = true;
this.dragStartX = event.clientX;
this.dragStartY = event.clientY;
this.dragStartOffsetX = this.state.offsetX;
this.dragStartOffsetY = this.state.offsetY;
}
// Touch screen version of handleOuterMouseDown()
handleOuterTouchStart(event) {
const touchObj = event.changedTouches[0];
this.handleMoveStart(parseInt(touchObj.clientX, 10), parseInt(touchObj.clientY, 10));
}

// Handle the mouse dragging over the lightbox container
// (after a mouseDown and before a mouseUp event)
handleOuterMouseMove(event) {
// Handle dragging over the lightbox container
// This happens:
// - After a mouseDown and before a mouseUp event
// - After a touchstart and before a touchend event
handleMove(clientX, clientY) {
if (!this.isDragging) {
return;
}

const zoomMultiplier = this.getZoomMultiplier();

const newOffsetX = (this.dragStartX - event.clientX) / zoomMultiplier + this.dragStartOffsetX;
const newOffsetY = (this.dragStartY - event.clientY) / zoomMultiplier + this.dragStartOffsetY;
const newOffsetX = (this.dragStartX - clientX) / zoomMultiplier + this.dragStartOffsetX;
const newOffsetY = (this.dragStartY - clientY) / zoomMultiplier + this.dragStartOffsetY;
if (this.state.offsetX !== newOffsetX || this.state.offsetY !== newOffsetY) {
this.setState({
offsetX: newOffsetX,
Expand All @@ -577,6 +600,25 @@ class ReactImageLightbox extends Component {
}
}

// Handle the mouse dragging over the lightbox container
// (after a mouseDown and before a mouseUp event)
handleOuterMouseMove(event) {
this.handleMove(event.clientX, event.clientY);
}

// Touch screen version of handleOuterMouseMove()
handleOuterTouchMove(event) {
event.preventDefault();

// We shouldn't go any further if we're not zoomed
if (this.state.zoomLevel <= MIN_ZOOM_LEVEL) {
return;
}

const touchObj = event.changedTouches[0];
this.handleMove(parseInt(touchObj.clientX, 10), parseInt(touchObj.clientY, 10));
}

// Handle the window resize event
handleWindowResize() {
clearTimeout(this.resizeTimeout);
Expand Down Expand Up @@ -872,6 +914,8 @@ class ReactImageLightbox extends Component {
onWheel={this.handleOuterMousewheel}
onMouseMove={this.handleOuterMouseMove}
onMouseDown={this.handleOuterMouseDown}
onTouchStart={this.handleOuterTouchStart}
onTouchMove={this.handleOuterTouchMove}
className={`outer ${styles.outer} ${styles.outerAnimating}` +
(this.state.isClosing ? ` closing ${styles.outerClosing}` : '')
}
Expand Down