Fix touch event pageX
Safari on iOS sort of figures out the right thing here, but other browsers need a specific touch to be referenced. This makes it work on Chrome and Firefox on Android, as well as Chrome DevTools mobile device view.
This commit is contained in:
parent
0c1fffe2e5
commit
513e4f991f
|
@ -71,29 +71,39 @@ export default class ImageFile {
|
|||
// eslint-disable-next-line class-methods-use-this
|
||||
initDraggable($el, padding, callback) {
|
||||
var dragging = false;
|
||||
var $body = $('body');
|
||||
var $offsetEl = $el.parent();
|
||||
|
||||
$el.off('mousedown').on('mousedown', function() {
|
||||
const $body = $('body');
|
||||
const $offsetEl = $el.parent();
|
||||
const dragStart = function() {
|
||||
dragging = true;
|
||||
$body.css('user-select', 'none');
|
||||
});
|
||||
};
|
||||
const dragStop = function() {
|
||||
dragging = false;
|
||||
$body.css('user-select', '');
|
||||
};
|
||||
const dragMove = function(e) {
|
||||
const moveX = e.pageX || e.touches[0].pageX;
|
||||
const left = moveX - ($offsetEl.offset().left + padding);
|
||||
if (!dragging) return;
|
||||
|
||||
callback(e, left);
|
||||
};
|
||||
|
||||
$el
|
||||
.off('mousedown')
|
||||
.off('touchstart')
|
||||
.on('mousedown', dragStart)
|
||||
.on('touchstart', dragStart);
|
||||
|
||||
$body
|
||||
.off('mouseup')
|
||||
.off('mousemove')
|
||||
.on('mouseup', function() {
|
||||
dragging = false;
|
||||
$body.css('user-select', '');
|
||||
})
|
||||
.on('mousemove', function(e) {
|
||||
var left;
|
||||
if (!dragging) return;
|
||||
|
||||
left = e.pageX - ($offsetEl.offset().left + padding);
|
||||
|
||||
callback(e, left);
|
||||
});
|
||||
.off('touchend')
|
||||
.off('touchmove')
|
||||
.on('mouseup', dragStop)
|
||||
.on('touchend', dragStop)
|
||||
.on('mousemove', dragMove)
|
||||
.on('touchmove', dragMove);
|
||||
}
|
||||
|
||||
prepareFrames(view) {
|
||||
|
|
|
@ -40,12 +40,15 @@ export default {
|
|||
},
|
||||
beforeDestroy() {
|
||||
document.body.removeEventListener('mouseup', this.stopDrag);
|
||||
this.$refs.dragger.removeEventListener('mousedown', this.startDrag);
|
||||
document.body.removeEventListener('touchend', this.stopDrag);
|
||||
document.body.removeEventListener('mousemove', this.dragMove);
|
||||
document.body.removeEventListener('touchmove', this.dragMove);
|
||||
},
|
||||
methods: {
|
||||
dragMove(e) {
|
||||
if (!this.dragging) return;
|
||||
const left = e.pageX - this.$refs.dragTrack.getBoundingClientRect().left;
|
||||
const moveX = e.pageX || e.touches[0].pageX;
|
||||
const left = moveX - this.$refs.dragTrack.getBoundingClientRect().left;
|
||||
const dragTrackWidth =
|
||||
this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
|
||||
|
||||
|
@ -60,11 +63,13 @@ export default {
|
|||
this.dragging = true;
|
||||
document.body.style.userSelect = 'none';
|
||||
document.body.addEventListener('mousemove', this.dragMove);
|
||||
document.body.addEventListener('touchmove', this.dragMove);
|
||||
},
|
||||
stopDrag() {
|
||||
this.dragging = false;
|
||||
document.body.style.userSelect = '';
|
||||
document.body.removeEventListener('mousemove', this.dragMove);
|
||||
document.body.removeEventListener('touchmove', this.dragMove);
|
||||
},
|
||||
prepareOnionSkin() {
|
||||
if (this.onionOldImgInfo && this.onionNewImgInfo) {
|
||||
|
@ -82,6 +87,7 @@ export default {
|
|||
this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
|
||||
|
||||
document.body.addEventListener('mouseup', this.stopDrag);
|
||||
document.body.addEventListener('touchend', this.stopDrag);
|
||||
}
|
||||
},
|
||||
onionNewImgLoaded(imgInfo) {
|
||||
|
@ -140,7 +146,14 @@ export default {
|
|||
</div>
|
||||
<div class="controls">
|
||||
<div class="transparent"></div>
|
||||
<div ref="dragTrack" class="drag-track" @mousedown="startDrag" @mouseup="stopDrag">
|
||||
<div
|
||||
ref="dragTrack"
|
||||
class="drag-track"
|
||||
@mousedown="startDrag"
|
||||
@mouseup="stopDrag"
|
||||
@touchstart="startDrag"
|
||||
@touchend="stopDrag"
|
||||
>
|
||||
<div ref="dragger" :style="{ left: onionDraggerPixelPos }" class="dragger"></div>
|
||||
</div>
|
||||
<div class="opaque"></div>
|
||||
|
|
|
@ -46,6 +46,8 @@ export default {
|
|||
window.removeEventListener('resize', this.resizeThrottled, false);
|
||||
document.body.removeEventListener('mouseup', this.stopDrag);
|
||||
document.body.removeEventListener('mousemove', this.dragMove);
|
||||
document.body.removeEventListener('touchend', this.stopDrag);
|
||||
document.body.removeEventListener('touchmove', this.dragMove);
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.resize, false);
|
||||
|
@ -54,7 +56,8 @@ export default {
|
|||
dragMove(e) {
|
||||
if (!this.dragging) return;
|
||||
|
||||
let leftValue = e.pageX - this.$refs.swipeFrame.getBoundingClientRect().left;
|
||||
const moveX = e.pageX || e.touches[0].pageX;
|
||||
let leftValue = moveX - this.$refs.swipeFrame.getBoundingClientRect().left;
|
||||
const spaceLeft = 20;
|
||||
const { clientWidth } = this.$refs.swipeFrame;
|
||||
if (leftValue <= 0) {
|
||||
|
@ -69,10 +72,12 @@ export default {
|
|||
startDrag() {
|
||||
this.dragging = true;
|
||||
document.body.addEventListener('mousemove', this.dragMove);
|
||||
document.body.addEventListener('touchmove', this.dragMove);
|
||||
},
|
||||
stopDrag() {
|
||||
this.dragging = false;
|
||||
document.body.removeEventListener('mousemove', this.dragMove);
|
||||
document.body.removeEventListener('touchmove', this.dragMove);
|
||||
},
|
||||
prepareSwipe() {
|
||||
if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
|
||||
|
@ -83,6 +88,7 @@ export default {
|
|||
Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
|
||||
|
||||
document.body.addEventListener('mouseup', this.stopDrag);
|
||||
document.body.addEventListener('touchend', this.stopDrag);
|
||||
}
|
||||
},
|
||||
swipeNewImgLoaded(imgInfo) {
|
||||
|
@ -143,6 +149,8 @@ export default {
|
|||
class="swipe-bar"
|
||||
@mousedown="startDrag"
|
||||
@mouseup="stopDrag"
|
||||
@touchstart="startDrag"
|
||||
@touchend="stopDrag"
|
||||
>
|
||||
<span class="top-handle"></span> <span class="bottom-handle"></span>
|
||||
</span>
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: "Make touch events work on image diff swipe view and onion skin"
|
||||
merge_request: 26971
|
||||
author: ftab
|
||||
type: added
|
Loading…
Reference in New Issue