setBreakpoint.js 2.9 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. realIndex,
  9. initialized,
  10. params,
  11. el
  12. } = swiper;
  13. const breakpoints = params.breakpoints;
  14. if (!breakpoints || breakpoints && Object.keys(breakpoints).length === 0) return;
  15. // 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.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
  25. swiper.emitContainerClasses();
  26. } else if (!wasMultiRow && isMultiRow) {
  27. el.classList.add(`${params.containerModifierClass}grid`);
  28. if (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column' || !breakpointParams.grid.fill && params.grid.fill === 'column') {
  29. el.classList.add(`${params.containerModifierClass}grid-column`);
  30. }
  31. swiper.emitContainerClasses();
  32. }
  33. // Toggle navigation, pagination, scrollbar
  34. ['navigation', 'pagination', 'scrollbar'].forEach(prop => {
  35. if (typeof breakpointParams[prop] === 'undefined') return;
  36. const wasModuleEnabled = params[prop] && params[prop].enabled;
  37. const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
  38. if (wasModuleEnabled && !isModuleEnabled) {
  39. swiper[prop].disable();
  40. }
  41. if (!wasModuleEnabled && isModuleEnabled) {
  42. swiper[prop].enable();
  43. }
  44. });
  45. const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
  46. const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
  47. if (directionChanged && initialized) {
  48. swiper.changeDirection();
  49. }
  50. extend(swiper.params, breakpointParams);
  51. const isEnabled = swiper.params.enabled;
  52. Object.assign(swiper, {
  53. allowTouchMove: swiper.params.allowTouchMove,
  54. allowSlideNext: swiper.params.allowSlideNext,
  55. allowSlidePrev: swiper.params.allowSlidePrev
  56. });
  57. if (wasEnabled && !isEnabled) {
  58. swiper.disable();
  59. } else if (!wasEnabled && isEnabled) {
  60. swiper.enable();
  61. }
  62. swiper.currentBreakpoint = breakpoint;
  63. swiper.emit('_beforeBreakpoint', breakpointParams);
  64. if (needsReLoop && initialized) {
  65. swiper.loopDestroy();
  66. swiper.loopCreate(realIndex);
  67. swiper.updateSlides();
  68. }
  69. swiper.emit('breakpoint', breakpointParams);
  70. }