Slides index (aka zoom) merged into dev #73

webslides · Apr 29, 2017 · b19e4a4 · b19e4a4
2 parents 7149150 + 37e8d1a
commit b19e4a4
Show file tree

Hide file tree

Showing 14 changed files with 1,229 additions and 48 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -132,5 +132,3 @@
     "yield-star-spacing": [2, "after"]
   }
 }
-
-
diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js
@@ -5,7 +5,8 @@ import scrollTo from '../utils/scroll-to';
 
 const CLASSES = {
   VERTICAL: 'vertical',
-  READY: 'ws-ready'
+  READY: 'ws-ready',
+  DISABLED: 'disabled'
 };
 
 // Default plugins
@@ -19,7 +20,8 @@ const PLUGINS = {
   'scroll': Plugins.Scroll,
   'touch': Plugins.Touch,
   'video': Plugins.Video,
-  'youtube': Plugins.YouTube
+  'youtube': Plugins.YouTube,
+  'zoom': Plugins.Zoom
 };
 
 
@@ -386,6 +388,35 @@ export default class WebSlides {
     this.goToSlide(slideNumber);
   }
 
+  /**
+   * Toggles zoom
+   */
+  toggleZoom() {
+    this.plugins.zoom.toggleZoom();
+  }
+
+  /**
+   * Disables the webslides element adding a class "disabled"
+   */
+  disable() {
+    this.el.classList.add(CLASSES.DISABLED);
+  }
+
+  /**
+   * Enables the webslides element removing a class "disabled"
+   */
+  enable() {
+    this.el.classList.remove(CLASSES.DISABLED);
+  }
+
+  /**
+   * Checks if it is disabled
+   * @return {boolean}
+   */
+  isDisabled() {
+    return this.el.classList.contains(CLASSES.DISABLED);
+  }
+
   /**
    * Registers a plugin to be loaded when the instance is created. It allows
    * (on purpose) to replace default plugins.

diff --git a/src/js/plugins/keyboard.js b/src/js/plugins/keyboard.js
@@ -29,7 +29,7 @@ export default class Keyboard {
     let method;
     let argument;
 
-    if (DOM.isFocusableElement()) {
+    if (DOM.isFocusableElement() || this.ws_.isDisabled()) {
       return;
     }
 

diff --git a/src/js/plugins/navigation.js b/src/js/plugins/navigation.js
@@ -48,7 +48,7 @@ export default class Navigation {
      * Counter Element.
      * @type {Element}
      */
-    this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER);
+    this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER);
     /**
      * @type {WebSlides}
      * @private
@@ -72,6 +72,7 @@ export default class Navigation {
       'ws:slide-change', this.onSlideChanged_.bind(this));
     this.next.addEventListener('click', this.onButtonClicked_.bind(this));
     this.prev.addEventListener('click', this.onButtonClicked_.bind(this));
+    this.counter.addEventListener('click', this.onButtonClicked_.bind(this));
   }
 
   /**
@@ -80,7 +81,7 @@ export default class Navigation {
    * @param {string|number} max Max slide number.
    */
   updateCounter(current, max) {
-    this.counter.textContent = `${current} / ${max}`;
+    this.counter.childNodes[0].textContent = `${current} / ${max}`;
   }
 
   /**
@@ -97,6 +98,21 @@ export default class Navigation {
     return arrow;
   }
 
+  /**
+   * Creates the navigation counter.
+   * @param {!String} id Desired ID for the counter.
+   * @return {Element} The arrow element.
+   */
+  static createCounter(id) {
+    const counter = DOM.createNode('span', id);
+    const link = document.createElement('a');
+    link.href = '#';
+    link.title = 'View all slides';
+    counter.appendChild(link);
+
+    return counter;
+  }
+
   /**
    * Slide Change event handler. Will update the text on the navigation.
    * @param {CustomEvent} event
@@ -115,8 +131,10 @@ export default class Navigation {
     event.preventDefault();
     if (event.target === this.next) {
       this.ws_.goNext();
-    } else {
+    } else if (event.target === this.prev) {
       this.ws_.goPrev();
+    } else {
+      this.ws_.toggleZoom();
     }
   }
 }
diff --git a/src/js/plugins/plugins.js b/src/js/plugins/plugins.js
@@ -8,6 +8,7 @@ import Scroll from './scroll';
 import Touch from './touch';
 import Video from './video';
 import YouTube from './youtube';
+import Zoom from './zoom';
 
 export default {
   AutoSlide,
@@ -19,5 +20,6 @@ export default {
   Scroll,
   Touch,
   Video,
-  YouTube
+  YouTube,
+  Zoom
 };
diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js
@@ -76,6 +76,10 @@ export default class Scroll {
    * @private
    */
   onMouseWheel_(event) {
+    if (this.ws_.isDisabled()) {
+      return;
+    }
+
     if (this.ws_.isMoving || this.timeout_) {
       event.preventDefault();
       return;

diff --git a/src/js/plugins/touch.js b/src/js/plugins/touch.js
@@ -63,6 +63,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()) {
@@ -87,12 +108,22 @@ export default class Touch {
    * @private
    */
   onStart_(event) {
+    if (this.ws_.isDisabled()) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
-    this.startX_ = info.x;
-    this.startY_ = info.y;
-    this.endX_ = info.x;
-    this.endY_ = info.y;
+    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;
+    }
   }
 
   /**
@@ -101,30 +132,68 @@ export default class Touch {
    * @private
    */
   onMove_(event) {
+    if (this.ws_.isDisabled()) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
-    this.endX_ = info.x;
-    this.endY_ = info.y;
+    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.
    * @private
    */
   onStop_() {
-    const diffX = this.startX_ - this.endX_;
-    const diffY = this.startY_ - this.endY_;
-
-    // It's an horizontal drag
-    if (Math.abs(diffX) > Math.abs(diffY)) {
-      if (diffX < -this.ws_.options.slideOffset) {
-        this.ws_.goPrev();
-      } else if(diffX > this.ws_.options.slideOffset) {
-        this.ws_.goNext();
+    if (this.ws_.isDisabled()) {
+      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_;
+
+      // It's an horizontal drag
+      if (Math.abs(diffX) > Math.abs(diffY)) {
+        if (diffX < -this.ws_.options.slideOffset) {
+          this.ws_.goPrev();
+        } else if(diffX > this.ws_.options.slideOffset) {
+          this.ws_.goNext();
+        }
       }
     }
   }
 
+  /**
+   * 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
    * TouchEvent.