react-slick
Version:
React port of slick carousel
1,622 lines (1,342 loc) • 63.5 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';
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _innerSlider = __webpack_require__(3);
var _objectAssign = __webpack_require__(8);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _json2mq = __webpack_require__(15);
var _json2mq2 = _interopRequireDefault(_json2mq);
var _reactResponsiveMixin = __webpack_require__(17);
var _reactResponsiveMixin2 = _interopRequireDefault(_reactResponsiveMixin);
var _defaultProps = __webpack_require__(10);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Slider = _react2.default.createClass({
displayName: 'Slider',
mixins: [_reactResponsiveMixin2.default],
getInitialState: function getInitialState() {
return {
breakpoint: null
};
},
componentDidMount: function componentDidMount() {
var _this = this;
if (this.props.responsive) {
var breakpoints = this.props.responsive.map(function (breakpt) {
return breakpt.breakpoint;
});
breakpoints.sort(function (x, y) {
return x - y;
});
breakpoints.forEach(function (breakpoint, index) {
var bQuery;
if (index === 0) {
bQuery = (0, _json2mq2.default)({ minWidth: 0, maxWidth: breakpoint });
} else {
bQuery = (0, _json2mq2.default)({ minWidth: breakpoints[index - 1], maxWidth: breakpoint });
}
_this.media(bQuery, function () {
_this.setState({ breakpoint: breakpoint });
});
});
// Register media query for full screen. Need to support resize from small to large
var query = (0, _json2mq2.default)({ minWidth: breakpoints.slice(-1)[0] });
this.media(query, function () {
_this.setState({ breakpoint: null });
});
}
},
render: function render() {
var _this2 = this;
var settings;
var newProps;
if (this.state.breakpoint) {
newProps = this.props.responsive.filter(function (resp) {
return resp.breakpoint === _this2.state.breakpoint;
});
settings = newProps[0].settings === 'unslick' ? 'unslick' : (0, _objectAssign2.default)({}, this.props, newProps[0].settings);
} else {
settings = (0, _objectAssign2.default)({}, _defaultProps2.default, this.props);
}
var children = this.props.children;
if (!Array.isArray(children)) {
children = [children];
}
// Children may contain false or null, so we should filter them
children = children.filter(function (child) {
return !!child;
});
if (settings === 'unslick') {
// if 'unslick' responsive breakpoint setting used, just return the <Slider> tag nested HTML
return _react2.default.createElement(
'div',
null,
children
);
} else {
return _react2.default.createElement(
_innerSlider.InnerSlider,
settings,
children
);
}
}
});
module.exports = 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__(7);
var _helpers2 = _interopRequireDefault(_helpers);
var _initialState = __webpack_require__(9);
var _initialState2 = _interopRequireDefault(_initialState);
var _defaultProps = __webpack_require__(10);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
var _classnames = __webpack_require__(11);
var _classnames2 = _interopRequireDefault(_classnames);
var _track = __webpack_require__(12);
var _dots = __webpack_require__(13);
var _arrows = __webpack_require__(14);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var InnerSlider = exports.InnerSlider = _react2.default.createClass({
displayName: 'InnerSlider',
mixins: [_helpers2.default, _eventHandlers2.default],
getInitialState: function getInitialState() {
return _extends({}, _initialState2.default, {
currentSlide: this.props.initialSlide
});
},
getDefaultProps: function getDefaultProps() {
return _defaultProps2.default;
},
componentWillMount: function componentWillMount() {
if (this.props.init) {
this.props.init();
}
this.setState({
mounted: true
});
var lazyLoadedList = [];
for (var i = 0; i < _react2.default.Children.count(this.props.children); i++) {
if (i >= this.state.currentSlide && i < this.state.currentSlide + this.props.slidesToShow) {
lazyLoadedList.push(i);
}
}
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();
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) {
window.clearInterval(this.state.autoPlayTimer);
}
},
componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
if (this.props.slickGoTo != nextProps.slickGoTo) {
this.changeSlide({
message: 'index',
index: nextProps.slickGoTo,
currentSlide: this.state.currentSlide
});
} else {
this.update(nextProps);
}
},
componentDidUpdate: function componentDidUpdate() {
this.adaptHeight();
},
onWindowResized: function onWindowResized() {
this.update(this.props);
// animating state should be cleared while resizing, otherwise autoplay stops working
this.setState({
animating: false
});
},
render: function render() {
var className = (0, _classnames2.default)('slick-initialized', 'slick-slider', this.props.className);
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 : new Function(),
currentSlide: this.state.currentSlide,
lazyLoad: this.props.lazyLoad,
lazyLoadedList: this.state.lazyLoadedList,
rtl: this.props.rtl,
slideWidth: this.state.slideWidth,
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
};
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 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'
};
}
}
return _react2.default.createElement(
'div',
{ className: className, onMouseEnter: this.onInnerSliderEnter, onMouseLeave: this.onInnerSliderLeave },
prevArrow,
_react2.default.createElement(
'div',
{
ref: 'list',
className: 'slick-list',
style: centerPaddingStyle,
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: 'track' }, 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__(7);
var _helpers2 = _interopRequireDefault(_helpers);
var _objectAssign = __webpack_require__(8);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var EventHandlers = {
// Event handler for previous and next
changeSlide: function changeSlide(options) {
var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
var _props = this.props;
var slidesToScroll = _props.slidesToScroll;
var slidesToShow = _props.slidesToShow;
var _state = this.state;
var slideCount = _state.slideCount;
var 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) {
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) {
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 = 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);
},
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
}
});
},
swipeMove: function swipeMove(e) {
if (!this.state.dragging) {
e.preventDefault();
return;
}
if (this.state.animating) {
return;
}
var swipeLeft;
var curLeft, positionOffset;
var touchObject = this.state.touchObject;
curLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: this.state.currentSlide,
trackRef: this.refs.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)));
positionOffset = (this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
var currentSlide = this.state.currentSlide;
var dotCount = Math.ceil(this.state.slideCount / this.props.slidesToScroll);
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 });
}
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) {
e.preventDefault();
}
},
swipeEnd: function swipeEnd(e) {
if (!this.state.dragging) {
e.preventDefault();
return;
}
var touchObject = this.state.touchObject;
var minSwipe = this.state.listWidth / this.props.touchThreshold;
var swipeDirection = this.swipeDirection(touchObject);
// reset the state of touch related state variables.
this.setState({
dragging: false,
edgeDragged: false,
swiped: false,
swipeLeft: null,
touchObject: {}
});
// Fix for #13
if (!touchObject.swipeLength) {
return;
}
if (touchObject.swipeLength > minSwipe) {
e.preventDefault();
if (swipeDirection === 'left') {
this.slideHandler(this.state.currentSlide + this.props.slidesToScroll);
} else if (swipeDirection === 'right') {
this.slideHandler(this.state.currentSlide - this.props.slidesToScroll);
} else {
this.slideHandler(this.state.currentSlide);
}
} else {
// Adjust the track back to it's original position.
var currentLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: this.state.currentSlide,
trackRef: this.refs.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();
}
},
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;
var _reactDom = __webpack_require__(6);
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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;
if (spec.variableWidth) {
trackWidth = (spec.slideCount + 2 * spec.slidesToShow) * spec.slideWidth;
} else if (spec.centerMode) {
trackWidth = (spec.slideCount + 2 * (spec.slidesToShow + 1)) * spec.slideWidth;
} else {
trackWidth = (spec.slideCount + 2 * spec.slidesToShow) * spec.slideWidth;
}
var style = {
opacity: 1,
width: trackWidth,
WebkitTransform: 'translate3d(' + spec.left + 'px, 0px, 0px)',
transform: 'translate3d(' + spec.left + 'px, 0px, 0px)',
transition: '',
WebkitTransition: '',
msTransform: 'translateX(' + spec.left + 'px)'
};
// Fallback for IE8
if (!window.addEventListener && window.attachEvent) {
style.marginLeft = 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;
};
var getTrackLeft = exports.getTrackLeft = function getTrackLeft(spec) {
checkSpecKeys(spec, ['slideIndex', 'trackRef', 'infinite', 'centerMode', 'slideCount', 'slidesToShow', 'slidesToScroll', 'slideWidth', 'listWidth', 'variableWidth']);
var slideOffset = 0;
var targetLeft;
var targetSlide;
if (spec.fade) {
return 0;
}
if (spec.infinite) {
if (spec.slideCount > spec.slidesToShow) {
slideOffset = spec.slideWidth * spec.slidesToShow * -1;
}
if (spec.slideCount % spec.slidesToScroll !== 0) {
if (spec.slideIndex + spec.slidesToScroll > spec.slideCount && spec.slideCount > spec.slidesToShow) {
if (spec.slideIndex > spec.slideCount) {
slideOffset = (spec.slidesToShow - (spec.slideIndex - spec.slideCount)) * spec.slideWidth * -1;
} else {
slideOffset = spec.slideCount % spec.slidesToScroll * spec.slideWidth * -1;
}
}
}
}
if (spec.centerMode) {
if (spec.infinite) {
slideOffset += spec.slideWidth * Math.floor(spec.slidesToShow / 2);
} else {
slideOffset = spec.slideWidth * Math.floor(spec.slidesToShow / 2);
}
}
targetLeft = spec.slideIndex * spec.slideWidth * -1 + slideOffset;
if (spec.variableWidth === true) {
var targetSlideIndex;
if (spec.slideCount <= spec.slidesToShow || spec.infinite === false) {
targetSlide = _reactDom2.default.findDOMNode(spec.trackRef).childNodes[spec.slideIndex];
} else {
targetSlideIndex = spec.slideIndex + spec.slidesToShow;
targetSlide = _reactDom2.default.findDOMNode(spec.trackRef).childNodes[targetSlideIndex];
}
targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;
if (spec.centerMode === true) {
if (spec.infinite === false) {
targetSlide = _reactDom2.default.findDOMNode(spec.trackRef).children[spec.slideIndex];
} else {
targetSlide = _reactDom2.default.findDOMNode(spec.trackRef).children[spec.slideIndex + spec.slidesToShow + 1];
}
targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;
targetLeft += (spec.listWidth - targetSlide.offsetWidth) / 2;
}
}
return targetLeft;
};
/***/ },
/* 6 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
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__(8);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var helpers = {
initialize: function initialize(props) {
var slideCount = _react2.default.Children.count(props.children);
var listWidth = this.getWidth(_reactDom2.default.findDOMNode(this.refs.list));
var trackWidth = this.getWidth(_reactDom2.default.findDOMNode(this.refs.track));
var slideWidth = trackWidth / props.slidesToShow;
var currentSlide = props.rtl ? slideCount - 1 - props.initialSlide : props.initialSlide;
this.setState({
slideCount: slideCount,
slideWidth: slideWidth,
listWidth: listWidth,
trackWidth: trackWidth,
currentSlide: currentSlide
}, function () {
var targetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: this.state.currentSlide,
trackRef: this.refs.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) {
// This method has mostly same code as initialize method.
// Refactor it
var slideCount = _react2.default.Children.count(props.children);
var listWidth = this.getWidth(_reactDom2.default.findDOMNode(this.refs.list));
var trackWidth = this.getWidth(_reactDom2.default.findDOMNode(this.refs.track));
var slideWidth = this.getWidth(_reactDom2.default.findDOMNode(this)) / props.slidesToShow;
// pause slider if autoplay is set to false
if (!props.autoplay) this.pause();
this.setState({
slideCount: slideCount,
slideWidth: slideWidth,
listWidth: listWidth,
trackWidth: trackWidth
}, function () {
var targetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: this.state.currentSlide,
trackRef: this.refs.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.getBoundingClientRect().width || elem.offsetWidth;
},
adaptHeight: function adaptHeight() {
if (this.props.adaptiveHeight) {
var selector = '[data-index="' + this.state.currentSlide + '"]';
if (this.refs.list) {
var slickList = _reactDom2.default.findDOMNode(this.refs.list);
slickList.style.height = slickList.querySelector(selector).offsetHeight + 'px';
}
}
},
slideHandler: function slideHandler(index) {
var _this = this;
// Functionality of animateSlide and postSlide is merged into this function
// console.log('slideHandler', index);
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 it's not infite and current slide is the first or last slide.
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;
}
// Don't change slide if it's not infite and current slide is the first or last slide page.
if (currentSlide === this.state.currentSlide && this.props.infinite === false) {
return;
}
targetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: targetSlide,
trackRef: this.refs.track
}, this.props, this.state));
currentLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
slideIndex: currentSlide,
trackRef: this.refs.track
}, this.props, this.state));
if (this.props.infinite === false) {
targetLeft = currentLeft;
}
if (this.props.beforeChange) {
this.props.beforeChange(this.state.currentSlide, currentSlide);
}
if (this.props.lazyLoad) {
var loaded = true;
var slidesToLoad = [];
for (var i = targetSlide; i < targetSlide + this.props.slidesToShow; i++) {
loaded = loaded && this.state.lazyLoadedList.indexOf(i) >= 0;
if (!loaded) {
slidesToLoad.push(i);
}
}
if (!loaded) {
this.setState({
lazyLoadedList: this.state.lazyLoadedList.concat(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: currentSlide,
trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: currentLeft }, this.props, this.state))
}, function () {
if (this.props.afterChange) {
this.props.afterChange(currentSlide);
}
});
} else {
var nextStateChanges = {
animating: false,
currentSlide: currentSlide,
trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: currentLeft }, this.props, this.state)),
swipeLeft: null
};
callback = function callback() {
_this.setState(nextStateChanges);
if (_this.props.afterChange) {
_this.props.afterChange(currentSlide);
}
delete _this.animationEndCallback;
};
this.setState({
animating: true,
currentSlide: currentSlide,
trackStyle: (0, _trackHelper.getTrackAnimateCSS)((0, _objectAssign2.default)({ left: targetLeft }, this.props, this.state))
}, function () {
this.animationEndCallback = setTimeout(callback, this.props.speed);
});
}
this.autoPlay();
},
swipeDirection: function swipeDirection(touchObject) {
var xDist, yDist, r, swipeAngle;
xDist = touchObject.startX - touchObject.curX;
yDist = touchObject.startY - touchObject.curY;
r = Math.atan2(yDist, xDist);
swipeAngle = Math.round(r * 180 / Math.PI);
if (swipeAngle < 0) {
swipeAngle = 360 - Math.abs(swipeAngle);
}
if (swipeAngle <= 45 && swipeAngle >= 0 || swipeAngle <= 360 && swipeAngle >= 315) {
return this.props.rtl === false ? 'left' : 'right';
}
if (swipeAngle >= 135 && swipeAngle <= 225) {
return this.props.rtl === false ? 'right' : 'left';
}
return 'vertical';
},
autoPlay: function autoPlay() {
var _this2 = this;
if (this.state.autoPlayTimer) {
return;
}
var play = function play() {
if (_this2.state.mounted) {
var nextIndex = _this2.props.rtl ? _this2.state.currentSlide - _this2.props.slidesToScroll : _this2.state.currentSlide + _this2.props.slidesToScroll;
_this2.slideHandler(nextIndex);
}
};
if (this.props.autoplay) {
this.setState({
autoPlayTimer: window.setInterval(play, this.props.autoplaySpeed)
});
}
},
pause: function pause() {
if (this.state.autoPlayTimer) {
window.clearInterval(this.state.autoPlayTimer);
this.setState({
autoPlayTimer: null
});
}
}
};
exports.default = helpers;
/***/ },
/* 8 */
/***/ function(module, exports) {
'use strict';
/* eslint-disable no-unused-vars */
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
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 (e) {
// 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 (Object.getOwnPropertySymbols) {
symbols = Object.getOwnPropertySymbols(from);
for (var i = 0; i < symbols.length; i++) {
if (propIsEnumerable.call(from, symbols[i])) {
to[symbols[i]] = from[symbols[i]];
}
}
}
}
return to;
};
/***/ },
/* 9 */
/***/ function(module, exports) {
"use strict";
var initialState = {
animating: false,
dragging: false,
autoPlayTimer: null,
currentDirection: 0,
currentLeft: null,
currentSlide: 0,
direction: 1,
// listWidth: null,
// listHeight: null,
// loadIndex: 0,
slideCount: null,
slideWidth: null,
// sliding: false,
// slideOffset: 0,
swipeLeft: null,
touchObject: {
startX: 0,
startY: 0,
curX: 0,
curY: 0
},
lazyLoadedList: [],
// added for react
initialized: false,
edgeDragged: false,
swiped: false, // used by swipeEvent. differentites between touch and swipe.
trackStyle: {},
trackWidth: 0
// Removed
// transformsEnabled: false,
// $nextArrow: null,
// $prevArrow: null,
// $dots: null,
// $list: null,
// $slideTrack: null,
// $slides: null,
};
module.exports = initialState;
/***/ },
/* 10 */
/***/ function(module, exports) {
'use strict';
var defaultProps = {
className: '',
accessibility: true,
adaptiveHeight: false,
arrows: true,
autoplay: false,
autoplaySpeed: 3000,
centerMode: false,
centerPadding: '50px',
cssEase: 'ease',
dots: false,
dotsClass: 'slick-dots',
draggable: true,
easing: 'linear',
edgeFriction: 0.35,
fade: false,
focusOnSelect: false,
infinite: true,
initialSlide: 0,
lazyLoad: false,
pauseOnHover: false,
responsive: null,
rtl: false,
slide: 'div',
slidesToShow: 1,
slidesToScroll: 1,
speed: 500,
swipe: true,
swipeToSlide: false,
touchMove: true,
touchThreshold: 5,
useCSS: true,
variableWidth: false,
vertical: false,
waitForAnimate: true,
afterChange: null,
beforeChange: null,
edgeEvent: null,
init: null,
swipeEvent: null,
// nextArrow, prevArrow are react componets
nextArrow: null,
prevArrow: null
};
module.exports = defaultProps;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2016 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
return classNames;
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {
window.classNames = classNames;
}
}());
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.Track = undefined;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _objectAssign = __webpack_require__(8);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _classnames = __webpack_require__(11);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getSlideClasses = function getSlideClasses(spec) {
var slickActive, slickCenter, slickCloned;
var centerOffset, index;
if (spec.rtl) {
index = spec.slideCount - 1 - spec.index;
} else {
index = spec.index;
}
slickCloned = index < 0 || index >= spec.slideCount;
if (spec.centerMode) {
centerOffset = Math.floor(spec.slidesToShow / 2);
slickCenter = (index - spec.currentSlide) % spec.slideCount === 0;
if (index > spec.currentSlide - centerOffset - 1 && index <= spec.currentSlide + centerOffset) {
slickActive = true;
}
} else {
slickActive = spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow;
}
return (0, _classnames2.default)({
'slick-slide': true,
'slick-active': slickActive,
'slick-center': slickCenter,
'slick-cloned': slickCloned
});
};
var getSlideStyle = function getSlideStyle(spec) {
var style = {};
if (spec.variableWidth === undefined || spec.variableWidth === false) {
style.width = spec.slideWidth;
}
if (spec.fade) {
style.position = 'relative';
style.left = -spec.index * spec.slideWidth;
style.opacity = spec.currentSlide === spec.index ? 1 : 0;
style.transition = 'opacity ' + spec.speed + 'ms ' + spec.cssEase;
style.WebkitTransition = 'opacity ' + spec.speed + 'ms ' + spec.cssEase;
}
return style;
};
var getKey = function getKey(child, fallbackKey) {
// key could be a zero
return child.key === null || child.key === undefined ? fallbackKey : child.key;
};
var renderSlides = function renderSlides(spec) {
var _this = this;
var key;
var slides = [];
var preCloneSlides = [];
var postCloneSlides = [];
var count = _react2.default.Children.count(spec.children);
var child;
_react2.default.Children.forEach(spec.children, function (elem, index) {
var childOnClickOptions = {
message: 'children',
index: index,
slidesToScroll: spec.slidesToScroll,
currentSlide: spec.currentSlide
};
if (!spec.lazyLoad | (spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0)) {
child = elem;
} else {
child = _react2.default.createElement('div', null);
}
var childStyle = getSlideStyle((0, _objectAssign2.default)({}, spec, { index: index }));
var slickClasses = getSlideClasses((0, _objectAssign2.default)({ index: index }, spec));
var cssClasses;
if (child.props.className) {
cssClasses = (0, _classnames2.default)(slickClasses, child.props.className);
} else {
cssClasses = slickClasses;
}
slides.push(_react2.default.cloneElement(child, {
key: 'original' + getKey(child, index),
'data-index': index,
className: cssClasses,
tabIndex: '-1',
style: (0, _objectAssign2.default)({ outline: 'none' }, child.props.style || {}, childStyle),
onClick: spec.focusOnSelect.bind(null, childOnClickOptions)
}));
// variableWidth doesn't wrap properly.
if (spec.infinite && spec.fade === false) {
var infiniteCount = spec.variableWidth ? spec.slidesToShow + 1 : spec.slidesToShow;
if (index >= count - infiniteCount) {
key = -(count - index);
preCloneSlides.push(_react2.default.cloneElement(child, {
key: 'precloned' + getKey(child, key),
'data-index': key,
className: cssClasses,
style: (0, _objectAssign2.default)({}, child.props.style || {}, childStyle),
onClick: _this.props.focusOnSelect.bind(null, childOnClickOptions)
}));
}
if (index < infiniteCount) {
key = count + index;
postCloneSlides.push(_react2.default.cloneElement(child, {
key: 'postcloned' + getKey(child, key),
'data-index': key,
className: cssClasses,
style: (0, _objectAssign2.default)({}, child.props.style || {}, childStyle),
onClick: _this.props.focusOnSelect.bind(null, childOnClickOptions)
}));
}
}
});
if (spec.rtl) {
return preCloneSlides.concat(slides, postCloneSlides).reverse();
} else {
return preCloneSlides.concat(slides, postCloneSlides);
}
};
var Track = exports.Track = _react2.default.createClass({
displayName: 'Track',
render: function render() {
var slides = renderSlides.call(this, this.props);
return _react2.default.createElement(
'div',
{ className: 'slick-track', style: this.props.trackStyle },
slides
);
}
});
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.Dots = undefined;
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(11);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getDotCount = function getDotCount(spec) {
var dots;
dots = Math.ceil(spec.slideCount / spec.slidesToScroll);
return dots;
};
var Dots = exports.Dots = _react2.default.createClass({
displayName: 'Dots',
clickHandler: function clickHandler(options, e) {
// In Autoplay the focus stays on clicked button even after transition
// to next slide. That only goes away by click somewhere outside
e.preventDefault();
this.props.clickHandler(options);
},
render: function render() {
var _this = this;
var dotCount = getDotCount({
slideCount: this.props.slideCount,
slidesToScroll: this.props.slidesToScroll
});
// Apply join & split to Array to pre-fill it for IE8
//
// Credit: http://stackoverflow.com/a/13735425/1849458
var dots = Array.apply(null, Array(dotCount + 1).join('0').split('')).map(function (x, i) {
var leftBound = i * _this.props.slidesToScroll;
var rightBound = i * _this.props.slidesToScroll + (_this.props.slidesToScroll - 1);
var className = (0, _classnames2.default)({
'slick-active': _this.props.currentSlide >= leftBound && _this.props.currentSlide <= rightBound
});
var dotOptions = {
message: 'dots',
index: i,
slidesToScroll: _this.props.slidesToScroll,
currentSlide: _this.props.currentSlide
};
return _react2.default.createElement(
'li',
{ key: i, className: className },
_react2.default.createElement(
'button',
{ onClick: _this.clickHandler.bind(_this, dotOptions) },
i + 1
)
);
});
return _react2.default.createElement(
'ul',
{ className: this.props.dotsClass, style: { display: 'block' } },
dots
);
}
});
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
exports.NextArrow = exports.PrevArrow = 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 _classnames = __webpack_require__(11);
var _classnames2 = _interopRequireDefault(_classnames);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var PrevArrow = exports.PrevArrow = _react2.default.createClass({
displayName: 'PrevArrow',
clickHandler: function clickHandler(options, e) {
if (e) {
e.preventDefault();
}
this.props.clickHandler(options, e);
},
render: function render() {
var prevClasses = { 'slick-arrow': true, 'slick-prev': true };
var prevHandler = this.clickHandler.bind(this, { message: 'previous' });
if (!this.props.infinite && (this.props.currentSlide === 0 || this.props.slideCount <= this.props.slidesToShow)) {
prevClasses['slick-disabled'] = true;
prevHandler = null;
}
var prevArrowProps = {
key: '0',
'data-role': 'none',
className: (0, _classnames2.default)(prevClasses),
style: { display: 'block' },
onClick: prevHandler
};
var prevArrow;
if (this.props.prevArrow) {
prevArrow = _react2.default.cloneElement(this.props.prevArrow, prevArrowProps);
} else {
prevArrow = _react2.default.createElement(
'button',
_extends({ key: '0', type: 'button' }, prevArrowProps),
' Previous'
);
}
return prevArrow;
}
});
var NextArrow = exports.NextArrow = _react2.default.createClass({
displayName: 'NextArrow',
clickHandler: function clickHandler(options, e) {
if (e) {
e.preventDefault();
}
this.props.clickHandler(options, e);
},
render: function render() {
var nextClasses = { 'slick-arrow': true, 'slick-next': true };
var nextHandler = this.clickHandler.bind(this, { message: 'next' });
if (!this.props.infinite) {
if (this.props.centerMode && this.props.currentSlide >= this.props.slideCount - 1) {
nextClasses['slick-disabled'] = true;
nextHandler = null;
} else {
if (this.props.currentSlide >= this.prop