feat(core): move slidesPerColumn functionality to new Grid module

nolimits4web · Aug 5, 2021 · 0f1df44 · 0f1df44
1 parent 7a6258c
commit 0f1df44
Show file tree

Hide file tree

Showing 24 changed files with 226 additions and 214 deletions.
diff --git a/scripts/build-config.js b/scripts/build-config.js
@@ -20,5 +20,6 @@ module.exports = {
     'effect-coverflow',
     'thumbs',
     'free-mode',
+    'grid',
   ],
 };
diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -17,7 +17,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import Swiper from 'swiper/core';
+import Swiper from 'swiper';
 import { Observable, of, Subject } from 'rxjs';
 import { getParams } from './utils/get-params';
 import { SwiperSlideDirective } from './swiper-slide.directive';
@@ -76,8 +76,7 @@ export class SwiperComponent implements OnInit {
   @Input() breakpoints: SwiperOptions['breakpoints'];
   @Input() spaceBetween: SwiperOptions['spaceBetween'];
   @Input() slidesPerView: SwiperOptions['slidesPerView'];
-  @Input() slidesPerColumn: SwiperOptions['slidesPerColumn'];
-  @Input() slidesPerColumnFill: SwiperOptions['slidesPerColumnFill'];
+  @Input() grid: SwiperOptions['grid'];
   @Input() slidesPerGroup: SwiperOptions['slidesPerGroup'];
   @Input() slidesPerGroupSkip: SwiperOptions['slidesPerGroupSkip'];
   @Input() centeredSlides: SwiperOptions['centeredSlides'];

diff --git a/src/angular/src/utils/params-list.ts b/src/angular/src/utils/params-list.ts
@@ -25,8 +25,7 @@ export const paramsList = [
   'breakpoints',
   '_spaceBetween',
   '_slidesPerView',
-  '_slidesPerColumn',
-  '_slidesPerColumnFill',
+  '_grid',
   '_slidesPerGroup',
   '_slidesPerGroupSkip',
   '_centeredSlides',

diff --git a/src/core/breakpoints/setBreakpoint.js b/src/core/breakpoints/setBreakpoint.js
@@ -1,5 +1,9 @@
 import { extend } from '../../shared/utils.js';
 
+const isGridEnabled = (swiper, params) => {
+  return swiper.grid && params.grid && params.grid.rows > 1;
+};
+
 export default function setBreakpoint() {
   const swiper = this;
   const { activeIndex, initialized, loopedSlides = 0, params, $el } = swiper;
@@ -12,44 +16,24 @@ export default function setBreakpoint() {
   if (!breakpoint || swiper.currentBreakpoint === breakpoint) return;
 
   const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
-  if (breakpointOnlyParams) {
-    [
-      'slidesPerView',
-      'spaceBetween',
-      'slidesPerGroup',
-      'slidesPerGroupSkip',
-      'slidesPerColumn',
-    ].forEach((param) => {
-      const paramValue = breakpointOnlyParams[param];
-      if (typeof paramValue === 'undefined') return;
-      if (param === 'slidesPerView' && (paramValue === 'AUTO' || paramValue === 'auto')) {
-        breakpointOnlyParams[param] = 'auto';
-      } else if (param === 'slidesPerView') {
-        breakpointOnlyParams[param] = parseFloat(paramValue);
-      } else {
-        breakpointOnlyParams[param] = parseInt(paramValue, 10);
-      }
-    });
-  }
-
   const breakpointParams = breakpointOnlyParams || swiper.originalParams;
-  const wasMultiRow = params.slidesPerColumn > 1;
-  const isMultiRow = breakpointParams.slidesPerColumn > 1;
+  const wasMultiRow = isGridEnabled(swiper, params);
+  const isMultiRow = isGridEnabled(swiper, breakpointParams);
 
   const wasEnabled = params.enabled;
 
   if (wasMultiRow && !isMultiRow) {
     $el.removeClass(
-      `${params.containerModifierClass}multirow ${params.containerModifierClass}multirow-column`,
+      `${params.containerModifierClass}grid ${params.containerModifierClass}grid-column`,
     );
     swiper.emitContainerClasses();
   } else if (!wasMultiRow && isMultiRow) {
-    $el.addClass(`${params.containerModifierClass}multirow`);
+    $el.addClass(`${params.containerModifierClass}grid`);
     if (
-      (breakpointParams.slidesPerColumnFill && breakpointParams.slidesPerColumnFill === 'column') ||
-      (!breakpointParams.slidesPerColumnFill && params.slidesPerColumnFill === 'column')
+      (breakpointParams.grid.fill && breakpointParams.grid.fill === 'column') ||
+      (!breakpointParams.grid.fill && params.grid.fill === 'column')
     ) {
-      $el.addClass(`${params.containerModifierClass}multirow-column`);
+      $el.addClass(`${params.containerModifierClass}grid-column`);
     }
     swiper.emitContainerClasses();
   }

diff --git a/src/core/classes/addClasses.js b/src/core/classes/addClasses.js
@@ -25,8 +25,8 @@ export default function addClasses() {
     { 'free-mode': swiper.params.freeMode && params.freeMode.enabled },
     { 'autoheight': params.autoHeight },
     { 'rtl': rtl },
-    { 'multirow': params.slidesPerColumn > 1 },
-    { 'multirow-column': params.slidesPerColumn > 1 && params.slidesPerColumnFill === 'column' },
+    { 'grid': params.grid && params.grid.rows > 1 },
+    { 'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column' },
     { 'android': device.android },
     { 'ios': device.ios },
     { 'css-mode': params.cssMode },

diff --git a/src/core/core.less b/src/core/core.less
@@ -27,13 +27,6 @@
 .swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
-.swiper-container-multirow > .swiper-wrapper {
-  flex-wrap: wrap;
-}
-.swiper-container-multirow-column > .swiper-wrapper {
-  flex-wrap: wrap;
-  flex-direction: column;
-}
 
 .swiper-container-pointer-events {
   touch-action: pan-y;

diff --git a/src/core/core.scss b/src/core/core.scss
@@ -27,13 +27,6 @@
 .swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
-.swiper-container-multirow > .swiper-wrapper {
-  flex-wrap: wrap;
-}
-.swiper-container-multirow-column > .swiper-wrapper {
-  flex-wrap: wrap;
-  flex-direction: column;
-}
 .swiper-container-pointer-events {
   touch-action: pan-y;
   &.swiper-container-vertical {

diff --git a/src/core/defaults.js b/src/core/defaults.js
@@ -46,8 +46,6 @@ export default {
   // Slides grid
   spaceBetween: 0,
   slidesPerView: 1,
-  slidesPerColumn: 1,
-  slidesPerColumnFill: 'column',
   slidesPerGroup: 1,
   slidesPerGroupSkip: 0,
   centeredSlides: false,

diff --git a/src/core/slide/slideTo.js b/src/core/slide/slideTo.js
@@ -75,21 +75,21 @@ export default function slideTo(
   if (params.normalizeSlideIndex) {
     for (let i = 0; i < slidesGrid.length; i += 1) {
       const normalizedTranslate = -Math.floor(translate * 100);
-      const normalizedGird = Math.floor(slidesGrid[i] * 100);
+      const normalizedGrid = Math.floor(slidesGrid[i] * 100);
       const normalizedGridNext = Math.floor(slidesGrid[i + 1] * 100);
       if (typeof slidesGrid[i + 1] !== 'undefined') {
         if (
-          normalizedTranslate >= normalizedGird &&
-          normalizedTranslate < normalizedGridNext - (normalizedGridNext - normalizedGird) / 2
+          normalizedTranslate >= normalizedGrid &&
+          normalizedTranslate < normalizedGridNext - (normalizedGridNext - normalizedGrid) / 2
         ) {
           slideIndex = i;
         } else if (
-          normalizedTranslate >= normalizedGird &&
+          normalizedTranslate >= normalizedGrid &&
           normalizedTranslate < normalizedGridNext
         ) {
           slideIndex = i + 1;
         }
-      } else if (normalizedTranslate >= normalizedGird) {
+      } else if (normalizedTranslate >= normalizedGrid) {
         slideIndex = i;
       }
     }

diff --git a/src/core/update/updateSlides.js b/src/core/update/updateSlides.js
@@ -61,77 +61,19 @@ export default function updateSlides() {
   if (rtl) slides.css({ marginLeft: '', marginBottom: '', marginTop: '' });
   else slides.css({ marginRight: '', marginBottom: '', marginTop: '' });
 
-  let slidesNumberEvenToRows;
-  if (params.slidesPerColumn > 1) {
-    if (
-      Math.floor(slidesLength / params.slidesPerColumn) ===
-      slidesLength / swiper.params.slidesPerColumn
-    ) {
-      slidesNumberEvenToRows = slidesLength;
-    } else {
-      slidesNumberEvenToRows =
-        Math.ceil(slidesLength / params.slidesPerColumn) * params.slidesPerColumn;
-    }
-    if (params.slidesPerView !== 'auto' && params.slidesPerColumnFill === 'row') {
-      slidesNumberEvenToRows = Math.max(
-        slidesNumberEvenToRows,
-        params.slidesPerView * params.slidesPerColumn,
-      );
-    }
+  const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
+  if (gridEnabled) {
+    swiper.grid.initSlides(slidesLength);
   }
 
   // Calc slides
   let slideSize;
-  const slidesPerColumn = params.slidesPerColumn;
-  const slidesPerRow = slidesNumberEvenToRows / slidesPerColumn;
-  const numFullColumns = Math.floor(slidesLength / params.slidesPerColumn);
+
   for (let i = 0; i < slidesLength; i += 1) {
     slideSize = 0;
     const slide = slides.eq(i);
-    if (params.slidesPerColumn > 1) {
-      // Set slides order
-      let newSlideOrderIndex;
-      let column;
-      let row;
-      if (params.slidesPerColumnFill === 'row' && params.slidesPerGroup > 1) {
-        const groupIndex = Math.floor(i / (params.slidesPerGroup * params.slidesPerColumn));
-        const slideIndexInGroup = i - params.slidesPerColumn * params.slidesPerGroup * groupIndex;
-        const columnsInGroup =
-          groupIndex === 0
-            ? params.slidesPerGroup
-            : Math.min(
-                Math.ceil(
-                  (slidesLength - groupIndex * slidesPerColumn * params.slidesPerGroup) /
-                    slidesPerColumn,
-                ),
-                params.slidesPerGroup,
-              );
-        row = Math.floor(slideIndexInGroup / columnsInGroup);
-        column = slideIndexInGroup - row * columnsInGroup + groupIndex * params.slidesPerGroup;
-
-        newSlideOrderIndex = column + (row * slidesNumberEvenToRows) / slidesPerColumn;
-        slide.css({
-          '-webkit-order': newSlideOrderIndex,
-          order: newSlideOrderIndex,
-        });
-      } else if (params.slidesPerColumnFill === 'column') {
-        column = Math.floor(i / slidesPerColumn);
-        row = i - column * slidesPerColumn;
-        if (column > numFullColumns || (column === numFullColumns && row === slidesPerColumn - 1)) {
-          row += 1;
-          if (row >= slidesPerColumn) {
-            row = 0;
-            column += 1;
-          }
-        }
-      } else {
-        row = Math.floor(i / slidesPerRow);
-        column = i - row * slidesPerRow;
-      }
-      slide.css(
-        getDirectionLabel('margin-top'),
-        row !== 0 ? params.spaceBetween && `${params.spaceBetween}px` : '',
-      );
+    if (gridEnabled) {
+      swiper.grid.updateSlide(i, slide, slidesLength, getDirectionLabel);
     }
     if (slide.css('display') === 'none') continue; // eslint-disable-line
 
@@ -216,7 +158,6 @@ export default function updateSlides() {
     index += 1;
   }
   swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
-  let newSlidesGrid;
 
   if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
     $wrapperEl.css({ width: `${swiper.virtualSize + params.spaceBetween}px` });
@@ -227,27 +168,13 @@ export default function updateSlides() {
     });
   }
 
-  if (params.slidesPerColumn > 1) {
-    swiper.virtualSize = (slideSize + params.spaceBetween) * slidesNumberEvenToRows;
-    swiper.virtualSize =
-      Math.ceil(swiper.virtualSize / params.slidesPerColumn) - params.spaceBetween;
-    $wrapperEl.css({
-      [getDirectionLabel('width')]: `${swiper.virtualSize + params.spaceBetween}px`,
-    });
-    if (params.centeredSlides) {
-      newSlidesGrid = [];
-      for (let i = 0; i < snapGrid.length; i += 1) {
-        let slidesGridItem = snapGrid[i];
-        if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);
-        if (snapGrid[i] < swiper.virtualSize + snapGrid[0]) newSlidesGrid.push(slidesGridItem);
-      }
-      snapGrid = newSlidesGrid;
-    }
+  if (gridEnabled) {
+    swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
   }
 
   // Remove last grid elements depending on width
   if (!params.centeredSlides) {
-    newSlidesGrid = [];
+    const newSlidesGrid = [];
     for (let i = 0; i < snapGrid.length; i += 1) {
       let slidesGridItem = snapGrid[i];
       if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);

diff --git a/src/modules/effect-cube/effect-cube.js b/src/modules/effect-cube/effect-cube.js
@@ -166,7 +166,6 @@ export default function Cube({ swiper, extendParams, on }) {
     swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
     const overwriteParams = {
       slidesPerView: 1,
-      slidesPerColumn: 1,
       slidesPerGroup: 1,
       watchSlidesProgress: true,
       resistanceRatio: 0,

diff --git a/src/modules/effect-fade/effect-fade.js b/src/modules/effect-fade/effect-fade.js
@@ -50,7 +50,6 @@ export default function Fade({ swiper, extendParams, on }) {
     swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
     const overwriteParams = {
       slidesPerView: 1,
-      slidesPerColumn: 1,
       slidesPerGroup: 1,
       watchSlidesProgress: true,
       spaceBetween: 0,

diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -91,7 +91,6 @@ export default function Flip({ swiper, extendParams, on }) {
     swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
     const overwriteParams = {
       slidesPerView: 1,
-      slidesPerColumn: 1,
       slidesPerGroup: 1,
       watchSlidesProgress: true,
       spaceBetween: 0,