1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-17 02:24:12 +02:00

Allowing options to be configured

Fixes #47 #44
This commit is contained in:
Antonio Laguna
2017-03-02 09:45:21 +01:00
parent 23ad0338cb
commit 6818e4c99c
4 changed files with 34 additions and 26 deletions

View File

@@ -21,13 +21,23 @@ const PLUGINS = {
export default class WebSlides {
/**
* Options for WebSlides
* @param {number|boolean} autoslide Is false by default. If a number is
* @param {boolean} changeOnClick Is false by default. If true, it will allow
* @param {number|boolean} autoslide If a number is provided, it will allow
* autosliding by said amount of miliseconds.
* @param {boolean} changeOnClick If true, it will allow
* clicking on any place to change the slide.
* @param {number} minWheelDelta Controls the amount of needed scroll to
* trigger navigation.
* @param {number} scrollWait Controls the amount of time to wait till
* navigation can occur again with scroll.
* @param {number} slideOffset Controls the amount of needed touch delta to
* trigger navigation.
*/
constructor({
autoslide = false,
changeOnClick = false
changeOnClick = false,
minWheelDelta = 40,
scrollWait = 450,
slideOffset = 50
} = {}) {
/**
* WebSlide element.
@@ -79,18 +89,16 @@ export default class WebSlides {
*/
this.interval_ = null;
/**
* Amount of time to wait to go to next slide automatically or false to
* disable the feature.
* @type {boolean|number}
* @private
* Options dictionary.
* @type {Object}
*/
this.autoslide_ = autoslide;
/**
* Whether navigation should initiate on click or not.
* @type {boolean}
* @private
*/
this.changeOnClick_ = changeOnClick;
this.options = {
autoslide,
changeOnClick,
minWheelDelta,
scrollWait,
slideOffset
};
if (!this.el) {
throw new Error('Couldn\'t find the webslides container!');
@@ -164,7 +172,9 @@ export default class WebSlides {
* scroll animations.
*/
goToSlide(slideI, forward = null) {
if (this.isValidIndexSlide_(slideI) && !this.isMoving) {
if (this.isValidIndexSlide_(slideI) &&
!this.isMoving &&
this.currentSlideI_ !== slideI) {
this.isMoving = true;
let isMovingForward = false;
@@ -352,7 +362,7 @@ export default class WebSlides {
* automatically.
*/
play(time) {
time = time || this.autoslide_;
time = time || this.options.autoslide;
if (!this.interval_ && typeof time === 'number' && time > 0) {
this.interval_ = setInterval(this.goNext.bind(this), time);

View File

@@ -19,7 +19,7 @@ export default class ClickNav {
*/
this.ws_ = wsInstance;
if (wsInstance.changeOnClick_) {
if (wsInstance.options.changeOnClick) {
this.ws_.el.addEventListener('click', this.onClick_.bind(this));
}
}

View File

@@ -1,7 +1,5 @@
import MobileDetector from '../utils/mobile-detector';
const MIN_WHEEL_DELTA = 40;
export default class Scroll {
/**
* Scroll handler for the WebSlides.
@@ -55,7 +53,9 @@ export default class Scroll {
* @private
*/
onSlideChange_() {
this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 450);
this.timeout_ = setTimeout(
() => { this.timeout_ = null; },
this.ws_.options.scrollWait);
}
/**
@@ -88,8 +88,8 @@ export default class Scroll {
}
}
if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA ||
Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) {
if (Math.abs(wheelDeltaY) >= this.ws_.options.minWheelDelta ||
Math.abs(wheelDeltaX) >= this.ws_.options.minWheelDelta) {
if ((isHorizontalMovement && this.isGoingLeft_) ||
(!isHorizontalMovement && this.isGoingUp_)) {
this.ws_.goPrev();

View File

@@ -13,8 +13,6 @@ const EVENTS = {
}
};
const SLIDE_OFFSET = 50;
export default class Touch {
/**
* @param {WebSlides} wsInstance The WebSlides instance
@@ -116,9 +114,9 @@ export default class Touch {
// It's an horizontal drag
if (Math.abs(diffX) > Math.abs(diffY)) {
if(diffX < -SLIDE_OFFSET) {
if (diffX < -this.ws_.options.slideOffset) {
this.ws_.goPrev();
} else if(diffX > SLIDE_OFFSET) {
} else if(diffX > this.ws_.options.slideOffset) {
this.ws_.goNext();
}
}