Merge branch 'main' into feature/#69_Add-pages-to-show-pages-to-scroll

# Conflicts:
#	src/components/Carousel/Carousel.svelte
#	src/utils/page.js

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())
   })
 

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(

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,
+    })
+  });
+}