setBreakpoint.js 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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. } // Toggle navigation, pagination, scrollbar
  33. ['navigation', 'pagination', 'scrollbar'].forEach(prop => {
  34. const wasModuleEnabled = params[prop] && params[prop].enabled;
  35. const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
  36. if (wasModuleEnabled && !isModuleEnabled) {
  37. swiper[prop].disable();
  38. }
  39. if (!wasModuleEnabled && isModuleEnabled) {
  40. swiper[prop].enable();
  41. }
  42. });
  43. const directionChanged = breakpointParams.direction && breakpointParams.direction !== params.direction;
  44. const needsReLoop = params.loop && (breakpointParams.slidesPerView !== params.slidesPerView || directionChanged);
  45. if (directionChanged && initialized) {
  46. swiper.changeDirection();
  47. }
  48. extend(swiper.params, breakpointParams);
  49. const isEnabled = swiper.params.enabled;
  50. Object.assign(swiper, {
  51. allowTouchMove: swiper.params.allowTouchMove,
  52. allowSlideNext: swiper.params.allowSlideNext,
  53. allowSlidePrev: swiper.params.allowSlidePrev
  54. });
  55. if (wasEnabled && !isEnabled) {
  56. swiper.disable();
  57. } else if (!wasEnabled && isEnabled) {
  58. swiper.enable();
  59. }
  60. swiper.currentBreakpoint = breakpoint;
  61. swiper.emit('_beforeBreakpoint', breakpointParams);
  62. if (needsReLoop && initialized) {
  63. swiper.loopDestroy();
  64. swiper.loopCreate();
  65. swiper.updateSlides();
  66. swiper.slideTo(activeIndex - loopedSlides + swiper.loopedSlides, 0, false);
  67. }
  68. swiper.emit('breakpoint', breakpointParams);
  69. }