diff --git a/package.json b/package.json index d157a0d..f862cf4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte-carousel", - "version": "1.0.14", + "version": "1.0.15-rc1", "description": "Svelte carousel", "main": "src/main.js", "author": "vadimkorr", diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte index 5355650..4076be6 100644 --- a/src/components/Carousel/Carousel.svelte +++ b/src/components/Carousel/Carousel.svelte @@ -13,12 +13,12 @@ removeResizeEventListener } from '../../utils/event' import { - getSizes, applyParticleSizes, getCurrentPageIndex, getPartialPageSize, getPagesCountByParticlesCount, getParticleIndexByPageIndex, + createResizeObserver, } from '../../utils/page' import { getClones, @@ -181,6 +181,22 @@ let offset = 0 let pageWindowElement let particlesContainer + + const pageWindowElementResizeObserver = createResizeObserver(({ + width, + }) => { + pageWindowWidth = width + particleWidth = pageWindowWidth / particlesToShow + + applyParticleSizes({ + particlesContainerChildren: particlesContainer.children, + particleWidth, + }) + offsetPage({ + animated: false, + }) + }) + let focused = false let progressValue @@ -211,26 +227,6 @@ particlesToScroll, }).particleIndexes - function initPageSizes() { - const sizes = getSizes({ - pageWindowElement, - particlesContainerChildren: particlesContainer.children, - particlesToShow, - }) - applyParticleSizes({ - particlesContainerChildren: particlesContainer.children, - particleWidth: sizes.particleWidth, - }) - - pageWindowWidth = sizes.pageWindowWidth - particleWidth = sizes.particleWidth - particlesCount = sizes.particlesCount - - offsetPage({ - animated: false, - }) - } - function addClones() { const { clonesToAppend, @@ -288,6 +284,7 @@ await tick() infinite && addClones() + particlesCount = particlesContainer.children.length store.init(getParticleIndexByPageIndex({ infinite, @@ -299,15 +296,13 @@ particlesToShow, })) - initPageSizes() + pageWindowElementResizeObserver.observe(pageWindowElement); } - - addResizeEventListener(initPageSizes) })() }) onDestroy(() => { - removeResizeEventListener(initPageSizes) + pageWindowElementResizeObserver.disconnect() cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn()) }) diff --git a/src/utils/event.js b/src/utils/event.js index e9314e9..0c4d9be 100644 --- a/src/utils/event.js +++ b/src/utils/event.js @@ -1,11 +1,3 @@ -// resize event -export function addResizeEventListener(cb) { - window.addEventListener('resize', cb) -} -export function removeResizeEventListener(cb) { - window.removeEventListener('resize', cb) -} - export function createDispatcher(source) { return function (event, data) { source.dispatchEvent( diff --git a/src/utils/page.js b/src/utils/page.js index 534840c..a410bd2 100644 --- a/src/utils/page.js +++ b/src/utils/page.js @@ -1,22 +1,6 @@ import { getValueInRange, } from './math' - -export function getSizes({ - pageWindowElement, - particlesContainerChildren, - particlesToShow, -}) { - const pageWindowWidth = pageWindowElement.clientWidth - const particleWidth = pageWindowWidth / particlesToShow - const particlesCount = particlesContainerChildren.length - - return { - pageWindowWidth, - particleWidth, - particlesCount, - } -} export function applyParticleSizes({ particlesContainerChildren, @@ -122,3 +106,11 @@ export function getParticleIndexByPageIndex({ particlesToShow, }) } + +export function createResizeObserver(onResize) { + return new ResizeObserver(entries => { + onResize({ + width: entries[0].contentRect.width, + }) + }); +}