Finishing navigation

src/modules/navigation.js

@@ -27,23 +27,55 @@ export default class Navigation {
   constructor(wsInstance) {
     const arrowLabels = wsInstance.isVertical ?
         LABELS.VERTICAL : LABELS.HORIZONTAL;
-
+    /**
+     * Navigation element.
+     * @type {Element}
+     */
     this.el = DOM.createNode('div', 'navigation');
+    /**
+     * Next button.
+     * @type {Element}
+     */
     this.next = Navigation.createArrow(ELEMENT_ID.NEXT, arrowLabels.NEXT);
+    /**
+     * Prev button.
+     * @type {Element}
+     */
     this.prev = Navigation.createArrow(ELEMENT_ID.PREV, arrowLabels.PREV);
+    /**
+     * Counter Element.
+     * @type {Element}
+     */
     this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER);
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
 
     this.el.appendChild(this.next);
     this.el.appendChild(this.prev);
     this.el.appendChild(this.counter);
 
-    wsInstance.el.appendChild(this.el);
+    this.ws_.el.appendChild(this.el);
+    this.bindEvents_();
   }
 
   /**
-   *
+   * Bind all events for the navigation.
-   * @param current
+   * @private
-   * @param max
+   */
+  bindEvents_() {
+    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));
+  }
+
+  /**
+   * Updates the counter inside the navigation.
+   * @param {string|number} current Current slide number.
+   * @param {string|number} max Max slide number.
    */
   updateCounter(current, max) {
     this.counter.textContent = `${current} / ${max}`;
@@ -62,4 +94,27 @@ export default class Navigation {
 
     return arrow;
   }
+
+  /**
+   * Slide Change event handler. Will update the text on the navigation.
+   * @param {CustomEvent} event
+   * @private
+   */
+  onSlideChanged_(event) {
+    this.updateCounter(event.detail.currentSlide, event.detail.slides);
+  }
+
+  /**
+   * Handles clicks on the next/prev buttons.
+   * @param {MouseEvent} event
+   * @private
+   */
+  onButtonClicked_(event) {
+    event.preventDefault();
+    if (event.target === this.next) {
+      this.ws_.goNext();
+    } else {
+      this.ws_.goPrev();
+    }
+  }
 }