Skip to content

Commit

Permalink
feat(core): possible to enable breakpoints based on container width (…
Browse files Browse the repository at this point in the history
…instead of window width)

fixes #4244
  • Loading branch information
nolimits4web committed Feb 23, 2021
1 parent 6678f60 commit 42db86d
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 7 deletions.
14 changes: 8 additions & 6 deletions src/components/core/breakpoints/getBreakpoint.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { getWindow } from 'ssr-window';

export default function getBreakpoints(breakpoints) {
const window = getWindow();
// Get breakpoint for window width
if (!breakpoints) return undefined;
export default function getBreakpoint(breakpoints, base = 'window', containerEl) {
if (!breakpoints || (base === 'container' && !containerEl)) return undefined;
let breakpoint = false;

const window = getWindow();
const currentWidth = base === 'window' ? window.innerWidth : containerEl.clientWidth;
const currentHeight = base === 'window' ? window.innerHeight : containerEl.clientHeight;

const points = Object.keys(breakpoints).map((point) => {
if (typeof point === 'string' && point.indexOf('@') === 0) {
const minRatio = parseFloat(point.substr(1));
const value = window.innerHeight * minRatio;
const value = currentHeight * minRatio;
return { value, point };
}
return { value: point, point };
Expand All @@ -18,7 +20,7 @@ export default function getBreakpoints(breakpoints) {
points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));
for (let i = 0; i < points.length; i += 1) {
const { point, value } = points[i];
if (value <= window.innerWidth) {
if (value <= currentWidth) {
breakpoint = point;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/core/breakpoints/setBreakpoint.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function setBreakpoint() {
if (!breakpoints || (breakpoints && Object.keys(breakpoints).length === 0)) return;

// Get breakpoint for window width and update parameters
const breakpoint = swiper.getBreakpoint(breakpoints);
const breakpoint = swiper.getBreakpoint(breakpoints, swiper.params.breakpointsBase, swiper.el);

if (breakpoint && swiper.currentBreakpoint !== breakpoint) {
const breakpointOnlyParams = breakpoint in breakpoints ? breakpoints[breakpoint] : undefined;
Expand Down
1 change: 1 addition & 0 deletions src/components/core/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export default {

// Breakpoints
breakpoints: undefined,
breakpointsBase: 'window',

// Slides grid
spaceBetween: 0,
Expand Down
9 changes: 9 additions & 0 deletions src/types/swiper-options.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -722,6 +722,15 @@ export interface SwiperOptions {
[ratio: string]: SwiperOptions;
};

/**
* Base for breakpoints (beta). Can be `window` or `container`. If set to `window` (by default) then breakpoint keys mean window width. If set to `container` then breakpoint keys treated as swiper container width
*
* @default 'window'
*
* @note Currently in beta and not supported by Swiper Angular, React, Svelte and Vue components
*/
breakpointsBase?: string;

// Observer
/**
* Set to `true` to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)
Expand Down

0 comments on commit 42db86d

Please sign in to comment.