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.

3 files changed, 52 insertions, 21 deletions

diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index d4ecfa4aa93..bc666aef54b 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 b25aebd7c98..2b5b2269ec8 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 {
       </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>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index eddafc759a2..ad3b3b81ac5 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -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>