add touch-action rules

mapbox · Mar 23, 2017 · 6f89db9 · 6f89db9
1 parent 213d18a
commit 6f89db9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -18,6 +18,17 @@
     cursor: grabbing;
 }
 
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate {
+    -ms-touch-action: pan-x pan-y;
+    touch-action: pan-x pan-y;
+}
+.mapboxgl-canvas-container.mapboxgl-touch-drag-pan {
+    -ms-touch-action: pinch-zoom;
+}
+.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan {
+    -ms-touch-action: none;
+    touch-action: none;
+}
 .mapboxgl-ctrl-top-left,
 .mapboxgl-ctrl-top-right,
 .mapboxgl-ctrl-bottom-left,

diff --git a/src/ui/handler/drag_pan.js b/src/ui/handler/drag_pan.js
@@ -55,6 +55,7 @@ class DragPanHandler {
      */
     enable() {
         if (this.isEnabled()) return;
+        this._el.classList.add('mapboxgl-touch-drag-pan');
         this._el.addEventListener('mousedown', this._onDown);
         this._el.addEventListener('touchstart', this._onDown);
         this._enabled = true;
@@ -68,6 +69,7 @@ class DragPanHandler {
      */
     disable() {
         if (!this.isEnabled()) return;
+        this._el.classList.remove('mapboxgl-touch-drag-pan');
         this._el.removeEventListener('mousedown', this._onDown);
         this._el.removeEventListener('touchstart', this._onDown);
         this._enabled = false;

diff --git a/src/ui/handler/touch_zoom_rotate.js b/src/ui/handler/touch_zoom_rotate.js
@@ -51,6 +51,7 @@ class TouchZoomRotateHandler {
      */
     enable(options) {
         if (this.isEnabled()) return;
+        this._el.classList.add('mapboxgl-touch-zoom-rotate');
         this._el.addEventListener('touchstart', this._onStart, false);
         this._enabled = true;
         this._aroundCenter = options && options.around === 'center';
@@ -64,6 +65,7 @@ class TouchZoomRotateHandler {
      */
     disable() {
         if (!this.isEnabled()) return;
+        this._el.classList.remove('mapboxgl-touch-zoom-rotate');
         this._el.removeEventListener('touchstart', this._onStart);
         this._enabled = false;
     }