Zoom - pinch gesture

src/js/plugins/touch.js

@@ -64,6 +64,27 @@ export default class Touch {
      */
     this.isEnabled = false;
 
+    /**
+     * Whether is a gesture or not.
+     * @type {boolean}
+     * @private
+     */
+    this.isGesture = false;
+
+    /**
+     * Stores start touch event (x, y).
+     * @type {array}
+     * @private
+     */
+    this.startTouches = [];
+
+    /**
+     * Stores end touch event (x, y).
+     * @type {array}
+     * @private
+     */
+    this.endTouches = [];
+
     let events;
 
     if (MobileDetector.isAny()) {
@@ -78,7 +99,6 @@ export default class Touch {
       this.isEnabled = true;
       document.addEventListener(events.START, this.onStart_.bind(this), false);
       document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
-      document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
       document.addEventListener(events.END, this.onStop_.bind(this), false);
     }
   }
@@ -95,10 +115,16 @@ export default class Touch {
 
     const info = Touch.normalizeEventInfo(event);
 
+    if (event.touches.length == 1) {
       this.startX_ = info.x;
       this.startY_ = info.y;
       this.endX_ = info.x;
       this.endY_ = info.y;
+    } else if (event.touches.length > 1) {
+      this.startTouches = this.getTouchCoorinates(event);
+      this.endTouches = this.startTouches;
+      this.isGesture = true;
+    }
   }
 
   /**
@@ -113,9 +139,13 @@ export default class Touch {
 
     const info = Touch.normalizeEventInfo(event);
 
+    if (this.isGesture) {
+      this.endTouches = this.getTouchCoorinates(event);
+    } else {
       this.endX_ = info.x;
       this.endY_ = info.y;
     }
+  }
 
   /**
    * Stop touch handler. Checks if it needs to make any actions.
@@ -126,6 +156,21 @@ export default class Touch {
       return;
     }
 
+    if (this.isGesture) {
+      const startDistance = Math.sqrt(
+        Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) +
+        Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2)
+      );
+      const endDistance = Math.sqrt(
+        Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) +
+        Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2)
+      );
+      if (startDistance > endDistance) {
+        // Pinch gesture
+        this.ws_.toggleZoom();
+      }
+      this.isGesture = false;
+    } else {
       const diffX = this.startX_ - this.endX_;
       const diffY = this.startY_ - this.endY_;
 
@@ -138,6 +183,17 @@ export default class Touch {
         }
       }
     }
+  }
+
+  /**
+   * Get X,Y coordinates from touchs pointers
+   * @param {Event} event
+   * @return {array}
+   */
+  getTouchCoorinates(event) {
+    return [{x: event.touches[0].clientX, y: event.touches[0].clientY},
+      {x: event.touches[1].clientX, y: event.touches[1].clientY}];
+  }
 
   /**
    * Normalizes an event to deal with differences between PointerEvent and

static/js/webslides.js

@@ -2034,6 +2034,27 @@ var Touch = function () {
      */
     this.isEnabled = false;
 
+    /**
+     * Whether is a gesture or not.
+     * @type {boolean}
+     * @private
+     */
+    this.isGesture = false;
+
+    /**
+     * Stores start touch event (x, y).
+     * @type {array}
+     * @private
+     */
+    this.startTouches = [];
+
+    /**
+     * Stores end touch event (x, y).
+     * @type {array}
+     * @private
+     */
+    this.endTouches = [];
+
     var events = void 0;
 
     if (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) {
@@ -2047,7 +2068,6 @@ var Touch = function () {
       this.isEnabled = true;
       document.addEventListener(events.START, this.onStart_.bind(this), false);
       document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
-      document.addEventListener(events.MOVE, this.onMove_.bind(this), false);
       document.addEventListener(events.END, this.onStop_.bind(this), false);
     }
   }
@@ -2068,10 +2088,16 @@ var Touch = function () {
 
       var info = Touch.normalizeEventInfo(event);
 
+      if (event.touches.length == 1) {
         this.startX_ = info.x;
         this.startY_ = info.y;
         this.endX_ = info.x;
         this.endY_ = info.y;
+      } else if (event.touches.length > 1) {
+        this.startTouches = this.getTouchCoorinates(event);
+        this.endTouches = this.startTouches;
+        this.isGesture = true;
+      }
     }
 
     /**
@@ -2089,9 +2115,13 @@ var Touch = function () {
 
       var info = Touch.normalizeEventInfo(event);
 
+      if (this.isGesture) {
+        this.endTouches = this.getTouchCoorinates(event);
+      } else {
         this.endX_ = info.x;
         this.endY_ = info.y;
       }
+    }
 
     /**
      * Stop touch handler. Checks if it needs to make any actions.
@@ -2105,6 +2135,15 @@ var Touch = function () {
         return;
       }
 
+      if (this.isGesture) {
+        var startDistance = Math.sqrt(Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) + Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2));
+        var endDistance = Math.sqrt(Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) + Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2));
+        if (startDistance > endDistance) {
+          // Pinch gesture
+          this.ws_.toggleZoom();
+        }
+        this.isGesture = false;
+      } else {
         var diffX = this.startX_ - this.endX_;
         var diffY = this.startY_ - this.endY_;
 
@@ -2117,6 +2156,19 @@ var Touch = function () {
           }
         }
       }
+    }
+
+    /**
+     * Get X,Y coordinates from touchs pointers
+     * @param {Event} event
+     * @return {array}
+     */
+
+  }, {
+    key: 'getTouchCoorinates',
+    value: function getTouchCoorinates(event) {
+      return [{ x: event.touches[0].clientX, y: event.touches[0].clientY }, { x: event.touches[1].clientX, y: event.touches[1].clientY }];
+    }
 
     /**
      * Normalizes an event to deal with differences between PointerEvent and