Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

3 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. 'use strict';
  2. exports.__esModule = true;
  3. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  4. var _react = require('react');
  5. var _react2 = _interopRequireDefault(_react);
  6. var _reactDom = require('react-dom');
  7. var _reactDom2 = _interopRequireDefault(_reactDom);
  8. var _trackHelper = require('./trackHelper');
  9. var _objectAssign = require('object-assign');
  10. var _objectAssign2 = _interopRequireDefault(_objectAssign);
  11. var _innerSliderUtils = require('../utils/innerSliderUtils');
  12. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  13. var helpers = {
  14. update: function update(props) {
  15. var recursionLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  16. var slickList = _reactDom2.default.findDOMNode(this.list);
  17. var slideCount = _react2.default.Children.count(props.children);
  18. var listWidth = (0, _innerSliderUtils.getWidth)(slickList);
  19. var trackWidth = (0, _innerSliderUtils.getWidth)(_reactDom2.default.findDOMNode(this.track));
  20. var slideWidth;
  21. if (!props.vertical) {
  22. var centerPaddingAdj = props.centerMode && parseInt(props.centerPadding) * 2;
  23. if (props.centerPadding.slice(-1) === '%') {
  24. centerPaddingAdj *= listWidth / 100;
  25. }
  26. slideWidth = Math.ceil(((0, _innerSliderUtils.getWidth)(slickList) - centerPaddingAdj) / props.slidesToShow);
  27. } else {
  28. slideWidth = Math.ceil((0, _innerSliderUtils.getWidth)(slickList));
  29. }
  30. var slideHeight = (0, _innerSliderUtils.getHeight)(slickList.querySelector('[data-index="0"]'));
  31. var listHeight = slideHeight * props.slidesToShow;
  32. // pause slider if autoplay is set to false
  33. if (!props.autoplay) {
  34. this.pause();
  35. } else {
  36. this.autoPlay(props.autoplay);
  37. }
  38. var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)({}, this.props, this.state);
  39. if (slidesToLoad.length > 0 && this.props.onLazyLoad) {
  40. this.props.onLazyLoad(slidesToLoad);
  41. }
  42. var prevLazyLoadedList = this.state.lazyLoadedList;
  43. this.setState({
  44. slideCount: slideCount,
  45. slideWidth: slideWidth,
  46. listWidth: listWidth,
  47. trackWidth: trackWidth,
  48. slideHeight: slideHeight,
  49. listHeight: listHeight,
  50. lazyLoadedList: prevLazyLoadedList.concat(slidesToLoad)
  51. }, function () {
  52. if (!slideWidth) {
  53. if (recursionLevel < 2) {
  54. this.update(this.props, recursionLevel + 1);
  55. }
  56. }
  57. var targetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
  58. slideIndex: this.state.currentSlide,
  59. trackRef: this.track
  60. }, props, this.state));
  61. // getCSS function needs previously set state
  62. var trackStyle = (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: targetLeft }, props, this.state));
  63. this.setState({ trackStyle: trackStyle });
  64. });
  65. },
  66. adaptHeight: function adaptHeight() {
  67. if (this.props.adaptiveHeight) {
  68. var selector = '[data-index="' + this.state.currentSlide + '"]';
  69. if (this.list) {
  70. var slickList = _reactDom2.default.findDOMNode(this.list);
  71. var elem = slickList.querySelector(selector) || {};
  72. slickList.style.height = (elem.offsetHeight || 0) + 'px';
  73. }
  74. }
  75. },
  76. slideHandler: function slideHandler(index) {
  77. var _this = this;
  78. // index is target slide index
  79. // Functionality of animateSlide and postSlide is merged into this function
  80. var animationTargetSlide, finalTargetSlide;
  81. var animationTargetLeft, finalTargetLeft;
  82. var callback;
  83. if (this.props.waitForAnimate && this.state.animating) {
  84. return;
  85. }
  86. if (this.props.fade) {
  87. finalTargetSlide = this.state.currentSlide;
  88. // Don't change slide if infinite=false and target slide is out of range
  89. if (this.props.infinite === false && (index < 0 || index >= this.state.slideCount)) {
  90. return;
  91. }
  92. // Shifting animationTargetSlide back into the range
  93. if (index < 0) {
  94. animationTargetSlide = index + this.state.slideCount;
  95. } else if (index >= this.state.slideCount) {
  96. animationTargetSlide = index - this.state.slideCount;
  97. } else {
  98. animationTargetSlide = index;
  99. }
  100. if (this.props.lazyLoad && this.state.lazyLoadedList.indexOf(animationTargetSlide) < 0) {
  101. this.setState(function (prevState, props) {
  102. return { lazyLoadedList: prevState.lazyLoadedList.concat(animationTargetSlide) };
  103. });
  104. if (this.props.onLazyLoad) {
  105. this.props.onLazyLoad([animationTargetSlide]);
  106. }
  107. }
  108. callback = function callback() {
  109. _this.setState({
  110. animating: false
  111. });
  112. if (_this.props.afterChange) {
  113. _this.props.afterChange(animationTargetSlide);
  114. }
  115. delete _this.animationEndCallback;
  116. };
  117. this.setState({
  118. animating: true,
  119. currentSlide: animationTargetSlide
  120. }, function () {
  121. if (_this.props.asNavFor && _this.props.asNavFor.innerSlider.state.currentSlide !== _this.state.currentSlide) {
  122. _this.props.asNavFor.innerSlider.slideHandler(index);
  123. }
  124. _this.animationEndCallback = setTimeout(callback, _this.props.speed);
  125. });
  126. if (this.props.beforeChange) {
  127. this.props.beforeChange(this.state.currentSlide, animationTargetSlide);
  128. }
  129. this.autoPlay();
  130. return;
  131. }
  132. animationTargetSlide = index;
  133. /*
  134. @TODO: Make sure to leave no bug in the code below
  135. start: critical checkpoint
  136. */
  137. if (animationTargetSlide < 0) {
  138. if (this.props.infinite === false) {
  139. finalTargetSlide = 0;
  140. } else if (this.state.slideCount % this.props.slidesToScroll !== 0) {
  141. finalTargetSlide = this.state.slideCount - this.state.slideCount % this.props.slidesToScroll;
  142. } else {
  143. finalTargetSlide = this.state.slideCount + animationTargetSlide;
  144. }
  145. } else if (this.props.centerMode && animationTargetSlide >= this.state.slideCount) {
  146. if (this.props.infinite === false) {
  147. animationTargetSlide = this.state.slideCount - 1;
  148. finalTargetSlide = this.state.slideCount - 1;
  149. } else {
  150. animationTargetSlide = this.state.slideCount;
  151. finalTargetSlide = 0;
  152. }
  153. } else if (animationTargetSlide >= this.state.slideCount) {
  154. if (this.props.infinite === false) {
  155. finalTargetSlide = this.state.slideCount - this.props.slidesToShow;
  156. } else if (this.state.slideCount % this.props.slidesToScroll !== 0) {
  157. finalTargetSlide = 0;
  158. } else {
  159. finalTargetSlide = animationTargetSlide - this.state.slideCount;
  160. }
  161. } else if (this.state.currentSlide + this.slidesToShow < this.state.slideCount && animationTargetSlide + this.props.slidesToShow >= this.state.slideCount) {
  162. if (this.props.infinite === false) {
  163. finalTargetSlide = this.state.slideCount - this.props.slidesToShow;
  164. } else {
  165. if ((this.state.slideCount - animationTargetSlide) % this.props.slidesToScroll !== 0) {
  166. finalTargetSlide = this.state.slideCount - this.props.slidesToShow;
  167. } else {
  168. finalTargetSlide = animationTargetSlide;
  169. }
  170. }
  171. } else {
  172. finalTargetSlide = animationTargetSlide;
  173. }
  174. /*
  175. stop: critical checkpoint
  176. */
  177. animationTargetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
  178. slideIndex: animationTargetSlide,
  179. trackRef: this.track
  180. }, this.props, this.state));
  181. finalTargetLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
  182. slideIndex: finalTargetSlide,
  183. trackRef: this.track
  184. }, this.props, this.state));
  185. if (this.props.infinite === false) {
  186. if (animationTargetLeft === finalTargetLeft) {
  187. animationTargetSlide = finalTargetSlide;
  188. }
  189. animationTargetLeft = finalTargetLeft;
  190. }
  191. if (this.props.beforeChange) {
  192. this.props.beforeChange(this.state.currentSlide, finalTargetSlide);
  193. }
  194. if (this.props.lazyLoad) {
  195. var slidesToLoad = (0, _innerSliderUtils.getOnDemandLazySlides)((0, _objectAssign2.default)({}, this.props, this.state, { currentSlide: animationTargetSlide }));
  196. if (slidesToLoad.length > 0) {
  197. this.setState(function (prevState, props) {
  198. return { lazyLoadedList: prevState.lazyLoadedList.concat(slidesToLoad) };
  199. });
  200. if (this.props.onLazyLoad) {
  201. this.props.onLazyLoad(slidesToLoad);
  202. }
  203. }
  204. }
  205. // Slide Transition happens here.
  206. // animated transition happens to target Slide and
  207. // non - animated transition happens to current Slide
  208. // If CSS transitions are false, directly go the current slide.
  209. if (this.props.useCSS === false) {
  210. this.setState({
  211. currentSlide: finalTargetSlide,
  212. trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: finalTargetLeft }, this.props, this.state))
  213. }, function () {
  214. if (this.props.afterChange) {
  215. this.props.afterChange(finalTargetSlide);
  216. }
  217. });
  218. } else {
  219. var nextStateChanges = {
  220. animating: false,
  221. currentSlide: finalTargetSlide,
  222. trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: finalTargetLeft }, this.props, this.state)),
  223. swipeLeft: null
  224. };
  225. callback = function callback() {
  226. _this.setState(nextStateChanges, function () {
  227. if (_this.props.afterChange) {
  228. _this.props.afterChange(finalTargetSlide);
  229. }
  230. delete _this.animationEndCallback;
  231. });
  232. };
  233. this.setState({
  234. animating: true,
  235. currentSlide: finalTargetSlide,
  236. trackStyle: (0, _trackHelper.getTrackAnimateCSS)((0, _objectAssign2.default)({ left: animationTargetLeft }, this.props, this.state))
  237. }, function () {
  238. if (_this.props.asNavFor && _this.props.asNavFor.innerSlider.state.currentSlide !== _this.state.currentSlide) {
  239. _this.props.asNavFor.innerSlider.slideHandler(index);
  240. }
  241. _this.animationEndCallback = setTimeout(callback, _this.props.speed);
  242. });
  243. }
  244. this.autoPlay();
  245. },
  246. play: function play() {
  247. var nextIndex;
  248. // if (!this.state.mounted) {
  249. // return false
  250. // }
  251. if (this.props.rtl) {
  252. nextIndex = this.state.currentSlide - this.props.slidesToScroll;
  253. } else {
  254. if ((0, _innerSliderUtils.canGoNext)(_extends({}, this.props, this.state))) {
  255. nextIndex = this.state.currentSlide + this.props.slidesToScroll;
  256. } else {
  257. return false;
  258. }
  259. }
  260. this.slideHandler(nextIndex);
  261. },
  262. autoPlay: function autoPlay() {
  263. var autoplay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  264. if (this.autoplayTimer) {
  265. clearTimeout(this.autoplayTimer);
  266. }
  267. if (autoplay || this.props.autoplay) {
  268. this.autoplayTimer = setTimeout(this.play, this.props.autoplaySpeed);
  269. }
  270. },
  271. pause: function pause() {
  272. if (this.autoplayTimer) {
  273. clearTimeout(this.autoplayTimer);
  274. this.autoplayTimer = null;
  275. }
  276. }
  277. };
  278. exports.default = helpers;