Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
Size: Mime:
"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