Click on zoomed slide event handled

.eslintrc

@@ -8,7 +8,7 @@
   },
   "rules": {
     "no-cond-assign": 0,
-    "no-console": 2,
+    "no-console": 0,
     "no-constant-condition": 2,
     "no-control-regex": 2,
     "no-debugger": 2,

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
+      this.setSizes_(div, wrap, elem);
-      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`;
     });
   }
 
+  /**
+   * 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.

static/css/base.css

@@ -49,6 +49,7 @@
 	14. Forms
 	15. Safari Bug (flex-wrap)
 	16. Print
+  17. Zoom
 
 ----------------------------------------------------------------------------------- */
 
@@ -315,7 +316,6 @@ html.ws-ready body {
 #webslides {
   height: 100vh;
   overflow-x: hidden;
-  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
 /* -- Hide scrollbar, but still being able to scroll -- */
@@ -3192,3 +3192,37 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
     display: none;
   }
 }
+
+
+/*=========================================
+16. ZOOM
+=========================================== */
+
+#webslides-zoomed.grid {
+  background: #ccc;
+}
+
+#webslides-zoomed.grid > .column {
+  position: relative;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  position: relative;
+  background: #fff;
+}
+#webslides-zoomed.grid > .column {
+  width: 25%;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+  transform: scale(0.25) translate(-150%, -150vh);
+  display: flex !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  clip: rect(0px auto auto 0);
+}
+#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
+  position: absolute;
+  background: transparent;
+  width: 100%;
+  height: 100%;
+}

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.2.1
- * Date: 2017-04-01
+ * Date: 2017-04-05
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -231,6 +231,19 @@ var DOM = function () {
       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}
+     */
+
+  }, {
+    key: 'isVisible',
+    value: function isVisible(el) {
+      return el.style.display == '';
+    }
+
     /**
      * Fires a custom event on the given target.
      * @param {Element} target The target of the event.
@@ -1531,7 +1544,7 @@ var Keyboard = function () {
       var method = void 0;
       var argument = void 0;
 
-      if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement()) {
+      if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || !__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isVisible(this.ws_.el)) {
         return;
       }
 
@@ -1778,13 +1791,15 @@ var Navigation = function () {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__ = __webpack_require__(3);
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 
 
+
 /**
  * Scroll plugin.
  */
@@ -1827,7 +1842,7 @@ var Scroll = function () {
      */
     this.timeout_ = null;
 
-    if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
+    if (!__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) {
       this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this));
 
       if (!wsInstance.isVertical) {
@@ -1863,6 +1878,10 @@ var Scroll = function () {
   }, {
     key: 'onMouseWheel_',
     value: function onMouseWheel_(event) {
+      if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) {
+        return;
+      }
+
       if (this.ws_.isMoving || this.timeout_) {
         event.preventDefault();
         return;
@@ -1909,13 +1928,15 @@ var Scroll = function () {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__ = __webpack_require__(3);
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 
 
+
 var EVENTS = {
   touch: {
     START: 'touchstart',
@@ -1984,9 +2005,9 @@ var Touch = function () {
 
     var events = void 0;
 
-    if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) {
+    if (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) {
       // Likely IE
-      if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindowsPhone())) {
+      if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isWindowsPhone())) {
         events = EVENTS.pointer;
       } else {
         events = EVENTS.touch;
@@ -2010,6 +2031,10 @@ var Touch = function () {
   _createClass(Touch, [{
     key: 'onStart_',
     value: function onStart_(event) {
+      if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) {
+        return;
+      }
+
       var info = Touch.normalizeEventInfo(event);
 
       this.startX_ = info.x;
@@ -2027,6 +2052,10 @@ var Touch = function () {
   }, {
     key: 'onMove_',
     value: function onMove_(event) {
+      if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) {
+        return;
+      }
+
       var info = Touch.normalizeEventInfo(event);
 
       this.endX_ = info.x;
@@ -2041,6 +2070,10 @@ var Touch = function () {
   }, {
     key: 'onStop_',
     value: function onStop_() {
+      if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) {
+        return;
+      }
+
       var diffX = this.startX_ - this.endX_;
       var diffY = this.startY_ - this.endY_;
 
@@ -2436,7 +2469,8 @@ var Zoom = function () {
     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));
   }
 
   /**
@@ -2484,24 +2518,44 @@ var Zoom = function () {
         wrap.className = CLASSES.WRAP;
         var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
         div.className = CLASSES.DIV;
+        // Adding some layer for controling click events
+        var divLayer = document.createElement('div');
+        divLayer.className = 'zoom-layer';
+        divLayer.addEventListener('click', function (e) {
+          _this.zoomOut();
+          _this.ws_.goToSlide(elem.i);
+        });
+        wrap.appendChild(divLayer);
 
-        // Calculates the margins in relation to window width
+        _this.setSizes_(div, wrap, elem);
-        var divCSS = window.getComputedStyle(div);
-        var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight);
-        var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom);
-
-        // Sets element size: window size - relative margins
-        console.log(window.innerWidth, divCSS.width);
-        var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].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
-        var slideCSS = window.getComputedStyle(elem.el);
-        wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px';
       });
     }
 
+    /**
+     * Sets layers size
+     * @param {Element} div flexbox element
+     * @param {Element} wrap wrapping element
+     * @param {Element} elem slide element
+     */
+
+  }, {
+    key: 'setSizes_',
+    value: function setSizes_(div, wrap, elem) {
+      // Calculates the margins in relation to window width
+      var divCSS = window.getComputedStyle(div);
+      var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight);
+      var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom);
+
+      // Sets element size: window size - relative margins
+      var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].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
+      var slideCSS = window.getComputedStyle(elem.el);
+      wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px';
+    }
+
     /**
      * Zoom In the slider, scales the slides and uses a grid layout to show them
      */
@@ -2512,6 +2566,7 @@ var Zoom = function () {
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.ws_.el);
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
       this.isZoomed_ = true;
+      document.body.style.overflow = 'auto';
     }
 
     /**
@@ -2524,6 +2579,24 @@ var Zoom = function () {
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el);
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.ws_.el);
       this.isZoomed_ = false;
+      document.body.style.overflow = '';
+    }
+
+    /**
+     * When windows resize it is necessary to recalculate layers sizes
+     * @param {Event} ev
+     */
+
+  }, {
+    key: 'onWindowResize',
+    value: function onWindowResize(ev) {
+      var _this2 = this;
+
+      this.zws_.slides.forEach(function (elem) {
+        var wrap = elem.el.parentElement;
+        var div = wrap.parentElement;
+        _this2.setSizes_(div, wrap, elem);
+      });
     }
   }]);
 

tests/test.css

@@ -10,7 +10,9 @@
   position: relative;
   background: #fff;
 }
-
+#webslides-zoomed.grid > .column {
+  width: 25%;
+}
 #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
   transform: scale(0.25) translate(-150%, -150vh);
   display: flex !important;
@@ -19,13 +21,9 @@
   left: 0;
   clip: rect(0px auto auto 0);
 }
-
+#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
-
+  position: absolute;
-
+  background: transparent;
-
+  width: 100%;
-.enorme {
+  height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	font-size: 500px;
 }