Click on zoomed slide event handled

src/js/plugins/keyboard.js

@@ -29,7 +29,7 @@ export default class Keyboard {
     let method;
     let argument;
 
-    if (DOM.isFocusableElement()) {
+    if (DOM.isFocusableElement() || !DOM.isVisible(this.ws_.el)) {
       return;
     }
 

src/js/plugins/scroll.js

@@ -1,3 +1,4 @@
+import DOM from '../utils/dom';
 import MobileDetector from '../utils/mobile-detector';
 
 
@@ -71,6 +72,10 @@ export default class Scroll {
    * @private
    */
   onMouseWheel_(event) {
+    if (!DOM.isVisible(this.ws_.el)) {
+      return;
+    }
+
     if (this.ws_.isMoving || this.timeout_) {
       event.preventDefault();
       return;

src/js/plugins/touch.js

@@ -1,3 +1,4 @@
+import DOM from '../utils/dom';
 import MobileDetector from '../utils/mobile-detector';
 
 const EVENTS = {
@@ -88,6 +89,10 @@ export default class Touch {
    * @private
    */
   onStart_(event) {
+    if (!DOM.isVisible(this.ws_.el)) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
     this.startX_ = info.x;
@@ -102,6 +107,10 @@ export default class Touch {
    * @private
    */
   onMove_(event) {
+    if (!DOM.isVisible(this.ws_.el)) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
     this.endX_ = info.x;
@@ -113,6 +122,10 @@ export default class Touch {
    * @private
    */
   onStop_() {
+    if (!DOM.isVisible(this.ws_.el)) {
+      return;
+    }
+
     const diffX = this.startX_ - this.endX_;
     const diffY = this.startY_ - this.endY_;
 

src/js/plugins/zoom.js

@@ -39,14 +39,15 @@ export default class Zoom {
     this.isZoomed_ = false;
 
     this.preBuildZoom_();
-    document.addEventListener('keydown', this.onKeyDown.bind(this));
+    document.body.addEventListener('keydown', this.onKeyDown.bind(this));
+    window.addEventListener('resize', this.onWindowResize.bind(this));
   }
 
   /**
    * On key down handler. Will decide if Zoom in or out
    * @param {Event} event Key down event
    */
-  onKeyDown( event ) {
+  onKeyDown(event) {
     if ( !this.isZoomed_ && Keys.MINUS.includes( event.which ) ) {
       this.zoomIn();
     } else if ( this.isZoomed_ && Keys.PLUS.includes( event.which ) ) {
@@ -79,27 +80,45 @@ export default class Zoom {
       wrap.className = CLASSES.WRAP;
       const div = DOM.wrap(wrap, 'div');
       div.className = CLASSES.DIV;
+      // Adding some layer for controling click events
+      const divLayer = document.createElement('div');
+      divLayer.className = 'zoom-layer';
+      divLayer.addEventListener('click', e => {
+        this.zoomOut();
+        this.ws_.goToSlide(elem.i);
+      });
+      wrap.appendChild(divLayer);
 
-      // Calculates the margins in relation to window width
-      const divCSS = window.getComputedStyle(div);
-      const marginW = DOM.parseSize(divCSS.paddingLeft)
-        + DOM.parseSize(divCSS.paddingRight);
-      const marginH = DOM.parseSize(divCSS.paddingTop)
-        + DOM.parseSize(divCSS.paddingBottom);
-
-      // Sets element size: window size - relative margins
-      const scale = divCSS.width.includes('%') ?
-        100 / DOM.parseSize(divCSS.width) :
-        window.innerWidth / DOM.parseSize(divCSS.width);
-      elem.el.style.width = `${window.innerWidth - marginW * scale}px`;
-      elem.el.style.height = `${window.innerHeight - marginH * scale}px`;
-
-      // Because of flexbox, wrap height is required
-      const slideCSS = window.getComputedStyle(elem.el);
-      wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`;
+      this.setSizes_(div, wrap, elem);
     });
   }
 
+  /**
+   * Sets layers size
+   * @param {Element} div flexbox element
+   * @param {Element} wrap wrapping element
+   * @param {Element} elem slide element
+   */
+  setSizes_(div, wrap, elem) {
+    // Calculates the margins in relation to window width
+    const divCSS = window.getComputedStyle(div);
+    const marginW = DOM.parseSize(divCSS.paddingLeft)
+      + DOM.parseSize(divCSS.paddingRight);
+    const marginH = DOM.parseSize(divCSS.paddingTop)
+      + DOM.parseSize(divCSS.paddingBottom);
+
+    // Sets element size: window size - relative margins
+    const scale = divCSS.width.includes('%') ?
+      100 / DOM.parseSize(divCSS.width) :
+      window.innerWidth / DOM.parseSize(divCSS.width);
+    elem.el.style.width = `${window.innerWidth - marginW * scale}px`;
+    elem.el.style.height = `${window.innerHeight - marginH * scale}px`;
+
+    // Because of flexbox, wrap height is required
+    const slideCSS = window.getComputedStyle(elem.el);
+    wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`;
+  }
+
   /**
    * Zoom In the slider, scales the slides and uses a grid layout to show them
    */
@@ -107,6 +126,7 @@ export default class Zoom {
     DOM.hide(this.ws_.el);
     DOM.show(this.zws_.el);
     this.isZoomed_ = true;
+    document.body.style.overflow = 'auto';
   }
 
   /**
@@ -116,6 +136,19 @@ export default class Zoom {
     DOM.hide(this.zws_.el);
     DOM.show(this.ws_.el);
     this.isZoomed_ = false;
+    document.body.style.overflow = '';
+  }
+
+  /**
+   * When windows resize it is necessary to recalculate layers sizes
+   * @param {Event} ev
+   */
+  onWindowResize(ev) {
+    this.zws_.slides.forEach( elem => {
+      const wrap = elem.el.parentElement;
+      const div = wrap.parentElement;
+      this.setSizes_(div, wrap, elem);
+    });
   }
 
 }

src/js/utils/dom.js

@@ -121,6 +121,16 @@ export default class DOM {
     el.style.display = '';
   }
 
+  /**
+   * Checks if the element is visible.This is only intended
+   * to be used in conjunction with DOM.hide and DOM.show
+   * @param {Element} el Element to check.
+   * @return {boolean}
+   */
+  static isVisible(el) {
+    return el.style.display == '';
+  }
+
   /**
    * Fires a custom event on the given target.
    * @param {Element} target The target of the event.