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:
Goes to a given slide.
-Goes to the next slide.
-Goes to the previous slide.
-Registers a plugin to be loaded when the instance is created. It allows -(on purpose) to replace default plugins. -Those being:
-Goes to a given slide.
Goes to the next slide.
Goes to the previous slide.
+Starts autosliding.
+Stops autosliding.
+Registers a plugin to be loaded when the instance is created. It allows + (on purpose) to replace default plugins. + Those being:
+number
| Amount of milliseconds to wait to go to next slide automatically. |
+
+
+
+### `stop()`
+Stops autosliding.
+
### `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;
+ }
+ }
}