Hash to plugin

src/modules/hash.js

@@ -2,23 +2,35 @@ const HASH = '#slide';
 const slideRegex = /#slide=(\d+)/;
 
 /**
- * Static class with methods to manipulate and extract infro from the hash of
+ * Static class with methods to manipulate and extract info from the hash of
  * the URL.
  */
 export default class Hash {
   /**
-   * Listens to the hashchange event and reacts to it by making the
+   * Listens to the slide change event and the hash change events.
-   * WebSlide instance navigate to the needed slide.
+   * @param wsInstance
-   * @param {WebSlides} wsInstance
    */
-  static init(wsInstance) {
+  constructor(wsInstance) {
-    window.addEventListener('hashchange', () => {
+    this.ws_ = wsInstance;
+
+    wsInstance.el.addEventListener('ws:slide-change', Hash.onSlideChange_);
+    window.addEventListener('hashchange', this.onHashChange_.bind(this), false);
+  }
+
+  /**
+   * hashchange event handler, makes the WebSlide instance navigate to the
+   * needed slide.
+   */
+  onHashChange_() {
     const newSlideIndex = Hash.getSlideNumber();
 
     if (newSlideIndex !== null) {
-        wsInstance.goToSlide(newSlideIndex);
+      this.ws_.goToSlide(newSlideIndex);
     }
-    }, false);
+  }
+
+  static onSlideChange_(event) {
+    Hash.setSlideNumber(event.detail.currentSlide);
   }
 
   /**

src/modules/plugins.js

@@ -1,5 +1,7 @@
 import Navigation from './navigation';
+import Hash from './hash';
 
 export default {
-  Navigation
+  Navigation,
+  Hash
 };

src/modules/webslides.js

@@ -1,4 +1,3 @@
-import Hash from './hash';
 import Plugins from './plugins';
 import Slide from './slide';
 import DOM from '../utils/dom';
@@ -9,7 +8,8 @@ const CLASSES = {
 };
 
 const PLUGINS = {
-  'nav': Plugins.Navigation
+  'nav': Plugins.Navigation,
+  'hash': Plugins.Hash
 };
 
 export default class WebSlides {
@@ -32,7 +32,6 @@ export default class WebSlides {
     this.createPlugins_();
     this.initSlides_();
 
-    Hash.init(this);
     this.onInit_();
   }
 
@@ -52,7 +51,7 @@ export default class WebSlides {
   createPlugins_() {
     Object.keys(PLUGINS).forEach(pluginName => {
       const pluginCto = PLUGINS[pluginName];
-      this.plugins[pluginCto] = new pluginCto(this);
+      this.plugins[pluginName] = new pluginCto(this);
     });
   }
 
@@ -135,7 +134,6 @@ export default class WebSlides {
     this.currentSlideI_ = slide.i;
     this.isMoving = false;
 
-    Hash.setSlideNumber(this.currentSlideI_ + 1);
     DOM.fireEvent(this.el, 'ws:slide-change', {
       slides: this.maxSlide_,
       currentSlide0: this.currentSlideI_,
@@ -168,7 +166,7 @@ export default class WebSlides {
   }
 
   initSlides_() {
-    let slideNumber = Hash.getSlideNumber();
+    let slideNumber = this.plugins.hash.constructor.getSlideNumber();
 
     // Not valid
     if (slideNumber === null ||