masoneffect 2.0.4 → 2.0.6

package/dist/vue/index.mjs

@@ -1,4 +1,105 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, onUnmounted } from "vue";
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass, onUnmounted, renderSlot } from "vue";
+class VisibilityManager {
+  constructor(container, options = {}) {
+    this.container = container;
+    this.options = {
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      onVisible: options.onVisible,
+      onHidden: options.onHidden
+    };
+    this.intersectionObserver = null;
+    this.visibilityChangeHandler = null;
+    this.isVisible = false;
+    this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
+    this.setupIntersectionObserver();
+    this.setupPageVisibility();
+  }
+  setupIntersectionObserver() {
+    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
+      this.isVisible = true;
+      if (this.isPageVisible && this.options.onVisible) {
+        this.options.onVisible();
+      }
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.target !== this.container) continue;
+          if (entry.isIntersecting) {
+            this.isVisible = true;
+            if (this.isPageVisible && this.options.onVisible) {
+              this.options.onVisible();
+            }
+          } else {
+            this.isVisible = false;
+            if (this.options.onHidden) {
+              this.options.onHidden();
+            }
+          }
+        }
+      },
+      {
+        threshold: this.options.threshold,
+        rootMargin: this.options.rootMargin
+      }
+    );
+    this.intersectionObserver.observe(this.container);
+  }
+  setupPageVisibility() {
+    if (typeof document === "undefined") return;
+    this.visibilityChangeHandler = () => {
+      const wasVisible = this.isPageVisible;
+      this.isPageVisible = !document.hidden;
+      if (document.hidden) {
+        if (this.options.onHidden) {
+          this.options.onHidden();
+        }
+      } else if (wasVisible !== this.isPageVisible) {
+        if (this.isVisible && this.options.onVisible) {
+          this.options.onVisible();
+        }
+      }
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    if (document.hidden && this.isVisible) {
+      if (this.options.onHidden) {
+        this.options.onHidden();
+      }
+    }
+  }
+  /**
+   * 현재 요소가 화면에 보이는지 확인
+   */
+  getIsVisible() {
+    return this.isVisible && this.isPageVisible;
+  }
+  /**
+   * 옵션 업데이트
+   */
+  updateOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    this.setupIntersectionObserver();
+  }
+  /**
+   * 리소스 정리
+   */
+  destroy() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = null;
+    }
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+  }
+}
 function debounce(func, wait) {
   let timeout = null;
   return function executedFunction(...args) {
@@ -56,8 +157,7 @@ class TextToParticle {
     this.mouse = { x: 0, y: 0, down: false };
     this.animationId = null;
     this.isRunning = false;
-    this.isVisible = false;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.debounceDelay = options.debounceDelay ?? 150;
     const boundHandleResize = this.handleResize.bind(this);
     this.handleResize = debounce(boundHandleResize, this.debounceDelay);
@@ -72,39 +172,22 @@ class TextToParticle {
   init() {
     this.resize();
     this.setupEventListeners();
-    this.setupIntersectionObserver();
+    this.setupVisibilityManager();
     if (this.config.onReady) {
       this.config.onReady(this);
     }
   }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      this.isVisible = true;
-      this.start();
-      return;
-    }
-    if (this.intersectionObserver) {
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting) {
-            this.isVisible = true;
-            this.start();
-          } else {
-            this.isVisible = false;
-            this.stop();
-          }
-        }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: 0.1,
+      // 10% 이상 보일 때 동작
+      onVisible: () => {
+        this.start();
       },
-      {
-        threshold: 0.1
-        // 10% 이상 보일 때 동작
+      onHidden: () => {
+        this.stop();
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   resize() {
     const width = this.config.width || this.container.clientWidth || window.innerWidth;
@@ -341,7 +424,10 @@ class TextToParticle {
       p.y += p.vy;
     }
     this.ctx.fillStyle = this.config.particleColor;
-    const r = this.config.pointSize * this.DPR;
+    const baseSize = 1920;
+    const currentSize = Math.min(this.W, this.H) / this.DPR;
+    const sizeRatio = Math.max(0.5, Math.min(2, currentSize / baseSize));
+    const r = this.config.pointSize * this.DPR * sizeRatio;
     for (const p of this.particles) {
       this.ctx.beginPath();
       this.ctx.arc(p.x, p.y, r, 0, Math.PI * 2);
@@ -413,16 +499,16 @@ class TextToParticle {
   destroy() {
     this.stop();
     this.removeEventListeners();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
     if (this.canvas && this.canvas.parentNode) {
       this.canvas.parentNode.removeChild(this.canvas);
     }
   }
 }
-const easingFunctions = {
+const easingFunctions$1 = {
   linear: (t) => t
 };
 class Count {
@@ -436,7 +522,7 @@ class Count {
       duration: options.duration ?? 2e3,
       startValue: options.startValue ?? 0,
       enabled: options.enabled ?? true,
-      easing: options.easing ?? easingFunctions.linear,
+      easing: options.easing ?? easingFunctions$1.linear,
       threshold: options.threshold ?? 0.2,
       rootMargin: options.rootMargin ?? "0px 0px -100px 0px",
       triggerOnce: options.triggerOnce ?? false,
@@ -446,54 +532,31 @@ class Count {
     this.currentValue = this.config.startValue;
     this.startTime = null;
     this.animationFrameId = null;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.isRunning = false;
     this.hasTriggered = false;
     this.init();
   }
   init() {
     this.updateDisplay(this.config.startValue);
-    this.setupIntersectionObserver();
+    this.setupVisibilityManager();
   }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      if (this.config.enabled) {
-        this.start();
-      }
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        var _a;
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting) {
-            if (!this.hasTriggered && this.config.enabled) {
-              this.hasTriggered = true;
-              this.start();
-            }
-            if (this.config.triggerOnce) {
-              (_a = this.intersectionObserver) == null ? void 0 : _a.unobserve(this.container);
-            }
-          } else {
-            if (!this.config.triggerOnce) {
-              const rect = entry.boundingClientRect;
-              const viewportHeight = window.innerHeight;
-              const viewportWidth = window.innerWidth;
-              const isCompletelyOutOfViewport = rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth;
-              if (isCompletelyOutOfViewport && this.isRunning) {
-                this.reset();
-              }
-            }
-          }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          this.start();
         }
       },
-      {
-        threshold: this.config.threshold,
-        rootMargin: this.config.rootMargin
+      onHidden: () => {
+        if (!this.config.triggerOnce && this.isRunning) {
+          this.reset();
+        }
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   start() {
     if (this.isRunning) return;
@@ -577,9 +640,9 @@ class Count {
   // 파괴 및 정리
   destroy() {
     this.stop();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
   }
 }
@@ -669,44 +732,28 @@ class Typing {
     this.currentIndex = 0;
     this.displayedText = "";
     this.timeoutId = null;
-    this.intersectionObserver = null;
+    this.visibilityManager = null;
     this.isRunning = false;
     this.hasTriggered = false;
     this.init();
   }
   init() {
     this.updateDisplay("");
-    this.setupIntersectionObserver();
+    this.setupVisibilityManager();
   }
-  setupIntersectionObserver() {
-    if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
-      if (this.config.enabled) {
-        setTimeout(() => this.start(), this.config.delay);
-      }
-      return;
-    }
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        var _a;
-        for (const entry of entries) {
-          if (entry.target !== this.container) continue;
-          if (entry.isIntersecting && !this.hasTriggered) {
-            if (this.config.enabled) {
-              setTimeout(() => this.start(), this.config.delay);
-            }
-            this.hasTriggered = true;
-            if (this.config.triggerOnce) {
-              (_a = this.intersectionObserver) == null ? void 0 : _a.disconnect();
-            }
-          }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          setTimeout(() => this.start(), this.config.delay);
         }
       },
-      {
-        threshold: this.config.threshold,
-        rootMargin: this.config.rootMargin
+      onHidden: () => {
       }
-    );
-    this.intersectionObserver.observe(this.container);
+    });
   }
   // 단위들을 다시 합쳐서 실제 표시할 텍스트 생성
   // 한글의 경우 자음/모음이 하나씩 보이도록 합성
@@ -802,13 +849,236 @@ class Typing {
   }
   destroy() {
     this.stop();
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-      this.intersectionObserver = null;
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
     }
   }
 }
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const easingFunctions = {
+  easeOutCubic: (t) => --t * t * t + 1
+};
+class ScrollFadeIn {
+  // 계산된 거리 (px)
+  constructor(container, options = {}) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    this.config = {
+      direction: options.direction ?? "bottom",
+      distance: options.distance ?? "50px",
+      duration: options.duration ?? 800,
+      easing: options.easing ?? easingFunctions.easeOutCubic,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.animationFrameId = null;
+    this.startTime = null;
+    this.isRunning = false;
+    this.hasTriggered = false;
+    this.initialTransform = "";
+    this.targetDistance = 0;
+    this.init();
+  }
+  init() {
+    const computedStyle = window.getComputedStyle(this.container);
+    this.initialTransform = computedStyle.transform !== "none" ? computedStyle.transform : this.container.style.transform || "";
+    this.targetDistance = this.parseDistance(this.config.distance);
+    this.setInitialPosition();
+    this.setupVisibilityManager();
+  }
+  parseDistance(distance) {
+    const match = distance.match(/^(-?\d+\.?\d*)(px|rem|em|%|vh|vw)$/);
+    if (!match) {
+      const num = parseFloat(distance) || 50;
+      return num;
+    }
+    const value = parseFloat(match[1]);
+    const unit = match[2];
+    switch (unit) {
+      case "px":
+        return value;
+      case "rem":
+      case "em":
+        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+        return value * fontSize;
+      case "%":
+        const rect = this.container.getBoundingClientRect();
+        const dimension = this.config.direction === "top" || this.config.direction === "bottom" ? rect.height : rect.width;
+        return value / 100 * dimension;
+      case "vh":
+        return value / 100 * window.innerHeight;
+      case "vw":
+        return value / 100 * window.innerWidth;
+      default:
+        return value;
+    }
+  }
+  setInitialPosition() {
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance;
+        break;
+      case "right":
+        translateX = this.targetDistance;
+        break;
+      case "bottom":
+        translateY = this.targetDistance;
+        break;
+      case "left":
+        translateX = -this.targetDistance;
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = "0";
+    this.container.style.transition = "none";
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      onVisible: () => {
+        if (!this.hasTriggered && this.config.enabled) {
+          this.hasTriggered = true;
+          this.start();
+        }
+      },
+      onHidden: () => {
+        if (!this.config.triggerOnce && this.isRunning) {
+          this.reset();
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isRunning) return;
+    this.isRunning = true;
+    this.startTime = performance.now();
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.container.style.transition = "none";
+    this.animate();
+  }
+  animate() {
+    if (!this.isRunning) return;
+    const currentTime = performance.now();
+    const elapsed = currentTime - (this.startTime || 0);
+    const progress = Math.min(elapsed / this.config.duration, 1);
+    const easedProgress = this.config.easing(progress);
+    const direction = this.config.direction;
+    let translateX = 0;
+    let translateY = 0;
+    switch (direction) {
+      case "top":
+        translateY = -this.targetDistance * (1 - easedProgress);
+        break;
+      case "right":
+        translateX = this.targetDistance * (1 - easedProgress);
+        break;
+      case "bottom":
+        translateY = this.targetDistance * (1 - easedProgress);
+        break;
+      case "left":
+        translateX = -this.targetDistance * (1 - easedProgress);
+        break;
+    }
+    const existingTransform = this.initialTransform || "";
+    const translate = `translate(${translateX}px, ${translateY}px)`;
+    if (existingTransform && existingTransform !== "none") {
+      this.container.style.transform = `${translate} ${existingTransform}`;
+    } else {
+      this.container.style.transform = translate;
+    }
+    this.container.style.opacity = String(easedProgress);
+    if (progress < 1) {
+      this.animationFrameId = requestAnimationFrame(() => this.animate());
+    } else {
+      this.complete();
+    }
+  }
+  complete() {
+    this.isRunning = false;
+    if (this.initialTransform && this.initialTransform !== "none") {
+      this.container.style.transform = this.initialTransform;
+    } else {
+      this.container.style.transform = "";
+    }
+    this.container.style.opacity = "1";
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+    if (this.config.onComplete) {
+      this.config.onComplete();
+    }
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+    this.setInitialPosition();
+  }
+  stop() {
+    this.isRunning = false;
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasRunning = this.isRunning;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      easing: newConfig.easing ?? this.config.easing,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.distance) {
+      this.targetDistance = this.parseDistance(this.config.distance);
+    }
+    this.setInitialPosition();
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasRunning && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.style.transform = this.initialTransform || "";
+    this.container.style.opacity = "";
+    this.container.style.transition = "";
+  }
+}
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "TextToParticle",
   props: {
     className: { default: "" },
@@ -935,7 +1205,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Count",
   props: {
     className: { default: "" },
@@ -1056,7 +1326,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Typing",
   props: {
     className: {},
@@ -1139,10 +1409,130 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ScrollFadeIn",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    direction: { default: "bottom" },
+    distance: { default: "50px" },
+    duration: { default: 800 },
+    easing: { type: Function, default: () => (t) => t },
+    threshold: { default: 0.1 },
+    rootMargin: { default: "0px" },
+    triggerOnce: { type: Boolean, default: false },
+    enabled: { type: Boolean, default: true },
+    onStart: { type: Function, default: null },
+    onComplete: { type: Function, default: null }
+  },
+  emits: ["start", "complete"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const container = ref(null);
+    let instance = null;
+    const init = () => {
+      if (!container.value) return;
+      const options = {
+        direction: props.direction,
+        distance: props.distance,
+        duration: props.duration,
+        easing: props.easing,
+        threshold: props.threshold,
+        rootMargin: props.rootMargin,
+        triggerOnce: props.triggerOnce,
+        enabled: props.enabled,
+        onStart: () => {
+          if (props.onStart) props.onStart();
+          emit("start");
+        },
+        onComplete: () => {
+          if (props.onComplete) props.onComplete();
+          emit("complete");
+        }
+      };
+      instance = new ScrollFadeIn(container.value, options);
+    };
+    watch(
+      () => [
+        props.direction,
+        props.distance,
+        props.duration,
+        props.easing,
+        props.threshold,
+        props.rootMargin,
+        props.triggerOnce,
+        props.enabled
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            direction: props.direction,
+            distance: props.distance,
+            duration: props.duration,
+            easing: props.easing,
+            threshold: props.threshold,
+            rootMargin: props.rootMargin,
+            triggerOnce: props.triggerOnce,
+            enabled: props.enabled,
+            onStart: () => {
+              if (props.onStart) props.onStart();
+              emit("start");
+            },
+            onComplete: () => {
+              if (props.onComplete) props.onComplete();
+              emit("complete");
+            }
+          });
+        }
+      }
+    );
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    __expose({
+      start: () => {
+        if (instance) instance.start();
+      },
+      stop: () => {
+        if (instance) instance.stop();
+      },
+      reset: () => {
+        if (instance) instance.reset();
+      },
+      updateConfig: (config) => {
+        if (instance) instance.updateConfig(config);
+      },
+      destroy: () => {
+        if (instance) {
+          instance.destroy();
+          instance = null;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass(__props.className),
+        style: normalizeStyle(__props.style)
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
 export {
-  _sfc_main$1 as Count,
-  _sfc_main$2 as MasonEffect,
-  _sfc_main$2 as TextToParticle,
-  _sfc_main as Typing,
-  _sfc_main$2 as default
+  _sfc_main$2 as Count,
+  _sfc_main$3 as MasonEffect,
+  _sfc_main as ScrollFadeIn,
+  _sfc_main$3 as TextToParticle,
+  _sfc_main$1 as Typing,
+  _sfc_main$3 as default
 };