diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js index d4ecfa4aa933b2e169d9cb9b43b0b1e771769c13..bc666aef54bb9c00751068465dad2de0b87c064a 100644 --- a/app/assets/javascripts/commit/image_file.js +++ b/app/assets/javascripts/commit/image_file.js @@ -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) { diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue index b25aebd7c98e8ccad41edf7366b8b4c35a8de1bb..2b5b2269ec8fbb2253f217f7a0afd891a2075b4e 100644 --- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue +++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue @@ -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 {