inner-slider.js 27 KB

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