New implementation: webslides clone

src/js/plugins/zoom.js

@@ -1,5 +1,6 @@
 import DOM from '../utils/dom';
 import Keys from '../utils/keys';
+import Slide from '../modules/slide';
 
 
 const CLASSES = {
@@ -8,6 +9,8 @@ const CLASSES = {
   WRAP: 'wrap-zoom'
 };
 
+const ID = 'webslides-zoomed';
+
 /**
  * Zoom plugin.
  */
@@ -23,12 +26,19 @@ export default class Zoom {
      */
     this.ws_ = wsInstance;
 
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.zws_ = {};
+
     /**
      * @type {boolean}
      * @private
      */
     this.isZoomed_ = false;
 
+    this.preBuildZoom_();
     document.addEventListener('keydown', this.onKeyDown.bind(this));
   }
 
@@ -45,51 +55,66 @@ export default class Zoom {
   }
 
   /**
-   * Zoom In the slider, scales the slides and uses a grid layout to show them
+   * Prepare zoom structure, scales the slides and uses a grid layout
+   * to show them
    */
-  zoomIn() {
-    this.ws_.el.classList.add(CLASSES.ZOOM);
-    this.ws_.goToSlide(0);
+  preBuildZoom_() {
+    // Clone #webslides element
+    this.zws_.el = this.ws_.el.cloneNode();
+    this.zws_.el.id = ID;
+    this.zws_.el.className = CLASSES.ZOOM;
+    // 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);
 
-    this.ws_.slides.forEach( elem => {
+    // Creates the container for each slide
+    this.zws_.slides.forEach( elem => {
       const wrap = DOM.wrap(elem.el, 'div');
       wrap.className = CLASSES.WRAP;
       const div = DOM.wrap(wrap, 'div');
       div.className = CLASSES.DIV;
 
+      // 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);
 
-      elem.el.style.width = `${window.innerWidth - marginW * 4}px`;
-      elem.el.style.height = `${window.innerHeight - marginH * 4}px`;
+      // 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) / 4}px`;
+      wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`;
     });
-
-    this.isZoomed_ = true;
   }
 
+  /**
+   * Zoom In the slider, scales the slides and uses a grid layout to show them
+   */
+  zoomIn() {
+    DOM.hide(this.ws_.el);
+    DOM.show(this.zws_.el);
+    this.isZoomed_ = true;
+  }
 
   /**
    * Zoom Out the slider, remove scale from the slides
    */
   zoomOut() {
-    this.ws_.el.classList.remove(CLASSES.ZOOM);
-
-    this.ws_.slides.forEach( elem => {
-      const wrap = elem.el.parentElement;
-      const div = wrap.parentElement;
-      elem.parent.appendChild(elem.el);
-      wrap.remove();
-      div.remove();
-      elem.el.style.width = '';
-      elem.el.style.height = '';
-    });
-
+    DOM.hide(this.zws_.el);
+    DOM.show(this.ws_.el);
     this.isZoomed_ = false;
   }
 

src/js/utils/dom.js

@@ -188,4 +188,19 @@ export default class DOM {
 
     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);
+    }
+  }
 }