@adstage/web-sdk 2.2.2 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs.js +28 -1
  2. package/dist/index.esm.js +28 -1
  3. package/dist/index.standalone.js +28 -1
  4. package/package.json +2 -2
  5. package/src/managers/ads/carousel-slider-manager.ts +31 -1
package/dist/index.cjs.js CHANGED
@@ -916,7 +916,7 @@ class CarouselSliderManager {
916
916
  let currentSlide = 0;
917
917
  const totalSlides = advertisements.length;
918
918
  const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
919
- // 슬라이드 이동 함수 (무한 루프 지원)
919
+ // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
920
920
  const moveToSlide = (index, instant = false) => {
921
921
  currentSlide = index;
922
922
  // 애니메이션 임시 비활성화 (무한 루프용)
@@ -928,6 +928,33 @@ class CarouselSliderManager {
928
928
  }
929
929
  // 항상 퍼센트 기반으로 이동
930
930
  slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
931
+ // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
932
+ if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
933
+ const currentSlideElement = slideContainer.children[currentSlide];
934
+ if (currentSlideElement) {
935
+ const currentAdElement = currentSlideElement.children[0];
936
+ if (currentAdElement) {
937
+ // 이미지 요소 찾기
938
+ const imgElement = currentAdElement.querySelector('img');
939
+ if (imgElement) {
940
+ // 이미지 로드 완료 후 높이 조정
941
+ const adjustHeight = () => {
942
+ const imgHeight = imgElement.getBoundingClientRect().height;
943
+ if (imgHeight > 0) {
944
+ sliderWrapper.style.height = `${imgHeight}px`;
945
+ sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
946
+ }
947
+ };
948
+ if (imgElement.complete && imgElement.naturalHeight > 0) {
949
+ adjustHeight();
950
+ }
951
+ else {
952
+ imgElement.addEventListener('load', adjustHeight, { once: true });
953
+ }
954
+ }
955
+ }
956
+ }
957
+ }
931
958
  // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
932
959
  const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
933
960
  if (dotContainer) {
package/dist/index.esm.js CHANGED
@@ -914,7 +914,7 @@ class CarouselSliderManager {
914
914
  let currentSlide = 0;
915
915
  const totalSlides = advertisements.length;
916
916
  const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
917
- // 슬라이드 이동 함수 (무한 루프 지원)
917
+ // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
918
918
  const moveToSlide = (index, instant = false) => {
919
919
  currentSlide = index;
920
920
  // 애니메이션 임시 비활성화 (무한 루프용)
@@ -926,6 +926,33 @@ class CarouselSliderManager {
926
926
  }
927
927
  // 항상 퍼센트 기반으로 이동
928
928
  slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
929
+ // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
930
+ if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
931
+ const currentSlideElement = slideContainer.children[currentSlide];
932
+ if (currentSlideElement) {
933
+ const currentAdElement = currentSlideElement.children[0];
934
+ if (currentAdElement) {
935
+ // 이미지 요소 찾기
936
+ const imgElement = currentAdElement.querySelector('img');
937
+ if (imgElement) {
938
+ // 이미지 로드 완료 후 높이 조정
939
+ const adjustHeight = () => {
940
+ const imgHeight = imgElement.getBoundingClientRect().height;
941
+ if (imgHeight > 0) {
942
+ sliderWrapper.style.height = `${imgHeight}px`;
943
+ sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
944
+ }
945
+ };
946
+ if (imgElement.complete && imgElement.naturalHeight > 0) {
947
+ adjustHeight();
948
+ }
949
+ else {
950
+ imgElement.addEventListener('load', adjustHeight, { once: true });
951
+ }
952
+ }
953
+ }
954
+ }
955
+ }
929
956
  // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
930
957
  const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
931
958
  if (dotContainer) {
package/dist/index.standalone.js CHANGED
@@ -914,7 +914,7 @@ class CarouselSliderManager {
914
914
  let currentSlide = 0;
915
915
  const totalSlides = advertisements.length;
916
916
  const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
917
- // 슬라이드 이동 함수 (무한 루프 지원)
917
+ // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
918
918
  const moveToSlide = (index, instant = false) => {
919
919
  currentSlide = index;
920
920
  // 애니메이션 임시 비활성화 (무한 루프용)
@@ -926,6 +926,33 @@ class CarouselSliderManager {
926
926
  }
927
927
  // 항상 퍼센트 기반으로 이동
928
928
  slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
929
+ // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
930
+ if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
931
+ const currentSlideElement = slideContainer.children[currentSlide];
932
+ if (currentSlideElement) {
933
+ const currentAdElement = currentSlideElement.children[0];
934
+ if (currentAdElement) {
935
+ // 이미지 요소 찾기
936
+ const imgElement = currentAdElement.querySelector('img');
937
+ if (imgElement) {
938
+ // 이미지 로드 완료 후 높이 조정
939
+ const adjustHeight = () => {
940
+ const imgHeight = imgElement.getBoundingClientRect().height;
941
+ if (imgHeight > 0) {
942
+ sliderWrapper.style.height = `${imgHeight}px`;
943
+ sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
944
+ }
945
+ };
946
+ if (imgElement.complete && imgElement.naturalHeight > 0) {
947
+ adjustHeight();
948
+ }
949
+ else {
950
+ imgElement.addEventListener('load', adjustHeight, { once: true });
951
+ }
952
+ }
953
+ }
954
+ }
955
+ }
929
956
  // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
930
957
  const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
931
958
  if (dotContainer) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@adstage/web-sdk",
3
- "version": "2.2.2",
4
- "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, centered image positioning, and user-defined size support",
3
+ "version": "2.2.3",
4
+ "description": "AdStage Web SDK - Production-ready marketing platform SDK with auto-initialization, dynamic sizing, centered image positioning, user-defined size support, and adaptive height adjustment",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.esm.js",
package/src/managers/ads/carousel-slider-manager.ts CHANGED
@@ -184,7 +184,7 @@ export class CarouselSliderManager {
184
184
  const totalSlides = advertisements.length;
185
185
  const autoSlideInterval = (options?.autoSlideInterval || 3) * 1000; // 기본 3초
186
186
 
187
- // 슬라이드 이동 함수 (무한 루프 지원)
187
+ // 슬라이드 이동 함수 (무한 루프 지원 + 동적 높이 조정)
188
188
  const moveToSlide = (index: number, instant = false) => {
189
189
  currentSlide = index;
190
190
 
@@ -198,6 +198,36 @@ export class CarouselSliderManager {
198
198
  // 항상 퍼센트 기반으로 이동
199
199
  slideContainer.style.transform = `translateX(-${(100 / extendedAds.length) * currentSlide}%)`;
200
200
 
201
+ // 🆕 동적 높이 조정: 현재 슬라이드의 이미지 높이에 맞춰 컨테이너 높이 조정
202
+ if (!instant && !slot.height && !slot.width) { // 사용자가 크기를 지정하지 않은 경우에만
203
+ const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
204
+ const currentSlideElement = slideContainer.children[currentSlide] as HTMLElement;
205
+
206
+ if (currentSlideElement) {
207
+ const currentAdElement = currentSlideElement.children[0] as HTMLElement;
208
+ if (currentAdElement) {
209
+ // 이미지 요소 찾기
210
+ const imgElement = currentAdElement.querySelector('img');
211
+ if (imgElement) {
212
+ // 이미지 로드 완료 후 높이 조정
213
+ const adjustHeight = () => {
214
+ const imgHeight = imgElement.getBoundingClientRect().height;
215
+ if (imgHeight > 0) {
216
+ sliderWrapper.style.height = `${imgHeight}px`;
217
+ sliderWrapper.style.transition = instant ? 'none' : 'height 0.4s ease-out';
218
+ }
219
+ };
220
+
221
+ if (imgElement.complete && imgElement.naturalHeight > 0) {
222
+ adjustHeight();
223
+ } else {
224
+ imgElement.addEventListener('load', adjustHeight, { once: true });
225
+ }
226
+ }
227
+ }
228
+ }
229
+ }
230
+
201
231
  // 도트 업데이트 (무채색 스타일) - 실제 광고 인덱스 기준, 텍스트 광고가 아닐 때만
202
232
  const actualIndex = currentSlide === totalSlides ? 0 : currentSlide;
203
233
  if (dotContainer) {