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