Blur efect when zooming

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
@@ -390,6 +391,27 @@ export default class WebSlides {
     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
+   */
+  isDisabled() {
+    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.

src/js/plugins/keyboard.js

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

src/js/plugins/scroll.js

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

src/js/plugins/touch.js

@@ -1,4 +1,3 @@
-import DOM from '../utils/dom';
 import MobileDetector from '../utils/mobile-detector';
 
 const EVENTS = {
@@ -109,7 +108,7 @@ export default class Touch {
    * @private
    */
   onStart_(event) {
-    if (!DOM.isVisible(this.ws_.el)) {
+    if (!this.ws_.isDisabled()) {
       return;
     }
 
@@ -133,7 +132,7 @@ export default class Touch {
    * @private
    */
   onMove_(event) {
-    if (!DOM.isVisible(this.ws_.el)) {
+    if (!this.ws_.isDisabled()) {
       return;
     }
 
@@ -152,7 +151,7 @@ export default class Touch {
    * @private
    */
   onStop_() {
-    if (!DOM.isVisible(this.ws_.el)) {
+    if (!this.ws_.isDisabled()) {
       return;
     }
 

src/js/plugins/zoom.js

@@ -65,6 +65,9 @@ export default class Zoom {
     this.zws_.el = this.ws_.el.cloneNode();
     this.zws_.el.id = ID;
     this.zws_.el.className = CLASSES.ZOOM;
+
+    this.zws_.el.addEventListener('click', () => this.toggleZoom());
+
     // Clone the slides
     this.zws_.slides = [].map.call(this.ws_.slides,
         (slide, i) => {
@@ -94,6 +97,7 @@ export default class Zoom {
     const divLayer = document.createElement('div');
     divLayer.className = 'zoom-layer';
     divLayer.addEventListener('click', e => {
+      e.stopPropagation();
       this.zoomOut();
       this.ws_.goToSlide(elem.i);
     });
@@ -103,9 +107,6 @@ export default class Zoom {
     slideNumber.className = 'slide-number';
     slideNumber.textContent = `${elem.i+1}`;
     div.appendChild(slideNumber);
-    // Zoom out when click in slide "border"
-    const obj = this;
-    div.addEventListener('click', () => obj.toggleZoom());
 
     this.setSizes_(div, wrap, elem);
   }
@@ -159,7 +160,7 @@ export default class Zoom {
    * Zoom In the slider, scales the slides and uses a grid layout to show them
    */
   zoomIn() {
-    DOM.hide(this.ws_.el);
+    this.ws_.disable();
     DOM.show(this.zws_.el);
     this.isZoomed_ = true;
     document.body.style.overflow = 'auto';
@@ -170,7 +171,7 @@ export default class Zoom {
    */
   zoomOut() {
     DOM.hide(this.zws_.el);
-    DOM.show(this.ws_.el);
+    this.ws_.enable();
     this.isZoomed_ = false;
     document.body.style.overflow = '';
   }