@plaidev/karte-action-sdk 1.1.111 → 1.1.112-27920647.e0d49e09

package/dist/hydrate/index.es.js

@@ -5768,9 +5768,9 @@ function instance$4($$self, $$props, $$invalidate) {
 	const dispatch = createEventDispatcher();
 
 	setContext('SLIDE', {
-		registerItem: ({ onBeforeSlide, onMount }) => {
+		registerItem: ({ onBeforeSlide, onMount, onResize }) => {
 			const id = new Date().getTime().toString();
-			$$invalidate(7, items = [...items, { id, onBeforeSlide, onMount }]);
+			$$invalidate(7, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
 			return id;
 		},
 		unregisterItem: id => {
@@ -5865,6 +5865,21 @@ function instance$4($$self, $$props, $$invalidate) {
 		previousMove = { clientX, timeStamp };
 	}
 
+	function handleResize() {
+		containerWidth = containerElement.clientWidth;
+
+		items.forEach((item, index) => {
+			item.onResize({
+				shiftCount,
+				containerElement,
+				index,
+				length: items.length
+			});
+		});
+
+		$$invalidate(8, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
+	}
+
 	function handleMoveEnd() {
 		if (!moving) return;
 		moving = false;
@@ -5941,6 +5956,12 @@ function instance$4($$self, $$props, $$invalidate) {
 		containerElement.addEventListener('touchend', handleTouchEnd);
 		containerElement.addEventListener('transitionend', handleTransitionEnd);
 
+		const containerElementResizeObserver = new ResizeObserver(() => {
+				handleResize();
+			});
+
+		containerElementResizeObserver.observe(containerElement);
+
 		// setIndex(0);
 		dispatch('mount', { itemsCount: items.length });
 
@@ -5953,6 +5974,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			containerElement.removeEventListener('touchmove', handleTouchMove);
 			containerElement.removeEventListener('touchend', handleTouchEnd);
 			containerElement.removeEventListener('transitionend', handleTransitionEnd);
+			containerElementResizeObserver.unobserve(containerElement);
 		};
 	});
 
@@ -6111,6 +6133,21 @@ function instance$3($$self, $$props, $$invalidate) {
 		onMount({ containerElement }) {
 			$$invalidate(1, itemWidth = containerElement.clientWidth);
 		},
+		// TODO: onBeforeSlideと重複するロジックをまとめる
+		onResize({ containerElement, shiftCount, index, length }) {
+			$$invalidate(1, itemWidth = containerElement.clientWidth);
+			let fixedShiftCount;
+
+			if (index - shiftCount < 0) {
+				fixedShiftCount = shiftCount - length;
+			} else if (index - shiftCount > length - 1) {
+				fixedShiftCount = shiftCount + length;
+			} else {
+				fixedShiftCount = shiftCount;
+			}
+
+			$$invalidate(2, itemTransform = -fixedShiftCount * (itemWidth ?? 0));
+		},
 		onBeforeSlide({ shiftCount, index, length }) {
 			let fixedShiftCount;
 

package/dist/index.es.js

@@ -5495,9 +5495,9 @@ function instance$4($$self, $$props, $$invalidate) {
 	const dispatch = createEventDispatcher();
 
 	setContext('SLIDE', {
-		registerItem: ({ onBeforeSlide, onMount }) => {
+		registerItem: ({ onBeforeSlide, onMount, onResize }) => {
 			const id = new Date().getTime().toString();
-			$$invalidate(7, items = [...items, { id, onBeforeSlide, onMount }]);
+			$$invalidate(7, items = [...items, { id, onBeforeSlide, onMount, onResize }]);
 			return id;
 		},
 		unregisterItem: id => {
@@ -5592,6 +5592,21 @@ function instance$4($$self, $$props, $$invalidate) {
 		previousMove = { clientX, timeStamp };
 	}
 
+	function handleResize() {
+		containerWidth = containerElement.clientWidth;
+
+		items.forEach((item, index) => {
+			item.onResize({
+				shiftCount,
+				containerElement,
+				index,
+				length: items.length
+			});
+		});
+
+		$$invalidate(8, slidePosition = containerWidth * calcPositionIndex(shiftCount, currentSlideId, items.length));
+	}
+
 	function handleMoveEnd() {
 		if (!moving) return;
 		moving = false;
@@ -5668,6 +5683,12 @@ function instance$4($$self, $$props, $$invalidate) {
 		containerElement.addEventListener('touchend', handleTouchEnd);
 		containerElement.addEventListener('transitionend', handleTransitionEnd);
 
+		const containerElementResizeObserver = new ResizeObserver(() => {
+				handleResize();
+			});
+
+		containerElementResizeObserver.observe(containerElement);
+
 		// setIndex(0);
 		dispatch('mount', { itemsCount: items.length });
 
@@ -5680,6 +5701,7 @@ function instance$4($$self, $$props, $$invalidate) {
 			containerElement.removeEventListener('touchmove', handleTouchMove);
 			containerElement.removeEventListener('touchend', handleTouchEnd);
 			containerElement.removeEventListener('transitionend', handleTransitionEnd);
+			containerElementResizeObserver.unobserve(containerElement);
 		};
 	});
 
@@ -5828,6 +5850,21 @@ function instance$3($$self, $$props, $$invalidate) {
 		onMount({ containerElement }) {
 			$$invalidate(1, itemWidth = containerElement.clientWidth);
 		},
+		// TODO: onBeforeSlideと重複するロジックをまとめる
+		onResize({ containerElement, shiftCount, index, length }) {
+			$$invalidate(1, itemWidth = containerElement.clientWidth);
+			let fixedShiftCount;
+
+			if (index - shiftCount < 0) {
+				fixedShiftCount = shiftCount - length;
+			} else if (index - shiftCount > length - 1) {
+				fixedShiftCount = shiftCount + length;
+			} else {
+				fixedShiftCount = shiftCount;
+			}
+
+			$$invalidate(2, itemTransform = -fixedShiftCount * (itemWidth ?? 0));
+		},
 		onBeforeSlide({ shiftCount, index, length }) {
 			let fixedShiftCount;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.111",
+  "version": "1.1.112-27920647.e0d49e09",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",