react-slick
Version:
React port of slick carousel
1,640 lines (1,340 loc) • 66.2 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_7__) {
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';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _innerSlider = __webpack_require__(3);
var _objectAssign = __webpack_require__(12);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _json2mq = __webpack_require__(19);
var _json2mq2 = _interopRequireDefault(_json2mq);
var _reactResponsiveMixin = __webpack_require__(21);
var _reactResponsiveMixin2 = _interopRequireDefault(_reactResponsiveMixin);
var _defaultProps = __webpack_require__(14);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
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);
}
if (settings === 'unslick') {
// if 'unslick' responsive breakpoint setting used, just return the <Slider> tag nested HTML
return _react2['default'].createElement(
'div',
null,
this.props.children
);
} else {
return _react2['default'].createElement(
_innerSlider.InnerSlider,
settings,
this.props.children
);
}
}
});
module.exports = Slider;
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: 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; };
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _mixinsEventHandlers = __webpack_require__(4);
var _mixinsEventHandlers2 = _interopRequireDefault(_mixinsEventHandlers);
var _mixinsHelpers = __webpack_require__(8);
var _mixinsHelpers2 = _interopRequireDefault(_mixinsHelpers);
var _initialState = __webpack_require__(13);
var _initialState2 = _interopRequireDefault(_initialState);
var _defaultProps = __webpack_require__(14);
var _defaultProps2 = _interopRequireDefault(_defaultProps);
var _classnames = __webpack_require__(15);
var _classnames2 = _interopRequireDefault(_classnames);
var _track = __webpack_require__(16);
var _dots = __webpack_require__(17);
var _arrows = __webpack_require__(18);
var InnerSlider = _react2['default'].createClass({
displayName: 'InnerSlider',
mixins: [_mixinsHelpers2['default'], _mixinsEventHandlers2['default']],
getInitialState: function getInitialState() {
return _initialState2['default'];
},
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 (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);
},
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,
currentSlide: this.state.currentSlide,
lazyLoad: this.props.lazyLoad,
lazyLoadedList: this.state.lazyLoadedList,
rtl: this.props.rtl,
slideWidth: this.state.slideWidth,
slidesToShow: this.props.slidesToShow,
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);
}
return _react2['default'].createElement(
'div',
{ className: className, onMouseEnter: this.onInnerSliderEnter, onMouseLeave: this.onInnerSliderLeave },
_react2['default'].createElement(
'div',
{
ref: 'list',
className: 'slick-list',
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 },
_react2['default'].createElement(
_track.Track,
_extends({ ref: 'track' }, trackProps),
this.props.children
)
),
prevArrow,
nextArrow,
dots
);
}
});
exports.InnerSlider = InnerSlider;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _trackHelper = __webpack_require__(5);
var _helpers = __webpack_require__(8);
var _helpers2 = _interopRequireDefault(_helpers);
var _objectAssign = __webpack_require__(12);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var EventHandlers = {
// Event handler for previous and next
changeSlide: function changeSlide(options) {
var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
unevenOffset = this.state.slideCount % this.props.slidesToScroll !== 0;
indexOffset = unevenOffset ? 0 : (this.state.slideCount - this.state.currentSlide) % this.props.slidesToScroll;
if (options.message === 'previous') {
slideOffset = indexOffset === 0 ? this.props.slidesToScroll : this.props.slidesToShow - indexOffset;
targetSlide = this.state.currentSlide - slideOffset;
if (this.props.lazyLoad) {
previousInt = this.state.currentSlide - slideOffset;
targetSlide = previousInt === -1 ? this.state.slideCount - 1 : previousInt;
}
} else if (options.message === 'next') {
slideOffset = indexOffset === 0 ? this.props.slidesToScroll : indexOffset;
targetSlide = this.state.currentSlide + slideOffset;
} else if (options.message === 'dots') {
// 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) {},
// Focus on selecting a slide (click handler on track)
selectHandler: function selectHandler(e) {},
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) {
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) {
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;
module.exports = exports['default'];
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _ReactDOM = __webpack_require__(6);
var _ReactDOM2 = _interopRequireDefault(_ReactDOM);
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 = 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;
};
exports.getTrackCSS = getTrackCSS;
var 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;
};
exports.getTrackAnimateCSS = getTrackAnimateCSS;
var 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;
};
exports.getTrackLeft = getTrackLeft;
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(7);
var _reactDom2 = _interopRequireDefault(_reactDom);
var ReactDOM = _react2['default'].version >= '0.14.0' ? _reactDom2['default'] : _react2['default'];
exports['default'] = ReactDOM;
module.exports = exports['default'];
/***/ },
/* 7 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _ReactDOM = __webpack_require__(6);
var _ReactDOM2 = _interopRequireDefault(_ReactDOM);
var _reactLibReactTransitionEvents = __webpack_require__(9);
var _reactLibReactTransitionEvents2 = _interopRequireDefault(_reactLibReactTransitionEvents);
var _trackHelper = __webpack_require__(5);
var _objectAssign = __webpack_require__(12);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
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 = this.getWidth(_ReactDOM2['default'].findDOMNode(this)) / 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;
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;
// 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 () {
_this.setState({
animating: false
});
if (_this.props.afterChange) {
_this.props.afterChange(currentSlide);
}
_reactLibReactTransitionEvents2['default'].removeEndEventListener(_ReactDOM2['default'].findDOMNode(_this.refs.track).children[currentSlide], callback);
};
this.setState({
animating: true,
currentSlide: targetSlide
}, function () {
_reactLibReactTransitionEvents2['default'].addEndEventListener(_ReactDOM2['default'].findDOMNode(this.refs.track).children[currentSlide], callback);
});
if (this.props.beforeChange) {
this.props.beforeChange(this.state.currentSlide, currentSlide);
}
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.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 () {
_this.setState(nextStateChanges);
if (_this.props.afterChange) {
_this.props.afterChange(currentSlide);
}
_reactLibReactTransitionEvents2['default'].removeEndEventListener(_ReactDOM2['default'].findDOMNode(_this.refs.track), callback);
};
this.setState({
animating: true,
currentSlide: currentSlide,
trackStyle: (0, _trackHelper.getTrackAnimateCSS)((0, _objectAssign2['default'])({ left: targetLeft }, this.props, this.state))
}, function () {
_reactLibReactTransitionEvents2['default'].addEndEventListener(_ReactDOM2['default'].findDOMNode(this.refs.track), callback);
});
}
if (!this.state.autoPlayTimer) {
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;
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);
}
}
};
exports['default'] = helpers;
module.exports = exports['default'];
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule ReactTransitionEvents
*/
'use strict';
var ExecutionEnvironment = __webpack_require__(10);
var getVendorPrefixedEventName = __webpack_require__(11);
var endEvents = [];
function detectEvents() {
var animEnd = getVendorPrefixedEventName('animationend');
var transEnd = getVendorPrefixedEventName('transitionend');
if (animEnd) {
endEvents.push(animEnd);
}
if (transEnd) {
endEvents.push(transEnd);
}
}
if (ExecutionEnvironment.canUseDOM) {
detectEvents();
}
// We use the raw {add|remove}EventListener() call because EventListener
// does not know how to remove event listeners and we really should
// clean up. Also, these events are not triggered in older browsers
// so we should be A-OK here.
function addEventListener(node, eventName, eventListener) {
node.addEventListener(eventName, eventListener, false);
}
function removeEventListener(node, eventName, eventListener) {
node.removeEventListener(eventName, eventListener, false);
}
var ReactTransitionEvents = {
addEndEventListener: function (node, eventListener) {
if (endEvents.length === 0) {
// If CSS transitions are not supported, trigger an "end animation"
// event immediately.
window.setTimeout(eventListener, 0);
return;
}
endEvents.forEach(function (endEvent) {
addEventListener(node, endEvent, eventListener);
});
},
removeEndEventListener: function (node, eventListener) {
if (endEvents.length === 0) {
return;
}
endEvents.forEach(function (endEvent) {
removeEventListener(node, endEvent, eventListener);
});
}
};
module.exports = ReactTransitionEvents;
/***/ },
/* 10 */
/***/ function(module, exports) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
*/
'use strict';
var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
/**
* Simple, lightweight module assisting with the detection and context of
* Worker. Helps avoid circular dependencies and allows code to reason about
* whether or not they are in a Worker, even if they never include the main
* `ReactWorker` dependency.
*/
var ExecutionEnvironment = {
canUseDOM: canUseDOM,
canUseWorkers: typeof Worker !== 'undefined',
canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),
canUseViewport: canUseDOM && !!window.screen,
isInWorker: !canUseDOM // For now, this is true - might change in the future.
};
module.exports = ExecutionEnvironment;
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
/**
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule getVendorPrefixedEventName
*/
'use strict';
var ExecutionEnvironment = __webpack_require__(10);
/**
* Generate a mapping of standard vendor prefixes using the defined style property and event name.
*
* @param {string} styleProp
* @param {string} eventName
* @returns {object}
*/
function makePrefixMap(styleProp, eventName) {
var prefixes = {};
prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
prefixes['Webkit' + styleProp] = 'webkit' + eventName;
prefixes['Moz' + styleProp] = 'moz' + eventName;
prefixes['ms' + styleProp] = 'MS' + eventName;
prefixes['O' + styleProp] = 'o' + eventName.toLowerCase();
return prefixes;
}
/**
* A list of event names to a configurable list of vendor prefixes.
*/
var vendorPrefixes = {
animationend: makePrefixMap('Animation', 'AnimationEnd'),
animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
animationstart: makePrefixMap('Animation', 'AnimationStart'),
transitionend: makePrefixMap('Transition', 'TransitionEnd')
};
/**
* Event names that have already been detected and prefixed (if applicable).
*/
var prefixedEventNames = {};
/**
* Element to check for prefixes on.
*/
var style = {};
/**
* Bootstrap if a DOM exists.
*/
if (ExecutionEnvironment.canUseDOM) {
style = document.createElement('div').style;
// On some platforms, in particular some releases of Android 4.x,
// the un-prefixed "animation" and "transition" properties are defined on the
// style object but the events that fire will still be prefixed, so we need
// to check if the un-prefixed events are usable, and if not remove them from the map.
if (!('AnimationEvent' in window)) {
delete vendorPrefixes.animationend.animation;
delete vendorPrefixes.animationiteration.animation;
delete vendorPrefixes.animationstart.animation;
}
// Same as above
if (!('TransitionEvent' in window)) {
delete vendorPrefixes.transitionend.transition;
}
}
/**
* Attempts to determine the correct vendor prefixed event name.
*
* @param {string} eventName
* @returns {string}
*/
function getVendorPrefixedEventName(eventName) {
if (prefixedEventNames[eventName]) {
return prefixedEventNames[eventName];
} else if (!vendorPrefixes[eventName]) {
return eventName;
}
var prefixMap = vendorPrefixes[eventName];
for (var styleProp in prefixMap) {
if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
return prefixedEventNames[eventName] = prefixMap[styleProp];
}
}
return '';
}
module.exports = getVendorPrefixedEventName;
/***/ },
/* 12 */
/***/ function(module, exports) {
'use strict';
function ToObject(val) {
if (val == null) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
module.exports = Object.assign || function (target, source) {
var from;
var keys;
var to = ToObject(target);
for (var s = 1; s < arguments.length; s++) {
from = arguments[s];
keys = Object.keys(Object(from));
for (var i = 0; i < keys.length; i++) {
to[keys[i]] = from[keys[i]];
}
}
return to;
};
/***/ },
/* 13 */
/***/ 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;
/***/ },
/* 14 */
/***/ 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;
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2015 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
(function () {
'use strict';
function classNames () {
var classes = '';
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if ('string' === argType || 'number' === argType) {
classes += ' ' + arg;
} else if (Array.isArray(arg)) {
classes += ' ' + classNames.apply(null, arg);
} else if ('object' === argType) {
for (var key in arg) {
if (arg.hasOwnProperty(key) && arg[key]) {
classes += ' ' + key;
}
}
}
}
return classes.substr(1);
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (true){
// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_RESULT__ = function () {
return classNames;
}.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {
window.classNames = classNames;
}
}());
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _objectAssign = __webpack_require__(12);
var _objectAssign2 = _interopRequireDefault(_objectAssign);
var _classnames = __webpack_require__(15);
var _classnames2 = _interopRequireDefault(_classnames);
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 renderSlides = function renderSlides(spec) {
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) {
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: index,
'data-index': index,
className: cssClasses,
style: (0, _objectAssign2['default'])({}, child.props.style || {}, childStyle)
}));
// 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: key,
'data-index': key,
className: cssClasses,
style: (0, _objectAssign2['default'])({}, child.props.style || {}, childStyle)
}));
}
if (index < infiniteCount) {
key = count + index;
postCloneSlides.push(_react2['default'].cloneElement(child, {
key: key,
'data-index': key,
className: cssClasses,
style: (0, _objectAssign2['default'])({}, child.props.style || {}, childStyle)
}));
}
}
});
if (spec.rtl) {
return preCloneSlides.concat(slides, postCloneSlides).reverse();
} else {
return preCloneSlides.concat(slides, postCloneSlides);
}
};
var Track = _react2['default'].createClass({
displayName: 'Track',
render: function render() {
var slides = renderSlides(this.props);
return _react2['default'].createElement(
'div',
{ className: 'slick-track', style: this.props.trackStyle },
slides
);
}
});
exports.Track = Track;
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _classnames = __webpack_require__(15);
var _classnames2 = _interopRequireDefault(_classnames);
var getDotCount = function getDotCount(spec) {
var dots;
dots = Math.ceil(spec.slideCount / spec.slidesToScroll);
return dots;
};
var 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 className = (0, _classnames2['default'])({
'slick-active': _this.props.currentSlide === i * _this.props.slidesToScroll
});
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: