mirror of
https://github.com/status-im/wallet.git
synced 2026-08-27 19:51:07 +00:00
2190 lines
89 KiB
JavaScript
2190 lines
89 KiB
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);
|
|
});
|
|
}
|
|
|
|
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;
|
|
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 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 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: 'original' + getKey(child, 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: 'cloned' + getKey(child, 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: 'cloned' + getKey(child, 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: this.props.dotsClass, style: { display: 'block' } },
|
|
dots
|
|
);
|
|
}
|
|
});
|
|
exports.Dots = Dots;
|
|
|
|
/***/ },
|
|
/* 18 */
|
|
/***/ 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 _classnames = __webpack_require__(15);
|
|
|
|
var _classnames2 = _interopRequireDefault(_classnames);
|
|
|
|
var PrevArrow = _react2['default'].createClass({
|
|
displayName: 'PrevArrow',
|
|
|
|
clickHandler: function clickHandler(options, e) {
|
|
e.preventDefault();
|
|
this.props.clickHandler(options, e);
|
|
},
|
|
render: function render() {
|
|
var prevClasses = { '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;
|
|
}
|
|
});
|
|
|
|
exports.PrevArrow = PrevArrow;
|
|
var NextArrow = _react2['default'].createClass({
|
|
displayName: 'NextArrow',
|
|
|
|
clickHandler: function clickHandler(options, e) {
|
|
e.preventDefault();
|
|
this.props.clickHandler(options, e);
|
|
},
|
|
render: function render() {
|
|
var nextClasses = { '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.props.slideCount - this.props.slidesToShow) {
|
|
nextClasses['slick-disabled'] = true;
|
|
nextHandler = null;
|
|
}
|
|
}
|
|
|
|
if (this.props.slideCount <= this.props.slidesToShow) {
|
|
nextClasses['slick-disabled'] = true;
|
|
nextHandler = null;
|
|
}
|
|
}
|
|
|
|
var nextArrowProps = {
|
|
key: '1',
|
|
'data-role': 'none',
|
|
className: (0, _classnames2['default'])(nextClasses),
|
|
style: { display: 'block' },
|
|
onClick: nextHandler
|
|
};
|
|
|
|
var nextArrow;
|
|
|
|
if (this.props.nextArrow) {
|
|
nextArrow = _react2['default'].cloneElement(this.props.nextArrow, nextArrowProps);
|
|
} else {
|
|
nextArrow = _react2['default'].createElement(
|
|
'button',
|
|
_extends({ key: '1', type: 'button' }, nextArrowProps),
|
|
' Next'
|
|
);
|
|
}
|
|
|
|
return nextArrow;
|
|
}
|
|
});
|
|
exports.NextArrow = NextArrow;
|
|
|
|
/***/ },
|
|
/* 19 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
var camel2hyphen = __webpack_require__(20);
|
|
|
|
var isDimension = function (feature) {
|
|
var re = /[height|width]$/;
|
|
return re.test(feature);
|
|
};
|
|
|
|
var obj2mq = function (obj) {
|
|
var mq = '';
|
|
var features = Object.keys(obj);
|
|
features.forEach(function (feature, index) {
|
|
var value = obj[feature];
|
|
feature = camel2hyphen(feature);
|
|
// Add px to dimension features
|
|
if (isDimension(feature) && typeof value === 'number') {
|
|
value = value + 'px';
|
|
}
|
|
if (value === true) {
|
|
mq += feature;
|
|
} else if (value === false) {
|
|
mq += 'not ' + feature;
|
|
} else {
|
|
mq += '(' + feature + ': ' + value + ')';
|
|
}
|
|
if (index < features.length-1) {
|
|
mq += ' and '
|
|
}
|
|
});
|
|
return mq;
|
|
};
|
|
|
|
var json2mq = function (query) {
|
|
var mq = '';
|
|
if (typeof query === 'string') {
|
|
return query;
|
|
}
|
|
// Handling array of media queries
|
|
if (query instanceof Array) {
|
|
query.forEach(function (q, index) {
|
|
mq += obj2mq(q);
|
|
if (index < query.length-1) {
|
|
mq += ', '
|
|
}
|
|
});
|
|
return mq;
|
|
}
|
|
// Handling single media query
|
|
return obj2mq(query);
|
|
};
|
|
|
|
module.exports = json2mq;
|
|
|
|
/***/ },
|
|
/* 20 */
|
|
/***/ function(module, exports) {
|
|
|
|
var camel2hyphen = function (str) {
|
|
return str
|
|
.replace(/[A-Z]/g, function (match) {
|
|
return '-' + match.toLowerCase();
|
|
})
|
|
.toLowerCase();
|
|
};
|
|
|
|
module.exports = camel2hyphen;
|
|
|
|
/***/ },
|
|
/* 21 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
var canUseDOM = __webpack_require__(22);
|
|
var enquire = canUseDOM && __webpack_require__(23);
|
|
var json2mq = __webpack_require__(19);
|
|
|
|
var ResponsiveMixin = {
|
|
media: function (query, handler) {
|
|
query = json2mq(query);
|
|
if (typeof handler === 'function') {
|
|
handler = {
|
|
match: handler
|
|
};
|
|
}
|
|
enquire.register(query, handler);
|
|
|
|
// Queue the handlers to unregister them at unmount
|
|
if (! this._responsiveMediaHandlers) {
|
|
this._responsiveMediaHandlers = [];
|
|
}
|
|
this._responsiveMediaHandlers.push({query: query, handler: handler});
|
|
},
|
|
componentWillUnmount: function () {
|
|
if (this._responsiveMediaHandlers) {
|
|
this._responsiveMediaHandlers.forEach(function(obj) {
|
|
enquire.unregister(obj.query, obj.handler);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
module.exports = ResponsiveMixin;
|
|
|
|
/***/ },
|
|
/* 22 */
|
|
/***/ function(module, exports) {
|
|
|
|
var canUseDOM = !!(
|
|
typeof window !== 'undefined' &&
|
|
window.document &&
|
|
window.document.createElement
|
|
);
|
|
|
|
module.exports = canUseDOM;
|
|
|
|
/***/ },
|
|
/* 23 */
|
|
/***/ function(module, exports, __webpack_require__) {
|
|
|
|
var __WEBPACK_AMD_DEFINE_RESULT__;/*!
|
|
* enquire.js v2.1.1 - Awesome Media Queries in JavaScript
|
|
* Copyright (c) 2014 Nick Williams - http://wicky.nillia.ms/enquire.js
|
|
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
|
|
*/
|
|
|
|
;(function (name, context, factory) {
|
|
var matchMedia = window.matchMedia;
|
|
|
|
if (typeof module !== 'undefined' && module.exports) {
|
|
module.exports = factory(matchMedia);
|
|
}
|
|
else if (true) {
|
|
!(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
|
|
return (context[name] = factory(matchMedia));
|
|
}.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
|
}
|
|
else {
|
|
context[name] = factory(matchMedia);
|
|
}
|
|
}('enquire', this, function (matchMedia) {
|
|
|
|
'use strict';
|
|
|
|
/*jshint unused:false */
|
|
/**
|
|
* Helper function for iterating over a collection
|
|
*
|
|
* @param collection
|
|
* @param fn
|
|
*/
|
|
function each(collection, fn) {
|
|
var i = 0,
|
|
length = collection.length,
|
|
cont;
|
|
|
|
for(i; i < length; i++) {
|
|
cont = fn(collection[i], i);
|
|
if(cont === false) {
|
|
break; //allow early exit
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Helper function for determining whether target object is an array
|
|
*
|
|
* @param target the object under test
|
|
* @return {Boolean} true if array, false otherwise
|
|
*/
|
|
function isArray(target) {
|
|
return Object.prototype.toString.apply(target) === '[object Array]';
|
|
}
|
|
|
|
/**
|
|
* Helper function for determining whether target object is a function
|
|
*
|
|
* @param target the object under test
|
|
* @return {Boolean} true if function, false otherwise
|
|
*/
|
|
function isFunction(target) {
|
|
return typeof target === 'function';
|
|
}
|
|
|
|
/**
|
|
* Delegate to handle a media query being matched and unmatched.
|
|
*
|
|
* @param {object} options
|
|
* @param {function} options.match callback for when the media query is matched
|
|
* @param {function} [options.unmatch] callback for when the media query is unmatched
|
|
* @param {function} [options.setup] one-time callback triggered the first time a query is matched
|
|
* @param {boolean} [options.deferSetup=false] should the setup callback be run immediately, rather than first time query is matched?
|
|
* @constructor
|
|
*/
|
|
function QueryHandler(options) {
|
|
this.options = options;
|
|
!options.deferSetup && this.setup();
|
|
}
|
|
QueryHandler.prototype = {
|
|
|
|
/**
|
|
* coordinates setup of the handler
|
|
*
|
|
* @function
|
|
*/
|
|
setup : function() {
|
|
if(this.options.setup) {
|
|
this.options.setup();
|
|
}
|
|
this.initialised = true;
|
|
},
|
|
|
|
/**
|
|
* coordinates setup and triggering of the handler
|
|
*
|
|
* @function
|
|
*/
|
|
on : function() {
|
|
!this.initialised && this.setup();
|
|
this.options.match && this.options.match();
|
|
},
|
|
|
|
/**
|
|
* coordinates the unmatch event for the handler
|
|
*
|
|
* @function
|
|
*/
|
|
off : function() {
|
|
this.options.unmatch && this.options.unmatch();
|
|
},
|
|
|
|
/**
|
|
* called when a handler is to be destroyed.
|
|
* delegates to the destroy or unmatch callbacks, depending on availability.
|
|
*
|
|
* @function
|
|
*/
|
|
destroy : function() {
|
|
this.options.destroy ? this.options.destroy() : this.off();
|
|
},
|
|
|
|
/**
|
|
* determines equality by reference.
|
|
* if object is supplied compare options, if function, compare match callback
|
|
*
|
|
* @function
|
|
* @param {object || function} [target] the target for comparison
|
|
*/
|
|
equals : function(target) {
|
|
return this.options === target || this.options.match === target;
|
|
}
|
|
|
|
};
|
|
/**
|
|
* Represents a single media query, manages it's state and registered handlers for this query
|
|
*
|
|
* @constructor
|
|
* @param {string} query the media query string
|
|
* @param {boolean} [isUnconditional=false] whether the media query should run regardless of whether the conditions are met. Primarily for helping older browsers deal with mobile-first design
|
|
*/
|
|
function MediaQuery(query, isUnconditional) {
|
|
this.query = query;
|
|
this.isUnconditional = isUnconditional;
|
|
this.handlers = [];
|
|
this.mql = matchMedia(query);
|
|
|
|
var self = this;
|
|
this.listener = function(mql) {
|
|
self.mql = mql;
|
|
self.assess();
|
|
};
|
|
this.mql.addListener(this.listener);
|
|
}
|
|
MediaQuery.prototype = {
|
|
|
|
/**
|
|
* add a handler for this query, triggering if already active
|
|
*
|
|
* @param {object} handler
|
|
* @param {function} handler.match callback for when query is activated
|
|
* @param {function} [handler.unmatch] callback for when query is deactivated
|
|
* @param {function} [handler.setup] callback for immediate execution when a query handler is registered
|
|
* @param {boolean} [handler.deferSetup=false] should the setup callback be deferred until the first time the handler is matched?
|
|
*/
|
|
addHandler : function(handler) {
|
|
var qh = new QueryHandler(handler);
|
|
this.handlers.push(qh);
|
|
|
|
this.matches() && qh.on();
|
|
},
|
|
|
|
/**
|
|
* removes the given handler from the collection, and calls it's destroy methods
|
|
*
|
|
* @param {object || function} handler the handler to remove
|
|
*/
|
|
removeHandler : function(handler) {
|
|
var handlers = this.handlers;
|
|
each(handlers, function(h, i) {
|
|
if(h.equals(handler)) {
|
|
h.destroy();
|
|
return !handlers.splice(i,1); //remove from array and exit each early
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Determine whether the media query should be considered a match
|
|
*
|
|
* @return {Boolean} true if media query can be considered a match, false otherwise
|
|
*/
|
|
matches : function() {
|
|
return this.mql.matches || this.isUnconditional;
|
|
},
|
|
|
|
/**
|
|
* Clears all handlers and unbinds events
|
|
*/
|
|
clear : function() {
|
|
each(this.handlers, function(handler) {
|
|
handler.destroy();
|
|
});
|
|
this.mql.removeListener(this.listener);
|
|
this.handlers.length = 0; //clear array
|
|
},
|
|
|
|
/*
|
|
* Assesses the query, turning on all handlers if it matches, turning them off if it doesn't match
|
|
*/
|
|
assess : function() {
|
|
var action = this.matches() ? 'on' : 'off';
|
|
|
|
each(this.handlers, function(handler) {
|
|
handler[action]();
|
|
});
|
|
}
|
|
};
|
|
/**
|
|
* Allows for registration of query handlers.
|
|
* Manages the query handler's state and is responsible for wiring up browser events
|
|
*
|
|
* @constructor
|
|
*/
|
|
function MediaQueryDispatch () {
|
|
if(!matchMedia) {
|
|
throw new Error('matchMedia not present, legacy browsers require a polyfill');
|
|
}
|
|
|
|
this.queries = {};
|
|
this.browserIsIncapable = !matchMedia('only all').matches;
|
|
}
|
|
|
|
MediaQueryDispatch.prototype = {
|
|
|
|
/**
|
|
* Registers a handler for the given media query
|
|
*
|
|
* @param {string} q the media query
|
|
* @param {object || Array || Function} options either a single query handler object, a function, or an array of query handlers
|
|
* @param {function} options.match fired when query matched
|
|
* @param {function} [options.unmatch] fired when a query is no longer matched
|
|
* @param {function} [options.setup] fired when handler first triggered
|
|
* @param {boolean} [options.deferSetup=false] whether setup should be run immediately or deferred until query is first matched
|
|
* @param {boolean} [shouldDegrade=false] whether this particular media query should always run on incapable browsers
|
|
*/
|
|
register : function(q, options, shouldDegrade) {
|
|
var queries = this.queries,
|
|
isUnconditional = shouldDegrade && this.browserIsIncapable;
|
|
|
|
if(!queries[q]) {
|
|
queries[q] = new MediaQuery(q, isUnconditional);
|
|
}
|
|
|
|
//normalise to object in an array
|
|
if(isFunction(options)) {
|
|
options = { match : options };
|
|
}
|
|
if(!isArray(options)) {
|
|
options = [options];
|
|
}
|
|
each(options, function(handler) {
|
|
queries[q].addHandler(handler);
|
|
});
|
|
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* unregisters a query and all it's handlers, or a specific handler for a query
|
|
*
|
|
* @param {string} q the media query to target
|
|
* @param {object || function} [handler] specific handler to unregister
|
|
*/
|
|
unregister : function(q, handler) {
|
|
var query = this.queries[q];
|
|
|
|
if(query) {
|
|
if(handler) {
|
|
query.removeHandler(handler);
|
|
}
|
|
else {
|
|
query.clear();
|
|
delete this.queries[q];
|
|
}
|
|
}
|
|
|
|
return this;
|
|
}
|
|
};
|
|
|
|
return new MediaQueryDispatch();
|
|
|
|
}));
|
|
|
|
/***/ }
|
|
/******/ ])
|
|
});
|
|
;
|