Adding zoom toggle to navigation counter

src/js/modules/webslides.js

@@ -383,6 +383,13 @@ export default class WebSlides {
     this.goToSlide(slideNumber);
   }
 
+  /**
+   * Toggles zoom
+   */
+  toggleZoom() {
+    this.plugins.zoom.toggleZoom();
+  }
+
   /**
    * Registers a plugin to be loaded when the instance is created. It allows
    * (on purpose) to replace default plugins.

src/js/plugins/navigation.js

@@ -48,7 +48,9 @@ export default class Navigation {
      * Counter Element.
      * @type {Element}
      */
-    this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER);
+    this.counter = DOM.createNode('a', ELEMENT_ID.COUNTER);
+    this.counter.href = '#';
+    this.counter.title = 'View all slides';
     /**
      * @type {WebSlides}
      * @private
@@ -72,6 +74,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));
   }
 
   /**
@@ -115,8 +118,10 @@ export default class Navigation {
     event.preventDefault();
     if (event.target === this.next) {
       this.ws_.goNext();
-    } else {
+    } else if (event.target === this.next) {
       this.ws_.goPrev();
+    } else {
+      this.ws_.toggleZoom();
     }
   }
 }

src/js/plugins/zoom.js

@@ -115,8 +115,18 @@ export default class Zoom {
     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 = `${window.innerHeight / scale}px`;
-    wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`;
+  }
+
+  /**
+   * Toggles zoom
+   */
+  toggleZoom() {
+    if (this.isZoomed_) {
+      this.zoomOut();
+    } else {
+      this.zoomIn();
+    }
   }
 
   /**

static/css/base.css

@@ -1547,7 +1547,7 @@ opacity: 1;
 }
 */
 
-#counter {
+#navigation #counter {
   position: relative;
   display: block;
   width: 10rem;
@@ -1555,6 +1555,8 @@ opacity: 1;
   margin-left: auto;
   text-align: center;
   line-height: 4.8rem;
+  height: auto;
+  padding: 0;
 }
 
 #navigation p {
@@ -3225,4 +3227,5 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
   background: transparent;
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.2.1
- * Date: 2017-04-05
+ * Date: 2017-04-08
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -1127,6 +1127,16 @@ var WebSlides = function () {
       this.goToSlide(slideNumber);
     }
 
+    /**
+     * Toggles zoom
+     */
+
+  }, {
+    key: 'toggleZoom',
+    value: function toggleZoom() {
+      this.plugins.zoom.toggleZoom();
+    }
+
     /**
      * Registers a plugin to be loaded when the instance is created. It allows
      * (on purpose) to replace default plugins.
@@ -1651,7 +1661,9 @@ var Navigation = function () {
      * Counter Element.
      * @type {Element}
      */
-    this.counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', ELEMENT_ID.COUNTER);
+    this.counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', ELEMENT_ID.COUNTER);
+    this.counter.href = '#';
+    this.counter.title = 'View all slides';
     /**
      * @type {WebSlides}
      * @private
@@ -1678,6 +1690,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));
     }
 
     /**
@@ -1724,8 +1737,10 @@ var Navigation = function () {
       event.preventDefault();
       if (event.target === this.next) {
         this.ws_.goNext();
-      } else {
+      } else if (event.target === this.next) {
         this.ws_.goPrev();
+      } else {
+        this.ws_.toggleZoom();
       }
     }
   }], [{
@@ -2552,8 +2567,21 @@ var Zoom = function () {
       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 = window.innerHeight / scale + 'px';
-      wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px';
+    }
+
+    /**
+     * Toggles zoom
+     */
+
+  }, {
+    key: 'toggleZoom',
+    value: function toggleZoom() {
+      if (this.isZoomed_) {
+        this.zoomOut();
+      } else {
+        this.zoomIn();
+      }
     }
 
     /**