123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- function Grid(_ref) {
- let {
- swiper,
- extendParams,
- on
- } = _ref;
- extendParams({
- grid: {
- rows: 1,
- fill: 'column'
- }
- });
- let slidesNumberEvenToRows;
- let slidesPerRow;
- let numFullColumns;
- let wasMultiRow;
- const getSpaceBetween = () => {
- let spaceBetween = swiper.params.spaceBetween;
- if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
- spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiper.size;
- } else if (typeof spaceBetween === 'string') {
- spaceBetween = parseFloat(spaceBetween);
- }
- return spaceBetween;
- };
- const initSlides = slides => {
- const {
- slidesPerView
- } = swiper.params;
- const {
- rows,
- fill
- } = swiper.params.grid;
- const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : slides.length;
- numFullColumns = Math.floor(slidesLength / rows);
- if (Math.floor(slidesLength / rows) === slidesLength / rows) {
- slidesNumberEvenToRows = slidesLength;
- } else {
- slidesNumberEvenToRows = Math.ceil(slidesLength / rows) * rows;
- }
- if (slidesPerView !== 'auto' && fill === 'row') {
- slidesNumberEvenToRows = Math.max(slidesNumberEvenToRows, slidesPerView * rows);
- }
- slidesPerRow = slidesNumberEvenToRows / rows;
- };
- const unsetSlides = () => {
- if (swiper.slides) {
- swiper.slides.forEach(slide => {
- if (slide.swiperSlideGridSet) {
- slide.style.height = '';
- slide.style[swiper.getDirectionLabel('margin-top')] = '';
- }
- });
- }
- };
- const updateSlide = (i, slide, slides) => {
- const {
- slidesPerGroup
- } = swiper.params;
- const spaceBetween = getSpaceBetween();
- const {
- rows,
- fill
- } = swiper.params.grid;
- const slidesLength = swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.slides.length : slides.length;
- // Set slides order
- let newSlideOrderIndex;
- let column;
- let row;
- if (fill === 'row' && slidesPerGroup > 1) {
- const groupIndex = Math.floor(i / (slidesPerGroup * rows));
- const slideIndexInGroup = i - rows * slidesPerGroup * groupIndex;
- const columnsInGroup = groupIndex === 0 ? slidesPerGroup : Math.min(Math.ceil((slidesLength - groupIndex * rows * slidesPerGroup) / rows), slidesPerGroup);
- row = Math.floor(slideIndexInGroup / columnsInGroup);
- column = slideIndexInGroup - row * columnsInGroup + groupIndex * slidesPerGroup;
- newSlideOrderIndex = column + row * slidesNumberEvenToRows / rows;
- slide.style.order = newSlideOrderIndex;
- } else if (fill === 'column') {
- column = Math.floor(i / rows);
- row = i - column * rows;
- if (column > numFullColumns || column === numFullColumns && row === rows - 1) {
- row += 1;
- if (row >= rows) {
- row = 0;
- column += 1;
- }
- }
- } else {
- row = Math.floor(i / slidesPerRow);
- column = i - row * slidesPerRow;
- }
- slide.row = row;
- slide.column = column;
- slide.style.height = `calc((100% - ${(rows - 1) * spaceBetween}px) / ${rows})`;
- slide.style[swiper.getDirectionLabel('margin-top')] = row !== 0 ? spaceBetween && `${spaceBetween}px` : '';
- slide.swiperSlideGridSet = true;
- };
- const updateWrapperSize = (slideSize, snapGrid) => {
- const {
- centeredSlides,
- roundLengths
- } = swiper.params;
- const spaceBetween = getSpaceBetween();
- const {
- rows
- } = swiper.params.grid;
- swiper.virtualSize = (slideSize + spaceBetween) * slidesNumberEvenToRows;
- swiper.virtualSize = Math.ceil(swiper.virtualSize / rows) - spaceBetween;
- if (!swiper.params.cssMode) {
- swiper.wrapperEl.style[swiper.getDirectionLabel('width')] = `${swiper.virtualSize + spaceBetween}px`;
- }
- if (centeredSlides) {
- const newSlidesGrid = [];
- for (let i = 0; i < snapGrid.length; i += 1) {
- let slidesGridItem = snapGrid[i];
- if (roundLengths) slidesGridItem = Math.floor(slidesGridItem);
- if (snapGrid[i] < swiper.virtualSize + snapGrid[0]) newSlidesGrid.push(slidesGridItem);
- }
- snapGrid.splice(0, snapGrid.length);
- snapGrid.push(...newSlidesGrid);
- }
- };
- const onInit = () => {
- wasMultiRow = swiper.params.grid && swiper.params.grid.rows > 1;
- };
- const onUpdate = () => {
- const {
- params,
- el
- } = swiper;
- const isMultiRow = params.grid && params.grid.rows > 1;
- if (wasMultiRow && !isMultiRow) {
- el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
- numFullColumns = 1;
- swiper.emitContainerClasses();
- } else if (!wasMultiRow && isMultiRow) {
- el.classList.add(`${params.containerModifierClass}grid`);
- if (params.grid.fill === 'column') {
- el.classList.add(`${params.containerModifierClass}grid-column`);
- }
- swiper.emitContainerClasses();
- }
- wasMultiRow = isMultiRow;
- };
- on('init', onInit);
- on('update', onUpdate);
- swiper.grid = {
- initSlides,
- unsetSlides,
- updateSlide,
- updateWrapperSize
- };
- }
- export { Grid as default };
|