1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-17 10:30:51 +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 { export default class WebSlides {
/** /**
* Options for WebSlides * Options for WebSlides
* @param {number|boolean} autoslide Is false by default. If a number is * @param {number|boolean} autoslide If a number is provided, it will allow
* @param {boolean} changeOnClick Is false by default. If true, 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. * 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({ constructor({
autoslide = false, autoslide = false,
changeOnClick = false changeOnClick = false,
minWheelDelta = 40,
scrollWait = 450,
slideOffset = 50
} = {}) { } = {}) {
/** /**
* WebSlide element. * WebSlide element.
@@ -79,18 +89,16 @@ export default class WebSlides {
*/ */
this.interval_ = null; this.interval_ = null;
/** /**
* Amount of time to wait to go to next slide automatically or false to * Options dictionary.
* disable the feature. * @type {Object}
* @type {boolean|number}
* @private
*/ */
this.autoslide_ = autoslide; this.options = {
/** autoslide,
* Whether navigation should initiate on click or not. changeOnClick,
* @type {boolean} minWheelDelta,
* @private scrollWait,
*/ slideOffset
this.changeOnClick_ = changeOnClick; };
if (!this.el) { if (!this.el) {
throw new Error('Couldn\'t find the webslides container!'); throw new Error('Couldn\'t find the webslides container!');
@@ -164,7 +172,9 @@ export default class WebSlides {
* scroll animations. * scroll animations.
*/ */
goToSlide(slideI, forward = null) { goToSlide(slideI, forward = null) {
if (this.isValidIndexSlide_(slideI) && !this.isMoving) { if (this.isValidIndexSlide_(slideI) &&
!this.isMoving &&
this.currentSlideI_ !== slideI) {
this.isMoving = true; this.isMoving = true;
let isMovingForward = false; let isMovingForward = false;
@@ -352,7 +362,7 @@ export default class WebSlides {
* automatically. * automatically.
*/ */
play(time) { play(time) {
time = time || this.autoslide_; time = time || this.options.autoslide;
if (!this.interval_ && typeof time === 'number' && time > 0) { if (!this.interval_ && typeof time === 'number' && time > 0) {
this.interval_ = setInterval(this.goNext.bind(this), time); this.interval_ = setInterval(this.goNext.bind(this), time);

View File

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

View File

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

View File

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