#73 : Add resize observer

src/components/Carousel/Carousel.svelte

@@ -8,19 +8,15 @@
   import { swipeable } from '../../actions/swipeable'
   import { hoverable } from '../../actions/hoverable'
   import { tappable } from '../../actions/tappable'
-  import {
-    addResizeEventListener,
-    removeResizeEventListener
-  } from '../../utils/event'
   import {
     getAdjacentIndexes,
     getClones,
     applyClones,
-    getPageSizes,
     applyPageSizes,
     getCurrentPageIndexWithoutClones,
     getPagesCountWithoutClones,
     getOneSideClonesCount,
+    createResizeObserver,
   } from '../../utils/page'
   import { get } from '../../utils/object'
   import { ProgressManager } from '../../utils/ProgressManager'
@@ -145,6 +141,21 @@
   let pageWidth = 0
   let offset = 0
   let pageWindowElement
+
+  const pageWindowElementResizeObserver = createResizeObserver(({ width }) => {
+    pagesWindowWidth = width
+    pageWidth = width
+
+    applyPageSizes({
+      pagesContainerChildren: pagesContainer.children,
+      pageWidth,
+    })
+
+    offsetPage({
+      animated: false,
+    })
+  })
+
   let pagesContainer
   let focused = false
 
@@ -172,25 +183,6 @@
     pagesCount: pagesCountWithoutClones,
     infinite,
   })
-
-  function initPageSizes() {
-    const sizes = getPageSizes({
-      pageWindowElement,
-      pagesContainerChildren: pagesContainer.children,
-    })
-    applyPageSizes({
-      pagesContainerChildren: pagesContainer.children,
-      pageWidth: sizes.pageWidth,
-    })
-
-    pagesWindowWidth = sizes.pagesWindowWidth
-    pageWidth = sizes.pageWidth
-    pagesCount = sizes.pagesCount
- 
-    offsetPage({
-      animated: false,
-    })
-  }
   
   function addClones() {
     const {
@@ -239,17 +231,17 @@
         loaded = [0, pagesContainer.children.length - 1]
         await tick()
         infinite && addClones()
-
+        
+        pagesCount = pagesContainer.children.length
         store.init(initialPageIndex + oneSideClonesCount)
-        initPageSizes()
-      }
 
-      addResizeEventListener(initPageSizes)
+        pageWindowElementResizeObserver.observe(pageWindowElement);
+      }
     })()
   })
 
   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

@@ -105,21 +105,6 @@ export function applyClones({
   }
 }
 
-export function getPageSizes({
-  pageWindowElement,
-  pagesContainerChildren,
-}) {
-  const pagesWindowWidth = pageWindowElement.clientWidth
-  const pageWidth = pagesWindowWidth
-  const pagesCount = pagesContainerChildren.length
-
-  return {
-    pagesWindowWidth,
-    pageWidth,
-    pagesCount,
-  }
-}
-
 export function applyPageSizes({
   pagesContainerChildren,
   pageWidth,
@@ -157,3 +142,11 @@ export function getOneSideClonesCount({
 }) {
   return infinite ? 1 : 0
 }
+
+export function createResizeObserver(onResize) {
+  return new ResizeObserver(entries => {
+    onResize({
+      width: entries[0].contentRect.width,
+    })
+  });
+}