slider.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _json2mq = _interopRequireDefault(require("../_util/json2mq"));
  10. var _BaseMixin = _interopRequireDefault(require("../_util/BaseMixin"));
  11. var _vnode = require("../_util/vnode");
  12. var _innerSlider = _interopRequireDefault(require("./inner-slider"));
  13. var _defaultProps = _interopRequireDefault(require("./default-props"));
  14. var _innerSliderUtils = require("./utils/innerSliderUtils");
  15. var _propsUtil = require("../_util/props-util");
  16. var _default = (0, _vue.defineComponent)({
  17. name: 'Slider',
  18. mixins: [_BaseMixin.default],
  19. inheritAttrs: false,
  20. props: (0, _objectSpread2.default)({}, _defaultProps.default),
  21. data: function data() {
  22. this._responsiveMediaHandlers = [];
  23. return {
  24. breakpoint: null
  25. };
  26. },
  27. // handles responsive breakpoints
  28. mounted: function mounted() {
  29. var _this = this;
  30. if (this.responsive) {
  31. var breakpoints = this.responsive.map(function (breakpt) {
  32. return breakpt.breakpoint;
  33. });
  34. // sort them in increasing order of their numerical value
  35. breakpoints.sort(function (x, y) {
  36. return x - y;
  37. });
  38. breakpoints.forEach(function (breakpoint, index) {
  39. // media query for each breakpoint
  40. var bQuery;
  41. if (index === 0) {
  42. bQuery = (0, _json2mq.default)({
  43. minWidth: 0,
  44. maxWidth: breakpoint
  45. });
  46. } else {
  47. bQuery = (0, _json2mq.default)({
  48. minWidth: breakpoints[index - 1] + 1,
  49. maxWidth: breakpoint
  50. });
  51. }
  52. // when not using server side rendering
  53. (0, _innerSliderUtils.canUseDOM)() && _this.media(bQuery, function () {
  54. _this.setState({
  55. breakpoint: breakpoint
  56. });
  57. });
  58. });
  59. // Register media query for full screen. Need to support resize from small to large
  60. // convert javascript object to media query string
  61. var query = (0, _json2mq.default)({
  62. minWidth: breakpoints.slice(-1)[0]
  63. });
  64. (0, _innerSliderUtils.canUseDOM)() && this.media(query, function () {
  65. _this.setState({
  66. breakpoint: null
  67. });
  68. });
  69. }
  70. },
  71. beforeUnmount: function beforeUnmount() {
  72. this._responsiveMediaHandlers.forEach(function (obj) {
  73. obj.mql.removeListener(obj.listener);
  74. });
  75. },
  76. methods: {
  77. innerSliderRefHandler: function innerSliderRefHandler(ref) {
  78. this.innerSlider = ref;
  79. },
  80. media: function media(query, handler) {
  81. // javascript handler for css media query
  82. var mql = window.matchMedia(query);
  83. var listener = function listener(_ref) {
  84. var matches = _ref.matches;
  85. if (matches) {
  86. handler();
  87. }
  88. };
  89. mql.addListener(listener);
  90. listener(mql);
  91. this._responsiveMediaHandlers.push({
  92. mql: mql,
  93. query: query,
  94. listener: listener
  95. });
  96. },
  97. slickPrev: function slickPrev() {
  98. var _this$innerSlider;
  99. (_this$innerSlider = this.innerSlider) === null || _this$innerSlider === void 0 ? void 0 : _this$innerSlider.slickPrev();
  100. },
  101. slickNext: function slickNext() {
  102. var _this$innerSlider2;
  103. (_this$innerSlider2 = this.innerSlider) === null || _this$innerSlider2 === void 0 ? void 0 : _this$innerSlider2.slickNext();
  104. },
  105. slickGoTo: function slickGoTo(slide) {
  106. var _this$innerSlider3;
  107. var dontAnimate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  108. (_this$innerSlider3 = this.innerSlider) === null || _this$innerSlider3 === void 0 ? void 0 : _this$innerSlider3.slickGoTo(slide, dontAnimate);
  109. },
  110. slickPause: function slickPause() {
  111. var _this$innerSlider4;
  112. (_this$innerSlider4 = this.innerSlider) === null || _this$innerSlider4 === void 0 ? void 0 : _this$innerSlider4.pause('paused');
  113. },
  114. slickPlay: function slickPlay() {
  115. var _this$innerSlider5;
  116. (_this$innerSlider5 = this.innerSlider) === null || _this$innerSlider5 === void 0 ? void 0 : _this$innerSlider5.handleAutoPlay('play');
  117. }
  118. },
  119. render: function render() {
  120. var _this2 = this;
  121. var settings;
  122. var newProps;
  123. if (this.breakpoint) {
  124. newProps = this.responsive.filter(function (resp) {
  125. return resp.breakpoint === _this2.breakpoint;
  126. });
  127. settings = newProps[0].settings === 'unslick' ? 'unslick' : (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$props), newProps[0].settings);
  128. } else {
  129. settings = (0, _objectSpread2.default)({}, this.$props);
  130. }
  131. // force scrolling by one if centerMode is on
  132. if (settings.centerMode) {
  133. if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
  134. console.warn("slidesToScroll should be equal to 1 in centerMode, you are using ".concat(settings.slidesToScroll));
  135. }
  136. settings.slidesToScroll = 1;
  137. }
  138. // force showing one slide and scrolling by one if the fade mode is on
  139. if (settings.fade) {
  140. if (settings.slidesToShow > 1 && process.env.NODE_ENV !== 'production') {
  141. console.warn("slidesToShow should be equal to 1 when fade is true, you're using ".concat(settings.slidesToShow));
  142. }
  143. if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
  144. console.warn("slidesToScroll should be equal to 1 when fade is true, you're using ".concat(settings.slidesToScroll));
  145. }
  146. settings.slidesToShow = 1;
  147. settings.slidesToScroll = 1;
  148. }
  149. // makes sure that children is an array, even when there is only 1 child
  150. var children = (0, _propsUtil.getSlot)(this) || [];
  151. // Children may contain false or null, so we should filter them
  152. // children may also contain string filled with spaces (in certain cases where we use jsx strings)
  153. children = children.filter(function (child) {
  154. if (typeof child === 'string') {
  155. return !!child.trim();
  156. }
  157. return !!child;
  158. });
  159. // rows and slidesPerRow logic is handled here
  160. if (settings.variableWidth && (settings.rows > 1 || settings.slidesPerRow > 1)) {
  161. console.warn("variableWidth is not supported in case of rows > 1 or slidesPerRow > 1");
  162. settings.variableWidth = false;
  163. }
  164. var newChildren = [];
  165. var currentWidth = null;
  166. for (var i = 0; i < children.length; i += settings.rows * settings.slidesPerRow) {
  167. var newSlide = [];
  168. for (var j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) {
  169. var row = [];
  170. for (var k = j; k < j + settings.slidesPerRow; k += 1) {
  171. var _children$k$props;
  172. if (settings.variableWidth && (_children$k$props = children[k].props) !== null && _children$k$props !== void 0 && _children$k$props.style) {
  173. currentWidth = children[k].props.style.width;
  174. }
  175. if (k >= children.length) break;
  176. row.push((0, _vnode.cloneElement)(children[k], {
  177. key: 100 * i + 10 * j + k,
  178. tabindex: -1,
  179. style: {
  180. width: "".concat(100 / settings.slidesPerRow, "%"),
  181. display: 'inline-block'
  182. }
  183. }));
  184. }
  185. newSlide.push((0, _vue.createVNode)("div", {
  186. "key": 10 * i + j
  187. }, [row]));
  188. }
  189. if (settings.variableWidth) {
  190. newChildren.push((0, _vue.createVNode)("div", {
  191. "key": i,
  192. "style": {
  193. width: currentWidth
  194. }
  195. }, [newSlide]));
  196. } else {
  197. newChildren.push((0, _vue.createVNode)("div", {
  198. "key": i
  199. }, [newSlide]));
  200. }
  201. }
  202. if (settings === 'unslick') {
  203. var className = 'regular slider ' + (this.className || '');
  204. return (0, _vue.createVNode)("div", {
  205. "class": className
  206. }, [children]);
  207. } else if (newChildren.length <= settings.slidesToShow) {
  208. settings.unslick = true;
  209. }
  210. var sliderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.$attrs), settings), {}, {
  211. children: newChildren,
  212. ref: this.innerSliderRefHandler
  213. });
  214. return (0, _vue.createVNode)(_innerSlider.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sliderProps), {}, {
  215. "__propsSymbol__": []
  216. }), this.$slots);
  217. }
  218. });
  219. exports.default = _default;