Skip to content

Commit

Permalink
feat(core): added support to use ResizeObserver with new "resizeObser…
Browse files Browse the repository at this point in the history
…ver" parameter

Ref #4244
  • Loading branch information
nolimits4web committed Feb 23, 2021
1 parent c3c1a69 commit 5f80052
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/components/core/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default {
speed: 300,
cssMode: false,
updateOnWindowResize: true,
resizeObserver: false,
nested: false,

// Overrides
Expand Down
38 changes: 38 additions & 0 deletions src/modules/resize/resize.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,45 @@
import { getWindow } from 'ssr-window';
import { extend } from '../../utils/utils';

const supportsResizeObserver = () => {
const window = getWindow();
return typeof window.ResizeObserver !== 'undefined';
};

export default {
name: 'resize',
create() {
const swiper = this;
extend(swiper, {
resize: {
observer: null,
createObserver() {
if (!swiper || swiper.destroyed || !swiper.initialized) return;
swiper.resize.observer = new ResizeObserver((entries) => {
const { width, height } = swiper;
let newWidth = width;
let newHeight = height;
entries.forEach(({ contentBoxSize, contentRect, target }) => {
if (target && target !== swiper.el) return;
newWidth = contentRect
? contentRect.width
: (contentBoxSize[0] || contentBoxSize).inlineSize;
newHeight = contentRect
? contentRect.height
: (contentBoxSize[0] || contentBoxSize).blockSize;
});
if (newWidth !== width || newHeight !== height) {
swiper.resize.resizeHandler();
}
});
swiper.resize.observer.observe(swiper.el);
},
removeObserver() {
if (swiper.resize.observer && swiper.resize.observer.unobserve && swiper.el) {
swiper.resize.observer.unobserve(swiper.el);
swiper.resize.observer = null;
}
},
resizeHandler() {
if (!swiper || swiper.destroyed || !swiper.initialized) return;
swiper.emit('beforeResize');
Expand All @@ -22,6 +55,10 @@ export default {
on: {
init(swiper) {
const window = getWindow();
if (swiper.params.resizeObserver && supportsResizeObserver()) {
swiper.resize.createObserver();
return;
}
// Emit resize
window.addEventListener('resize', swiper.resize.resizeHandler);

Expand All @@ -30,6 +67,7 @@ export default {
},
destroy(swiper) {
const window = getWindow();
swiper.resize.removeObserver();
window.removeEventListener('resize', swiper.resize.resizeHandler);
window.removeEventListener('orientationchange', swiper.resize.orientationChangeHandler);
},
Expand Down
7 changes: 7 additions & 0 deletions src/types/swiper-options.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,13 @@ export interface SwiperOptions {
*/
updateOnWindowResize?: boolean;

/**
* When enabled it will use ResizeObserver (if supported by browser) on swiper container to detect container resize (instead of watching for window resize)
*
* @default false
*/
resizeObserver?: boolean;

/**
* Index number of initial slide.
*
Expand Down

0 comments on commit 5f80052

Please sign in to comment.