From 76ea07d8dbead957e29193ad4c0d20a560ab9c46 Mon Sep 17 00:00:00 2001
From: Antonio Laguna <sombragriselros@gmail.com>
Date: Thu, 23 Feb 2017 08:25:24 +0100
Subject: [PATCH] Adding autoslide feature

---
 docs/technical.md           | 71 +++++++++++++++++++++++++++----------
 src/js/modules/webslides.js | 47 +++++++++++++++++++++++-
 2 files changed, 98 insertions(+), 20 deletions(-)

diff --git a/docs/technical.md b/docs/technical.md
index a1cccb7..3bc54a2 100644
--- a/docs/technical.md
+++ b/docs/technical.md
@@ -15,28 +15,47 @@ In order to bootstrap the WebSlides you'll need to create a instance of it:
 
 That'll make everything run without any hassle. 
 
+### Options
+
+WebSlides constructor accepts an object with options.
+
+| Param | Type | Default | Description |
+|-----------|----------------|-----------|-------------------------------------------------------------------------------|
+| `autoslide` | `number` or `boolean` | `false` | Amount of milliseconds to wait to go to next slide automatically. |
+
+
+```
+const ws = new WebSlides({
+  autoslide: false
+});
+```
+
+### API
+
 Do you want to get your hands dirty? This is the API for the WebSlides module:
 
 <dl>
-<dt><a href="#goToSlide">goToSlide(slideIndex, opt_forward)</a></dt>
-<dd><p>Goes to a given slide.</p>
-</dd>
-<dt><a href="#goNext">goNext()</a></dt>
-<dd><p>Goes to the next slide.</p>
-</dd>
-<dt><a href="#goPrev">goPrev()</a></dt>
-<dd><p>Goes to the previous slide.</p>
-</dd>
-<dt><a href="#registerPlugin">registerPlugin(key, cto)</a></dt>
-<dd><p>Registers a plugin to be loaded when the instance is created. It allows
-(on purpose) to replace default plugins.
-Those being:</p>
-<ul>
-<li>Navigation</li>
-<li>Hash</li>
-<li>Keyboard</li>
-</ul>
-</dd>
+    <dt><a href="#goToSlide">goToSlide(slideIndex, opt_forward)</a></dt>
+    <dd><p>Goes to a given slide.</p></dd>
+    <dt><a href="#goNext">goNext()</a></dt>
+    <dd><p>Goes to the next slide.</p></dd>
+    <dt><a href="#goPrev">goPrev()</a></dt>
+    <dd><p>Goes to the previous slide.</p>
+    <dt><a href="#play">play()</a></dt>
+    <dd><p>Starts autosliding.</p>
+    <dt><a href="#stop">stop()</a></dt>
+    <dd><p>Stops autosliding.</p>    
+    </dd>
+    <dt><a href="#registerPlugin">registerPlugin(key, cto)</a></dt>
+    <dd><p>Registers a plugin to be loaded when the instance is created. It allows
+        (on purpose) to replace default plugins.
+        Those being:</p>
+        <ul>
+            <li>Navigation</li>
+            <li>Hash</li>
+            <li>Keyboard</li>
+        </ul>
+    </dd>
 </dl>
 
 <a name="goToSlide"></a>
@@ -59,6 +78,20 @@ Goes to the next slide. If the page is vertical, it will animate the scroll down
 ### `goPrev()`
 Goes to the previous slide. If the page is vertical, it will animate the scroll up
 
+<a name="play"></a>
+
+### `play(time)`
+Autoplays slides. If time is omitted, it will use the default time passed to the constructor. This is useful if you don't want to autoslide from the beginning but you want to add a button to do it.
+
+| Param | Type | Description |
+| --- | --- | --- | --- |
+| time | <code>number</code> | Amount of milliseconds to wait to go to next slide automatically. |
+
+<a name="stop"></a>
+
+### `stop()`
+Stops autosliding.
+
 <a name="registerPlugin"></a>
 
 ### `registerPlugin(key, cto)`
diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js
index 4c00aef..0851b14 100644
--- a/src/js/modules/webslides.js
+++ b/src/js/modules/webslides.js
@@ -15,7 +15,14 @@ const PLUGINS = {
 };
 
 export default class WebSlides {
-  constructor() {
+  /**
+   * Options for WebSlides
+   * @param {number|boolean} autoslide Is false by default. If a number is
+   * provided, it will autoslide every given milliseconds.
+   */
+  constructor({
+    autoslide = false
+  } = {}) {
     /**
      * WebSlide element.
      * @type {Element}
@@ -59,6 +66,19 @@ export default class WebSlides {
      * @type {Object}
      */
     this.plugins = {};
+    /**
+     * Interval ID reference for the autoslide.
+     * @type {?number}
+     * @private
+     */
+    this.interval_ = null;
+    /**
+     * Amount of time to wait to go to next slide automatically or false to
+     * disable the feature.
+     * @type {boolean|number}
+     * @private
+     */
+    this.autoslide_ = autoslide;
 
     if (!this.el) {
       throw new Error('Couldn\'t find the webslides container!');
@@ -69,6 +89,7 @@ export default class WebSlides {
     this.grabSlides_();
     this.createPlugins_();
     this.initSlides_();
+    this.play();
     // Finished
     this.onInit_();
   }
@@ -313,4 +334,28 @@ export default class WebSlides {
   static registerPlugin(key, cto) {
     PLUGINS[key] = cto;
   }
+
+  /**
+   * Starts autosliding all the slides if it's not currently doing it and the
+   * autoslide option was a number greater than 0.
+   * @param {?number} time Amount of milliseconds to wait to go to next slide
+   * automatically.
+   */
+  play(time) {
+    time = time || this.autoslide_;
+
+    if (!this.interval_ && Number.isInteger(time) && time > 0) {
+      this.interval_ = setInterval(this.goNext.bind(this), time);
+    }
+  }
+
+  /**
+   * Stops autosliding all the slides.
+   */
+  stop() {
+    if (this.interval_) {
+      clearInterval(this.interval_);
+      this.interval_ = null;
+    }
+  }
 }