From 963f622d329568bc28fb639a6858178f3c6b8cf6 Mon Sep 17 00:00:00 2001 From: Tobias Strebitzer Date: Fri, 3 Jan 2020 11:33:51 +0800 Subject: [PATCH 1/2] Implement ratio breakpoints --- demos/381-ratio-breakpoints.html | 103 ++++++++++++++++++ .../core/breakpoints/getBreakpoint.js | 18 ++- 2 files changed, 115 insertions(+), 6 deletions(-) create mode 100644 demos/381-ratio-breakpoints.html diff --git a/demos/381-ratio-breakpoints.html b/demos/381-ratio-breakpoints.html new file mode 100644 index 000000000..b792aa214 --- /dev/null +++ b/demos/381-ratio-breakpoints.html @@ -0,0 +1,103 @@ + + + + + Swiper demo + + + + + + + + + + +
+
+
Slide 1
+
Slide 2
+
Slide 3
+
Slide 4
+
Slide 5
+
Slide 6
+
Slide 7
+
Slide 8
+
Slide 9
+
Slide 10
+
+ +
+
+ + + + + + + + diff --git a/src/components/core/breakpoints/getBreakpoint.js b/src/components/core/breakpoints/getBreakpoint.js index e7c9bfd5e..50a603059 100644 --- a/src/components/core/breakpoints/getBreakpoint.js +++ b/src/components/core/breakpoints/getBreakpoint.js @@ -4,14 +4,20 @@ export default function (breakpoints) { // Get breakpoint for window width if (!breakpoints) return undefined; let breakpoint = false; - const points = []; - Object.keys(breakpoints).forEach((point) => { - points.push(point); + + const points = Object.keys(breakpoints).map((point) => { + if (typeof point === 'string' && point.startsWith('@')) { + const minRatio = parseFloat(point.substr(1)); + const value = window.innerHeight * minRatio; + return { value, point }; + } + return point; }); - points.sort((a, b) => parseInt(a, 10) - parseInt(b, 10)); + + points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10)); for (let i = 0; i < points.length; i += 1) { - const point = points[i]; - if (point <= window.innerWidth) { + const { point, value } = points[i]; + if (value <= window.innerWidth) { breakpoint = point; } } From c3e969f11b9efa77ebc12b5595c0bbbf6b465df2 Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Sat, 11 Jan 2020 13:36:50 +0300 Subject: [PATCH 2/2] Fix usual breakpoints --- src/components/core/breakpoints/getBreakpoint.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/core/breakpoints/getBreakpoint.js b/src/components/core/breakpoints/getBreakpoint.js index 50a603059..4bde1842b 100644 --- a/src/components/core/breakpoints/getBreakpoint.js +++ b/src/components/core/breakpoints/getBreakpoint.js @@ -11,7 +11,7 @@ export default function (breakpoints) { const value = window.innerHeight * minRatio; return { value, point }; } - return point; + return { value: point, point }; }); points.sort((a, b) => parseInt(a.value, 10) - parseInt(b.value, 10));