|
- 'use strict';
-
- exports.__esModule = true;
-
- var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
- var _react = require('react');
-
- var _react2 = _interopRequireDefault(_react);
-
- var _reactDom = require('react-dom');
-
- var _reactDom2 = _interopRequireDefault(_reactDom);
-
- var _trackHelper = require('./trackHelper');
-
- var _objectAssign = require('object-assign');
-
- var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
- var _innerSliderUtils = require('../utils/innerSliderUtils');
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- var helpers = {
- update: function update(props) {
- var recursionLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
- var slickList = _reactDom2.default.findDOMNode(this.list);
- var slideCount = _react2.default.Children.count(props.children);
- var listWidth = (0, _innerSliderUtils.getWidth)(slickList);
- var trackWidth = (0, _innerSliderUtils.getWidth)(_reactDom2.default.findDOMNode(this.track));
- var slideWidth;
-
- if (!props.vertical) {
- var centerPaddingAdj = props.centerMode && parseInt(props.centerPadding) * 2;
- if (props.centerPadding.slice(-1) === '%') {
- centerPaddingAdj *= listWidth / 100;
- }
- slideWidth = Math.ceil(((0, _innerSliderUtils.getWidth)(slickList) - centerPaddingAdj) / props.slidesToShow);
- } else {
- slideWidth = Math.ceil((0, _innerSliderUtils.getWidth)(slickList));
- }
-
- var slideHeight = (0, _innerSliderUtils.getHeight)(slickList.querySelector('[data-index="0"]'));
- var listHeight = slideHeight * props.slidesToShow;
-
- // pause slider if autoplay is set to false
- if (!props.autoplay) {
- this.pause();
- } else {
- this.autoPlay(props.autoplay);
- }
-
- var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)({}, this.props, this.state);
- if (slidesToLoad.length > 0 && this.props.onLazyLoad) {
- this.props.onLazyLoad(slidesToLoad);
- }
- var prevLazyLoadedList = this.state.lazyLoadedList;
- this.setState({
- slideCount: slideCount,
- slideWidth: slideWidth,
- listWidth: listWidth,
- trackWidth: trackWidth,
- slideHeight: slideHeight,
- listHeight: listHeight,
- lazyLoadedList: prevLazyLoadedList.concat(slidesToLoad)
- }, function () {
- if (!slideWidth) {
- if (recursionLevel < 2) {
- this.update(this.props, recursionLevel + 1);
- }
- }
- var targetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
- slideIndex: this.state.currentSlide,
- trackRef: this.track
- }, props, this.state));
- // getCSS function needs previously set state
- var trackStyle = (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: targetLeft }, props, this.state));
-
- this.setState({ trackStyle: trackStyle });
- });
- },
- adaptHeight: function adaptHeight() {
- if (this.props.adaptiveHeight) {
- var selector = '[data-index="' + this.state.currentSlide + '"]';
- if (this.list) {
- var slickList = _reactDom2.default.findDOMNode(this.list);
- var elem = slickList.querySelector(selector) || {};
- slickList.style.height = (elem.offsetHeight || 0) + 'px';
- }
- }
- },
- slideHandler: function slideHandler(index) {
- var _this = this;
-
- // index is target slide index
- // Functionality of animateSlide and postSlide is merged into this function
- var animationTargetSlide, finalTargetSlide;
- var animationTargetLeft, finalTargetLeft;
- var callback;
-
- if (this.props.waitForAnimate && this.state.animating) {
- return;
- }
-
- if (this.props.fade) {
- finalTargetSlide = this.state.currentSlide;
-
- // Don't change slide if infinite=false and target slide is out of range
- if (this.props.infinite === false && (index < 0 || index >= this.state.slideCount)) {
- return;
- }
-
- // Shifting animationTargetSlide back into the range
- if (index < 0) {
- animationTargetSlide = index + this.state.slideCount;
- } else if (index >= this.state.slideCount) {
- animationTargetSlide = index - this.state.slideCount;
- } else {
- animationTargetSlide = index;
- }
-
- if (this.props.lazyLoad && this.state.lazyLoadedList.indexOf(animationTargetSlide) < 0) {
- this.setState(function (prevState, props) {
- return { lazyLoadedList: prevState.lazyLoadedList.concat(animationTargetSlide) };
- });
- if (this.props.onLazyLoad) {
- this.props.onLazyLoad([animationTargetSlide]);
- }
- }
-
- callback = function callback() {
- _this.setState({
- animating: false
- });
- if (_this.props.afterChange) {
- _this.props.afterChange(animationTargetSlide);
- }
- delete _this.animationEndCallback;
- };
-
- this.setState({
- animating: true,
- currentSlide: animationTargetSlide
- }, function () {
- if (_this.props.asNavFor && _this.props.asNavFor.innerSlider.state.currentSlide !== _this.state.currentSlide) {
- _this.props.asNavFor.innerSlider.slideHandler(index);
- }
- _this.animationEndCallback = setTimeout(callback, _this.props.speed);
- });
-
- if (this.props.beforeChange) {
- this.props.beforeChange(this.state.currentSlide, animationTargetSlide);
- }
-
- this.autoPlay();
- return;
- }
-
- animationTargetSlide = index;
-
- /*
- @TODO: Make sure to leave no bug in the code below
- start: critical checkpoint
- */
- if (animationTargetSlide < 0) {
- if (this.props.infinite === false) {
- finalTargetSlide = 0;
- } else if (this.state.slideCount % this.props.slidesToScroll !== 0) {
- finalTargetSlide = this.state.slideCount - this.state.slideCount % this.props.slidesToScroll;
- } else {
- finalTargetSlide = this.state.slideCount + animationTargetSlide;
- }
- } else if (this.props.centerMode && animationTargetSlide >= this.state.slideCount) {
- if (this.props.infinite === false) {
- animationTargetSlide = this.state.slideCount - 1;
- finalTargetSlide = this.state.slideCount - 1;
- } else {
- animationTargetSlide = this.state.slideCount;
- finalTargetSlide = 0;
- }
- } else if (animationTargetSlide >= this.state.slideCount) {
- if (this.props.infinite === false) {
- finalTargetSlide = this.state.slideCount - this.props.slidesToShow;
- } else if (this.state.slideCount % this.props.slidesToScroll !== 0) {
- finalTargetSlide = 0;
- } else {
- finalTargetSlide = animationTargetSlide - this.state.slideCount;
- }
- } else if (this.state.currentSlide + this.slidesToShow < this.state.slideCount && animationTargetSlide + this.props.slidesToShow >= this.state.slideCount) {
- if (this.props.infinite === false) {
- finalTargetSlide = this.state.slideCount - this.props.slidesToShow;
- } else {
- if ((this.state.slideCount - animationTargetSlide) % this.props.slidesToScroll !== 0) {
- finalTargetSlide = this.state.slideCount - this.props.slidesToShow;
- } else {
- finalTargetSlide = animationTargetSlide;
- }
- }
- } else {
- finalTargetSlide = animationTargetSlide;
- }
-
- /*
- stop: critical checkpoint
- */
-
- animationTargetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
- slideIndex: animationTargetSlide,
- trackRef: this.track
- }, this.props, this.state));
-
- finalTargetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
- slideIndex: finalTargetSlide,
- trackRef: this.track
- }, this.props, this.state));
-
- if (this.props.infinite === false) {
- if (animationTargetLeft === finalTargetLeft) {
- animationTargetSlide = finalTargetSlide;
- }
- animationTargetLeft = finalTargetLeft;
- }
-
- if (this.props.beforeChange) {
- this.props.beforeChange(this.state.currentSlide, finalTargetSlide);
- }
- if (this.props.lazyLoad) {
- var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _objectAssign2.default)({}, this.props, this.state, { currentSlide: animationTargetSlide }));
- if (slidesToLoad.length > 0) {
- this.setState(function (prevState, props) {
- return { lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) };
- });
- if (this.props.onLazyLoad) {
- this.props.onLazyLoad(slidesToLoad);
- }
- }
- }
- // Slide Transition happens here.
- // animated transition happens to target Slide and
- // non - animated transition happens to current Slide
- // If CSS transitions are false, directly go the current slide.
-
- if (this.props.useCSS === false) {
- this.setState({
- currentSlide: finalTargetSlide,
- trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: finalTargetLeft }, this.props, this.state))
- }, function () {
- if (this.props.afterChange) {
- this.props.afterChange(finalTargetSlide);
- }
- });
- } else {
-
- var nextStateChanges = {
- animating: false,
- currentSlide: finalTargetSlide,
- trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: finalTargetLeft }, this.props, this.state)),
- swipeLeft: null
- };
- callback = function callback() {
- _this.setState(nextStateChanges, function () {
- if (_this.props.afterChange) {
- _this.props.afterChange(finalTargetSlide);
- }
- delete _this.animationEndCallback;
- });
- };
- this.setState({
- animating: true,
- currentSlide: finalTargetSlide,
- trackStyle: (0, _trackHelper.getTrackAnimateCSS)((0, _objectAssign2.default)({ left: animationTargetLeft }, this.props, this.state))
- }, function () {
- if (_this.props.asNavFor && _this.props.asNavFor.innerSlider.state.currentSlide !== _this.state.currentSlide) {
- _this.props.asNavFor.innerSlider.slideHandler(index);
- }
- _this.animationEndCallback = setTimeout(callback, _this.props.speed);
- });
- }
-
- this.autoPlay();
- },
- play: function play() {
- var nextIndex;
-
- // if (!this.state.mounted) {
- // return false
- // }
-
- if (this.props.rtl) {
- nextIndex = this.state.currentSlide - this.props.slidesToScroll;
- } else {
- if ((0, _innerSliderUtils.canGoNext)(_extends({}, this.props, this.state))) {
- nextIndex = this.state.currentSlide + this.props.slidesToScroll;
- } else {
- return false;
- }
- }
-
- this.slideHandler(nextIndex);
- },
- autoPlay: function autoPlay() {
- var autoplay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
- if (this.autoplayTimer) {
- clearTimeout(this.autoplayTimer);
- }
- if (autoplay || this.props.autoplay) {
- this.autoplayTimer = setTimeout(this.play, this.props.autoplaySpeed);
- }
- },
- pause: function pause() {
- if (this.autoplayTimer) {
- clearTimeout(this.autoplayTimer);
- this.autoplayTimer = null;
- }
- }
- };
-
- exports.default = helpers;
|