From ead4193525c1ba9501d35609851c083c5b1770b6 Mon Sep 17 00:00:00 2001
From: Antonio Laguna <sombragriselros@gmail.com>
Date: Tue, 18 Apr 2017 16:18:46 +0200
Subject: [PATCH] Making Slides Event based instead of Callback based

---
 src/js/modules/slide.js | 71 ++++++++++++++++++++++-------------------
 src/js/plugins/video.js | 26 ++++++++-------
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/js/modules/slide.js b/src/js/modules/slide.js
index dcd4741..b23ee73 100644
--- a/src/js/modules/slide.js
+++ b/src/js/modules/slide.js
@@ -5,10 +5,17 @@ const CLASSES = {
   CURRENT: 'current'
 };
 
+const Events = {
+  ENTER: 'dom:enter',
+  LEAVE: 'dom:leave',
+  ENABLE: 'slide:enable',
+  DISABLE: 'slide:disable'
+};
+
 /**
  * Wrapper for the Slide section.
  */
-export default class Slide {
+class Slide {
   /**
    * Bootstraps the slide by saving some data, adding a class and hiding it.
    * @param {Element} el Section element.
@@ -28,18 +35,6 @@ export default class Slide {
      * @type {number}
      */
     this.i = i;
-    /**
-     * Enable callbacks.
-     * @type {Array<Function>}
-     * @private
-     */
-    this.onEnable_ = [];
-    /**
-     * Disable callbacks
-     * @type {Array<Function>}
-     * @private
-     */
-    this.onDisable_ = [];
 
     this.el.id = `section-${(i + 1)}`;
     this.el.classList.add(CLASSES.SLIDE);
@@ -66,50 +61,55 @@ export default class Slide {
 
   /**
    * Moves the section to the bottom of the section's list.
+   * @fires Slide#dom:leave
+   * @fires Slide#dom:enter
    */
   moveAfterLast() {
     const last = this.parent.childNodes[this.parent.childElementCount - 1];
 
+    this.fire_(Events.LEAVE);
     this.parent.insertBefore(this.el, last.nextSibling);
+    this.fire_(Events.ENTER);
   }
 
   /**
    * Moves the section to the top of the section's list.
+   * @fires Slide#dom:leave
+   * @fires Slide#dom:enter
    */
   moveBeforeFirst() {
     const first = this.parent.childNodes[0];
 
+    this.fire_(Events.LEAVE);
     this.parent.insertBefore(this.el, first);
+    this.fire_(Events.ENTER);
   }
 
   /**
-   * Adds a callback to the enable event.
-   * @param {Function} cb Callback to add.
-   */
-  onEnable(cb) {
-    this.onEnable_.push(cb);
-  }
-
-  /**
-   * Adds a callback to the disable event.
-   * @param {Function} cb Callback to add.
-   */
-  onDisable(cb) {
-    this.onDisable_.push(cb);
-  }
-
-  /**
-   * Runs every on enable callback.
+   * Fires an enable event.
+   * @fires Slide#slide:enable
    */
   enable() {
-    this.onEnable_.forEach(f => f(this));
+    this.fire_(Events.ENABLE);
   }
 
   /**
-   * Runs every on disable callback.
+   * Fires a disable event.
+   * @fires Slide#slide:disable
    */
   disable() {
-    this.onDisable_.forEach(f => f(this));
+    this.fire_(Events.DISABLE);
+  }
+
+  /**
+   * Fires an event passing the slide instance on the detail.
+   * @param {String} name Name of the event to fire.
+   * @private
+   */
+  fire_(name) {
+    DOM.fireEvent(this.el, name, {
+      slide: this
+    });
   }
 
   /**
@@ -146,3 +146,8 @@ export default class Slide {
     return {section, i};
   }
 }
+
+export {
+  Slide as default,
+  Events
+};
diff --git a/src/js/plugins/video.js b/src/js/plugins/video.js
index 1640ede..a35b3bb 100644
--- a/src/js/plugins/video.js
+++ b/src/js/plugins/video.js
@@ -1,5 +1,5 @@
 import DOM from '../utils/dom';
-import Slide from '../modules/slide';
+import {default as Slide, Events as SlideEvents} from '../modules/slide';
 
 /**
  * Video plugin. Video plugin that allows to autoplay videos once the slide gets
@@ -21,33 +21,35 @@ export default class Video {
 
     if (videos.length) {
       videos.forEach(video => {
+        if (!video.hasAttribute('autoplay')) {
+          return;
+        }
+
         video.removeAttribute('autoplay');
         const {i} = Slide.getSectionFromEl(video);
         const slide = wsInstance.slides[i - 1];
 
-        /**
-         * @type {HTMLMediaElement}
-         */
         slide.video = video;
-        slide.onEnable(Video.onSectionEnabled);
-        slide.onDisable(Video.onSectionDisabled);
+
+        slide.el.addEventListener(SlideEvents.ENABLE, Video.onSectionEnabled);
+        slide.el.addEventListener(SlideEvents.DISABLE, Video.onSectionDisabled);
       });
     }
   }
 
   /**
    * On Section enable hook. Will play the video.
-   * @param {Slide} slide
+   * @param {CustomEvent} event
    */
-  static onSectionEnabled(slide) {
-    slide.video.play();
+  static onSectionEnabled(event) {
+    event.detail.slide.video.play();
   }
 
   /**
    * On Section enable hook. Will pause the video.
-   * @param {Slide} slide
+   * @param {CustomEvent} event
    */
-  static onSectionDisabled(slide) {
-    slide.video.pause();
+  static onSectionDisabled(event) {
+    event.detail.slide.video.pause();
   }
 }