track.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import { createVNode as _createVNode } from "vue";
  3. import { createVNode } from 'vue';
  4. import classnames from '../_util/classNames';
  5. import { cloneElement } from '../_util/vnode';
  6. import { flattenChildren } from '../_util/props-util';
  7. import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils';
  8. // given specifications/props for a slide, fetch all the classes that need to be applied to the slide
  9. var getSlideClasses = function getSlideClasses(spec) {
  10. var slickActive, slickCenter;
  11. var centerOffset, index;
  12. if (spec.rtl) {
  13. index = spec.slideCount - 1 - spec.index;
  14. } else {
  15. index = spec.index;
  16. }
  17. var slickCloned = index < 0 || index >= spec.slideCount;
  18. if (spec.centerMode) {
  19. centerOffset = Math.floor(spec.slidesToShow / 2);
  20. slickCenter = (index - spec.currentSlide) % spec.slideCount === 0;
  21. if (index > spec.currentSlide - centerOffset - 1 && index <= spec.currentSlide + centerOffset) {
  22. slickActive = true;
  23. }
  24. } else {
  25. slickActive = spec.currentSlide <= index && index < spec.currentSlide + spec.slidesToShow;
  26. }
  27. var focusedSlide;
  28. if (spec.targetSlide < 0) {
  29. focusedSlide = spec.targetSlide + spec.slideCount;
  30. } else if (spec.targetSlide >= spec.slideCount) {
  31. focusedSlide = spec.targetSlide - spec.slideCount;
  32. } else {
  33. focusedSlide = spec.targetSlide;
  34. }
  35. var slickCurrent = index === focusedSlide;
  36. return {
  37. 'slick-slide': true,
  38. 'slick-active': slickActive,
  39. 'slick-center': slickCenter,
  40. 'slick-cloned': slickCloned,
  41. 'slick-current': slickCurrent // dubious in case of RTL
  42. };
  43. };
  44. var getSlideStyle = function getSlideStyle(spec) {
  45. var style = {};
  46. if (spec.variableWidth === undefined || spec.variableWidth === false) {
  47. style.width = spec.slideWidth + (typeof spec.slideWidth === 'number' ? 'px' : '');
  48. }
  49. if (spec.fade) {
  50. style.position = 'relative';
  51. if (spec.vertical) {
  52. style.top = -spec.index * parseInt(spec.slideHeight) + 'px';
  53. } else {
  54. style.left = -spec.index * parseInt(spec.slideWidth) + 'px';
  55. }
  56. style.opacity = spec.currentSlide === spec.index ? 1 : 0;
  57. if (spec.useCSS) {
  58. style.transition = 'opacity ' + spec.speed + 'ms ' + spec.cssEase + ', ' + 'visibility ' + spec.speed + 'ms ' + spec.cssEase;
  59. }
  60. }
  61. return style;
  62. };
  63. var getKey = function getKey(child, fallbackKey) {
  64. return child.key + '-' + fallbackKey;
  65. };
  66. var renderSlides = function renderSlides(spec, children) {
  67. var key;
  68. var slides = [];
  69. var preCloneSlides = [];
  70. var postCloneSlides = [];
  71. var childrenCount = children.length;
  72. var startIndex = lazyStartIndex(spec);
  73. var endIndex = lazyEndIndex(spec);
  74. children.forEach(function (elem, index) {
  75. var child;
  76. var childOnClickOptions = {
  77. message: 'children',
  78. index: index,
  79. slidesToScroll: spec.slidesToScroll,
  80. currentSlide: spec.currentSlide
  81. };
  82. // in case of lazyLoad, whether or not we want to fetch the slide
  83. if (!spec.lazyLoad || spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) {
  84. child = elem;
  85. } else {
  86. child = createVNode('div');
  87. }
  88. var childStyle = getSlideStyle(_objectSpread(_objectSpread({}, spec), {}, {
  89. index: index
  90. }));
  91. var slideClass = child.props.class || '';
  92. var slideClasses = getSlideClasses(_objectSpread(_objectSpread({}, spec), {}, {
  93. index: index
  94. }));
  95. // push a cloned element of the desired slide
  96. slides.push(cloneElement(child, {
  97. key: 'original' + getKey(child, index),
  98. tabindex: '-1',
  99. 'data-index': index,
  100. 'aria-hidden': !slideClasses['slick-active'],
  101. class: classnames(slideClasses, slideClass),
  102. style: _objectSpread(_objectSpread({
  103. outline: 'none'
  104. }, child.props.style || {}), childStyle),
  105. onClick: function onClick() {
  106. // child.props && child.props.onClick && child.props.onClick(e)
  107. if (spec.focusOnSelect) {
  108. spec.focusOnSelect(childOnClickOptions);
  109. }
  110. }
  111. }));
  112. // if slide needs to be precloned or postcloned
  113. if (spec.infinite && spec.fade === false) {
  114. var preCloneNo = childrenCount - index;
  115. if (preCloneNo <= getPreClones(spec) && childrenCount !== spec.slidesToShow) {
  116. key = -preCloneNo;
  117. if (key >= startIndex) {
  118. child = elem;
  119. }
  120. slideClasses = getSlideClasses(_objectSpread(_objectSpread({}, spec), {}, {
  121. index: key
  122. }));
  123. preCloneSlides.push(cloneElement(child, {
  124. key: 'precloned' + getKey(child, key),
  125. class: classnames(slideClasses, slideClass),
  126. tabindex: '-1',
  127. 'data-index': key,
  128. 'aria-hidden': !slideClasses['slick-active'],
  129. style: _objectSpread(_objectSpread({}, child.props.style || {}), childStyle),
  130. onClick: function onClick() {
  131. // child.props && child.props.onClick && child.props.onClick(e)
  132. if (spec.focusOnSelect) {
  133. spec.focusOnSelect(childOnClickOptions);
  134. }
  135. }
  136. }));
  137. }
  138. if (childrenCount !== spec.slidesToShow) {
  139. key = childrenCount + index;
  140. if (key < endIndex) {
  141. child = elem;
  142. }
  143. slideClasses = getSlideClasses(_objectSpread(_objectSpread({}, spec), {}, {
  144. index: key
  145. }));
  146. postCloneSlides.push(cloneElement(child, {
  147. key: 'postcloned' + getKey(child, key),
  148. tabindex: '-1',
  149. 'data-index': key,
  150. 'aria-hidden': !slideClasses['slick-active'],
  151. class: classnames(slideClasses, slideClass),
  152. style: _objectSpread(_objectSpread({}, child.props.style || {}), childStyle),
  153. onClick: function onClick() {
  154. // child.props && child.props.onClick && child.props.onClick(e)
  155. if (spec.focusOnSelect) {
  156. spec.focusOnSelect(childOnClickOptions);
  157. }
  158. }
  159. }));
  160. }
  161. }
  162. });
  163. if (spec.rtl) {
  164. return preCloneSlides.concat(slides, postCloneSlides).reverse();
  165. } else {
  166. return preCloneSlides.concat(slides, postCloneSlides);
  167. }
  168. };
  169. var Track = function Track(_, _ref) {
  170. var attrs = _ref.attrs,
  171. slots = _ref.slots;
  172. var slides = renderSlides(attrs, flattenChildren(slots === null || slots === void 0 ? void 0 : slots.default()));
  173. var onMouseenter = attrs.onMouseenter,
  174. onMouseover = attrs.onMouseover,
  175. onMouseleave = attrs.onMouseleave;
  176. var mouseEvents = {
  177. onMouseenter: onMouseenter,
  178. onMouseover: onMouseover,
  179. onMouseleave: onMouseleave
  180. };
  181. var trackProps = _objectSpread({
  182. class: 'slick-track',
  183. style: attrs.trackStyle
  184. }, mouseEvents);
  185. return _createVNode("div", trackProps, [slides]);
  186. };
  187. Track.inheritAttrs = false;
  188. export default Track;