react-slick
Version:
React port of slick carousel
1,498 lines (1,248 loc) • 121 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["Slider"] = factory(require("react"), require("react-dom"));
else
root["Slider"] = factory(root["React"], root["ReactDOM"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_6__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(1);
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
'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 = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _innerSlider = __webpack_require__(3);
var _objectAssign = __webpack_require__(7);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _json2mq = __webpack_require__(21);
var _json2mq2 = _interopRequireDefault(_json2mq);
var _defaultProps = __webpack_require__(10);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
var _canUseDom = __webpack_require__(23);
var _canUseDom2 = _interopRequireDefault(_canUseDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var enquire = _canUseDom2.default && __webpack_require__(24);
var Slider = function (_React$Component) {
_inherits(Slider, _React$Component);
function Slider(props) {
_classCallCheck(this, Slider);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = {
breakpoint: null
};
_this._responsiveMediaHandlers = [];
_this.innerSliderRefHandler = _this.innerSliderRefHandler.bind(_this);
return _this;
}
Slider.prototype.innerSliderRefHandler = function innerSliderRefHandler(ref) {
this.innerSlider = ref;
};
Slider.prototype.media = function media(query, handler) {
// javascript handler for css media query
enquire.register(query, handler);
this._responsiveMediaHandlers.push({ query: query, handler: handler });
};
Slider.prototype.componentWillMount = function componentWillMount() {
var _this2 = this;
if (this.props.responsive) {
var breakpoints = this.props.responsive.map(function (breakpt) {
return breakpt.breakpoint;
});
// sort them in increasing order of their numerical value
breakpoints.sort(function (x, y) {
return x - y;
});
breakpoints.forEach(function (breakpoint, index) {
// media query for each breakpoint
var bQuery;
if (index === 0) {
bQuery = (0, _json2mq2.default)({ minWidth: 0, maxWidth: breakpoint });
} else {
bQuery = (0, _json2mq2.default)({ minWidth: breakpoints[index - 1], maxWidth: breakpoint });
}
// when not using server side rendering
_canUseDom2.default && _this2.media(bQuery, function () {
_this2.setState({ breakpoint: breakpoint });
});
});
// Register media query for full screen. Need to support resize from small to large
// convert javascript object to media query string
var query = (0, _json2mq2.default)({ minWidth: breakpoints.slice(-1)[0] });
_canUseDom2.default && this.media(query, function () {
_this2.setState({ breakpoint: null });
});
}
};
Slider.prototype.componentWillUnmount = function componentWillUnmount() {
this._responsiveMediaHandlers.forEach(function (obj) {
enquire.unregister(obj.query, obj.handler);
});
};
Slider.prototype.slickPrev = function slickPrev() {
this.innerSlider.slickPrev();
};
Slider.prototype.slickNext = function slickNext() {
this.innerSlider.slickNext();
};
Slider.prototype.slickGoTo = function slickGoTo(slide) {
this.innerSlider.slickGoTo(slide);
};
Slider.prototype.slickPause = function slickPause() {
this.innerSlider.pause();
};
Slider.prototype.slickPlay = function slickPlay() {
this.innerSlider.autoPlay();
};
Slider.prototype.render = function render() {
var _this3 = this;
var settings;
var newProps;
if (this.state.breakpoint) {
// never executes in the first render
// so defaultProps should be already there in this.props
newProps = this.props.responsive.filter(function (resp) {
return resp.breakpoint === _this3.state.breakpoint;
});
settings = newProps[0].settings === 'unslick' ? 'unslick' : (0, _objectAssign2.default)({}, _defaultProps2.default, this.props, newProps[0].settings);
} else {
settings = (0, _objectAssign2.default)({}, _defaultProps2.default, this.props);
}
// force scrolling by one if centerMode is on
if (settings.centerMode) {
if (settings.slidesToScroll > 1 && (undefined) !== 'production') {
console.warn('slidesToScroll should be equal to 1 in centerMode, you are using ' + settings.slidesToScroll);
}
settings.slidesToScroll = 1;
}
// force showing one slide and scrolling by one if the fade mode is on
if (settings.fade) {
if (settings.slidesToShow > 1 && (undefined) !== 'production') {
console.warn('slidesToShow should be equal to 1 when fade is true, you\'re using ' + settings.slidesToShow);
}
if (settings.slidesToScroll > 1 && (undefined) !== 'production') {
console.warn('slidesToScroll should be equal to 1 when fade is true, you\'re using ' + settings.slidesToScroll);
}
settings.slidesToShow = 1;
settings.slidesToScroll = 1;
}
// makes sure that children is an array, even when there is only 1 child
var children = _react2.default.Children.toArray(this.props.children);
// Children may contain false or null, so we should filter them
// children may also contain string filled with spaces (in certain cases where we use jsx strings)
children = children.filter(function (child) {
if (typeof child === 'string') {
return !!child.trim();
}
return !!child;
});
if (settings === 'unslick') {
// if 'unslick' responsive breakpoint setting used, just return the <Slider> tag nested HTML
return _react2.default.createElement(
'div',
{ className: this.props.className + ' unslicked' },
children
);
} else {
return _react2.default.createElement(
_innerSlider.InnerSlider,
_extends({ ref: this.innerSliderRefHandler }, settings),
children
);
}
};
return Slider;
}(_react2.default.Component);
exports.default = Slider;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.InnerSlider = undefined;
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 = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _eventHandlers = __webpack_require__(4);
var _eventHandlers2 = _interopRequireDefault(_eventHandlers);
var _helpers = __webpack_require__(8);
var _helpers2 = _interopRequireDefault(_helpers);
var _initialState = __webpack_require__(9);
var _initialState2 = _interopRequireDefault(_initialState);
var _defaultProps = __webpack_require__(10);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
var _createReactClass = __webpack_require__(11);
var _createReactClass2 = _interopRequireDefault(_createReactClass);
var _classnames = __webpack_require__(17);
var _classnames2 = _interopRequireDefault(_classnames);
var _objectAssign = __webpack_require__(7);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _track = __webpack_require__(18);
var _dots = __webpack_require__(19);
var _arrows = __webpack_require__(20);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var InnerSlider = exports.InnerSlider = (0, _createReactClass2.default)({
displayName: 'InnerSlider',
mixins: [_helpers2.default, _eventHandlers2.default],
list: null, // wraps the track
track: null, // component that rolls out like a film
listRefHandler: function listRefHandler(ref) {
this.list = ref;
},
trackRefHandler: function trackRefHandler(ref) {
this.track = ref;
},
getInitialState: function getInitialState() {
return _extends({}, _initialState2.default, {
currentSlide: this.props.initialSlide
});
},
componentWillMount: function componentWillMount() {
if (this.props.init) {
this.props.init();
}
this.setState({
mounted: true
});
var lazyLoadedList = [];
// number of slides shown in the active frame
var slidesToShow = this.props.slidesToShow;
var childrenLen = _react2.default.Children.count(this.props.children);
var currentSlide = this.state.currentSlide;
for (var i = 0; i < childrenLen; i++) {
// if currentSlide is the lastSlide of current frame and
// rest of the active slides are on the left of currentSlide
// then the following might cause a problem
if (i >= currentSlide && i < currentSlide + slidesToShow) {
lazyLoadedList.push(i);
}
}
if (this.props.centerMode === true) {
// add slides to show on the left in case of centerMode with lazyLoad
var additionalCount = Math.floor(slidesToShow / 2);
if (parseInt(this.props.centerPadding) > 0) {
additionalCount += 1;
}
var additionalNum = currentSlide;
while (additionalCount--) {
lazyLoadedList.push((--additionalNum + childrenLen) % childrenLen);
}
}
if (this.props.lazyLoad && this.state.lazyLoadedList.length === 0) {
this.setState({
lazyLoadedList: lazyLoadedList
});
}
},
componentDidMount: function componentDidMount() {
// Hack for autoplay -- Inspect Later
this.initialize(this.props);
this.adaptHeight();
// To support server-side rendering
if (!window) {
return;
}
if (window.addEventListener) {
window.addEventListener('resize', this.onWindowResized);
} else {
window.attachEvent('onresize', this.onWindowResized);
}
},
componentWillUnmount: function componentWillUnmount() {
if (this.animationEndCallback) {
clearTimeout(this.animationEndCallback);
}
if (window.addEventListener) {
window.removeEventListener('resize', this.onWindowResized);
} else {
window.detachEvent('onresize', this.onWindowResized);
}
if (this.state.autoPlayTimer) {
clearInterval(this.state.autoPlayTimer);
}
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (this.props.slickGoTo != nextProps.slickGoTo) {
if ((undefined) !== 'production') {
console.warn('react-slick deprecation warning: slickGoTo prop is deprecated and it will be removed in next release. Use slickGoTo method instead');
}
this.changeSlide({
message: 'index',
index: nextProps.slickGoTo,
currentSlide: this.state.currentSlide
});
} else if (this.state.currentSlide >= nextProps.children.length) {
this.update(nextProps);
this.changeSlide({
message: 'index',
index: nextProps.children.length - nextProps.slidesToShow,
currentSlide: this.state.currentSlide
});
} else {
this.update(nextProps);
}
},
componentDidUpdate: function componentDidUpdate() {
if (this.props.lazyLoad && this.props.centerMode) {
var childrenLen = _react2.default.Children.count(this.props.children);
var additionalCount = Math.floor(this.props.slidesToShow / 2);
if (parseInt(this.props.centerPadding) > 0) additionalCount++;
var leftMostSlide = (this.state.currentSlide - additionalCount + childrenLen) % childrenLen;
var rightMostSlide = (this.state.currentSlide + additionalCount) % childrenLen;
if (!this.state.lazyLoadedList.includes(leftMostSlide)) {
this.setState({
lazyLoadedList: this.state.lazyLoadedList + [leftMostSlide]
});
}
if (!this.state.lazyLoadedList.includes(rightMostSlide)) {
this.setState({
lazyLoadedList: this.state.lazyLoadedList + [rightMostSlide]
});
}
}
this.adaptHeight();
},
onWindowResized: function onWindowResized() {
this.update(this.props);
// animating state should be cleared while resizing, otherwise autoplay stops working
this.setState({
animating: false
});
clearTimeout(this.animationEndCallback);
delete this.animationEndCallback;
},
slickPrev: function slickPrev() {
this.changeSlide({ message: 'previous' });
},
slickNext: function slickNext() {
this.changeSlide({ message: 'next' });
},
slickGoTo: function slickGoTo(slide) {
slide = Number(slide);
!isNaN(slide) && this.changeSlide({
message: 'index',
index: slide,
currentSlide: this.state.currentSlide
});
},
render: function render() {
var className = (0, _classnames2.default)('slick-initialized', 'slick-slider', this.props.className, {
'slick-vertical': this.props.vertical
});
var trackProps = {
fade: this.props.fade,
cssEase: this.props.cssEase,
speed: this.props.speed,
infinite: this.props.infinite,
centerMode: this.props.centerMode,
focusOnSelect: this.props.focusOnSelect ? this.selectHandler : null,
currentSlide: this.state.currentSlide,
lazyLoad: this.props.lazyLoad,
lazyLoadedList: this.state.lazyLoadedList,
rtl: this.props.rtl,
slideWidth: this.state.slideWidth,
slideHeight: this.state.slideHeight,
listHeight: this.state.listHeight,
vertical: this.props.vertical,
slidesToShow: this.props.slidesToShow,
slidesToScroll: this.props.slidesToScroll,
slideCount: this.state.slideCount,
trackStyle: this.state.trackStyle,
variableWidth: this.props.variableWidth
};
var dots;
if (this.props.dots === true && this.state.slideCount >= this.props.slidesToShow) {
var dotProps = {
dotsClass: this.props.dotsClass,
slideCount: this.state.slideCount,
slidesToShow: this.props.slidesToShow,
currentSlide: this.state.currentSlide,
slidesToScroll: this.props.slidesToScroll,
clickHandler: this.changeSlide,
children: this.props.children,
customPaging: this.props.customPaging,
infinite: this.props.infinite
};
dots = _react2.default.createElement(_dots.Dots, dotProps);
}
var prevArrow, nextArrow;
var arrowProps = {
infinite: this.props.infinite,
centerMode: this.props.centerMode,
currentSlide: this.state.currentSlide,
slideCount: this.state.slideCount,
slidesToShow: this.props.slidesToShow,
prevArrow: this.props.prevArrow,
nextArrow: this.props.nextArrow,
clickHandler: this.changeSlide
};
if (this.props.arrows) {
prevArrow = _react2.default.createElement(_arrows.PrevArrow, arrowProps);
nextArrow = _react2.default.createElement(_arrows.NextArrow, arrowProps);
}
var verticalHeightStyle = null;
if (this.props.vertical) {
verticalHeightStyle = {
height: this.state.listHeight
};
}
var centerPaddingStyle = null;
if (this.props.vertical === false) {
if (this.props.centerMode === true) {
centerPaddingStyle = {
padding: '0px ' + this.props.centerPadding
};
}
} else {
if (this.props.centerMode === true) {
centerPaddingStyle = {
padding: this.props.centerPadding + ' 0px'
};
}
}
var listStyle = (0, _objectAssign2.default)({}, verticalHeightStyle, centerPaddingStyle);
return _react2.default.createElement(
'div',
{
className: className,
onMouseEnter: this.onInnerSliderEnter,
onMouseLeave: this.onInnerSliderLeave,
onMouseOver: this.onInnerSliderOver
},
prevArrow,
_react2.default.createElement(
'div',
{
ref: this.listRefHandler,
className: 'slick-list',
style: listStyle,
onMouseDown: this.swipeStart,
onMouseMove: this.state.dragging ? this.swipeMove : null,
onMouseUp: this.swipeEnd,
onMouseLeave: this.state.dragging ? this.swipeEnd : null,
onTouchStart: this.swipeStart,
onTouchMove: this.state.dragging ? this.swipeMove : null,
onTouchEnd: this.swipeEnd,
onTouchCancel: this.state.dragging ? this.swipeEnd : null,
onKeyDown: this.props.accessibility ? this.keyHandler : null },
_react2.default.createElement(
_track.Track,
_extends({ ref: this.trackRefHandler }, trackProps),
this.props.children
)
),
nextArrow,
dots
);
}
});
/***/ }),
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _trackHelper = __webpack_require__(5);
var _helpers = __webpack_require__(8);
var _helpers2 = _interopRequireDefault(_helpers);
var _objectAssign = __webpack_require__(7);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _reactDom = __webpack_require__(6);
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var EventHandlers = {
// Event handler for previous and next
// gets called if slide is changed via arrows or dots but not swiping/dragging
changeSlide: function changeSlide(options) {
var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
var _props = this.props,
slidesToScroll = _props.slidesToScroll,
slidesToShow = _props.slidesToShow;
var _state = this.state,
slideCount = _state.slideCount,
currentSlide = _state.currentSlide;
unevenOffset = slideCount % slidesToScroll !== 0;
indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll;
if (options.message === 'previous') {
slideOffset = indexOffset === 0 ? slidesToScroll : slidesToShow - indexOffset;
targetSlide = currentSlide - slideOffset;
if (this.props.lazyLoad && !this.props.infinite) {
previousInt = currentSlide - slideOffset;
targetSlide = previousInt === -1 ? slideCount - 1 : previousInt;
}
} else if (options.message === 'next') {
slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset;
targetSlide = currentSlide + slideOffset;
if (this.props.lazyLoad && !this.props.infinite) {
targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset;
}
} else if (options.message === 'dots' || options.message === 'children') {
// Click on dots
targetSlide = options.index * options.slidesToScroll;
if (targetSlide === options.currentSlide) {
return;
}
} else if (options.message === 'index') {
targetSlide = Number(options.index);
if (targetSlide === options.currentSlide) {
return;
}
}
this.slideHandler(targetSlide);
},
// Accessiblity handler for previous and next
keyHandler: function keyHandler(e) {
//Dont slide if the cursor is inside the form fields and arrow keys are pressed
if (!e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
if (e.keyCode === 37 && this.props.accessibility === true) {
this.changeSlide({
message: this.props.rtl === true ? 'next' : 'previous'
});
} else if (e.keyCode === 39 && this.props.accessibility === true) {
this.changeSlide({
message: this.props.rtl === true ? 'previous' : 'next'
});
}
}
},
// Focus on selecting a slide (click handler on track)
selectHandler: function selectHandler(options) {
this.changeSlide(options);
},
// invoked when swiping/dragging starts (just once)
swipeStart: function swipeStart(e) {
var touches, posX, posY;
if (this.props.swipe === false || 'ontouchend' in document && this.props.swipe === false) {
return;
} else if (this.props.draggable === false && e.type.indexOf('mouse') !== -1) {
return;
}
posX = e.touches !== undefined ? e.touches[0].pageX : e.clientX;
posY = e.touches !== undefined ? e.touches[0].pageY : e.clientY;
this.setState({
dragging: true,
touchObject: {
startX: posX,
startY: posY,
curX: posX,
curY: posY
}
});
},
// continuous invokation while swiping/dragging is going on
swipeMove: function swipeMove(e) {
if (!this.state.dragging) {
e.preventDefault();
return;
}
if (this.state.scrolling) {
return;
}
if (this.state.animating) {
e.preventDefault();
return;
}
if (this.props.vertical && this.props.swipeToSlide && this.props.verticalSwiping) {
e.preventDefault();
}
var swipeLeft;
var curLeft, positionOffset;
var touchObject = this.state.touchObject;
curLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: this.state.currentSlide,
trackRef: this.track
}, this.props, this.state));
touchObject.curX = e.touches ? e.touches[0].pageX : e.clientX;
touchObject.curY = e.touches ? e.touches[0].pageY : e.clientY;
touchObject.swipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2)));
var verticalSwipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2)));
if (!this.props.verticalSwiping && !this.state.swiping && verticalSwipeLength > 4) {
this.setState({
scrolling: true
});
return;
}
if (this.props.verticalSwiping) {
touchObject.swipeLength = verticalSwipeLength;
}
positionOffset = (this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
if (this.props.verticalSwiping) {
positionOffset = touchObject.curY > touchObject.startY ? 1 : -1;
}
var currentSlide = this.state.currentSlide;
var dotCount = Math.ceil(this.state.slideCount / this.props.slidesToScroll); // this might not be correct, using getDotCount may be more accurate
var swipeDirection = this.swipeDirection(this.state.touchObject);
var touchSwipeLength = touchObject.swipeLength;
if (this.props.infinite === false) {
if (currentSlide === 0 && swipeDirection === 'right' || currentSlide + 1 >= dotCount && swipeDirection === 'left') {
touchSwipeLength = touchObject.swipeLength * this.props.edgeFriction;
if (this.state.edgeDragged === false && this.props.edgeEvent) {
this.props.edgeEvent(swipeDirection);
this.setState({ edgeDragged: true });
}
}
}
if (this.state.swiped === false && this.props.swipeEvent) {
this.props.swipeEvent(swipeDirection);
this.setState({ swiped: true });
}
if (!this.props.vertical) {
if (!this.props.rtl) {
swipeLeft = curLeft + touchSwipeLength * positionOffset;
} else {
swipeLeft = curLeft - touchSwipeLength * positionOffset;
}
} else {
swipeLeft = curLeft + touchSwipeLength * (this.state.listHeight / this.state.listWidth) * positionOffset;
}
if (this.props.verticalSwiping) {
swipeLeft = curLeft + touchSwipeLength * positionOffset;
}
this.setState({
touchObject: touchObject,
swipeLeft: swipeLeft,
trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: swipeLeft }, this.props, this.state))
});
if (Math.abs(touchObject.curX - touchObject.startX) < Math.abs(touchObject.curY - touchObject.startY) * 0.8) {
return;
}
if (touchObject.swipeLength > 4) {
this.setState({
swiping: true
});
e.preventDefault();
}
},
getNavigableIndexes: function getNavigableIndexes() {
var max = void 0;
var breakPoint = 0;
var counter = 0;
var indexes = [];
if (!this.props.infinite) {
max = this.state.slideCount;
} else {
breakPoint = this.props.slidesToShow * -1;
counter = this.props.slidesToShow * -1;
max = this.state.slideCount * 2;
}
while (breakPoint < max) {
indexes.push(breakPoint);
breakPoint = counter + this.props.slidesToScroll;
counter += this.props.slidesToScroll <= this.props.slidesToShow ? this.props.slidesToScroll : this.props.slidesToShow;
}
return indexes;
},
checkNavigable: function checkNavigable(index) {
var navigables = this.getNavigableIndexes();
var prevNavigable = 0;
if (index > navigables[navigables.length - 1]) {
index = navigables[navigables.length - 1];
} else {
for (var n in navigables) {
if (index < navigables[n]) {
index = prevNavigable;
break;
}
prevNavigable = navigables[n];
}
}
return index;
},
getSlideCount: function getSlideCount() {
var _this = this;
var centerOffset = this.props.centerMode ? this.state.slideWidth * Math.floor(this.props.slidesToShow / 2) : 0;
if (this.props.swipeToSlide) {
var swipedSlide = void 0;
var slickList = _reactDom2.default.findDOMNode(this.list);
var slides = slickList.querySelectorAll('.slick-slide');
Array.from(slides).every(function (slide) {
if (!_this.props.vertical) {
if (slide.offsetLeft - centerOffset + _this.getWidth(slide) / 2 > _this.state.swipeLeft * -1) {
swipedSlide = slide;
return false;
}
} else {
if (slide.offsetTop + _this.getHeight(slide) / 2 > _this.state.swipeLeft * -1) {
swipedSlide = slide;
return false;
}
}
return true;
});
var currentIndex = this.props.rtl === true ? this.state.slideCount - this.state.currentSlide : this.state.currentSlide;
var slidesTraversed = Math.abs(swipedSlide.dataset.index - currentIndex) || 1;
return slidesTraversed;
} else {
return this.props.slidesToScroll;
}
},
swipeEnd: function swipeEnd(e) {
if (!this.state.dragging) {
if (this.props.swipe) {
e.preventDefault();
}
return;
}
var touchObject = this.state.touchObject;
var minSwipe = this.state.listWidth / this.props.touchThreshold;
var swipeDirection = this.swipeDirection(touchObject);
if (this.props.verticalSwiping) {
minSwipe = this.state.listHeight / this.props.touchThreshold;
}
var wasScrolling = this.state.scrolling;
// reset the state of touch related state variables.
this.setState({
dragging: false,
edgeDragged: false,
scrolling: false,
swiping: false,
swiped: false,
swipeLeft: null,
touchObject: {}
});
if (wasScrolling) {
return;
}
// Fix for #13
if (!touchObject.swipeLength) {
return;
}
if (touchObject.swipeLength > minSwipe) {
e.preventDefault();
var slideCount = void 0,
newSlide = void 0;
switch (swipeDirection) {
case 'left':
case 'down':
newSlide = this.state.currentSlide + this.getSlideCount();
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
this.state.currentDirection = 0;
break;
case 'right':
case 'up':
newSlide = this.state.currentSlide - this.getSlideCount();
slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
this.state.currentDirection = 1;
break;
default:
slideCount = this.state.currentSlide;
}
this.slideHandler(slideCount);
} else {
// Adjust the track back to it's original position.
var currentLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: this.state.currentSlide,
trackRef: this.track
}, this.props, this.state));
this.setState({
trackStyle: (0, _trackHelper.getTrackAnimateCSS)((0, _objectAssign2.default)({ left: currentLeft }, this.props, this.state))
});
}
},
onInnerSliderEnter: function onInnerSliderEnter(e) {
if (this.props.autoplay && this.props.pauseOnHover) {
this.pause();
}
},
onInnerSliderOver: function onInnerSliderOver(e) {
if (this.props.autoplay && this.props.pauseOnHover) {
this.pause();
}
},
onInnerSliderLeave: function onInnerSliderLeave(e) {
if (this.props.autoplay && this.props.pauseOnHover) {
this.autoPlay();
}
}
};
exports.default = EventHandlers;
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.getTrackLeft = exports.getTrackAnimateCSS = exports.getTrackCSS = undefined;
exports.getPreClones = getPreClones;
exports.getPostClones = getPostClones;
exports.getTotalSlides = getTotalSlides;
var _reactDom = __webpack_require__(6);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _objectAssign = __webpack_require__(7);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// checks if spec is the superset of keys in keysArray, i.e., spec contains all the keys from keysArray
var checkSpecKeys = function checkSpecKeys(spec, keysArray) {
return keysArray.reduce(function (value, key) {
return value && spec.hasOwnProperty(key);
}, true) ? null : console.error('Keys Missing', spec);
};
var getTrackCSS = exports.getTrackCSS = function getTrackCSS(spec) {
checkSpecKeys(spec, ['left', 'variableWidth', 'slideCount', 'slidesToShow', 'slideWidth']);
var trackWidth, trackHeight;
var trackChildren = spec.slideCount + 2 * spec.slidesToShow; // this should probably be getTotalSlides
if (!spec.vertical) {
trackWidth = getTotalSlides(spec) * spec.slideWidth;
trackWidth += spec.slideWidth / 2; // this is a temporary hack so that track div doesn't create new row for slight overflow
} else {
trackHeight = trackChildren * spec.slideHeight;
}
var style = {
opacity: 1,
WebkitTransform: !spec.vertical ? 'translate3d(' + spec.left + 'px, 0px, 0px)' : 'translate3d(0px, ' + spec.left + 'px, 0px)',
transform: !spec.vertical ? 'translate3d(' + spec.left + 'px, 0px, 0px)' : 'translate3d(0px, ' + spec.left + 'px, 0px)',
transition: '',
WebkitTransition: '',
msTransform: !spec.vertical ? 'translateX(' + spec.left + 'px)' : 'translateY(' + spec.left + 'px)'
};
if (spec.fade) {
style = {
opacity: 1
};
}
if (trackWidth) {
(0, _objectAssign2.default)(style, { width: trackWidth });
}
if (trackHeight) {
(0, _objectAssign2.default)(style, { height: trackHeight });
}
// Fallback for IE8
if (window && !window.addEventListener && window.attachEvent) {
if (!spec.vertical) {
style.marginLeft = spec.left + 'px';
} else {
style.marginTop = spec.left + 'px';
}
}
return style;
};
var getTrackAnimateCSS = exports.getTrackAnimateCSS = function getTrackAnimateCSS(spec) {
checkSpecKeys(spec, ['left', 'variableWidth', 'slideCount', 'slidesToShow', 'slideWidth', 'speed', 'cssEase']);
var style = getTrackCSS(spec);
// useCSS is true by default so it can be undefined
style.WebkitTransition = '-webkit-transform ' + spec.speed + 'ms ' + spec.cssEase;
style.transition = 'transform ' + spec.speed + 'ms ' + spec.cssEase;
return style;
};
// gets total length of track that's on the left side of current slide
var getTrackLeft = exports.getTrackLeft = function getTrackLeft(spec) {
checkSpecKeys(spec, ['slideIndex', 'trackRef', 'infinite', 'centerMode', 'slideCount', 'slidesToShow', 'slidesToScroll', 'slideWidth', 'listWidth', 'variableWidth', 'slideHeight']);
var slideIndex = spec.slideIndex,
trackRef = spec.trackRef,
infinite = spec.infinite,
centerMode = spec.centerMode,
slideCount = spec.slideCount,
slidesToShow = spec.slidesToShow,
slidesToScroll = spec.slidesToScroll,
slideWidth = spec.slideWidth,
listWidth = spec.listWidth,
variableWidth = spec.variableWidth,
slideHeight = spec.slideHeight,
fade = spec.fade,
vertical = spec.vertical;
var slideOffset = 0;
var targetLeft;
var targetSlide;
var verticalOffset = 0;
if (fade || spec.slideCount === 1) {
return 0;
}
var slidesToOffset = 0;
if (infinite) {
slidesToOffset = -getPreClones(spec); // bring active slide to the beginning of visual area
// if next scroll doesn't have enough children, just reach till the end of original slides instead of shifting slidesToScroll children
if (slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount) {
slidesToOffset = -(slideIndex > slideCount ? slidesToShow - (slideIndex - slideCount) : slideCount % slidesToScroll);
}
// shift current slide to center of the frame
if (centerMode) {
slidesToOffset += parseInt(slidesToShow / 2);
}
} else {
if (slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount) {
slidesToOffset = slidesToShow - slideCount % slidesToScroll;
}
if (centerMode) {
slidesToOffset = parseInt(slidesToShow / 2);
}
}
slideOffset = slidesToOffset * slideWidth;
verticalOffset = slidesToOffset * slideHeight;
if (!vertical) {
targetLeft = slideIndex * slideWidth * -1 + slideOffset;
} else {
targetLeft = slideIndex * slideHeight * -1 + verticalOffset;
}
if (variableWidth === true) {
var targetSlideIndex;
var lastSlide = _reactDom2.default.findDOMNode(trackRef).children[slideCount - 1];
var max = -lastSlide.offsetLeft + listWidth - lastSlide.offsetWidth;
if (slideCount <= slidesToShow || infinite === false) {
targetSlide = _reactDom2.default.findDOMNode(trackRef).childNodes[slideIndex];
} else {
targetSlideIndex = slideIndex + slidesToShow;
targetSlide = _reactDom2.default.findDOMNode(trackRef).childNodes[targetSlideIndex];
}
targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;
if (centerMode === true) {
if (infinite === false) {
targetSlide = _reactDom2.default.findDOMNode(trackRef).children[slideIndex];
} else {
targetSlide = _reactDom2.default.findDOMNode(trackRef).children[slideIndex + slidesToShow + 1];
}
if (targetSlide) {
targetLeft = targetSlide.offsetLeft * -1 + (listWidth - targetSlide.offsetWidth) / 2;
}
}
if (spec.infinite === false && targetLeft < max) {
targetLeft = max;
}
}
return targetLeft;
};
function getPreClones(spec) {
return spec.slidesToShow + (spec.centerMode ? 1 : 0);
}
function getPostClones(spec) {
return spec.slideCount;
}
function getTotalSlides(spec) {
if (spec.slideCount === 1) {
return 1;
}
return getPreClones(spec) + spec.slideCount + getPostClones(spec);
}
/***/ }),
/* 6 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ }),
/* 7 */
/***/ (function(module, exports) {
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
'use strict';
/* eslint-disable no-unused-vars */
var getOwnPropertySymbols = Object.getOwnPropertySymbols;
var hasOwnProperty = Object.prototype.hasOwnProperty;
var propIsEnumerable = Object.prototype.propertyIsEnumerable;
function toObject(val) {
if (val === null || val === undefined) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
function shouldUseNative() {
try {
if (!Object.assign) {
return false;
}
// Detect buggy property enumeration order in older V8 versions.
// https://bugs.chromium.org/p/v8/issues/detail?id=4118
var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
test1[5] = 'de';
if (Object.getOwnPropertyNames(test1)[0] === '5') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test2 = {};
for (var i = 0; i < 10; i++) {
test2['_' + String.fromCharCode(i)] = i;
}
var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
return test2[n];
});
if (order2.join('') !== '0123456789') {
return false;
}
// https://bugs.chromium.org/p/v8/issues/detail?id=3056
var test3 = {};
'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
test3[letter] = letter;
});
if (Object.keys(Object.assign({}, test3)).join('') !==
'abcdefghijklmnopqrst') {
return false;
}
return true;
} catch (err) {
// We don't expect any of the above to throw, but better to be safe.
return false;
}
}
module.exports = shouldUseNative() ? Object.assign : function (target, source) {
var from;
var to = toObject(target);
var symbols;
for (var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for (var key in from) {
if (hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
if (getOwnPropertySymbols) {
symbols = getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
'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 = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(6);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _trackHelper = __webpack_require__(5);
var _objectAssign = __webpack_require__(7);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var helpers = {
// supposed to start autoplay of slides
initialize: function initialize(props) {
var slickList = _reactDom2.default.findDOMNode(this.list);
var slideCount = _react2.default.Children.count(props.children);
var listWidth = this.getWidth(slickList);
var trackWidth = this.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 = (this.getWidth(_reactDom2.default.findDOMNode(this)) - centerPaddingAdj) / props.slidesToShow;
} else {
slideWidth = this.getWidth(_reactDom2.default.findDOMNode(this));
}
var slideHeight = this.getHeight(slickList.querySelector('[data-index="0"]'));
var listHeight = slideHeight * props.slidesToShow;
var currentSlide = props.rtl ? slideCount - 1 - props.initialSlide : props.initialSlide;
this.setState({
slideCount: slideCount,
slideWidth: slideWidth,
listWidth: listWidth,
trackWidth: trackWidth,
currentSlide: currentSlide,
slideHeight: slideHeight,
listHeight: listHeight
}, function () {
// this reference isn't lost due to mixin
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 });
this.autoPlay(); // once we're set up, trigger the initial autoplay.
});
},
update: function update(props) {
var slickList = _reactDom2.default.findDOMNode(this.list);
// This method has mostly same code as initialize method.
// Refactor it
var slideCount = _react2.default.Children.count(props.children);
var listWidth = this.getWidth(slickList);
var trackWidth = this.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 = (this.getWidth(_reactDom2.default.findDOMNode(this)) - centerPaddingAdj) / props.slidesToShow;
} else {
slideWidth = this.getWidth(_reactDom2.default.findDOMNode(this));
}
var slideHeight = this.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();
}
this.setState({
slideCount: slideCount,
slideWidth: slideWidth,
listWidth: listWidth,
trackWidth: trackWidth,
slideHeight: slideHeight,
listHeight: listHeight
}, function () {
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 });
});
},
getWidth: function getWidth(elem) {
return elem && (elem.getBoundingClientRect().width || elem.offsetWidth) || 0;
},
getHeight: function getHeight(elem) {
return elem && (elem.getBoundingClientRect().height || elem.offsetHeight) || 0;
},
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';
}
}
},
canGoNext: function canGoNext(opts) {
var canGo = true;
if (!opts.infinite) {
if (opts.centerMode) {
// check if current slide is last slide
if (opts.currentSlide >= opts.slideCount - 1) {
canGo = false;
}
} else {
// check if all slides are shown in slider
if (opts.slideCount <= opts.slidesToShow || opts.currentSlide >= opts.slideCount - opts.slidesToShow) {
canGo = false;
}
}
}
return canGo;
},
slideHandler: function slideHandler(index) {
var _this = this;
// index is target slide index
// Functionality of animateSlide and postSlide is merged into this function
var targetSlide, currentSlide;
var targetLeft, currentLeft;
var callback;
if (this.props.waitForAnimate && this.state.animating) {
return;
}
if (this.props.fade) {
currentSlide = 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 targetSlide back into the range
if (index < 0) {
targetSlide = index + this.state.slideCount;
} else if (index >= this.state.slideCount) {
targetSlide = index - this.state.slideCount;
} else {
targetSlide = index;
}
if (this.props.lazyLoad && this.state.lazyLoadedList.indexOf(targetSlide) < 0) {
this.setState({
lazyLoadedList: this.state.lazyLoadedList.concat(targetSlide)
});
}
callback = function callback() {
_this.setState({
animating: false
});
if (_this.props.afterChange) {
_this.props.afterChange(targetSlide);
}
delete _this.animationEndCallback;
};
this.setState({
animating: true,
currentSlide: targetSlide
}, function () {
this.animationEndCallback = setTimeout(callback, this.props.speed);
});
if (this.props.beforeChange) {
this.props.beforeChange(this.state.currentSlide, targetSlide);
}
this.autoPlay();
return;
}
targetSlide = index;
if (targetSlide < 0) {
if (this.props.infinite === false) {
currentSlide = 0;
} else if (this.state.slideCount % this.props.slidesToScroll !== 0) {
currentSlide = this.state.slideCount - this.state.slideCount % this.props.slidesToScroll;
} else {
currentSlide = this.state.slideCount + targetSlide;
}
} else if (targetSlide >= this.state.slideCount) {
if (this.props.infinite === false) {
currentSlide = this.state.slideCount - this.props.slidesToShow;
} else if (this.state.slideCount % this.props.slidesToScroll !== 0) {
currentSlide = 0;
} else {
currentSlide = targetSlide - this.state.slideCount;
}
} else {
currentSlide = targetSlide;
}
targetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: targetSlide,
trackRef: this.track
}, this.props, this.state));
currentLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: currentSlide,
trackRef: