'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _typeof2 = require('babel-runtime/helpers/typeof'); var _typeof3 = _interopRequireDefault(_typeof2); var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties'); var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); var _debounce = require('lodash/debounce'); var _debounce2 = _interopRequireDefault(_debounce); var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); var _vue = require('vue'); var _vue2 = _interopRequireDefault(_vue); var _vueRef = require('vue-ref'); var _vueRef2 = _interopRequireDefault(_vueRef); var _propsUtil = require('../../_util/props-util'); var _BaseMixin = require('../../_util/BaseMixin'); var _BaseMixin2 = _interopRequireDefault(_BaseMixin); var _defaultProps = require('./default-props'); var _defaultProps2 = _interopRequireDefault(_defaultProps); var _initialState = require('./initial-state'); var _initialState2 = _interopRequireDefault(_initialState); var _innerSliderUtils = require('./utils/innerSliderUtils'); var _track = require('./track'); var _track2 = _interopRequireDefault(_track); var _dots = require('./dots'); var _dots2 = _interopRequireDefault(_dots); var _arrows = require('./arrows'); var _resizeObserverPolyfill = require('resize-observer-polyfill'); var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } _vue2['default'].use(_vueRef2['default'], { name: 'ant-ref' }); function noop() {} exports['default'] = { props: (0, _extends3['default'])({}, _defaultProps2['default']), mixins: [_BaseMixin2['default']], data: function data() { this.preProps = (0, _extends3['default'])({}, this.$props); this.list = null; this.track = null; this.callbackTimers = []; this.clickable = true; this.debouncedResize = null; return (0, _extends3['default'])({}, _initialState2['default'], { currentSlide: this.initialSlide, slideCount: this.children.length }); }, methods: { listRefHandler: function listRefHandler(ref) { this.list = ref; }, trackRefHandler: function trackRefHandler(ref) { this.track = ref; }, adaptHeight: function adaptHeight() { if (this.adaptiveHeight && this.list) { var elem = this.list.querySelector('[data-index="' + this.currentSlide + '"]'); this.list.style.height = (0, _innerSliderUtils.getHeight)(elem) + 'px'; } }, onWindowResized: function onWindowResized(setTrackStyle) { var _this = this; if (this.debouncedResize) this.debouncedResize.cancel(); this.debouncedResize = (0, _debounce2['default'])(function () { return _this.resizeWindow(setTrackStyle); }, 50); this.debouncedResize(); }, resizeWindow: function resizeWindow() { var _this2 = this; var setTrackStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; if (!this.track) return; var spec = (0, _extends3['default'])({ listRef: this.list, trackRef: this.track, children: this.children }, this.$props, this.$data); this.updateState(spec, setTrackStyle, function () { if (_this2.autoplay) { _this2.handleAutoPlay('update'); } else { _this2.pause('paused'); } }); // animating state should be cleared while resizing, otherwise autoplay stops working this.setState({ animating: false }); clearTimeout(this.animationEndCallback); delete this.animationEndCallback; }, updateState: function updateState(spec, setTrackStyle, callback) { var updatedState = (0, _innerSliderUtils.initializedState)(spec); spec = (0, _extends3['default'])({}, spec, updatedState, { slideIndex: updatedState.currentSlide }); var targetLeft = (0, _innerSliderUtils.getTrackLeft)(spec); spec = (0, _extends3['default'])({}, spec, { left: targetLeft }); var trackStyle = (0, _innerSliderUtils.getTrackCSS)(spec); if (setTrackStyle || this.children.length !== spec.children.length) { updatedState['trackStyle'] = trackStyle; } this.setState(updatedState, callback); }, ssrInit: function ssrInit() { var children = this.children; if (this.variableWidth) { var _trackWidth = 0; var _trackLeft = 0; var childrenWidths = []; var preClones = (0, _innerSliderUtils.getPreClones)((0, _extends3['default'])({}, this.$props, this.$data, { slideCount: children.length })); var postClones = (0, _innerSliderUtils.getPostClones)((0, _extends3['default'])({}, this.$props, this.$data, { slideCount: children.length })); children.forEach(function (child) { var childWidth = (0, _propsUtil.getStyle)(child).width.split('px')[0]; childrenWidths.push(childWidth); _trackWidth += childWidth; }); for (var i = 0; i < preClones; i++) { _trackLeft += childrenWidths[childrenWidths.length - 1 - i]; _trackWidth += childrenWidths[childrenWidths.length - 1 - i]; } for (var _i = 0; _i < postClones; _i++) { _trackWidth += childrenWidths[_i]; } for (var _i2 = 0; _i2 < this.currentSlide; _i2++) { _trackLeft += childrenWidths[_i2]; } var _trackStyle = { width: _trackWidth + 'px', left: -_trackLeft + 'px' }; if (this.centerMode) { var currentWidth = childrenWidths[this.currentSlide] + 'px'; _trackStyle.left = 'calc(' + _trackStyle.left + ' + (100% - ' + currentWidth + ') / 2 ) '; } this.setState({ trackStyle: _trackStyle }); return; } var childrenCount = children.length; var spec = (0, _extends3['default'])({}, this.$props, this.$data, { slideCount: childrenCount }); var slideCount = (0, _innerSliderUtils.getPreClones)(spec) + (0, _innerSliderUtils.getPostClones)(spec) + childrenCount; var trackWidth = 100 / this.slidesToShow * slideCount; var slideWidth = 100 / slideCount; var trackLeft = -slideWidth * ((0, _innerSliderUtils.getPreClones)(spec) + this.currentSlide) * trackWidth / 100; if (this.centerMode) { trackLeft += (100 - slideWidth * trackWidth / 100) / 2; } var trackStyle = { width: trackWidth + '%', left: trackLeft + '%' }; this.setState({ slideWidth: slideWidth + '%', trackStyle: trackStyle }); }, checkImagesLoad: function checkImagesLoad() { var _this3 = this; var images = document.querySelectorAll('.slick-slide img'); var imagesCount = images.length; var loadedCount = 0; Array.prototype.forEach.call(images, function (image) { var handler = function handler() { return ++loadedCount && loadedCount >= imagesCount && _this3.onWindowResized(); }; if (!image.onclick) { image.onclick = function () { return image.parentNode.focus(); }; } else { var prevClickHandler = image.onclick; image.onclick = function () { prevClickHandler(); image.parentNode.focus(); }; } if (!image.onload) { if (_this3.$props.lazyLoad) { image.onload = function () { _this3.adaptHeight(); _this3.callbackTimers.push(setTimeout(_this3.onWindowResized, _this3.speed)); }; } else { image.onload = handler; image.onerror = function () { handler(); _this3.$emit('lazyLoadError'); }; } } }); }, progressiveLazyLoad: function progressiveLazyLoad() { var slidesToLoad = []; var spec = (0, _extends3['default'])({}, this.$props, this.$data); for (var index = this.currentSlide; index < this.slideCount + (0, _innerSliderUtils.getPostClones)(spec); index++) { if (this.lazyLoadedList.indexOf(index) < 0) { slidesToLoad.push(index); break; } } for (var _index = this.currentSlide - 1; _index >= -(0, _innerSliderUtils.getPreClones)(spec); _index--) { if (this.lazyLoadedList.indexOf(_index) < 0) { slidesToLoad.push(_index); break; } } if (slidesToLoad.length > 0) { this.setState(function (state) { return { lazyLoadedList: state.lazyLoadedList.concat(slidesToLoad) }; }); this.$emit('lazyLoad', slidesToLoad); } else { if (this.lazyLoadTimer) { clearInterval(this.lazyLoadTimer); delete this.lazyLoadTimer; } } }, slideHandler: function slideHandler(index) { var _this4 = this; var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var _$props = this.$props, asNavFor = _$props.asNavFor, currentSlide = _$props.currentSlide, beforeChange = _$props.beforeChange, speed = _$props.speed, afterChange = _$props.afterChange; var _slideHandler2 = (0, _innerSliderUtils.slideHandler)((0, _extends3['default'])({ index: index }, this.$props, this.$data, { trackRef: this.track, useCSS: this.useCSS && !dontAnimate })), state = _slideHandler2.state, nextState = _slideHandler2.nextState; if (!state) return; beforeChange && beforeChange(currentSlide, state.currentSlide); var slidesToLoad = state.lazyLoadedList.filter(function (value) { return _this4.lazyLoadedList.indexOf(value) < 0; }); if (this.$listeners.lazyLoad && slidesToLoad.length > 0) { this.$emit('lazyLoad', slidesToLoad); } this.setState(state, function () { asNavFor && asNavFor.innerSlider.currentSlide !== currentSlide && asNavFor.innerSlider.slideHandler(index); if (!nextState) return; _this4.animationEndCallback = setTimeout(function () { var animating = nextState.animating, firstBatch = (0, _objectWithoutProperties3['default'])(nextState, ['animating']); _this4.setState(firstBatch, function () { _this4.callbackTimers.push(setTimeout(function () { return _this4.setState({ animating: animating }); }, 10)); afterChange && afterChange(state.currentSlide); delete _this4.animationEndCallback; }); }, speed); }); }, changeSlide: function changeSlide(options) { var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var spec = (0, _extends3['default'])({}, this.$props, this.$data); var targetSlide = (0, _innerSliderUtils.changeSlide)(spec, options); if (targetSlide !== 0 && !targetSlide) return; if (dontAnimate === true) { this.slideHandler(targetSlide, dontAnimate); } else { this.slideHandler(targetSlide); } }, clickHandler: function clickHandler(e) { if (this.clickable === false) { e.stopPropagation(); e.preventDefault(); } this.clickable = true; }, keyHandler: function keyHandler(e) { var dir = (0, _innerSliderUtils.keyHandler)(e, this.accessibility, this.rtl); dir !== '' && this.changeSlide({ message: dir }); }, selectHandler: function selectHandler(options) { this.changeSlide(options); }, disableBodyScroll: function disableBodyScroll() { var preventDefault = function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; }; window.ontouchmove = preventDefault; }, enableBodyScroll: function enableBodyScroll() { window.ontouchmove = null; }, swipeStart: function swipeStart(e) { if (this.verticalSwiping) { this.disableBodyScroll(); } var state = (0, _innerSliderUtils.swipeStart)(e, this.swipe, this.draggable); state !== '' && this.setState(state); }, swipeMove: function swipeMove(e) { var state = (0, _innerSliderUtils.swipeMove)(e, (0, _extends3['default'])({}, this.$props, this.$data, { trackRef: this.track, listRef: this.list, slideIndex: this.currentSlide })); if (!state) return; if (state['swiping']) { this.clickable = false; } this.setState(state); }, swipeEnd: function swipeEnd(e) { var state = (0, _innerSliderUtils.swipeEnd)(e, (0, _extends3['default'])({}, this.$props, this.$data, { trackRef: this.track, listRef: this.list, slideIndex: this.currentSlide })); if (!state) return; var triggerSlideHandler = state['triggerSlideHandler']; delete state['triggerSlideHandler']; this.setState(state); if (triggerSlideHandler === undefined) return; this.slideHandler(triggerSlideHandler); if (this.$props.verticalSwiping) { this.enableBodyScroll(); } }, slickPrev: function slickPrev() { var _this5 = this; // this and fellow methods are wrapped in setTimeout // to make sure initialize setState has happened before // any of such methods are called this.callbackTimers.push(setTimeout(function () { return _this5.changeSlide({ message: 'previous' }); }, 0)); }, slickNext: function slickNext() { var _this6 = this; this.callbackTimers.push(setTimeout(function () { return _this6.changeSlide({ message: 'next' }); }, 0)); }, slickGoTo: function slickGoTo(slide) { var _this7 = this; var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; slide = Number(slide); if (isNaN(slide)) return ''; this.callbackTimers.push(setTimeout(function () { return _this7.changeSlide({ message: 'index', index: slide, currentSlide: _this7.currentSlide }, dontAnimate); }, 0)); }, play: function play() { var nextIndex = void 0; if (this.rtl) { nextIndex = this.currentSlide - this.slidesToScroll; } else { if ((0, _innerSliderUtils.canGoNext)((0, _extends3['default'])({}, this.$props, this.$data))) { nextIndex = this.currentSlide + this.slidesToScroll; } else { return false; } } this.slideHandler(nextIndex); }, handleAutoPlay: function handleAutoPlay(playType) { if (this.autoplayTimer) { clearInterval(this.autoplayTimer); } var autoplaying = this.autoplaying; if (playType === 'update') { if (autoplaying === 'hovered' || autoplaying === 'focused' || autoplaying === 'paused') { return; } } else if (playType === 'leave') { if (autoplaying === 'paused' || autoplaying === 'focused') { return; } } else if (playType === 'blur') { if (autoplaying === 'paused' || autoplaying === 'hovered') { return; } } this.autoplayTimer = setInterval(this.play, this.autoplaySpeed + 50); this.setState({ autoplaying: 'playing' }); }, pause: function pause(pauseType) { if (this.autoplayTimer) { clearInterval(this.autoplayTimer); this.autoplayTimer = null; } var autoplaying = this.autoplaying; if (pauseType === 'paused') { this.setState({ autoplaying: 'paused' }); } else if (pauseType === 'focused') { if (autoplaying === 'hovered' || autoplaying === 'playing') { this.setState({ autoplaying: 'focused' }); } } else { // pauseType is 'hovered' if (autoplaying === 'playing') { this.setState({ autoplaying: 'hovered' }); } } }, onDotsOver: function onDotsOver() { this.autoplay && this.pause('hovered'); }, onDotsLeave: function onDotsLeave() { this.autoplay && this.autoplaying === 'hovered' && this.handleAutoPlay('leave'); }, onTrackOver: function onTrackOver() { this.autoplay && this.pause('hovered'); }, onTrackLeave: function onTrackLeave() { this.autoplay && this.autoplaying === 'hovered' && this.handleAutoPlay('leave'); }, onSlideFocus: function onSlideFocus() { this.autoplay && this.pause('focused'); }, onSlideBlur: function onSlideBlur() { this.autoplay && this.autoplaying === 'focused' && this.handleAutoPlay('blur'); }, customPaging: function customPaging(_ref) { var i = _ref.i; var h = this.$createElement; return h('button', [i + 1]); }, appendDots: function appendDots(_ref2) { var dots = _ref2.dots; var h = this.$createElement; return h( 'ul', { style: { display: 'block' } }, [dots] ); } }, beforeMount: function beforeMount() { this.ssrInit(); this.$emit('init'); if (this.lazyLoad) { var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _extends3['default'])({}, this.$props, this.$data)); if (slidesToLoad.length > 0) { this.setState(function (prevState) { return { lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) }; }); this.$emit('lazyLoad', slidesToLoad); } } }, mounted: function mounted() { var _this8 = this; this.$nextTick(function () { var spec = (0, _extends3['default'])({ listRef: _this8.list, trackRef: _this8.track, children: _this8.children }, _this8.$props); _this8.updateState(spec, true, function () { _this8.adaptHeight(); _this8.autoplay && _this8.handleAutoPlay('update'); }); if (_this8.lazyLoad === 'progressive') { _this8.lazyLoadTimer = setInterval(_this8.progressiveLazyLoad, 1000); } _this8.ro = new _resizeObserverPolyfill2['default'](function () { if (_this8.animating) { _this8.onWindowResized(false); // don't set trackStyle hence don't break animation _this8.callbackTimers.push(setTimeout(function () { return _this8.onWindowResized(); }, _this8.speed)); } else { _this8.onWindowResized(); } }); _this8.ro.observe(_this8.list); Array.prototype.forEach.call(document.querySelectorAll('.slick-slide'), function (slide) { slide.onfocus = _this8.$props.pauseOnFocus ? _this8.onSlideFocus : null; slide.onblur = _this8.$props.pauseOnFocus ? _this8.onSlideBlur : null; }); // To support server-side rendering if (!window) { return; } if (window.addEventListener) { window.addEventListener('resize', _this8.onWindowResized); } else { window.attachEvent('onresize', _this8.onWindowResized); } }); }, beforeDestroy: function beforeDestroy() { if (this.animationEndCallback) { clearTimeout(this.animationEndCallback); } if (this.lazyLoadTimer) { clearInterval(this.lazyLoadTimer); } if (this.callbackTimers.length) { this.callbackTimers.forEach(function (timer) { return clearTimeout(timer); }); this.callbackTimers = []; } if (window.addEventListener) { window.removeEventListener('resize', this.onWindowResized); } else { window.detachEvent('onresize', this.onWindowResized); } if (this.autoplayTimer) { clearInterval(this.autoplayTimer); } }, updated: function updated() { this.checkImagesLoad(); this.$emit('reInit'); if (this.lazyLoad) { var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _extends3['default'])({}, this.$props, this.$data)); if (slidesToLoad.length > 0) { this.setState(function (prevState) { return { lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) }; }); this.$emit('lazyLoad'); } } // if (this.props.onLazyLoad) { // this.props.onLazyLoad([leftMostSlide]) // } this.adaptHeight(); }, watch: { __propsSymbol__: function __propsSymbol__() { var _this9 = this; var nextProps = this.$props; var spec = (0, _extends3['default'])({ listRef: this.list, trackRef: this.track }, nextProps, this.$data); var setTrackStyle = false; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = Object.keys(this.preProps)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var key = _step.value; if (!nextProps.hasOwnProperty(key)) { setTrackStyle = true; break; } if ((0, _typeof3['default'])(nextProps[key]) === 'object' || typeof nextProps[key] === 'function' || (0, _typeof3['default'])(nextProps[key]) === 'symbol') { continue; } if (nextProps[key] !== this.preProps[key]) { setTrackStyle = true; break; } } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator['return']) { _iterator['return'](); } } finally { if (_didIteratorError) { throw _iteratorError; } } } this.updateState(spec, setTrackStyle, function () { if (_this9.currentSlide >= nextProps.children.length) { _this9.changeSlide({ message: 'index', index: nextProps.children.length - nextProps.slidesToShow, currentSlide: _this9.currentSlide }); } if (nextProps.autoplay) { _this9.handleAutoPlay('update'); } else { _this9.pause('paused'); } }); this.preProps = (0, _extends3['default'])({}, nextProps); } }, render: function render() { var h = arguments[0]; var className = (0, _classnames2['default'])('slick-slider', { 'slick-vertical': this.vertical, 'slick-initialized': true }); var spec = (0, _extends3['default'])({}, this.$props, this.$data); var trackProps = (0, _innerSliderUtils.extractObject)(spec, ['fade', 'cssEase', 'speed', 'infinite', 'centerMode', 'focusOnSelect', 'currentSlide', 'lazyLoad', 'lazyLoadedList', 'rtl', 'slideWidth', 'slideHeight', 'listHeight', 'vertical', 'slidesToShow', 'slidesToScroll', 'slideCount', 'trackStyle', 'variableWidth', 'unslick', 'centerPadding']); var pauseOnHover = this.$props.pauseOnHover; trackProps = { props: (0, _extends3['default'])({}, trackProps, { focusOnSelect: this.focusOnSelect ? this.selectHandler : null }), directives: [{ name: 'ant-ref', value: this.trackRefHandler }], on: { mouseenter: pauseOnHover ? this.onTrackOver : noop, mouseleave: pauseOnHover ? this.onTrackLeave : noop, mouseover: pauseOnHover ? this.onTrackOver : noop } }; var dots = void 0; if (this.dots === true && this.slideCount >= this.slidesToShow) { var dotProps = (0, _innerSliderUtils.extractObject)(spec, ['dotsClass', 'slideCount', 'slidesToShow', 'currentSlide', 'slidesToScroll', 'clickHandler', 'children', 'infinite', 'appendDots']); dotProps.customPaging = this.customPaging; dotProps.appendDots = this.appendDots; var _$scopedSlots = this.$scopedSlots, customPaging = _$scopedSlots.customPaging, appendDots = _$scopedSlots.appendDots; if (customPaging) { dotProps.customPaging = customPaging; } if (appendDots) { dotProps.appendDots = appendDots; } var pauseOnDotsHover = this.$props.pauseOnDotsHover; dotProps = { props: (0, _extends3['default'])({}, dotProps, { clickHandler: this.changeSlide }), on: { mouseenter: pauseOnDotsHover ? this.onDotsLeave : noop, mouseover: pauseOnDotsHover ? this.onDotsOver : noop, mouseleave: pauseOnDotsHover ? this.onDotsLeave : noop } }; dots = h(_dots2['default'], dotProps); } var prevArrow = void 0, nextArrow = void 0; var arrowProps = (0, _innerSliderUtils.extractObject)(spec, ['infinite', 'centerMode', 'currentSlide', 'slideCount', 'slidesToShow']); arrowProps.clickHandler = this.changeSlide; var _$scopedSlots2 = this.$scopedSlots, prevArrowCustom = _$scopedSlots2.prevArrow, nextArrowCustom = _$scopedSlots2.nextArrow; if (prevArrowCustom) { arrowProps.prevArrow = prevArrowCustom; } if (nextArrowCustom) { arrowProps.nextArrow = nextArrowCustom; } if (this.arrows) { prevArrow = h(_arrows.PrevArrow, { props: arrowProps }); nextArrow = h(_arrows.NextArrow, { props: arrowProps }); } var verticalHeightStyle = null; if (this.vertical) { verticalHeightStyle = { height: typeof this.listHeight === 'number' ? this.listHeight + 'px' : this.listHeight }; } var centerPaddingStyle = null; if (this.vertical === false) { if (this.centerMode === true) { centerPaddingStyle = { padding: '0px ' + this.centerPadding }; } } else { if (this.centerMode === true) { centerPaddingStyle = { padding: this.centerPadding + ' 0px' }; } } var listStyle = (0, _extends3['default'])({}, verticalHeightStyle, centerPaddingStyle); var touchMove = this.touchMove; var listProps = { directives: [{ name: 'ant-ref', value: this.listRefHandler }], 'class': 'slick-list', style: listStyle, on: { click: this.clickHandler, mousedown: touchMove ? this.swipeStart : noop, mousemove: this.dragging && touchMove ? this.swipeMove : noop, mouseup: touchMove ? this.swipeEnd : noop, mouseleave: this.dragging && touchMove ? this.swipeEnd : noop, touchstart: touchMove ? this.swipeStart : noop, touchmove: this.dragging && touchMove ? this.swipeMove : noop, touchend: touchMove ? this.swipeEnd : noop, touchcancel: this.dragging && touchMove ? this.swipeEnd : noop, keydown: this.accessibility ? this.keyHandler : noop } }; var innerSliderProps = { 'class': className, props: { dir: 'ltr' } }; if (this.unslick) { listProps = { 'class': 'slick-list', directives: [{ name: 'ant-ref', value: this.listRefHandler }] }; innerSliderProps = { 'class': className }; } return h( 'div', innerSliderProps, [!this.unslick ? prevArrow : '', h( 'div', listProps, [h( _track2['default'], trackProps, [this.children] )] ), !this.unslick ? nextArrow : '', !this.unslick ? dots : ''] ); } };