Adding autoslide feature

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)`

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;
+    }
+  }
 }