Slides index (aka zoom) merged into dev #73

.eslintrc

@@ -132,5 +132,3 @@
     "yield-star-spacing": [2, "after"]
   }
 }
-
-

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.

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;
     }
 

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();
     }
   }
 }

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
 };

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;

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;
+    if (event.touches.length == 1) {
-    this.startY_ = info.y;
+      this.startX_ = info.x;
-    this.endX_ = info.x;
+      this.startY_ = info.y;
-    this.endY_ = 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,10 +132,18 @@ export default class Touch {
    * @private
    */
   onMove_(event) {
+    if (this.ws_.isDisabled()) {
+      return;
+    }
+
     const info = Touch.normalizeEventInfo(event);
 
-    this.endX_ = info.x;
+    if (this.isGesture) {
-    this.endY_ = info.y;
+      this.endTouches = this.getTouchCoorinates(event);
+    } else {
+      this.endX_ = info.x;
+      this.endY_ = info.y;
+    }
   }
 
   /**
@@ -112,19 +151,49 @@ export default class Touch {
    * @private
    */
   onStop_() {
-    const diffX = this.startX_ - this.endX_;
+    if (this.ws_.isDisabled()) {
-    const diffY = this.startY_ - this.endY_;
+      return;
+    }
 
-    // It's an horizontal drag
+    if (this.isGesture) {
-    if (Math.abs(diffX) > Math.abs(diffY)) {
+      const startDistance = Math.sqrt(
-      if (diffX < -this.ws_.options.slideOffset) {
+        Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) +
-        this.ws_.goPrev();
+        Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2)
-      } else if(diffX > this.ws_.options.slideOffset) {
+      );
-        this.ws_.goNext();
+      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.

src/js/plugins/zoom.js

@@ -0,0 +1,205 @@
+import DOM from '../utils/dom';
+import Keys from '../utils/keys';
+import Slide from '../modules/slide';
+
+
+const CLASSES = {
+  ZOOM: 'grid',
+  DIV: 'column',
+  WRAP: 'wrap-zoom'
+};
+
+const ID = 'webslides-zoomed';
+
+/**
+ * Zoom plugin.
+ */
+export default class Zoom {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
+   */
+  constructor(wsInstance) {
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.zws_ = {};
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.isZoomed_ = false;
+
+    this.preBuildZoom_();
+    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) {
+    if ( !this.isZoomed_ && Keys.MINUS.includes( event.which ) ) {
+      this.zoomIn();
+    } else if ( this.isZoomed_ &&
+      (Keys.PLUS.includes( event.which ) || event.which == Keys.ESCAPE ) ) {
+      this.zoomOut();
+    }
+  }
+
+  /**
+   * Prepare zoom structure, scales the slides and uses a grid layout
+   * to show them
+   */
+  preBuildZoom_() {
+    // Clone #webslides element
+    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) => {
+          const s_ = slide.el.cloneNode(true);
+          this.zws_.el.appendChild(s_);
+          return new Slide(s_, i);
+        });
+    DOM.hide(this.zws_.el);
+    DOM.after(this.zws_.el, this.ws_.el);
+
+    // Creates the container for each slide
+    this.zws_.slides.forEach( elem => this.createSlideBlock_(elem));
+  }
+
+  /**
+   * Creates a block structure around the slide
+   * @param {Element} elem slide element
+   */
+  createSlideBlock_(elem) {
+    // Wraps the slide around a container
+    const wrap = DOM.wrap(elem.el, 'div');
+    wrap.className = CLASSES.WRAP;
+    // Slide container, need due to flexbox styles
+    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 => {
+      e.stopPropagation();
+      this.zoomOut();
+      this.ws_.goToSlide(elem.i);
+    });
+    wrap.appendChild(divLayer);
+    // Slide number
+    const slideNumber = document.createElement('span');
+    slideNumber.className = 'slide-number';
+    slideNumber.textContent = `${elem.i+1}`;
+    div.appendChild(slideNumber);
+
+    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);
+    if (scale == 1) {
+      // If the scale is 100% means it is mobile
+      const wsW = this.ws_.el.clientWidth;
+      elem.el.style.width = `${(wsW - marginW) * 2}px`;
+      elem.el.style.height = `${(wsW - marginH) * 1.5}px`;
+      elem.el.style.minHeight = scale == 1? 'auto' : '';
+      // Because of flexbox, wrap height is required
+      wrap.style.height = `${(wsW - marginH) * 1.5 / 2}px`;
+    } else {
+      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
+      wrap.style.height = `${window.innerHeight / scale}px`;
+    }
+  }
+
+  /**
+   * Toggles zoom
+   */
+  toggleZoom() {
+    if (this.isZoomed_) {
+      this.zoomOut();
+    } else {
+      this.zoomIn();
+    }
+  }
+
+  /**
+   * Zoom In the slider, scales the slides and uses a grid layout to show them
+   */
+  zoomIn() {
+    this.ws_.el.classList.add('zooming', 'in');
+    this.zws_.el.classList.add('zooming', 'in');
+    DOM.show(this.zws_.el);
+    setTimeout(() => {
+      this.ws_.el.classList.remove('zooming', 'in');
+      this.zws_.el.classList.remove('zooming', 'in');
+      this.ws_.disable();
+    }, 400);
+    this.isZoomed_ = true;
+    document.body.style.overflow = 'auto';
+  }
+
+  /**
+   * Zoom Out the slider, remove scale from the slides
+   */
+  zoomOut() {
+    this.ws_.el.classList.add('zooming', 'out');
+    this.zws_.el.classList.add('zooming', 'out');
+    setTimeout(() => {
+      this.ws_.el.classList.remove('zooming', 'out');
+      this.zws_.el.classList.remove('zooming', 'out');
+      DOM.hide(this.zws_.el);
+      this.ws_.enable();
+    }, 400);
+    this.isZoomed_ = false;
+    document.body.style.overflow = '';
+  }
+
+  /**
+   * When windows resize it is necessary to recalculate layers sizes
+   * @param {Event} ev
+   */
+  onWindowResize(ev) {
+    if (this.isZoomed_) this.zoomOut();
+
+    this.zws_.slides.forEach( elem => {
+      const wrap = elem.el.parentElement;
+      const div = wrap.parentElement;
+      this.setSizes_(div, wrap, elem);
+    });
+  }
+
+}

src/js/utils/dom.js

@@ -127,6 +127,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.
@@ -171,4 +181,42 @@ export default class DOM {
 
     return result;
   }
+
+  /**
+   * Gets the integer value of a style property
+   * @param {string} prop CSS property value
+   * @return {integer} The property without the units
+   */
+  static parseSize(prop) {
+    return Number( prop.replace( /[^\d\.]/g, '' ) );
+  }
+
+  /**
+   * Wraps a HTML structure arrond a element
+   * @param {Element} elem the element to be wrapped
+   * @param {string} tag the new element tag
+   * @return {Element} the new element
+   */
+  static wrap(elem, tag) {
+    const wrap = document.createElement(tag);
+    elem.parentElement.insertBefore(wrap, elem);
+    wrap.appendChild(elem);
+
+    return wrap;
+  }
+
+  /**
+   * Inserts and element after another element
+   * @param {Element} elem the element to be inserted
+   * @param {Element} target the element to be inserted after
+   */
+  static after(elem, target) {
+    const parent = target.parentNode;
+
+    if (parent.lastChild == target) {
+      parent.appendChild(elem);
+    } else {
+      parent.insertBefore(elem, target.nextSibling);
+    }
+  }
 }

src/js/utils/keys.js

@@ -8,7 +8,10 @@ const Keys = {
   LEFT: 37,
   UP: 38,
   RIGHT: 39,
-  DOWN: 40
+  DOWN: 40,
+  PLUS: [107, 171],
+  MINUS: [109, 173],
+  ESCAPE: 27
 };
 
 export default Keys;

static/css/base.css

@@ -47,12 +47,18 @@
 	12. Avatars
 	13. Tables
 	14. Forms
+<<<<<<< HEAD
   15. Longform Elements
 	16. Safari Bug (flex-wrap)
 	17. Print
+=======
+	15. Longform Elements
+	16. Safari Bug (flex-wrap)
+	17. Print
+	18. Zoom: Index of slides (grid)
+>>>>>>> feature/zoom
 
 ----------------------------------------------------------------------------------- */
-
 /*=========================================
 0. CSS Reset & Normalize
 =========================================== */
@@ -706,7 +712,11 @@ footer,
   height: 100%;
   margin: 0;
 }
+<<<<<<< HEAD
 /* -- Responsive background video 
+=======
+/* -- Responsive background video
+>>>>>>> feature/zoom
 https://fvsch.com/code/video-background/ -- */
 
 .fullscreen > .embed {
@@ -724,18 +734,30 @@ https://fvsch.com/code/video-background/ -- */
   .fullscreen > .embed > iframe,
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
+<<<<<<< HEAD
   .fullscreen > .embed > video { 
     height: 300%; 
     top: -100%; 
+=======
+  .fullscreen > .embed > video {
+    height: 300%;
+    top: -100%;
+>>>>>>> feature/zoom
   }
 }
 @media (max-aspect-ratio: 16/9) {
   .fullscreen > .embed > iframe,
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
+<<<<<<< HEAD
   .fullscreen > .embed > video { 
     width: 300%; 
     left: -100%; 
+=======
+  .fullscreen > .embed > video {
+    width: 300%;
+    left: -100%;
+>>>>>>> feature/zoom
   }
 }
 /* 2. If supporting object-fit, overriding (1): */
@@ -744,9 +766,15 @@ https://fvsch.com/code/video-background/ -- */
   .fullscreen > .embed > object,
   .fullscreen > .embed > embed,
   .fullscreen > .embed > video {
+<<<<<<< HEAD
     top: 0; 
     left: 0;
     width: 100%; 
+=======
+    top: 0;
+    left: 0;
+    width: 100%;
+>>>>>>> feature/zoom
     height: 100%;
     object-fit: cover;
   }
@@ -3236,14 +3264,23 @@ button:disabled:hover {
 }
 
 /*=========================================
+<<<<<<< HEAD
 15. Longform 
+=======
+15. Longform
+>>>>>>> feature/zoom
 =========================================== */
 
 /* -- Posts = .wrap.longform -- */
 
 .longform {
+<<<<<<< HEAD
 width: 72rem; 
 /* Why 72rem=720px? 
+=======
+width: 72rem;
+/* Why 72rem=720px?
+>>>>>>> feature/zoom
 90-95 characters per line = better reading speed */
 }
 .longform .alignleft, .longform .alignright {
@@ -3337,4 +3374,197 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   #counter, #navigation {
     display: none;
   }
+<<<<<<< HEAD
 }
+=======
+}
+
+/*=========================================
+18. Zoom: Index of slides (grid)
+=========================================== */
+#webslides-zoomed.grid{
+  -webkit-flex-direction: row;
+  flex-direction: row;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+  -webkit-align-items: flex-start;
+  align-items: flex-start;
+  min-height: 100vh;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  position: relative;
+  -webkit-transition: .3s;
+  transition: .3s;
+  overflow: hidden;
+}
+#webslides-zoomed.grid > .column {
+  width: 25%;
+  -webkit-order: 0;
+  order: 0;
+  -webkit-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-align-self: auto;
+  align-self: auto;
+}
+
+#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%;
+  cursor: pointer;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+  transform: scale(1.02);
+}
+
+.text-slide-number {
+  text-align: center;
+  display: inline-block;
+  margin: .8rem auto;
+}
+
+
+@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) {
+  #webslides-zoomed.grid > .column {
+    width: 50%;
+  }
+  #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+    transform: scale(0.5) translate(-50%, -50%);
+  }
+}
+
+@media (max-aspect-ratio: 2/3) {
+  #webslides-zoomed.grid > .column {
+    width: 100%;
+  }
+  #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+    transform: scale(0.5) translate(-50%, -50%);
+  }
+}
+
+#webslides.disabled, #webslides.zooming {
+	position: absolute;
+	width: 100%;
+	z-index: 0;
+}
+#webslides.disabled {
+  filter: blur(10px);
+}
+#webslides-zoomed.zooming {
+  opacity: 1;
+  transform: scale(1);
+}
+#webslides.zooming.in {
+  -webkit-animation: bg-zoom-in 0.4s 1;
+  animation: bg-zoom-in 0.4s 1;
+}
+
+#webslides.zooming.out {
+  -webkit-animation: bg-zoom-out 0.4s 1;
+  animation: bg-zoom-out 0.4s 1;
+}
+
+#webslides-zoomed.zooming.in {
+  -webkit-animation: grid-zoom-in 0.4s 1;
+  animation: grid-zoom-in 0.4s 1;
+}
+
+#webslides-zoomed.zooming.out {
+  -webkit-animation: grid-zoom-out 0.4s 1;
+  animation: grid-zoom-out 0.4s 1;
+}
+
+@-webkit-keyframes bg-zoom-in {
+  0% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(10px);
+  }
+}
+@keyframes bg-zoom-in {
+  0% {
+    filter: blur(0px);
+  }
+  100% {
+    filter: blur(10px);
+  }
+}
+
+@-webkit-keyframes bg-zoom-out {
+  0% {
+    filter: blur(10px);
+  }
+  100% {
+    filter: blur(0px);
+  }
+}
+@keyframes bg-zoom-out {
+  0% {
+    filter: blur(10px);
+  }
+  100% {
+    filter: blur(0px);
+  }
+}
+
+@-webkit-keyframes grid-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes grid-zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+}
+
+@-webkit-keyframes grid-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+}
+@keyframes grid-zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.2);
+    filter: blur(10px);
+  }
+}
+>>>>>>> feature/zoom

static/css/colors.css

@@ -39,7 +39,9 @@ WebSlides - Colors
 Base
 =========================================== */
 
-body {
+body,
+/*index of slides: mini-slides same bg color as body */
+#webslides-zoomed.grid > .column > .wrap-zoom {
   color: #333;
   background-color: #f7f9fb;
 }
@@ -918,4 +920,24 @@ footer[role=contentinfo] {
 /*footer:hover {
 background-color:rgba(255,255,255 , 0.3);
 }
+<<<<<<< HEAD
 */
+=======
+*/
+
+/*============================
+Zoom: Index of slides
+============================== */
+
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
+}
+#webslides-zoomed.grid > .column > .wrap-zoom:hover {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
+}
+.text-slide-number {
+  /*background-color: rgba(255, 255, 255, 0.1);*/
+  color: #456;
+  text-shadow: 0 1px 0 #fafafa;
+ }
+>>>>>>> feature/zoom

static/js/webslides.js

@@ -1,7 +1,12 @@
 /*!
  * Name: WebSlides
+<<<<<<< HEAD
  * Version: 1.3.1
  * Date: 2017-04-26
+=======
+ * Version: 1.2.1
+ * Date: 2017-04-29
+>>>>>>> feature/zoom
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -79,12 +84,16 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
+<<<<<<< HEAD
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+=======
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(18);
+>>>>>>> feature/zoom
 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; }; }();
 
 var _customEvent = __webpack_require__(17);
@@ -240,6 +249,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.
@@ -293,6 +315,53 @@ var DOM = function () {
 
       return result;
     }
+
+    /**
+     * Gets the integer value of a style property
+     * @param {string} prop CSS property value
+     * @return {integer} The property without the units
+     */
+
+  }, {
+    key: 'parseSize',
+    value: function parseSize(prop) {
+      return Number(prop.replace(/[^\d\.]/g, ''));
+    }
+
+    /**
+     * Wraps a HTML structure arrond a element
+     * @param {Element} elem the element to be wrapped
+     * @param {string} tag the new element tag
+     * @return {Element} the new element
+     */
+
+  }, {
+    key: 'wrap',
+    value: function wrap(elem, tag) {
+      var wrap = document.createElement(tag);
+      elem.parentElement.insertBefore(wrap, elem);
+      wrap.appendChild(elem);
+
+      return wrap;
+    }
+
+    /**
+     * Inserts and element after another element
+     * @param {Element} elem the element to be inserted
+     * @param {Element} target the element to be inserted after
+     */
+
+  }, {
+    key: 'after',
+    value: function after(elem, target) {
+      var parent = target.parentNode;
+
+      if (parent.lastChild == target) {
+        parent.appendChild(elem);
+      } else {
+        parent.insertBefore(elem, target.nextSibling);
+      }
+    }
   }]);
 
   return DOM;
@@ -525,7 +594,10 @@ var Keys = {
   LEFT: 37,
   UP: 38,
   RIGHT: 39,
-  DOWN: 40
+  DOWN: 40,
+  PLUS: [107, 171],
+  MINUS: [109, 173],
+  ESCAPE: 27
 };
 
 exports.default = Keys;
@@ -645,12 +717,19 @@ exports.default = MobileDetector;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
+<<<<<<< HEAD
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+=======
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(20);
+>>>>>>> feature/zoom
 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; }; }();
 
 var _plugins = __webpack_require__(12);
@@ -675,11 +754,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 var CLASSES = {
   VERTICAL: 'vertical',
-  READY: 'ws-ready'
+  READY: 'ws-ready',
+  DISABLED: 'disabled'
 };
 
 // Default plugins
 var PLUGINS = {
+<<<<<<< HEAD
   'autoslide': _plugins2.default.AutoSlide,
   'clickNav': _plugins2.default.ClickNav,
   'grid': _plugins2.default.Grid,
@@ -690,6 +771,19 @@ var PLUGINS = {
   'touch': _plugins2.default.Touch,
   'video': _plugins2.default.Video,
   'youtube': _plugins2.default.YouTube
+=======
+  'autoslide': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].AutoSlide,
+  'clickNav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].ClickNav,
+  'grid': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Grid,
+  'hash': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Hash,
+  'keyboard': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Keyboard,
+  'nav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Navigation,
+  'scroll': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Scroll,
+  'touch': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Touch,
+  'video': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Video,
+  'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube,
+  'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom
+>>>>>>> feature/zoom
 };
 
 /**
@@ -1099,6 +1193,47 @@ var WebSlides = function () {
       this.goToSlide(slideNumber);
     }
 
+    /**
+     * Toggles zoom
+     */
+
+  }, {
+    key: 'toggleZoom',
+    value: function toggleZoom() {
+      this.plugins.zoom.toggleZoom();
+    }
+
+    /**
+     * Disables the webslides element adding a class "disabled"
+     */
+
+  }, {
+    key: 'disable',
+    value: function disable() {
+      this.el.classList.add(CLASSES.DISABLED);
+    }
+
+    /**
+     * Enables the webslides element removing a class "disabled"
+     */
+
+  }, {
+    key: 'enable',
+    value: function enable() {
+      this.el.classList.remove(CLASSES.DISABLED);
+    }
+
+    /**
+     * Checks if it is disabled
+     * @return {boolean}
+     */
+
+  }, {
+    key: 'isDisabled',
+    value: function 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.
@@ -1558,7 +1693,11 @@ var Keyboard = function () {
       var method = void 0;
       var argument = void 0;
 
+<<<<<<< HEAD
       if (_dom2.default.isFocusableElement()) {
+=======
+      if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || this.ws_.isDisabled()) {
+>>>>>>> feature/zoom
         return;
       }
 
@@ -1674,7 +1813,11 @@ var Navigation = function () {
      * Counter Element.
      * @type {Element}
      */
+<<<<<<< HEAD
     this.counter = _dom2.default.createNode('span', ELEMENT_ID.COUNTER);
+=======
+    this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER);
+>>>>>>> feature/zoom
     /**
      * @type {WebSlides}
      * @private
@@ -1701,6 +1844,7 @@ var Navigation = function () {
       this.ws_.el.addEventListener('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));
     }
 
     /**
@@ -1712,7 +1856,7 @@ var Navigation = function () {
   }, {
     key: 'updateCounter',
     value: function updateCounter(current, max) {
-      this.counter.textContent = current + ' / ' + max;
+      this.counter.childNodes[0].textContent = current + ' / ' + max;
     }
 
     /**
@@ -1747,8 +1891,10 @@ var Navigation = function () {
       event.preventDefault();
       if (event.target === this.next) {
         this.ws_.goNext();
-      } else {
+      } else if (event.target === this.prev) {
         this.ws_.goPrev();
+      } else {
+        this.ws_.toggleZoom();
       }
     }
   }], [{
@@ -1760,6 +1906,24 @@ var Navigation = function () {
 
       return arrow;
     }
+
+    /**
+     * Creates the navigation counter.
+     * @param {!String} id Desired ID for the counter.
+     * @return {Element} The arrow element.
+     */
+
+  }, {
+    key: 'createCounter',
+    value: function createCounter(id) {
+      var counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', id);
+      var link = document.createElement('a');
+      link.href = '#';
+      link.title = 'View all slides';
+      counter.appendChild(link);
+
+      return counter;
+    }
   }]);
 
   return Navigation;
@@ -1772,6 +1936,21 @@ exports.default = Navigation;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
+<<<<<<< HEAD
+=======
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__autoslide__ = __webpack_require__(6);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__click_nav__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__grid__ = __webpack_require__(8);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__hash__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__keyboard__ = __webpack_require__(10);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__navigation__ = __webpack_require__(11);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__scroll__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(15);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(17);
+
+>>>>>>> feature/zoom
 
 
 Object.defineProperty(exports, "__esModule", {
@@ -1796,6 +1975,7 @@ var _hash2 = _interopRequireDefault(_hash);
 
 var _keyboard = __webpack_require__(10);
 
+<<<<<<< HEAD
 var _keyboard2 = _interopRequireDefault(_keyboard);
 
 var _navigation = __webpack_require__(11);
@@ -1832,6 +2012,21 @@ exports.default = {
   Video: _video2.default,
   YouTube: _youtube2.default
 };
+=======
+/* harmony default export */ __webpack_exports__["a"] = ({
+  AutoSlide: __WEBPACK_IMPORTED_MODULE_0__autoslide__["a" /* default */],
+  ClickNav: __WEBPACK_IMPORTED_MODULE_1__click_nav__["a" /* default */],
+  Grid: __WEBPACK_IMPORTED_MODULE_2__grid__["a" /* default */],
+  Hash: __WEBPACK_IMPORTED_MODULE_3__hash__["a" /* default */],
+  Keyboard: __WEBPACK_IMPORTED_MODULE_4__keyboard__["a" /* default */],
+  Navigation: __WEBPACK_IMPORTED_MODULE_5__navigation__["a" /* default */],
+  Scroll: __WEBPACK_IMPORTED_MODULE_6__scroll__["a" /* default */],
+  Touch: __WEBPACK_IMPORTED_MODULE_7__touch__["a" /* default */],
+  Video: __WEBPACK_IMPORTED_MODULE_8__video__["a" /* default */],
+  YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */],
+  Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */]
+});
+>>>>>>> feature/zoom
 
 /***/ }),
 /* 13 */
@@ -1931,6 +2126,10 @@ var Scroll = function () {
   }, {
     key: 'onMouseWheel_',
     value: function onMouseWheel_(event) {
+      if (this.ws_.isDisabled()) {
+        return;
+      }
+
       if (this.ws_.isMoving || this.timeout_) {
         event.preventDefault();
         return;
@@ -2059,6 +2258,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 (_mobileDetector2.default.isAny()) {
@@ -2086,12 +2306,22 @@ var Touch = function () {
   _createClass(Touch, [{
     key: 'onStart_',
     value: function onStart_(event) {
+      if (this.ws_.isDisabled()) {
+        return;
+      }
+
       var info = Touch.normalizeEventInfo(event);
 
-      this.startX_ = info.x;
+      if (event.touches.length == 1) {
-      this.startY_ = info.y;
+        this.startX_ = info.x;
-      this.endX_ = info.x;
+        this.startY_ = info.y;
-      this.endY_ = 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;
+      }
     }
 
     /**
@@ -2103,10 +2333,18 @@ var Touch = function () {
   }, {
     key: 'onMove_',
     value: function onMove_(event) {
+      if (this.ws_.isDisabled()) {
+        return;
+      }
+
       var info = Touch.normalizeEventInfo(event);
 
-      this.endX_ = info.x;
+      if (this.isGesture) {
-      this.endY_ = info.y;
+        this.endTouches = this.getTouchCoorinates(event);
+      } else {
+        this.endX_ = info.x;
+        this.endY_ = info.y;
+      }
     }
 
     /**
@@ -2117,19 +2355,45 @@ var Touch = function () {
   }, {
     key: 'onStop_',
     value: function onStop_() {
-      var diffX = this.startX_ - this.endX_;
+      if (this.ws_.isDisabled()) {
-      var diffY = this.startY_ - this.endY_;
+        return;
+      }
 
-      // It's an horizontal drag
+      if (this.isGesture) {
-      if (Math.abs(diffX) > Math.abs(diffY)) {
+        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));
-        if (diffX < -this.ws_.options.slideOffset) {
+        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));
-          this.ws_.goPrev();
+        if (startDistance > endDistance) {
-        } else if (diffX > this.ws_.options.slideOffset) {
+          // Pinch gesture
-          this.ws_.goNext();
+          this.ws_.toggleZoom();
+        }
+        this.isGesture = false;
+      } else {
+        var diffX = this.startX_ - this.endX_;
+        var 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}
+     */
+
+  }, {
+    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
      * TouchEvent.
@@ -2347,7 +2611,11 @@ var Player = function () {
   }
 
   /**
+<<<<<<< HEAD
    * Destroys the iframe. Saves the current time in case it gets restored.
+=======
+   * Plays the video.
+>>>>>>> feature/zoom
    */
 
 
@@ -2608,11 +2876,271 @@ exports.default = YouTube;
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
+<<<<<<< HEAD
 
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+=======
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modules_slide__ = __webpack_require__(1);
+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 CLASSES = {
+  ZOOM: 'grid',
+  DIV: 'column',
+  WRAP: 'wrap-zoom'
+};
+
+var ID = 'webslides-zoomed';
+
+/**
+ * Zoom plugin.
+ */
+
+var Zoom = function () {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
+   */
+  function Zoom(wsInstance) {
+    _classCallCheck(this, Zoom);
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.zws_ = {};
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.isZoomed_ = false;
+
+    this.preBuildZoom_();
+    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
+   */
+
+
+  _createClass(Zoom, [{
+    key: 'onKeyDown',
+    value: function onKeyDown(event) {
+      if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) {
+        this.zoomIn();
+      } else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which) || event.which == __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
+        this.zoomOut();
+      }
+    }
+
+    /**
+     * Prepare zoom structure, scales the slides and uses a grid layout
+     * to show them
+     */
+
+  }, {
+    key: 'preBuildZoom_',
+    value: function preBuildZoom_() {
+      var _this = this;
+
+      // Clone #webslides element
+      this.zws_.el = this.ws_.el.cloneNode();
+      this.zws_.el.id = ID;
+      this.zws_.el.className = CLASSES.ZOOM;
+
+      this.zws_.el.addEventListener('click', function () {
+        return _this.toggleZoom();
+      });
+
+      // Clone the slides
+      this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) {
+        var s_ = slide.el.cloneNode(true);
+        _this.zws_.el.appendChild(s_);
+        return new __WEBPACK_IMPORTED_MODULE_2__modules_slide__["a" /* default */](s_, i);
+      });
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el);
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el);
+
+      // Creates the container for each slide
+      this.zws_.slides.forEach(function (elem) {
+        return _this.createSlideBlock_(elem);
+      });
+    }
+
+    /**
+     * Creates a block structure around the slide
+     * @param {Element} elem slide element
+     */
+
+  }, {
+    key: 'createSlideBlock_',
+    value: function createSlideBlock_(elem) {
+      var _this2 = this;
+
+      // Wraps the slide around a container
+      var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
+      wrap.className = CLASSES.WRAP;
+      // Slide container, need due to flexbox styles
+      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) {
+        e.stopPropagation();
+        _this2.zoomOut();
+        _this2.ws_.goToSlide(elem.i);
+      });
+      wrap.appendChild(divLayer);
+      // Slide number
+      var slideNumber = document.createElement('span');
+      slideNumber.className = 'slide-number';
+      slideNumber.textContent = '' + (elem.i + 1);
+      div.appendChild(slideNumber);
+
+      this.setSizes_(div, wrap, elem);
+    }
+
+    /**
+     * 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);
+      if (scale == 1) {
+        // If the scale is 100% means it is mobile
+        var wsW = this.ws_.el.clientWidth;
+        elem.el.style.width = (wsW - marginW) * 2 + 'px';
+        elem.el.style.height = (wsW - marginH) * 1.5 + 'px';
+        elem.el.style.minHeight = scale == 1 ? 'auto' : '';
+        // Because of flexbox, wrap height is required
+        wrap.style.height = (wsW - marginH) * 1.5 / 2 + 'px';
+      } else {
+        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
+        wrap.style.height = window.innerHeight / scale + 'px';
+      }
+    }
+
+    /**
+     * Toggles zoom
+     */
+
+  }, {
+    key: 'toggleZoom',
+    value: function toggleZoom() {
+      if (this.isZoomed_) {
+        this.zoomOut();
+      } else {
+        this.zoomIn();
+      }
+    }
+
+    /**
+     * Zoom In the slider, scales the slides and uses a grid layout to show them
+     */
+
+  }, {
+    key: 'zoomIn',
+    value: function zoomIn() {
+      var _this3 = this;
+
+      this.ws_.el.classList.add('zooming', 'in');
+      this.zws_.el.classList.add('zooming', 'in');
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
+      setTimeout(function () {
+        _this3.ws_.el.classList.remove('zooming', 'in');
+        _this3.zws_.el.classList.remove('zooming', 'in');
+        _this3.ws_.disable();
+      }, 400);
+      this.isZoomed_ = true;
+      document.body.style.overflow = 'auto';
+    }
+
+    /**
+     * Zoom Out the slider, remove scale from the slides
+     */
+
+  }, {
+    key: 'zoomOut',
+    value: function zoomOut() {
+      var _this4 = this;
+
+      this.ws_.el.classList.add('zooming', 'out');
+      this.zws_.el.classList.add('zooming', 'out');
+      setTimeout(function () {
+        _this4.ws_.el.classList.remove('zooming', 'out');
+        _this4.zws_.el.classList.remove('zooming', 'out');
+        __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el);
+        _this4.ws_.enable();
+      }, 400);
+      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 _this5 = this;
+
+      if (this.isZoomed_) this.zoomOut();
+
+      this.zws_.slides.forEach(function (elem) {
+        var wrap = elem.el.parentElement;
+        var div = wrap.parentElement;
+        _this5.setSizes_(div, wrap, elem);
+      });
+    }
+  }]);
+
+  return Zoom;
+}();
+
+/* harmony default export */ __webpack_exports__["a"] = (Zoom);
+
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+>>>>>>> feature/zoom
 var NativeCustomEvent = window.CustomEvent;
 
 /**
@@ -2657,8 +3185,13 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
 exports.default = WSCustomEvent;
 
 /***/ }),
+<<<<<<< HEAD
 /* 18 */
 /***/ (function(module, exports, __webpack_require__) {
+=======
+/* 19 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+>>>>>>> feature/zoom
 
 "use strict";
 
@@ -2687,10 +3220,19 @@ function linear(p) {
 exports.default = { swing: swing, linear: linear };
 
 /***/ }),
+<<<<<<< HEAD
 /* 19 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
+=======
+/* 20 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(19);
+/* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
+>>>>>>> feature/zoom
 
 
 Object.defineProperty(exports, "__esModule", {