random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev
2020-05-02 02:25:55 -04:00
parent e9f01c0b16
commit 196a906cec
62 changed files with 866 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
app/javascript/gabsocial/components/zoomable_image.js
View File

@@ -1,30 +1,18 @@
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const MIN_SCALE = 1
const MAX_SCALE = 4
const getMidpoint = (p1, p2) => ({
x: (p1.clientX + p2.clientX) / 2,
y: (p1.clientY + p2.clientY) / 2,
});
})
const getDistance = (p1, p2) =>
Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2));
const getDistance = (p1, p2) => {
return Math.sqrt(Math.pow(p1.clientX - p2.clientX, 2) + Math.pow(p1.clientY - p2.clientY, 2))
}
const clamp = (min, max, value) => Math.min(max, Math.max(min, value));
// .zoomable-image {
// position: relative;
// @include flex(center, center);
// @include size(100%);
// img {
// object-fit: contain;
// @include size(auto);
// @include max-size($media-modal-media-max-width, $media-modal-media-max-height);
// }
// }
// : todo :
const clamp = (min, max, value) => {
return Math.min(max, Math.max(min, value))
}
export default class ZoomableImage extends PureComponent {
@@ -40,69 +28,69 @@ export default class ZoomableImage extends PureComponent {
alt: '',
width: null,
height: null,
};
}
state = {
scale: MIN_SCALE,
}
removers = [];
container = null;
image = null;
lastTouchEndTime = 0;
lastDistance = 0;
removers = []
container = null
image = null
lastTouchEndTime = 0
lastDistance = 0
componentDidMount () {
let handler = this.handleTouchStart;
this.container.addEventListener('touchstart', handler);
this.removers.push(() => this.container.removeEventListener('touchstart', handler));
handler = this.handleTouchMove;
let handler = this.handleTouchStart
this.container.addEventListener('touchstart', handler)
this.removers.push(() => this.container.removeEventListener('touchstart', handler))
handler = this.handleTouchMove
// on Chrome 56+, touch event listeners will default to passive
// https://www.chromestatus.com/features/5093566007214080
this.container.addEventListener('touchmove', handler, { passive: false });
this.removers.push(() => this.container.removeEventListener('touchend', handler));
this.container.addEventListener('touchmove', handler, { passive: false })
this.removers.push(() => this.container.removeEventListener('touchend', handler))
}
componentWillUnmount () {
this.removeEventListeners();
this.removeEventListeners()
}
removeEventListeners () {
this.removers.forEach(listeners => listeners());
this.removers = [];
this.removers.forEach(listeners => listeners())
this.removers = []
}
handleTouchStart = e => {
if (e.touches.length !== 2) return;
if (e.touches.length !== 2) return
this.lastDistance = getDistance(...e.touches);
this.lastDistance = getDistance(...e.touches)
}
handleTouchMove = e => {
const { scrollTop, scrollHeight, clientHeight } = this.container;
const { scrollTop, scrollHeight, clientHeight } = this.container
if (e.touches.length === 1 && scrollTop !== scrollHeight - clientHeight) {
// prevent propagating event to MediaModal
e.stopPropagation();
return;
e.stopPropagation()
return
}
if (e.touches.length !== 2) return;
if (e.touches.length !== 2) return
e.preventDefault();
e.stopPropagation();
e.preventDefault()
e.stopPropagation()
const distance = getDistance(...e.touches);
const midpoint = getMidpoint(...e.touches);
const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance);
const distance = getDistance(...e.touches)
const midpoint = getMidpoint(...e.touches)
const scale = clamp(MIN_SCALE, MAX_SCALE, this.state.scale * distance / this.lastDistance)
this.zoom(scale, midpoint);
this.zoom(scale, midpoint)
this.lastMidpoint = midpoint;
this.lastDistance = distance;
this.lastMidpoint = midpoint
this.lastDistance = distance
}
zoom(nextScale, midpoint) {
const { scale } = this.state;
const { scrollLeft, scrollTop } = this.container;
const { scale } = this.state
const { scrollLeft, scrollTop } = this.container
// math memo:
// x = (scrollLeft + midpoint.x) / scrollWidth
@@ -110,38 +98,44 @@ export default class ZoomableImage extends PureComponent {
// scrollWidth = clientWidth * scale
// scrollWidth' = clientWidth * nextScale
// Solve x = x' for nextScrollLeft
const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x;
const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y;
const nextScrollLeft = (scrollLeft + midpoint.x) * nextScale / scale - midpoint.x
const nextScrollTop = (scrollTop + midpoint.y) * nextScale / scale - midpoint.y
this.setState({ scale: nextScale }, () => {
this.container.scrollLeft = nextScrollLeft;
this.container.scrollTop = nextScrollTop;
});
this.container.scrollLeft = nextScrollLeft
this.container.scrollTop = nextScrollTop
})
}
handleClick = e => {
// don't propagate event to MediaModal
e.stopPropagation();
const handler = this.props.onClick;
if (handler) handler();
e.stopPropagation()
const handler = this.props.onClick
if (handler) handler()
}
setContainerRef = c => {
this.container = c;
this.container = c
}
setImageRef = c => {
this.image = c;
this.image = c
}
render () {
const { alt, src } = this.props;
const { scale } = this.state;
const overflow = scale === 1 ? 'hidden' : 'scroll';
const { alt, src } = this.props
const { scale } = this.state
const overflow = scale === 1 ? 'hidden' : 'scroll'
return (
<div className='zoomable-image' ref={this.setContainerRef} style={{ overflow }}>
<div
className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}
ref={this.setContainerRef}
style={{ overflow }}
>
<img
className={[_s.default, _s.objectFitContain, _s.heightAuto, _s.widthAuto, _s.maxWidth100PC, _s.heightMax100PC].join(' ')}
role='presentation'
ref={this.setImageRef}
alt={alt}
@@ -154,7 +148,7 @@ export default class ZoomableImage extends PureComponent {
onClick={this.handleClick}
/>
</div>
);
)
}
}