Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Fix edit media modal on small screens, touch events (#11573)

Browse source
This commit is contained in:
Eugen Rochko 2019-08-15 20:28:56 +02:00 • committed by GitHub
parent cdc474628d
commit 1bea318197
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
app/javascript/mastodon/features/ui/components/focal_point_modal.js
View file

@ -84,6 +84,14 @@ class FocalPointModal extends ImmutablePureComponent {
this.setState({ dragging: true });
}
handleTouchStart = e => {
document.addEventListener('touchmove', this.handleMouseMove);
document.addEventListener('touchend', this.handleTouchEnd);
this.updatePosition(e);
this.setState({ dragging: true });
}
handleMouseMove = e => {
this.updatePosition(e);
}
@ -95,6 +103,13 @@ class FocalPointModal extends ImmutablePureComponent {
this.setState({ dragging: false });
}
handleTouchEnd = () => {
document.removeEventListener('touchmove', this.handleMouseMove);
document.removeEventListener('touchend', this.handleTouchEnd);
this.setState({ dragging: false });
}
updatePosition = e => {
const { x, y } = getPointerPosition(this.node, e);
const focusX = (x - .5) * 2;
@ -225,7 +240,7 @@ class FocalPointModal extends ImmutablePureComponent {
</div>
<div className='focal-point__reticle' style={{ top: `${y * 100}%`, left: `${x * 100}%` }} />
<div className='focal-point__overlay' onMouseDown={this.handleMouseDown} />
<div className='focal-point__overlay' onMouseDown={this.handleMouseDown} onTouchStart={this.handleTouchStart} />
</div>
)}