Use pointer events for resizing the photoviewer on supported devices …

…(re: #5505)
openstreetmap · May 8, 2020 · a781847 · a781847
1 parent 77061e9
commit a781847
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js
@@ -13,6 +13,8 @@ export function uiPhotoviewer(context) {
 
     var dispatch = d3_dispatch('resize');
 
+    var _pointerPrefix = 'PointerEvent' in window ? 'pointer' : 'mouse';
+
     function photoviewer(selection) {
         selection
             .append('button')
@@ -25,27 +27,34 @@ export function uiPhotoviewer(context) {
             .append('div')
             .call(svgIcon('#iD-icon-close'));
 
+        function preventDefault() {
+            d3_event.preventDefault();
+        }
+
         selection
             .append('button')
             .attr('class', 'resize-handle-xy')
+            .on('touchstart touchdown touchend', preventDefault)
             .on(
-                'mousedown',
+                _pointerPrefix + 'down',
                 buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true, resizeOnY: true })
             );
 
         selection
             .append('button')
             .attr('class', 'resize-handle-x')
+            .on('touchstart touchdown touchend', preventDefault)
             .on(
-                'mousedown',
+                _pointerPrefix + 'down',
                 buildResizeListener(selection, 'resize', dispatch, { resizeOnX: true })
             );
 
         selection
             .append('button')
             .attr('class', 'resize-handle-y')
+            .on('touchstart touchdown touchend', preventDefault)
             .on(
-                'mousedown',
+                _pointerPrefix + 'down',
                 buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true })
             );
 
@@ -54,16 +63,23 @@ export function uiPhotoviewer(context) {
         services.openstreetcam.loadViewer(context);
 
         function buildResizeListener(target, eventName, dispatch, options) {
+
             var resizeOnX = !!options.resizeOnX;
             var resizeOnY = !!options.resizeOnY;
             var minHeight = options.minHeight || 240;
             var minWidth = options.minWidth || 320;
+            var pointerId;
             var startX;
             var startY;
             var startWidth;
             var startHeight;
 
             function startResize() {
+                if (pointerId !== (d3_event.pointerId || 'mouse')) return;
+
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+
                 var mapSize = context.map().dimensions();
 
                 if (resizeOnX) {
@@ -86,19 +102,36 @@ export function uiPhotoviewer(context) {
             }
 
             function stopResize() {
+                if (pointerId !== (d3_event.pointerId || 'mouse')) return;
+
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+
+                // remove all the listeners we added
                 d3_select(window)
                     .on('.' + eventName, null);
             }
 
             return function initResize() {
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+
+                pointerId = d3_event.pointerId || 'mouse';
+
                 startX = d3_event.clientX;
                 startY = d3_event.clientY;
-                startWidth = target.node().getBoundingClientRect().width;
-                startHeight = target.node().getBoundingClientRect().height;
+                var targetRect = target.node().getBoundingClientRect();
+                startWidth = targetRect.width;
+                startHeight = targetRect.height;
 
                 d3_select(window)
-                    .on('mousemove.' + eventName, startResize, false)
-                    .on('mouseup.' + eventName, stopResize, false);
+                    .on(_pointerPrefix + 'move.' + eventName, startResize, false)
+                    .on(_pointerPrefix + 'up.' + eventName, stopResize, false);
+
+                if (_pointerPrefix === 'pointer') {
+                    d3_select(window)
+                        .on('pointercancel.' + eventName, stopResize, false);
+                }
             };
         }
     }