innerSliderUtils.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import React from "react";
  3. import defaultProps from "../default-props";
  4. export function clamp(number, lowerBound, upperBound) {
  5. return Math.max(lowerBound, Math.min(number, upperBound));
  6. }
  7. export var safePreventDefault = function safePreventDefault(event) {
  8. var passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"];
  9. if (!passiveEvents.includes(event._reactName)) {
  10. event.preventDefault();
  11. }
  12. };
  13. export var getOnDemandLazySlides = function getOnDemandLazySlides(spec) {
  14. var onDemandSlides = [];
  15. var startIndex = lazyStartIndex(spec);
  16. var endIndex = lazyEndIndex(spec);
  17. for (var slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {
  18. if (spec.lazyLoadedList.indexOf(slideIndex) < 0) {
  19. onDemandSlides.push(slideIndex);
  20. }
  21. }
  22. return onDemandSlides;
  23. };
  24. // return list of slides that need to be present
  25. export var getRequiredLazySlides = function getRequiredLazySlides(spec) {
  26. var requiredSlides = [];
  27. var startIndex = lazyStartIndex(spec);
  28. var endIndex = lazyEndIndex(spec);
  29. for (var slideIndex = startIndex; slideIndex < endIndex; slideIndex++) {
  30. requiredSlides.push(slideIndex);
  31. }
  32. return requiredSlides;
  33. };
  34. // startIndex that needs to be present
  35. export var lazyStartIndex = function lazyStartIndex(spec) {
  36. return spec.currentSlide - lazySlidesOnLeft(spec);
  37. };
  38. export var lazyEndIndex = function lazyEndIndex(spec) {
  39. return spec.currentSlide + lazySlidesOnRight(spec);
  40. };
  41. export var lazySlidesOnLeft = function lazySlidesOnLeft(spec) {
  42. return spec.centerMode ? Math.floor(spec.slidesToShow / 2) + (parseInt(spec.centerPadding) > 0 ? 1 : 0) : 0;
  43. };
  44. export var lazySlidesOnRight = function lazySlidesOnRight(spec) {
  45. return spec.centerMode ? Math.floor((spec.slidesToShow - 1) / 2) + 1 + (parseInt(spec.centerPadding) > 0 ? 1 : 0) : spec.slidesToShow;
  46. };
  47. // get width of an element
  48. export var getWidth = function getWidth(elem) {
  49. return elem && elem.offsetWidth || 0;
  50. };
  51. export var getHeight = function getHeight(elem) {
  52. return elem && elem.offsetHeight || 0;
  53. };
  54. export var getSwipeDirection = function getSwipeDirection(touchObject) {
  55. var verticalSwiping = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  56. var xDist, yDist, r, swipeAngle;
  57. xDist = touchObject.startX - touchObject.curX;
  58. yDist = touchObject.startY - touchObject.curY;
  59. r = Math.atan2(yDist, xDist);
  60. swipeAngle = Math.round(r * 180 / Math.PI);
  61. if (swipeAngle < 0) {
  62. swipeAngle = 360 - Math.abs(swipeAngle);
  63. }
  64. if (swipeAngle <= 45 && swipeAngle >= 0 || swipeAngle <= 360 && swipeAngle >= 315) {
  65. return "left";
  66. }
  67. if (swipeAngle >= 135 && swipeAngle <= 225) {
  68. return "right";
  69. }
  70. if (verticalSwiping === true) {
  71. if (swipeAngle >= 35 && swipeAngle <= 135) {
  72. return "up";
  73. } else {
  74. return "down";
  75. }
  76. }
  77. return "vertical";
  78. };
  79. // whether or not we can go next
  80. export var canGoNext = function canGoNext(spec) {
  81. var canGo = true;
  82. if (!spec.infinite) {
  83. if (spec.centerMode && spec.currentSlide >= spec.slideCount - 1) {
  84. canGo = false;
  85. } else if (spec.slideCount <= spec.slidesToShow || spec.currentSlide >= spec.slideCount - spec.slidesToShow) {
  86. canGo = false;
  87. }
  88. }
  89. return canGo;
  90. };
  91. // given an object and a list of keys, return new object with given keys
  92. export var extractObject = function extractObject(spec, keys) {
  93. var newObject = {};
  94. keys.forEach(function (key) {
  95. return newObject[key] = spec[key];
  96. });
  97. return newObject;
  98. };
  99. // get initialized state
  100. export var initializedState = function initializedState(spec) {
  101. // spec also contains listRef, trackRef
  102. var slideCount = React.Children.count(spec.children);
  103. var listNode = spec.listRef;
  104. var listWidth = Math.ceil(getWidth(listNode));
  105. var trackNode = spec.trackRef && spec.trackRef.node;
  106. var trackWidth = Math.ceil(getWidth(trackNode));
  107. var slideWidth;
  108. if (!spec.vertical) {
  109. var centerPaddingAdj = spec.centerMode && parseInt(spec.centerPadding) * 2;
  110. if (typeof spec.centerPadding === "string" && spec.centerPadding.slice(-1) === "%") {
  111. centerPaddingAdj *= listWidth / 100;
  112. }
  113. slideWidth = Math.ceil((listWidth - centerPaddingAdj) / spec.slidesToShow);
  114. } else {
  115. slideWidth = listWidth;
  116. }
  117. var slideHeight = listNode && getHeight(listNode.querySelector('[data-index="0"]'));
  118. var listHeight = slideHeight * spec.slidesToShow;
  119. var currentSlide = spec.currentSlide === undefined ? spec.initialSlide : spec.currentSlide;
  120. if (spec.rtl && spec.currentSlide === undefined) {
  121. currentSlide = slideCount - 1 - spec.initialSlide;
  122. }
  123. var lazyLoadedList = spec.lazyLoadedList || [];
  124. var slidesToLoad = getOnDemandLazySlides(_objectSpread(_objectSpread({}, spec), {}, {
  125. currentSlide: currentSlide,
  126. lazyLoadedList: lazyLoadedList
  127. }));
  128. lazyLoadedList = lazyLoadedList.concat(slidesToLoad);
  129. var state = {
  130. slideCount: slideCount,
  131. slideWidth: slideWidth,
  132. listWidth: listWidth,
  133. trackWidth: trackWidth,
  134. currentSlide: currentSlide,
  135. slideHeight: slideHeight,
  136. listHeight: listHeight,
  137. lazyLoadedList: lazyLoadedList
  138. };
  139. if (spec.autoplaying === null && spec.autoplay) {
  140. state["autoplaying"] = "playing";
  141. }
  142. return state;
  143. };
  144. export var slideHandler = function slideHandler(spec) {
  145. var waitForAnimate = spec.waitForAnimate,
  146. animating = spec.animating,
  147. fade = spec.fade,
  148. infinite = spec.infinite,
  149. index = spec.index,
  150. slideCount = spec.slideCount,
  151. lazyLoad = spec.lazyLoad,
  152. currentSlide = spec.currentSlide,
  153. centerMode = spec.centerMode,
  154. slidesToScroll = spec.slidesToScroll,
  155. slidesToShow = spec.slidesToShow,
  156. useCSS = spec.useCSS;
  157. var lazyLoadedList = spec.lazyLoadedList;
  158. if (waitForAnimate && animating) return {};
  159. var animationSlide = index,
  160. finalSlide,
  161. animationLeft,
  162. finalLeft;
  163. var state = {},
  164. nextState = {};
  165. var targetSlide = infinite ? index : clamp(index, 0, slideCount - 1);
  166. if (fade) {
  167. if (!infinite && (index < 0 || index >= slideCount)) return {};
  168. if (index < 0) {
  169. animationSlide = index + slideCount;
  170. } else if (index >= slideCount) {
  171. animationSlide = index - slideCount;
  172. }
  173. if (lazyLoad && lazyLoadedList.indexOf(animationSlide) < 0) {
  174. lazyLoadedList = lazyLoadedList.concat(animationSlide);
  175. }
  176. state = {
  177. animating: true,
  178. currentSlide: animationSlide,
  179. lazyLoadedList: lazyLoadedList,
  180. targetSlide: animationSlide
  181. };
  182. nextState = {
  183. animating: false,
  184. targetSlide: animationSlide
  185. };
  186. } else {
  187. finalSlide = animationSlide;
  188. if (animationSlide < 0) {
  189. finalSlide = animationSlide + slideCount;
  190. if (!infinite) finalSlide = 0;else if (slideCount % slidesToScroll !== 0) finalSlide = slideCount - slideCount % slidesToScroll;
  191. } else if (!canGoNext(spec) && animationSlide > currentSlide) {
  192. animationSlide = finalSlide = currentSlide;
  193. } else if (centerMode && animationSlide >= slideCount) {
  194. animationSlide = infinite ? slideCount : slideCount - 1;
  195. finalSlide = infinite ? 0 : slideCount - 1;
  196. } else if (animationSlide >= slideCount) {
  197. finalSlide = animationSlide - slideCount;
  198. if (!infinite) finalSlide = slideCount - slidesToShow;else if (slideCount % slidesToScroll !== 0) finalSlide = 0;
  199. }
  200. if (!infinite && animationSlide + slidesToShow >= slideCount) {
  201. finalSlide = slideCount - slidesToShow;
  202. }
  203. animationLeft = getTrackLeft(_objectSpread(_objectSpread({}, spec), {}, {
  204. slideIndex: animationSlide
  205. }));
  206. finalLeft = getTrackLeft(_objectSpread(_objectSpread({}, spec), {}, {
  207. slideIndex: finalSlide
  208. }));
  209. if (!infinite) {
  210. if (animationLeft === finalLeft) animationSlide = finalSlide;
  211. animationLeft = finalLeft;
  212. }
  213. if (lazyLoad) {
  214. lazyLoadedList = lazyLoadedList.concat(getOnDemandLazySlides(_objectSpread(_objectSpread({}, spec), {}, {
  215. currentSlide: animationSlide
  216. })));
  217. }
  218. if (!useCSS) {
  219. state = {
  220. currentSlide: finalSlide,
  221. trackStyle: getTrackCSS(_objectSpread(_objectSpread({}, spec), {}, {
  222. left: finalLeft
  223. })),
  224. lazyLoadedList: lazyLoadedList,
  225. targetSlide: targetSlide
  226. };
  227. } else {
  228. state = {
  229. animating: true,
  230. currentSlide: finalSlide,
  231. trackStyle: getTrackAnimateCSS(_objectSpread(_objectSpread({}, spec), {}, {
  232. left: animationLeft
  233. })),
  234. lazyLoadedList: lazyLoadedList,
  235. targetSlide: targetSlide
  236. };
  237. nextState = {
  238. animating: false,
  239. currentSlide: finalSlide,
  240. trackStyle: getTrackCSS(_objectSpread(_objectSpread({}, spec), {}, {
  241. left: finalLeft
  242. })),
  243. swipeLeft: null,
  244. targetSlide: targetSlide
  245. };
  246. }
  247. }
  248. return {
  249. state: state,
  250. nextState: nextState
  251. };
  252. };
  253. export var changeSlide = function changeSlide(spec, options) {
  254. var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
  255. var slidesToScroll = spec.slidesToScroll,
  256. slidesToShow = spec.slidesToShow,
  257. slideCount = spec.slideCount,
  258. currentSlide = spec.currentSlide,
  259. previousTargetSlide = spec.targetSlide,
  260. lazyLoad = spec.lazyLoad,
  261. infinite = spec.infinite;
  262. unevenOffset = slideCount % slidesToScroll !== 0;
  263. indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll;
  264. if (options.message === "previous") {
  265. slideOffset = indexOffset === 0 ? slidesToScroll : slidesToShow - indexOffset;
  266. targetSlide = currentSlide - slideOffset;
  267. if (lazyLoad && !infinite) {
  268. previousInt = currentSlide - slideOffset;
  269. targetSlide = previousInt === -1 ? slideCount - 1 : previousInt;
  270. }
  271. if (!infinite) {
  272. targetSlide = previousTargetSlide - slidesToScroll;
  273. }
  274. } else if (options.message === "next") {
  275. slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset;
  276. targetSlide = currentSlide + slideOffset;
  277. if (lazyLoad && !infinite) {
  278. targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset;
  279. }
  280. if (!infinite) {
  281. targetSlide = previousTargetSlide + slidesToScroll;
  282. }
  283. } else if (options.message === "dots") {
  284. // Click on dots
  285. targetSlide = options.index * options.slidesToScroll;
  286. } else if (options.message === "children") {
  287. // Click on the slides
  288. targetSlide = options.index;
  289. if (infinite) {
  290. var direction = siblingDirection(_objectSpread(_objectSpread({}, spec), {}, {
  291. targetSlide: targetSlide
  292. }));
  293. if (targetSlide > options.currentSlide && direction === "left") {
  294. targetSlide = targetSlide - slideCount;
  295. } else if (targetSlide < options.currentSlide && direction === "right") {
  296. targetSlide = targetSlide + slideCount;
  297. }
  298. }
  299. } else if (options.message === "index") {
  300. targetSlide = Number(options.index);
  301. }
  302. return targetSlide;
  303. };
  304. export var keyHandler = function keyHandler(e, accessibility, rtl) {
  305. if (e.target.tagName.match("TEXTAREA|INPUT|SELECT") || !accessibility) return "";
  306. if (e.keyCode === 37) return rtl ? "next" : "previous";
  307. if (e.keyCode === 39) return rtl ? "previous" : "next";
  308. return "";
  309. };
  310. export var swipeStart = function swipeStart(e, swipe, draggable) {
  311. e.target.tagName === "IMG" && safePreventDefault(e);
  312. if (!swipe || !draggable && e.type.indexOf("mouse") !== -1) return "";
  313. return {
  314. dragging: true,
  315. touchObject: {
  316. startX: e.touches ? e.touches[0].pageX : e.clientX,
  317. startY: e.touches ? e.touches[0].pageY : e.clientY,
  318. curX: e.touches ? e.touches[0].pageX : e.clientX,
  319. curY: e.touches ? e.touches[0].pageY : e.clientY
  320. }
  321. };
  322. };
  323. export var swipeMove = function swipeMove(e, spec) {
  324. // spec also contains, trackRef and slideIndex
  325. var scrolling = spec.scrolling,
  326. animating = spec.animating,
  327. vertical = spec.vertical,
  328. swipeToSlide = spec.swipeToSlide,
  329. verticalSwiping = spec.verticalSwiping,
  330. rtl = spec.rtl,
  331. currentSlide = spec.currentSlide,
  332. edgeFriction = spec.edgeFriction,
  333. edgeDragged = spec.edgeDragged,
  334. onEdge = spec.onEdge,
  335. swiped = spec.swiped,
  336. swiping = spec.swiping,
  337. slideCount = spec.slideCount,
  338. slidesToScroll = spec.slidesToScroll,
  339. infinite = spec.infinite,
  340. touchObject = spec.touchObject,
  341. swipeEvent = spec.swipeEvent,
  342. listHeight = spec.listHeight,
  343. listWidth = spec.listWidth;
  344. if (scrolling) return;
  345. if (animating) return safePreventDefault(e);
  346. if (vertical && swipeToSlide && verticalSwiping) safePreventDefault(e);
  347. var swipeLeft,
  348. state = {};
  349. var curLeft = getTrackLeft(spec);
  350. touchObject.curX = e.touches ? e.touches[0].pageX : e.clientX;
  351. touchObject.curY = e.touches ? e.touches[0].pageY : e.clientY;
  352. touchObject.swipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2)));
  353. var verticalSwipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2)));
  354. if (!verticalSwiping && !swiping && verticalSwipeLength > 10) {
  355. return {
  356. scrolling: true
  357. };
  358. }
  359. if (verticalSwiping) touchObject.swipeLength = verticalSwipeLength;
  360. var positionOffset = (!rtl ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
  361. if (verticalSwiping) positionOffset = touchObject.curY > touchObject.startY ? 1 : -1;
  362. var dotCount = Math.ceil(slideCount / slidesToScroll);
  363. var swipeDirection = getSwipeDirection(spec.touchObject, verticalSwiping);
  364. var touchSwipeLength = touchObject.swipeLength;
  365. if (!infinite) {
  366. if (currentSlide === 0 && (swipeDirection === "right" || swipeDirection === "down") || currentSlide + 1 >= dotCount && (swipeDirection === "left" || swipeDirection === "up") || !canGoNext(spec) && (swipeDirection === "left" || swipeDirection === "up")) {
  367. touchSwipeLength = touchObject.swipeLength * edgeFriction;
  368. if (edgeDragged === false && onEdge) {
  369. onEdge(swipeDirection);
  370. state["edgeDragged"] = true;
  371. }
  372. }
  373. }
  374. if (!swiped && swipeEvent) {
  375. swipeEvent(swipeDirection);
  376. state["swiped"] = true;
  377. }
  378. if (!vertical) {
  379. if (!rtl) {
  380. swipeLeft = curLeft + touchSwipeLength * positionOffset;
  381. } else {
  382. swipeLeft = curLeft - touchSwipeLength * positionOffset;
  383. }
  384. } else {
  385. swipeLeft = curLeft + touchSwipeLength * (listHeight / listWidth) * positionOffset;
  386. }
  387. if (verticalSwiping) {
  388. swipeLeft = curLeft + touchSwipeLength * positionOffset;
  389. }
  390. state = _objectSpread(_objectSpread({}, state), {}, {
  391. touchObject: touchObject,
  392. swipeLeft: swipeLeft,
  393. trackStyle: getTrackCSS(_objectSpread(_objectSpread({}, spec), {}, {
  394. left: swipeLeft
  395. }))
  396. });
  397. if (Math.abs(touchObject.curX - touchObject.startX) < Math.abs(touchObject.curY - touchObject.startY) * 0.8) {
  398. return state;
  399. }
  400. if (touchObject.swipeLength > 10) {
  401. state["swiping"] = true;
  402. safePreventDefault(e);
  403. }
  404. return state;
  405. };
  406. export var swipeEnd = function swipeEnd(e, spec) {
  407. var dragging = spec.dragging,
  408. swipe = spec.swipe,
  409. touchObject = spec.touchObject,
  410. listWidth = spec.listWidth,
  411. touchThreshold = spec.touchThreshold,
  412. verticalSwiping = spec.verticalSwiping,
  413. listHeight = spec.listHeight,
  414. swipeToSlide = spec.swipeToSlide,
  415. scrolling = spec.scrolling,
  416. onSwipe = spec.onSwipe,
  417. targetSlide = spec.targetSlide,
  418. currentSlide = spec.currentSlide,
  419. infinite = spec.infinite;
  420. if (!dragging) {
  421. if (swipe) safePreventDefault(e);
  422. return {};
  423. }
  424. var minSwipe = verticalSwiping ? listHeight / touchThreshold : listWidth / touchThreshold;
  425. var swipeDirection = getSwipeDirection(touchObject, verticalSwiping);
  426. // reset the state of touch related state variables.
  427. var state = {
  428. dragging: false,
  429. edgeDragged: false,
  430. scrolling: false,
  431. swiping: false,
  432. swiped: false,
  433. swipeLeft: null,
  434. touchObject: {}
  435. };
  436. if (scrolling) {
  437. return state;
  438. }
  439. if (!touchObject.swipeLength) {
  440. return state;
  441. }
  442. if (touchObject.swipeLength > minSwipe) {
  443. safePreventDefault(e);
  444. if (onSwipe) {
  445. onSwipe(swipeDirection);
  446. }
  447. var slideCount, newSlide;
  448. var activeSlide = infinite ? currentSlide : targetSlide;
  449. switch (swipeDirection) {
  450. case "left":
  451. case "up":
  452. newSlide = activeSlide + getSlideCount(spec);
  453. slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide;
  454. state["currentDirection"] = 0;
  455. break;
  456. case "right":
  457. case "down":
  458. newSlide = activeSlide - getSlideCount(spec);
  459. slideCount = swipeToSlide ? checkNavigable(spec, newSlide) : newSlide;
  460. state["currentDirection"] = 1;
  461. break;
  462. default:
  463. slideCount = activeSlide;
  464. }
  465. state["triggerSlideHandler"] = slideCount;
  466. } else {
  467. // Adjust the track back to it's original position.
  468. var currentLeft = getTrackLeft(spec);
  469. state["trackStyle"] = getTrackAnimateCSS(_objectSpread(_objectSpread({}, spec), {}, {
  470. left: currentLeft
  471. }));
  472. }
  473. return state;
  474. };
  475. export var getNavigableIndexes = function getNavigableIndexes(spec) {
  476. var max = spec.infinite ? spec.slideCount * 2 : spec.slideCount;
  477. var breakpoint = spec.infinite ? spec.slidesToShow * -1 : 0;
  478. var counter = spec.infinite ? spec.slidesToShow * -1 : 0;
  479. var indexes = [];
  480. while (breakpoint < max) {
  481. indexes.push(breakpoint);
  482. breakpoint = counter + spec.slidesToScroll;
  483. counter += Math.min(spec.slidesToScroll, spec.slidesToShow);
  484. }
  485. return indexes;
  486. };
  487. export var checkNavigable = function checkNavigable(spec, index) {
  488. var navigables = getNavigableIndexes(spec);
  489. var prevNavigable = 0;
  490. if (index > navigables[navigables.length - 1]) {
  491. index = navigables[navigables.length - 1];
  492. } else {
  493. for (var n in navigables) {
  494. if (index < navigables[n]) {
  495. index = prevNavigable;
  496. break;
  497. }
  498. prevNavigable = navigables[n];
  499. }
  500. }
  501. return index;
  502. };
  503. export var getSlideCount = function getSlideCount(spec) {
  504. var centerOffset = spec.centerMode ? spec.slideWidth * Math.floor(spec.slidesToShow / 2) : 0;
  505. if (spec.swipeToSlide) {
  506. var swipedSlide;
  507. var slickList = spec.listRef;
  508. var slides = slickList.querySelectorAll && slickList.querySelectorAll(".slick-slide") || [];
  509. Array.from(slides).every(function (slide) {
  510. if (!spec.vertical) {
  511. if (slide.offsetLeft - centerOffset + getWidth(slide) / 2 > spec.swipeLeft * -1) {
  512. swipedSlide = slide;
  513. return false;
  514. }
  515. } else {
  516. if (slide.offsetTop + getHeight(slide) / 2 > spec.swipeLeft * -1) {
  517. swipedSlide = slide;
  518. return false;
  519. }
  520. }
  521. return true;
  522. });
  523. if (!swipedSlide) {
  524. return 0;
  525. }
  526. var currentIndex = spec.rtl === true ? spec.slideCount - spec.currentSlide : spec.currentSlide;
  527. var slidesTraversed = Math.abs(swipedSlide.dataset.index - currentIndex) || 1;
  528. return slidesTraversed;
  529. } else {
  530. return spec.slidesToScroll;
  531. }
  532. };
  533. export var checkSpecKeys = function checkSpecKeys(spec, keysArray) {
  534. return (
  535. // eslint-disable-next-line no-prototype-builtins
  536. keysArray.reduce(function (value, key) {
  537. return value && spec.hasOwnProperty(key);
  538. }, true) ? null : console.error("Keys Missing:", spec)
  539. );
  540. };
  541. export var getTrackCSS = function getTrackCSS(spec) {
  542. checkSpecKeys(spec, ["left", "variableWidth", "slideCount", "slidesToShow", "slideWidth"]);
  543. var trackWidth, trackHeight;
  544. if (!spec.vertical) {
  545. trackWidth = getTotalSlides(spec) * spec.slideWidth;
  546. } else {
  547. var trackChildren = spec.unslick ? spec.slideCount : spec.slideCount + 2 * spec.slidesToShow;
  548. trackHeight = trackChildren * spec.slideHeight;
  549. }
  550. var style = {
  551. opacity: 1,
  552. transition: "",
  553. WebkitTransition: ""
  554. };
  555. if (spec.useTransform) {
  556. var WebkitTransform = !spec.vertical ? "translate3d(" + spec.left + "px, 0px, 0px)" : "translate3d(0px, " + spec.left + "px, 0px)";
  557. var transform = !spec.vertical ? "translate3d(" + spec.left + "px, 0px, 0px)" : "translate3d(0px, " + spec.left + "px, 0px)";
  558. var msTransform = !spec.vertical ? "translateX(" + spec.left + "px)" : "translateY(" + spec.left + "px)";
  559. style = _objectSpread(_objectSpread({}, style), {}, {
  560. WebkitTransform: WebkitTransform,
  561. transform: transform,
  562. msTransform: msTransform
  563. });
  564. } else {
  565. if (spec.vertical) {
  566. style["top"] = spec.left;
  567. } else {
  568. style["left"] = spec.left;
  569. }
  570. }
  571. if (spec.fade) style = {
  572. opacity: 1
  573. };
  574. if (trackWidth) style.width = trackWidth;
  575. if (trackHeight) style.height = trackHeight;
  576. // Fallback for IE8
  577. if (window && !window.addEventListener && window.attachEvent) {
  578. if (!spec.vertical) {
  579. style.marginLeft = spec.left + "px";
  580. } else {
  581. style.marginTop = spec.left + "px";
  582. }
  583. }
  584. return style;
  585. };
  586. export var getTrackAnimateCSS = function getTrackAnimateCSS(spec) {
  587. checkSpecKeys(spec, ["left", "variableWidth", "slideCount", "slidesToShow", "slideWidth", "speed", "cssEase"]);
  588. var style = getTrackCSS(spec);
  589. // useCSS is true by default so it can be undefined
  590. if (spec.useTransform) {
  591. style.WebkitTransition = "-webkit-transform " + spec.speed + "ms " + spec.cssEase;
  592. style.transition = "transform " + spec.speed + "ms " + spec.cssEase;
  593. } else {
  594. if (spec.vertical) {
  595. style.transition = "top " + spec.speed + "ms " + spec.cssEase;
  596. } else {
  597. style.transition = "left " + spec.speed + "ms " + spec.cssEase;
  598. }
  599. }
  600. return style;
  601. };
  602. export var getTrackLeft = function getTrackLeft(spec) {
  603. if (spec.unslick) {
  604. return 0;
  605. }
  606. checkSpecKeys(spec, ["slideIndex", "trackRef", "infinite", "centerMode", "slideCount", "slidesToShow", "slidesToScroll", "slideWidth", "listWidth", "variableWidth", "slideHeight"]);
  607. var slideIndex = spec.slideIndex,
  608. trackRef = spec.trackRef,
  609. infinite = spec.infinite,
  610. centerMode = spec.centerMode,
  611. slideCount = spec.slideCount,
  612. slidesToShow = spec.slidesToShow,
  613. slidesToScroll = spec.slidesToScroll,
  614. slideWidth = spec.slideWidth,
  615. listWidth = spec.listWidth,
  616. variableWidth = spec.variableWidth,
  617. slideHeight = spec.slideHeight,
  618. fade = spec.fade,
  619. vertical = spec.vertical;
  620. var slideOffset = 0;
  621. var targetLeft;
  622. var targetSlide;
  623. var verticalOffset = 0;
  624. if (fade || spec.slideCount === 1) {
  625. return 0;
  626. }
  627. var slidesToOffset = 0;
  628. if (infinite) {
  629. slidesToOffset = -getPreClones(spec); // bring active slide to the beginning of visual area
  630. // if next scroll doesn't have enough children, just reach till the end of original slides instead of shifting slidesToScroll children
  631. if (slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount) {
  632. slidesToOffset = -(slideIndex > slideCount ? slidesToShow - (slideIndex - slideCount) : slideCount % slidesToScroll);
  633. }
  634. // shift current slide to center of the frame
  635. if (centerMode) {
  636. slidesToOffset += parseInt(slidesToShow / 2);
  637. }
  638. } else {
  639. if (slideCount % slidesToScroll !== 0 && slideIndex + slidesToScroll > slideCount) {
  640. slidesToOffset = slidesToShow - slideCount % slidesToScroll;
  641. }
  642. if (centerMode) {
  643. slidesToOffset = parseInt(slidesToShow / 2);
  644. }
  645. }
  646. slideOffset = slidesToOffset * slideWidth;
  647. verticalOffset = slidesToOffset * slideHeight;
  648. if (!vertical) {
  649. targetLeft = slideIndex * slideWidth * -1 + slideOffset;
  650. } else {
  651. targetLeft = slideIndex * slideHeight * -1 + verticalOffset;
  652. }
  653. if (variableWidth === true) {
  654. var targetSlideIndex;
  655. var trackElem = trackRef && trackRef.node;
  656. targetSlideIndex = slideIndex + getPreClones(spec);
  657. targetSlide = trackElem && trackElem.childNodes[targetSlideIndex];
  658. targetLeft = targetSlide ? targetSlide.offsetLeft * -1 : 0;
  659. if (centerMode === true) {
  660. targetSlideIndex = infinite ? slideIndex + getPreClones(spec) : slideIndex;
  661. targetSlide = trackElem && trackElem.children[targetSlideIndex];
  662. targetLeft = 0;
  663. for (var slide = 0; slide < targetSlideIndex; slide++) {
  664. targetLeft -= trackElem && trackElem.children[slide] && trackElem.children[slide].offsetWidth;
  665. }
  666. targetLeft -= parseInt(spec.centerPadding);
  667. targetLeft += targetSlide && (listWidth - targetSlide.offsetWidth) / 2;
  668. }
  669. }
  670. return targetLeft;
  671. };
  672. export var getPreClones = function getPreClones(spec) {
  673. if (spec.unslick || !spec.infinite) {
  674. return 0;
  675. }
  676. if (spec.variableWidth) {
  677. return spec.slideCount;
  678. }
  679. return spec.slidesToShow + (spec.centerMode ? 1 : 0);
  680. };
  681. export var getPostClones = function getPostClones(spec) {
  682. if (spec.unslick || !spec.infinite) {
  683. return 0;
  684. }
  685. return spec.slideCount;
  686. };
  687. export var getTotalSlides = function getTotalSlides(spec) {
  688. return spec.slideCount === 1 ? 1 : getPreClones(spec) + spec.slideCount + getPostClones(spec);
  689. };
  690. export var siblingDirection = function siblingDirection(spec) {
  691. if (spec.targetSlide > spec.currentSlide) {
  692. if (spec.targetSlide > spec.currentSlide + slidesOnRight(spec)) {
  693. return "left";
  694. }
  695. return "right";
  696. } else {
  697. if (spec.targetSlide < spec.currentSlide - slidesOnLeft(spec)) {
  698. return "right";
  699. }
  700. return "left";
  701. }
  702. };
  703. export var slidesOnRight = function slidesOnRight(_ref) {
  704. var slidesToShow = _ref.slidesToShow,
  705. centerMode = _ref.centerMode,
  706. rtl = _ref.rtl,
  707. centerPadding = _ref.centerPadding;
  708. // returns no of slides on the right of active slide
  709. if (centerMode) {
  710. var right = (slidesToShow - 1) / 2 + 1;
  711. if (parseInt(centerPadding) > 0) right += 1;
  712. if (rtl && slidesToShow % 2 === 0) right += 1;
  713. return right;
  714. }
  715. if (rtl) {
  716. return 0;
  717. }
  718. return slidesToShow - 1;
  719. };
  720. export var slidesOnLeft = function slidesOnLeft(_ref2) {
  721. var slidesToShow = _ref2.slidesToShow,
  722. centerMode = _ref2.centerMode,
  723. rtl = _ref2.rtl,
  724. centerPadding = _ref2.centerPadding;
  725. // returns no of slides on the left of active slide
  726. if (centerMode) {
  727. var left = (slidesToShow - 1) / 2 + 1;
  728. if (parseInt(centerPadding) > 0) left += 1;
  729. if (!rtl && slidesToShow % 2 === 0) left += 1;
  730. return left;
  731. }
  732. if (rtl) {
  733. return slidesToShow - 1;
  734. }
  735. return 0;
  736. };
  737. export var canUseDOM = function canUseDOM() {
  738. return !!(typeof window !== "undefined" && window.document && window.document.createElement);
  739. };
  740. export var validSettings = Object.keys(defaultProps);
  741. export function filterSettings(settings) {
  742. return validSettings.reduce(function (acc, settingName) {
  743. if (settings.hasOwnProperty(settingName)) {
  744. acc[settingName] = settings[settingName];
  745. }
  746. return acc;
  747. }, {});
  748. }