setBreakpoint.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { extend } from '../../shared/utils.js';
  2. const isGridEnabled = (swiper, params) => {
  3. return swiper.grid && params.grid && params.grid.rows > 1;
  4. };
  5. export default function setBreakpoint() {
  6. const swiper = this;
  7. const {
  8. activeIndex,
  9. initialized,
  10. loopedSlides = 0,
  11. params,
  12. $el
  13. } = swiper;
  14. const breakpoints = params.breakpoints;
  15. if (!breakpoints || breakpoints && Object.keys(breakpoints).length === 0) return; // Get breakpoint for window width and update parameters
  16. const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);
  17. if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
  18. const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
  19. const breakpointParams = breakpointOnlyParams || swiper.originalParams;
  20. const wasMultiRow = isGridEnabled(swiper, params);
  21. const isMultiRow = isGridEnabled(swiper, breakpointParams);
  22. const wasEnabled = params.enabled;
  23. if (wasMultiRow && !isMultiRow) {
  24. $el.removeClass(`${params.containerModifierClass}grid ${params.containerModifierClass}grid-column`);
  25. swiper.emitContainerClasses();
  26. } else if (!wasMultiRow && isMultiRow) {
  27. $el.addClass(`${params.containerModifierClass}grid`);
  28. if (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column' || !breakpointParams.grid.fill && params.grid.fill === 'column') {
  29. $el.addClass(`${params.containerModifierClass}grid-column`);
  30. }
  31. swiper.emitContainerClasses();
  32. }
  33. const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
  34. const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
  35. if (directionChanged && initialized) {
  36. swiper.changeDirection();
  37. }
  38. extend(swiper.params, breakpointParams);
  39. const isEnabled = swiper.params.enabled;
  40. Object.assign(swiper, {
  41. allowTouchMove: swiper.params.allowTouchMove,
  42. allowSlideNext: swiper.params.allowSlideNext,
  43. allowSlidePrev: swiper.params.allowSlidePrev
  44. });
  45. if (wasEnabled && !isEnabled) {
  46. swiper.disable();
  47. } else if (!wasEnabled && isEnabled) {
  48. swiper.enable();
  49. }
  50. swiper.currentBreakpoint = breakpoint;
  51. swiper.emit('_beforeBreakpoint', breakpointParams);
  52. if (needsReLoop && initialized) {
  53. swiper.loopDestroy();
  54. swiper.loopCreate();
  55. swiper.updateSlides();
  56. swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
  57. }
  58. swiper.emit('breakpoint', breakpointParams);
  59. }