Repository URL to install this package:
|
Version:
4.2.0-a11y.0 ▾
|
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const tslib_1 = require("tslib");
const mobx_1 = require("mobx");
const exotic_1 = require("exotic");
class MediaCarouselState {
constructor() {
this.position = 0;
this.slides = 0;
this.count = 0;
this.translatePercentage = 0;
this.hasPreviousSlide = false;
this.hasNextSlide = true;
this.step = 0;
}
update(props) {
const {
list
} = props;
this.count = exotic_1.isArray(list) && list.length;
}
setStep(step) {
this.step = step > this.count ? this.count : step;
this.slides = Math.ceil(this.count / this.step);
}
goTo(position) {
this.setPosition(position);
}
setPosition(currentPosition) {
// bullets states will be handling based on this
this.position = currentPosition; // arrow states
this.hasPreviousSlide = !(this.position === 0);
this.hasNextSlide = !(this.position === this.slides - 1); // slide transition (based on the step & position)
const remainingCount = this.count - this.position * this.step;
const remainingStep = Math.ceil(remainingCount / this.step); // based on the device the item width keep getting change so it is required to calculate
const itemWidth = 100 / this.step; // when the item count comes in odd number, the last slide should not scroll 100%, so excluding here
let extraWidthOnLastSlide = 0;
if (remainingStep === 1) {
extraWidthOnLastSlide = 100 - remainingCount * itemWidth;
} // this percentage will set it to the slide list parent
this.translatePercentage = this.position * 100 - extraWidthOnLastSlide;
console.log('[currentPosition]', this.position);
console.log('[step]', this.step);
console.log('[remainingCount]', remainingCount);
console.log('[remainingStep]', remainingStep);
console.log('[this.translatePercentage]', this.translatePercentage);
}
toNext() {
if (this.hasNextSlide === true) {
const nextPosition = this.position + 1;
this.setPosition(nextPosition);
}
}
toPrevious() {
if (this.hasPreviousSlide === true) {
const previousPosition = this.position - 1;
this.setPosition(previousPosition);
}
}
}
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "position", void 0);
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "slides", void 0);
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "count", void 0);
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "translatePercentage", void 0);
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "hasPreviousSlide", void 0);
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "hasNextSlide", void 0);
tslib_1.__decorate([mobx_1.observable], MediaCarouselState.prototype, "step", void 0);
tslib_1.__decorate([mobx_1.action], MediaCarouselState.prototype, "update", null);
tslib_1.__decorate([mobx_1.action], MediaCarouselState.prototype, "setStep", null);
tslib_1.__decorate([mobx_1.action.bound], MediaCarouselState.prototype, "goTo", null);
tslib_1.__decorate([mobx_1.action], MediaCarouselState.prototype, "setPosition", null);
tslib_1.__decorate([mobx_1.action.bound], MediaCarouselState.prototype, "toNext", null);
tslib_1.__decorate([mobx_1.action.bound], MediaCarouselState.prototype, "toPrevious", null);
exports.MediaCarouselState = MediaCarouselState;
exports.default = MediaCarouselState; //# sourceMappingURL=state.js.map