diff options
author | ftab <fury@xibase.com> | 2019-04-08 07:39:41 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2019-04-08 07:39:41 +0000 |
commit | 513e4f991f893dfea7a917d4a349c693dc1fd6bb (patch) | |
tree | 9be34f2e7b24d5f066f5257aea0bf91490adcd78 /app/assets/javascripts/commit | |
parent | 0c1fffe2e57167c81880394c7fe275f0fe44169f (diff) | |
download | gitlab-ce-513e4f991f893dfea7a917d4a349c693dc1fd6bb.tar.gz |
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.
Diffstat (limited to 'app/assets/javascripts/commit')
-rw-r--r-- | app/assets/javascripts/commit/image_file.js | 44 |
1 files changed, 27 insertions, 17 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) { |