track.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode } from "vue";
  3. import { createVNode } from 'vue';
  4. import classnames from '../_util/classNames';
  5. import { flattenChildren } from '../_util/props-util';
  6. import { lazyStartIndex, lazyEndIndex, getPreClones } from './utils/innerSliderUtils';
  7. import { deepCloneElement } from '../_util/vnode';
  8. // given specifications/props for a slide, fetch all the classes that need to be applied to the slide
  9. const getSlideClasses = spec => {
  10. let slickActive, slickCenter;
  11. let centerOffset, index;
  12. if (spec.rtl) {
  13. index = spec.slideCount - 1 - spec.index;
  14. } else {
  15. index = spec.index;
  16. }
  17. const 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. let 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. const 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. const getSlideStyle = function (spec) {
  45. const 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. const getKey = (child, fallbackKey) => child.key + '-' + fallbackKey;
  64. const renderSlides = function (spec, children) {
  65. let key;
  66. const slides = [];
  67. const preCloneSlides = [];
  68. const postCloneSlides = [];
  69. const childrenCount = children.length;
  70. const startIndex = lazyStartIndex(spec);
  71. const endIndex = lazyEndIndex(spec);
  72. children.forEach((elem, index) => {
  73. let child;
  74. const childOnClickOptions = {
  75. message: 'children',
  76. index,
  77. slidesToScroll: spec.slidesToScroll,
  78. currentSlide: spec.currentSlide
  79. };
  80. // in case of lazyLoad, whether or not we want to fetch the slide
  81. if (!spec.lazyLoad || spec.lazyLoad && spec.lazyLoadedList.indexOf(index) >= 0) {
  82. child = elem;
  83. } else {
  84. child = createVNode('div');
  85. }
  86. const childStyle = getSlideStyle(_extends(_extends({}, spec), {
  87. index
  88. }));
  89. const slideClass = child.props.class || '';
  90. let slideClasses = getSlideClasses(_extends(_extends({}, spec), {
  91. index
  92. }));
  93. // push a cloned element of the desired slide
  94. slides.push(deepCloneElement(child, {
  95. key: 'original' + getKey(child, index),
  96. tabindex: '-1',
  97. 'data-index': index,
  98. 'aria-hidden': !slideClasses['slick-active'],
  99. class: classnames(slideClasses, slideClass),
  100. style: _extends(_extends({
  101. outline: 'none'
  102. }, child.props.style || {}), childStyle),
  103. onClick: () => {
  104. // child.props && child.props.onClick && child.props.onClick(e)
  105. if (spec.focusOnSelect) {
  106. spec.focusOnSelect(childOnClickOptions);
  107. }
  108. }
  109. }));
  110. // if slide needs to be precloned or postcloned
  111. if (spec.infinite && spec.fade === false) {
  112. const preCloneNo = childrenCount - index;
  113. if (preCloneNo <= getPreClones(spec) && childrenCount !== spec.slidesToShow) {
  114. key = -preCloneNo;
  115. if (key >= startIndex) {
  116. child = elem;
  117. }
  118. slideClasses = getSlideClasses(_extends(_extends({}, spec), {
  119. index: key
  120. }));
  121. preCloneSlides.push(deepCloneElement(child, {
  122. key: 'precloned' + getKey(child, key),
  123. class: classnames(slideClasses, slideClass),
  124. tabindex: '-1',
  125. 'data-index': key,
  126. 'aria-hidden': !slideClasses['slick-active'],
  127. style: _extends(_extends({}, child.props.style || {}), childStyle),
  128. onClick: () => {
  129. // child.props && child.props.onClick && child.props.onClick(e)
  130. if (spec.focusOnSelect) {
  131. spec.focusOnSelect(childOnClickOptions);
  132. }
  133. }
  134. }));
  135. }
  136. if (childrenCount !== spec.slidesToShow) {
  137. key = childrenCount + index;
  138. if (key < endIndex) {
  139. child = elem;
  140. }
  141. slideClasses = getSlideClasses(_extends(_extends({}, spec), {
  142. index: key
  143. }));
  144. postCloneSlides.push(deepCloneElement(child, {
  145. key: 'postcloned' + getKey(child, key),
  146. tabindex: '-1',
  147. 'data-index': key,
  148. 'aria-hidden': !slideClasses['slick-active'],
  149. class: classnames(slideClasses, slideClass),
  150. style: _extends(_extends({}, child.props.style || {}), childStyle),
  151. onClick: () => {
  152. // child.props && child.props.onClick && child.props.onClick(e)
  153. if (spec.focusOnSelect) {
  154. spec.focusOnSelect(childOnClickOptions);
  155. }
  156. }
  157. }));
  158. }
  159. }
  160. });
  161. if (spec.rtl) {
  162. return preCloneSlides.concat(slides, postCloneSlides).reverse();
  163. } else {
  164. return preCloneSlides.concat(slides, postCloneSlides);
  165. }
  166. };
  167. const Track = (_, _ref) => {
  168. let {
  169. attrs,
  170. slots
  171. } = _ref;
  172. const slides = renderSlides(attrs, flattenChildren(slots === null || slots === void 0 ? void 0 : slots.default()));
  173. // const slides = renderSlides(attrs, slots?.default);
  174. const {
  175. onMouseenter,
  176. onMouseover,
  177. onMouseleave
  178. } = attrs;
  179. const mouseEvents = {
  180. onMouseenter,
  181. onMouseover,
  182. onMouseleave
  183. };
  184. const trackProps = _extends({
  185. class: 'slick-track',
  186. style: attrs.trackStyle
  187. }, mouseEvents);
  188. return _createVNode("div", trackProps, [slides]);
  189. };
  190. Track.inheritAttrs = false;
  191. export default Track;