inner-slider.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  11. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _debounce = _interopRequireDefault(require("lodash/debounce"));
  13. var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
  14. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  15. var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
  16. var _defaultProps = _interopRequireDefault(require("./default-props"));
  17. var _initialState = _interopRequireDefault(require("./initial-state"));
  18. var _innerSliderUtils = require("./utils/innerSliderUtils");
  19. var _track = _interopRequireDefault(require("./track"));
  20. var _dots = _interopRequireDefault(require("./dots"));
  21. var _arrows = require("./arrows");
  22. var _supportsPassive = _interopRequireDefault(require("../_util/supportsPassive"));
  23. var _excluded = ["animating"];
  24. function noop() {}
  25. var _default2 = {
  26. name: 'InnerSlider',
  27. mixins: [_BaseMixin.default],
  28. inheritAttrs: false,
  29. props: (0, _objectSpread2.default)({}, _defaultProps.default),
  30. data: function data() {
  31. this.preProps = (0, _objectSpread2.default)({}, this.$props);
  32. this.list = null;
  33. this.track = null;
  34. this.callbackTimers = [];
  35. this.clickable = true;
  36. this.debouncedResize = null;
  37. var ssrState = this.ssrInit();
  38. return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _initialState.default), {}, {
  39. currentSlide: this.initialSlide,
  40. slideCount: this.children.length
  41. }, ssrState);
  42. },
  43. watch: {
  44. __propsSymbol__: function __propsSymbol__() {
  45. var _this = this;
  46. var nextProps = this.$props;
  47. var spec = (0, _objectSpread2.default)((0, _objectSpread2.default)({
  48. listRef: this.list,
  49. trackRef: this.track
  50. }, nextProps), this.$data);
  51. var setTrackStyle = false;
  52. for (var _i = 0, _Object$keys = Object.keys(this.preProps); _i < _Object$keys.length; _i++) {
  53. var key = _Object$keys[_i];
  54. if (!nextProps.hasOwnProperty(key)) {
  55. setTrackStyle = true;
  56. break;
  57. }
  58. if ((0, _typeof2.default)(nextProps[key]) === 'object' || typeof nextProps[key] === 'function' || (0, _typeof2.default)(nextProps[key]) === 'symbol') {
  59. continue;
  60. }
  61. if (nextProps[key] !== this.preProps[key]) {
  62. setTrackStyle = true;
  63. break;
  64. }
  65. }
  66. this.updateState(spec, setTrackStyle, function () {
  67. if (_this.currentSlide >= nextProps.children.length) {
  68. _this.changeSlide({
  69. message: 'index',
  70. index: nextProps.children.length - nextProps.slidesToShow,
  71. currentSlide: _this.currentSlide
  72. });
  73. }
  74. if (!_this.preProps.autoplay && nextProps.autoplay) {
  75. _this.handleAutoPlay('playing');
  76. } else if (nextProps.autoplay) {
  77. _this.handleAutoPlay('update');
  78. } else {
  79. _this.pause('paused');
  80. }
  81. });
  82. this.preProps = (0, _objectSpread2.default)({}, nextProps);
  83. }
  84. },
  85. mounted: function mounted() {
  86. var _this2 = this;
  87. this.__emit('init');
  88. if (this.lazyLoad) {
  89. var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data));
  90. if (slidesToLoad.length > 0) {
  91. this.setState(function (prevState) {
  92. return {
  93. lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)
  94. };
  95. });
  96. this.__emit('lazyLoad', slidesToLoad);
  97. }
  98. }
  99. this.$nextTick(function () {
  100. var spec = (0, _objectSpread2.default)({
  101. listRef: _this2.list,
  102. trackRef: _this2.track,
  103. children: _this2.children
  104. }, _this2.$props);
  105. _this2.updateState(spec, true, function () {
  106. _this2.adaptHeight();
  107. _this2.autoplay && _this2.handleAutoPlay('playing');
  108. });
  109. if (_this2.lazyLoad === 'progressive') {
  110. _this2.lazyLoadTimer = setInterval(_this2.progressiveLazyLoad, 1000);
  111. }
  112. _this2.ro = new _resizeObserverPolyfill.default(function () {
  113. if (_this2.animating) {
  114. _this2.onWindowResized(false); // don't set trackStyle hence don't break animation
  115. _this2.callbackTimers.push(setTimeout(function () {
  116. return _this2.onWindowResized();
  117. }, _this2.speed));
  118. } else {
  119. _this2.onWindowResized();
  120. }
  121. });
  122. _this2.ro.observe(_this2.list);
  123. document.querySelectorAll && Array.prototype.forEach.call(document.querySelectorAll('.slick-slide'), function (slide) {
  124. slide.onfocus = _this2.$props.pauseOnFocus ? _this2.onSlideFocus : null;
  125. slide.onblur = _this2.$props.pauseOnFocus ? _this2.onSlideBlur : null;
  126. });
  127. if (window.addEventListener) {
  128. window.addEventListener('resize', _this2.onWindowResized);
  129. } else {
  130. window.attachEvent('onresize', _this2.onWindowResized);
  131. }
  132. });
  133. },
  134. beforeUnmount: function beforeUnmount() {
  135. var _this$ro;
  136. if (this.animationEndCallback) {
  137. clearTimeout(this.animationEndCallback);
  138. }
  139. if (this.lazyLoadTimer) {
  140. clearInterval(this.lazyLoadTimer);
  141. }
  142. if (this.callbackTimers.length) {
  143. this.callbackTimers.forEach(function (timer) {
  144. return clearTimeout(timer);
  145. });
  146. this.callbackTimers = [];
  147. }
  148. if (window.addEventListener) {
  149. window.removeEventListener('resize', this.onWindowResized);
  150. } else {
  151. window.detachEvent('onresize', this.onWindowResized);
  152. }
  153. if (this.autoplayTimer) {
  154. clearInterval(this.autoplayTimer);
  155. }
  156. (_this$ro = this.ro) === null || _this$ro === void 0 ? void 0 : _this$ro.disconnect();
  157. },
  158. updated: function updated() {
  159. this.checkImagesLoad();
  160. this.__emit('reInit');
  161. if (this.lazyLoad) {
  162. var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data));
  163. if (slidesToLoad.length > 0) {
  164. this.setState(function (prevState) {
  165. return {
  166. lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad)
  167. };
  168. });
  169. this.__emit('lazyLoad');
  170. }
  171. }
  172. // if (this.props.onLazyLoad) {
  173. // this.props.onLazyLoad([leftMostSlide])
  174. // }
  175. this.adaptHeight();
  176. },
  177. methods: {
  178. listRefHandler: function listRefHandler(ref) {
  179. this.list = ref;
  180. },
  181. trackRefHandler: function trackRefHandler(ref) {
  182. this.track = ref;
  183. },
  184. adaptHeight: function adaptHeight() {
  185. if (this.adaptiveHeight && this.list) {
  186. var elem = this.list.querySelector("[data-index=\"".concat(this.currentSlide, "\"]"));
  187. this.list.style.height = (0, _innerSliderUtils.getHeight)(elem) + 'px';
  188. }
  189. },
  190. onWindowResized: function onWindowResized(setTrackStyle) {
  191. var _this3 = this;
  192. if (this.debouncedResize) this.debouncedResize.cancel();
  193. this.debouncedResize = (0, _debounce.default)(function () {
  194. return _this3.resizeWindow(setTrackStyle);
  195. }, 50);
  196. this.debouncedResize();
  197. },
  198. resizeWindow: function resizeWindow() {
  199. var _this4 = this;
  200. var setTrackStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  201. var isTrackMounted = Boolean(this.track);
  202. if (!isTrackMounted) return;
  203. var spec = (0, _objectSpread2.default)((0, _objectSpread2.default)({
  204. listRef: this.list,
  205. trackRef: this.track,
  206. children: this.children
  207. }, this.$props), this.$data);
  208. this.updateState(spec, setTrackStyle, function () {
  209. if (_this4.autoplay) {
  210. _this4.handleAutoPlay('update');
  211. } else {
  212. _this4.pause('paused');
  213. }
  214. });
  215. // animating state should be cleared while resizing, otherwise autoplay stops working
  216. this.setState({
  217. animating: false
  218. });
  219. clearTimeout(this.animationEndCallback);
  220. delete this.animationEndCallback;
  221. },
  222. updateState: function updateState(spec, setTrackStyle, callback) {
  223. var updatedState = (0, _innerSliderUtils.initializedState)(spec);
  224. spec = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, spec), updatedState), {}, {
  225. slideIndex: updatedState.currentSlide
  226. });
  227. var targetLeft = (0, _innerSliderUtils.getTrackLeft)(spec);
  228. spec = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, spec), {}, {
  229. left: targetLeft
  230. });
  231. var trackStyle = (0, _innerSliderUtils.getTrackCSS)(spec);
  232. if (setTrackStyle || this.children.length !== spec.children.length) {
  233. updatedState['trackStyle'] = trackStyle;
  234. }
  235. this.setState(updatedState, callback);
  236. },
  237. ssrInit: function ssrInit() {
  238. var children = this.children;
  239. if (this.variableWidth) {
  240. var _trackWidth = 0;
  241. var _trackLeft = 0;
  242. var childrenWidths = [];
  243. var preClones = (0, _innerSliderUtils.getPreClones)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data), {}, {
  244. slideCount: children.length
  245. }));
  246. var postClones = (0, _innerSliderUtils.getPostClones)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data), {}, {
  247. slideCount: children.length
  248. }));
  249. children.forEach(function (child) {
  250. var _child$props$style, _child$props$style$wi;
  251. var childWidth = ((_child$props$style = child.props.style) === null || _child$props$style === void 0 ? void 0 : (_child$props$style$wi = _child$props$style.width) === null || _child$props$style$wi === void 0 ? void 0 : _child$props$style$wi.split('px')[0]) || 0;
  252. childrenWidths.push(childWidth);
  253. _trackWidth += childWidth;
  254. });
  255. for (var i = 0; i < preClones; i++) {
  256. _trackLeft += childrenWidths[childrenWidths.length - 1 - i];
  257. _trackWidth += childrenWidths[childrenWidths.length - 1 - i];
  258. }
  259. for (var _i2 = 0; _i2 < postClones; _i2++) {
  260. _trackWidth += childrenWidths[_i2];
  261. }
  262. for (var _i3 = 0; _i3 < this.currentSlide; _i3++) {
  263. _trackLeft += childrenWidths[_i3];
  264. }
  265. var _trackStyle = {
  266. width: _trackWidth + 'px',
  267. left: -_trackLeft + 'px'
  268. };
  269. if (this.centerMode) {
  270. var currentWidth = "".concat(childrenWidths[this.currentSlide], "px");
  271. _trackStyle.left = "calc(".concat(_trackStyle.left, " + (100% - ").concat(currentWidth, ") / 2 ) ");
  272. }
  273. return {
  274. trackStyle: _trackStyle
  275. };
  276. }
  277. var childrenCount = children.length;
  278. var spec = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data), {}, {
  279. slideCount: childrenCount
  280. });
  281. var slideCount = (0, _innerSliderUtils.getPreClones)(spec) + (0, _innerSliderUtils.getPostClones)(spec) + childrenCount;
  282. var trackWidth = 100 / this.slidesToShow * slideCount;
  283. var slideWidth = 100 / slideCount;
  284. var trackLeft = -slideWidth * ((0, _innerSliderUtils.getPreClones)(spec) + this.currentSlide) * trackWidth / 100;
  285. if (this.centerMode) {
  286. trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
  287. }
  288. var trackStyle = {
  289. width: trackWidth + '%',
  290. left: trackLeft + '%'
  291. };
  292. return {
  293. slideWidth: slideWidth + '%',
  294. trackStyle: trackStyle
  295. };
  296. },
  297. checkImagesLoad: function checkImagesLoad() {
  298. var _this5 = this;
  299. var images = this.list && this.list.querySelectorAll && this.list.querySelectorAll('.slick-slide img') || [];
  300. var imagesCount = images.length;
  301. var loadedCount = 0;
  302. Array.prototype.forEach.call(images, function (image) {
  303. var handler = function handler() {
  304. return ++loadedCount && loadedCount >= imagesCount && _this5.onWindowResized();
  305. };
  306. if (!image.onclick) {
  307. image.onclick = function () {
  308. return image.parentNode.focus();
  309. };
  310. } else {
  311. var prevClickHandler = image.onclick;
  312. image.onclick = function () {
  313. prevClickHandler();
  314. image.parentNode.focus();
  315. };
  316. }
  317. if (!image.onload) {
  318. if (_this5.$props.lazyLoad) {
  319. image.onload = function () {
  320. _this5.adaptHeight();
  321. _this5.callbackTimers.push(setTimeout(_this5.onWindowResized, _this5.speed));
  322. };
  323. } else {
  324. image.onload = handler;
  325. image.onerror = function () {
  326. handler();
  327. _this5.__emit('lazyLoadError');
  328. };
  329. }
  330. }
  331. });
  332. },
  333. progressiveLazyLoad: function progressiveLazyLoad() {
  334. var slidesToLoad = [];
  335. var spec = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data);
  336. for (var index = this.currentSlide; index < this.slideCount + (0, _innerSliderUtils.getPostClones)(spec); index++) {
  337. if (this.lazyLoadedList.indexOf(index) < 0) {
  338. slidesToLoad.push(index);
  339. break;
  340. }
  341. }
  342. for (var _index = this.currentSlide - 1; _index >= -(0, _innerSliderUtils.getPreClones)(spec); _index--) {
  343. if (this.lazyLoadedList.indexOf(_index) < 0) {
  344. slidesToLoad.push(_index);
  345. break;
  346. }
  347. }
  348. if (slidesToLoad.length > 0) {
  349. this.setState(function (state) {
  350. return {
  351. lazyLoadedList: state.lazyLoadedList.concat(slidesToLoad)
  352. };
  353. });
  354. this.__emit('lazyLoad', slidesToLoad);
  355. } else {
  356. if (this.lazyLoadTimer) {
  357. clearInterval(this.lazyLoadTimer);
  358. delete this.lazyLoadTimer;
  359. }
  360. }
  361. },
  362. slideHandler: function slideHandler(index) {
  363. var _this6 = this;
  364. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  365. var _this$$props = this.$props,
  366. asNavFor = _this$$props.asNavFor,
  367. currentSlide = _this$$props.currentSlide,
  368. beforeChange = _this$$props.beforeChange,
  369. speed = _this$$props.speed,
  370. afterChange = _this$$props.afterChange;
  371. var _slideHandler2 = (0, _innerSliderUtils.slideHandler)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  372. index: index
  373. }, this.$props), this.$data), {}, {
  374. trackRef: this.track,
  375. useCSS: this.useCSS && !dontAnimate
  376. })),
  377. state = _slideHandler2.state,
  378. nextState = _slideHandler2.nextState;
  379. if (!state) return;
  380. beforeChange && beforeChange(currentSlide, state.currentSlide);
  381. var slidesToLoad = state.lazyLoadedList.filter(function (value) {
  382. return _this6.lazyLoadedList.indexOf(value) < 0;
  383. });
  384. if (this.$attrs.onLazyLoad && slidesToLoad.length > 0) {
  385. this.__emit('lazyLoad', slidesToLoad);
  386. }
  387. if (!this.$props.waitForAnimate && this.animationEndCallback) {
  388. clearTimeout(this.animationEndCallback);
  389. afterChange && afterChange(currentSlide);
  390. delete this.animationEndCallback;
  391. }
  392. this.setState(state, function () {
  393. if (asNavFor && _this6.asNavForIndex !== index) {
  394. _this6.asNavForIndex = index;
  395. asNavFor.innerSlider.slideHandler(index);
  396. }
  397. if (!nextState) return;
  398. _this6.animationEndCallback = setTimeout(function () {
  399. var animating = nextState.animating,
  400. firstBatch = (0, _objectWithoutProperties2.default)(nextState, _excluded);
  401. _this6.setState(firstBatch, function () {
  402. _this6.callbackTimers.push(setTimeout(function () {
  403. return _this6.setState({
  404. animating: animating
  405. });
  406. }, 10));
  407. afterChange && afterChange(state.currentSlide);
  408. delete _this6.animationEndCallback;
  409. });
  410. }, speed);
  411. });
  412. },
  413. changeSlide: function changeSlide(options) {
  414. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  415. var spec = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data);
  416. var targetSlide = (0, _innerSliderUtils.changeSlide)(spec, options);
  417. if (targetSlide !== 0 && !targetSlide) return;
  418. if (dontAnimate === true) {
  419. this.slideHandler(targetSlide, dontAnimate);
  420. } else {
  421. this.slideHandler(targetSlide);
  422. }
  423. this.$props.autoplay && this.handleAutoPlay('update');
  424. if (this.$props.focusOnSelect) {
  425. var nodes = this.list.querySelectorAll('.slick-current');
  426. nodes[0] && nodes[0].focus();
  427. }
  428. },
  429. clickHandler: function clickHandler(e) {
  430. if (this.clickable === false) {
  431. e.stopPropagation();
  432. e.preventDefault();
  433. }
  434. this.clickable = true;
  435. },
  436. keyHandler: function keyHandler(e) {
  437. var dir = (0, _innerSliderUtils.keyHandler)(e, this.accessibility, this.rtl);
  438. dir !== '' && this.changeSlide({
  439. message: dir
  440. });
  441. },
  442. selectHandler: function selectHandler(options) {
  443. this.changeSlide(options);
  444. },
  445. disableBodyScroll: function disableBodyScroll() {
  446. var preventDefault = function preventDefault(e) {
  447. e = e || window.event;
  448. if (e.preventDefault) e.preventDefault();
  449. e.returnValue = false;
  450. };
  451. window.ontouchmove = preventDefault;
  452. },
  453. enableBodyScroll: function enableBodyScroll() {
  454. window.ontouchmove = null;
  455. },
  456. swipeStart: function swipeStart(e) {
  457. if (this.verticalSwiping) {
  458. this.disableBodyScroll();
  459. }
  460. var state = (0, _innerSliderUtils.swipeStart)(e, this.swipe, this.draggable);
  461. state !== '' && this.setState(state);
  462. },
  463. swipeMove: function swipeMove(e) {
  464. var state = (0, _innerSliderUtils.swipeMove)(e, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data), {}, {
  465. trackRef: this.track,
  466. listRef: this.list,
  467. slideIndex: this.currentSlide
  468. }));
  469. if (!state) return;
  470. if (state['swiping']) {
  471. this.clickable = false;
  472. }
  473. this.setState(state);
  474. },
  475. swipeEnd: function swipeEnd(e) {
  476. var state = (0, _innerSliderUtils.swipeEnd)(e, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data), {}, {
  477. trackRef: this.track,
  478. listRef: this.list,
  479. slideIndex: this.currentSlide
  480. }));
  481. if (!state) return;
  482. var triggerSlideHandler = state['triggerSlideHandler'];
  483. delete state['triggerSlideHandler'];
  484. this.setState(state);
  485. if (triggerSlideHandler === undefined) return;
  486. this.slideHandler(triggerSlideHandler);
  487. if (this.$props.verticalSwiping) {
  488. this.enableBodyScroll();
  489. }
  490. },
  491. touchEnd: function touchEnd(e) {
  492. this.swipeEnd(e);
  493. this.clickable = true;
  494. },
  495. slickPrev: function slickPrev() {
  496. var _this7 = this;
  497. // this and fellow methods are wrapped in setTimeout
  498. // to make sure initialize setState has happened before
  499. // any of such methods are called
  500. this.callbackTimers.push(setTimeout(function () {
  501. return _this7.changeSlide({
  502. message: 'previous'
  503. });
  504. }, 0));
  505. },
  506. slickNext: function slickNext() {
  507. var _this8 = this;
  508. this.callbackTimers.push(setTimeout(function () {
  509. return _this8.changeSlide({
  510. message: 'next'
  511. });
  512. }, 0));
  513. },
  514. slickGoTo: function slickGoTo(slide) {
  515. var _this9 = this;
  516. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  517. slide = Number(slide);
  518. if (isNaN(slide)) return '';
  519. this.callbackTimers.push(setTimeout(function () {
  520. return _this9.changeSlide({
  521. message: 'index',
  522. index: slide,
  523. currentSlide: _this9.currentSlide
  524. }, dontAnimate);
  525. }, 0));
  526. },
  527. play: function play() {
  528. var nextIndex;
  529. if (this.rtl) {
  530. nextIndex = this.currentSlide - this.slidesToScroll;
  531. } else {
  532. if ((0, _innerSliderUtils.canGoNext)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data))) {
  533. nextIndex = this.currentSlide + this.slidesToScroll;
  534. } else {
  535. return false;
  536. }
  537. }
  538. this.slideHandler(nextIndex);
  539. },
  540. handleAutoPlay: function handleAutoPlay(playType) {
  541. if (this.autoplayTimer) {
  542. clearInterval(this.autoplayTimer);
  543. }
  544. var autoplaying = this.autoplaying;
  545. if (playType === 'update') {
  546. if (autoplaying === 'hovered' || autoplaying === 'focused' || autoplaying === 'paused') {
  547. return;
  548. }
  549. } else if (playType === 'leave') {
  550. if (autoplaying === 'paused' || autoplaying === 'focused') {
  551. return;
  552. }
  553. } else if (playType === 'blur') {
  554. if (autoplaying === 'paused' || autoplaying === 'hovered') {
  555. return;
  556. }
  557. }
  558. this.autoplayTimer = setInterval(this.play, this.autoplaySpeed + 50);
  559. this.setState({
  560. autoplaying: 'playing'
  561. });
  562. },
  563. pause: function pause(pauseType) {
  564. if (this.autoplayTimer) {
  565. clearInterval(this.autoplayTimer);
  566. this.autoplayTimer = null;
  567. }
  568. var autoplaying = this.autoplaying;
  569. if (pauseType === 'paused') {
  570. this.setState({
  571. autoplaying: 'paused'
  572. });
  573. } else if (pauseType === 'focused') {
  574. if (autoplaying === 'hovered' || autoplaying === 'playing') {
  575. this.setState({
  576. autoplaying: 'focused'
  577. });
  578. }
  579. } else {
  580. // pauseType is 'hovered'
  581. if (autoplaying === 'playing') {
  582. this.setState({
  583. autoplaying: 'hovered'
  584. });
  585. }
  586. }
  587. },
  588. onDotsOver: function onDotsOver() {
  589. this.autoplay && this.pause('hovered');
  590. },
  591. onDotsLeave: function onDotsLeave() {
  592. this.autoplay && this.autoplaying === 'hovered' && this.handleAutoPlay('leave');
  593. },
  594. onTrackOver: function onTrackOver() {
  595. this.autoplay && this.pause('hovered');
  596. },
  597. onTrackLeave: function onTrackLeave() {
  598. this.autoplay && this.autoplaying === 'hovered' && this.handleAutoPlay('leave');
  599. },
  600. onSlideFocus: function onSlideFocus() {
  601. this.autoplay && this.pause('focused');
  602. },
  603. onSlideBlur: function onSlideBlur() {
  604. this.autoplay && this.autoplaying === 'focused' && this.handleAutoPlay('blur');
  605. },
  606. customPaging: function customPaging(_ref) {
  607. var i = _ref.i;
  608. return (0, _vue.createVNode)("button", null, [i + 1]);
  609. },
  610. appendDots: function appendDots(_ref2) {
  611. var dots = _ref2.dots;
  612. return (0, _vue.createVNode)("ul", {
  613. "style": {
  614. display: 'block'
  615. }
  616. }, [dots]);
  617. }
  618. },
  619. render: function render() {
  620. var _listProps,
  621. _this10 = this;
  622. var className = (0, _classNames.default)('slick-slider', this.$attrs.class, {
  623. 'slick-vertical': this.vertical,
  624. 'slick-initialized': true
  625. });
  626. var spec = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), this.$data);
  627. 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', 'targetSlide', 'useCSS']);
  628. var pauseOnHover = this.$props.pauseOnHover;
  629. trackProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, trackProps), {}, {
  630. focusOnSelect: this.focusOnSelect && this.clickable ? this.selectHandler : null,
  631. ref: this.trackRefHandler,
  632. onMouseleave: pauseOnHover ? this.onTrackLeave : noop,
  633. onMouseover: pauseOnHover ? this.onTrackOver : noop
  634. });
  635. var dots;
  636. if (this.dots === true && this.slideCount >= this.slidesToShow) {
  637. var dotProps = (0, _innerSliderUtils.extractObject)(spec, ['dotsClass', 'slideCount', 'slidesToShow', 'currentSlide', 'slidesToScroll', 'clickHandler', 'children', 'infinite', 'appendDots']);
  638. dotProps.customPaging = this.customPaging;
  639. dotProps.appendDots = this.appendDots;
  640. var _this$$slots = this.$slots,
  641. customPaging = _this$$slots.customPaging,
  642. appendDots = _this$$slots.appendDots;
  643. if (customPaging) {
  644. dotProps.customPaging = customPaging;
  645. }
  646. if (appendDots) {
  647. dotProps.appendDots = appendDots;
  648. }
  649. var pauseOnDotsHover = this.$props.pauseOnDotsHover;
  650. dotProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, dotProps), {}, {
  651. clickHandler: this.changeSlide,
  652. onMouseover: pauseOnDotsHover ? this.onDotsOver : noop,
  653. onMouseleave: pauseOnDotsHover ? this.onDotsLeave : noop
  654. });
  655. dots = (0, _vue.createVNode)(_dots.default, dotProps, null);
  656. }
  657. var prevArrow, nextArrow;
  658. var arrowProps = (0, _innerSliderUtils.extractObject)(spec, ['infinite', 'centerMode', 'currentSlide', 'slideCount', 'slidesToShow']);
  659. arrowProps.clickHandler = this.changeSlide;
  660. var _this$$slots2 = this.$slots,
  661. prevArrowCustom = _this$$slots2.prevArrow,
  662. nextArrowCustom = _this$$slots2.nextArrow;
  663. if (prevArrowCustom) {
  664. arrowProps.prevArrow = prevArrowCustom;
  665. }
  666. if (nextArrowCustom) {
  667. arrowProps.nextArrow = nextArrowCustom;
  668. }
  669. if (this.arrows) {
  670. prevArrow = (0, _vue.createVNode)(_arrows.PrevArrow, arrowProps, null);
  671. nextArrow = (0, _vue.createVNode)(_arrows.NextArrow, arrowProps, null);
  672. }
  673. var verticalHeightStyle = null;
  674. if (this.vertical) {
  675. verticalHeightStyle = {
  676. height: typeof this.listHeight === 'number' ? "".concat(this.listHeight, "px") : this.listHeight
  677. };
  678. }
  679. var centerPaddingStyle = null;
  680. if (this.vertical === false) {
  681. if (this.centerMode === true) {
  682. centerPaddingStyle = {
  683. padding: '0px ' + this.centerPadding
  684. };
  685. }
  686. } else {
  687. if (this.centerMode === true) {
  688. centerPaddingStyle = {
  689. padding: this.centerPadding + ' 0px'
  690. };
  691. }
  692. }
  693. var listStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, verticalHeightStyle), centerPaddingStyle);
  694. var touchMove = this.touchMove;
  695. var listProps = (_listProps = {
  696. ref: this.listRefHandler,
  697. class: 'slick-list',
  698. style: listStyle,
  699. onClick: this.clickHandler,
  700. onMousedown: touchMove ? this.swipeStart : noop,
  701. onMousemove: this.dragging && touchMove ? this.swipeMove : noop,
  702. onMouseup: touchMove ? this.swipeEnd : noop,
  703. onMouseleave: this.dragging && touchMove ? this.swipeEnd : noop
  704. }, (0, _defineProperty2.default)(_listProps, _supportsPassive.default ? 'onTouchstartPassive' : 'onTouchstart', touchMove ? this.swipeStart : noop), (0, _defineProperty2.default)(_listProps, _supportsPassive.default ? 'onTouchmovePassive' : 'onTouchmove', this.dragging && touchMove ? this.swipeMove : noop), (0, _defineProperty2.default)(_listProps, "onTouchend", touchMove ? this.touchEnd : noop), (0, _defineProperty2.default)(_listProps, "onTouchcancel", this.dragging && touchMove ? this.swipeEnd : noop), (0, _defineProperty2.default)(_listProps, "onKeydown", this.accessibility ? this.keyHandler : noop), _listProps);
  705. var innerSliderProps = {
  706. class: className,
  707. dir: 'ltr',
  708. style: this.$attrs.style
  709. };
  710. if (this.unslick) {
  711. listProps = {
  712. class: 'slick-list',
  713. ref: this.listRefHandler
  714. };
  715. innerSliderProps = {
  716. class: className
  717. };
  718. }
  719. return (0, _vue.createVNode)("div", innerSliderProps, [!this.unslick ? prevArrow : '', (0, _vue.createVNode)("div", listProps, [(0, _vue.createVNode)(_track.default, trackProps, {
  720. default: function _default() {
  721. return [_this10.children];
  722. }
  723. })]), !this.unslick ? nextArrow : '', !this.unslick ? dots : '']);
  724. }
  725. };
  726. exports.default = _default2;