mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-17 02:24:12 +02:00
@@ -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);
|
||||||
|
@@ -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));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -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();
|
||||||
|
@@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user