masoneffect 2.0.12 → 2.0.14

package/dist/vue/index.mjs

@@ -1142,7 +1142,196 @@ class ScrollFadeIn {
     this.container.style.transition = "";
   }
 }
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+class TextSpin {
+  constructor(container, options) {
+    this.container = typeof container === "string" ? document.querySelector(container) : container;
+    if (!this.container) {
+      throw new Error("Container element not found");
+    }
+    if (!options.text) {
+      throw new Error("Text is required");
+    }
+    this.config = {
+      text: options.text,
+      delay: options.delay ?? 0.2,
+      duration: options.duration ?? 0.6,
+      randomDelay: options.randomDelay ?? 2,
+      threshold: options.threshold ?? 0.1,
+      rootMargin: options.rootMargin ?? "0px",
+      root: options.root ?? null,
+      triggerOnce: options.triggerOnce ?? false,
+      enabled: options.enabled ?? true,
+      onStart: options.onStart || null,
+      onComplete: options.onComplete || null
+    };
+    this.visibilityManager = null;
+    this.textElements = [];
+    this.randomPoints = [];
+    this.hasTriggered = false;
+    this.isActive = false;
+    this.init();
+  }
+  init() {
+    this.injectStyles();
+    this.createTextStructure();
+    this.setupVisibilityManager();
+  }
+  injectStyles() {
+    if (document.getElementById("masoneffect-textspin-styles")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "masoneffect-textspin-styles";
+    style.textContent = `
+      .masoneffect-textspin {
+        display: inline-block;
+      }
+      .masoneffect-textspin-char {
+        display: inline-block;
+        opacity: 0;
+        transform: rotateY(90deg);
+      }
+      .masoneffect-textspin-char.active {
+        opacity: 1;
+        transform: rotateY(0deg);
+      }
+      .masoneffect-textspin-char.space {
+        width: 0.25em;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  createTextStructure() {
+    this.container.innerHTML = "";
+    this.textElements = [];
+    this.randomPoints = [];
+    const chars = this.config.text.split("");
+    chars.forEach(() => {
+      this.randomPoints.push(Math.random());
+    });
+    chars.forEach((char, index) => {
+      const charElement = document.createElement("span");
+      charElement.className = "masoneffect-textspin-char";
+      charElement.style.transition = `opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`;
+      if (char === " ") {
+        charElement.classList.add("space");
+        charElement.innerHTML = " ";
+      } else {
+        charElement.textContent = char;
+      }
+      this.container.appendChild(charElement);
+      this.textElements.push(charElement);
+    });
+    this.container.classList.add("masoneffect-textspin");
+  }
+  setupVisibilityManager() {
+    this.visibilityManager = new VisibilityManager(this.container, {
+      threshold: this.config.threshold,
+      rootMargin: this.config.rootMargin,
+      root: this.config.root,
+      onVisible: () => {
+        if (this.config.enabled) {
+          if (!this.config.triggerOnce || !this.hasTriggered) {
+            this.hasTriggered = true;
+            this.start();
+          }
+        }
+      },
+      onHidden: () => {
+        if (this.config.enabled) {
+          this.stop();
+          if (!this.config.triggerOnce) {
+            this.hasTriggered = false;
+          }
+        }
+      }
+    });
+  }
+  start() {
+    if (this.isActive) return;
+    this.isActive = true;
+    if (this.config.onStart) {
+      this.config.onStart();
+    }
+    this.textElements.forEach((element, index) => {
+      const delay = this.config.delay + this.randomPoints[index] * this.config.randomDelay;
+      element.style.transitionDelay = `${delay}s`;
+      requestAnimationFrame(() => {
+        element.classList.add("active");
+      });
+    });
+    const maxDelay = this.config.delay + this.config.randomDelay + this.config.duration;
+    setTimeout(() => {
+      if (this.config.onComplete) {
+        this.config.onComplete();
+      }
+    }, maxDelay * 1e3);
+  }
+  stop() {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.textElements.forEach((element) => {
+      element.classList.remove("active");
+      element.style.transitionDelay = "";
+    });
+  }
+  reset() {
+    this.stop();
+    this.hasTriggered = false;
+  }
+  // 텍스트 업데이트
+  updateText(newText) {
+    this.config.text = newText;
+    this.createTextStructure();
+    if (this.isActive) {
+      this.start();
+    }
+  }
+  // 모든 문자 요소의 transition 업데이트
+  updateTransitions() {
+    this.textElements.forEach((element) => {
+      element.style.transition = `opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`;
+    });
+  }
+  // 설정 업데이트
+  updateConfig(newConfig) {
+    const wasActive = this.isActive;
+    this.stop();
+    this.config = {
+      ...this.config,
+      ...newConfig,
+      text: newConfig.text ?? this.config.text,
+      onStart: newConfig.onStart ?? this.config.onStart,
+      onComplete: newConfig.onComplete ?? this.config.onComplete
+    };
+    if (newConfig.text !== void 0) {
+      this.createTextStructure();
+    } else if (newConfig.duration !== void 0) {
+      this.updateTransitions();
+    }
+    if (newConfig.threshold !== void 0 || newConfig.rootMargin !== void 0 || newConfig.root !== void 0) {
+      if (this.visibilityManager) {
+        this.visibilityManager.destroy();
+        this.visibilityManager = null;
+      }
+      this.setupVisibilityManager();
+    }
+    if (wasActive && this.config.enabled) {
+      this.start();
+    }
+  }
+  // 파괴 및 정리
+  destroy() {
+    this.stop();
+    if (this.visibilityManager) {
+      this.visibilityManager.destroy();
+      this.visibilityManager = null;
+    }
+    this.container.innerHTML = "";
+    this.container.classList.remove("masoneffect-textspin");
+  }
+}
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "TextToParticle",
   props: {
     className: { default: "" },
@@ -1269,7 +1458,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Count",
   props: {
     className: { default: "" },
@@ -1390,7 +1579,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "Typing",
   props: {
     className: {},
@@ -1473,7 +1662,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "ScrollFadeIn",
   props: {
     className: { default: "" },
@@ -1592,11 +1781,133 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextSpin",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    onStart: { type: Function, default: null },
+    onComplete: { type: Function, default: null },
+    text: { default: "" },
+    delay: { default: 0.2 },
+    duration: { default: 0.6 },
+    randomDelay: { default: 2 },
+    threshold: { default: 0.1 },
+    rootMargin: { default: "0px" },
+    root: { default: null },
+    triggerOnce: { type: Boolean, default: false },
+    enabled: { type: Boolean, default: true }
+  },
+  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 = {
+        text: props.text,
+        delay: props.delay,
+        duration: props.duration,
+        randomDelay: props.randomDelay,
+        threshold: props.threshold,
+        rootMargin: props.rootMargin,
+        root: props.root,
+        triggerOnce: props.triggerOnce,
+        enabled: props.enabled,
+        onStart: () => {
+          if (props.onStart) props.onStart();
+          emit("start");
+        },
+        onComplete: () => {
+          if (props.onComplete) props.onComplete();
+          emit("complete");
+        }
+      };
+      instance = new TextSpin(container.value, options);
+    };
+    onMounted(() => {
+      init();
+    });
+    onBeforeUnmount(() => {
+      if (instance) {
+        instance.destroy();
+        instance = null;
+      }
+    });
+    watch(
+      () => [
+        props.text,
+        props.delay,
+        props.duration,
+        props.randomDelay,
+        props.threshold,
+        props.rootMargin,
+        props.root,
+        props.triggerOnce,
+        props.enabled,
+        props.onStart,
+        props.onComplete
+      ],
+      () => {
+        if (instance) {
+          instance.updateConfig({
+            text: props.text,
+            delay: props.delay,
+            duration: props.duration,
+            randomDelay: props.randomDelay,
+            threshold: props.threshold,
+            rootMargin: props.rootMargin,
+            root: props.root,
+            triggerOnce: props.triggerOnce,
+            enabled: props.enabled,
+            onStart: props.onStart || void 0,
+            onComplete: props.onComplete || void 0
+          });
+        }
+      },
+      { deep: true }
+    );
+    __expose({
+      start: () => {
+        if (instance) instance.start();
+      },
+      stop: () => {
+        if (instance) instance.stop();
+      },
+      reset: () => {
+        if (instance) instance.reset();
+      },
+      updateText: (text) => {
+        if (instance) instance.updateText(text);
+      },
+      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)
+      }, null, 6);
+    };
+  }
+});
 export {
-  _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
+  _sfc_main$3 as Count,
+  _sfc_main$4 as MasonEffect,
+  _sfc_main$1 as ScrollFadeIn,
+  _sfc_main as TextSpin,
+  _sfc_main$4 as TextToParticle,
+  _sfc_main$2 as Typing,
+  _sfc_main$4 as default
 };

package/dist/vue/scrollFadeIn/index.d.ts

@@ -98,6 +98,46 @@ export declare interface ScrollFadeInOptions {
     onComplete?: () => void;
 }
 
+export declare class TextSpin {
+    container: HTMLElement;
+    config: Required<Omit<TextSpinOptions, 'onStart' | 'onComplete' | 'root'>> & {
+        root: HTMLElement | null;
+        onStart: TextSpinOptions['onStart'];
+        onComplete: TextSpinOptions['onComplete'];
+    };
+    visibilityManager: VisibilityManager | null;
+    textElements: HTMLElement[];
+    randomPoints: number[];
+    hasTriggered: boolean;
+    isActive: boolean;
+    constructor(container: HTMLElement | string, options: TextSpinOptions);
+    init(): void;
+    injectStyles(): void;
+    createTextStructure(): void;
+    setupVisibilityManager(): void;
+    start(): void;
+    stop(): void;
+    reset(): void;
+    updateText(newText: string): void;
+    updateTransitions(): void;
+    updateConfig(newConfig: Partial<TextSpinOptions>): void;
+    destroy(): void;
+}
+
+export declare interface TextSpinOptions {
+    text: string;
+    delay?: number;
+    duration?: number;
+    randomDelay?: number;
+    threshold?: number;
+    rootMargin?: string;
+    root?: HTMLElement | null;
+    triggerOnce?: boolean;
+    enabled?: boolean;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+
 declare class TextToParticle {
     container: HTMLElement;
     config: Required<Omit<TextToParticleOptions, 'onReady' | 'onUpdate' | 'debounceDelay'>> & {

package/dist/vue/textSpin/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,onVisible:e.onVisible,onHidden:e.onHidden},this.intersectionObserver=null,this.visibilityChangeHandler=null,this.isVisible=!1,this.isPageVisible="undefined"==typeof document||!document.hidden,this.setupIntersectionObserver(),this.setupPageVisibility()}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void(this.isPageVisible&&this.options.onVisible&&this.options.onVisible());this.intersectionObserver=new IntersectionObserver(t=>{for(const e of t)e.target===this.container&&(e.isIntersecting?(this.isVisible=!0,this.isPageVisible&&this.options.onVisible&&this.options.onVisible()):(this.isVisible=!1,this.options.onHidden&&this.options.onHidden()))},{threshold:this.options.threshold,rootMargin:this.options.rootMargin,root:this.options.root||null}),this.intersectionObserver.observe(this.container)}setupPageVisibility(){"undefined"!=typeof document&&(this.visibilityChangeHandler=()=>{const t=this.isPageVisible;this.isPageVisible=!document.hidden,document.hidden?this.options.onHidden&&this.options.onHidden():t!==this.isPageVisible&&this.isVisible&&this.options.onVisible&&this.options.onVisible()},document.addEventListener("visibilitychange",this.visibilityChangeHandler),document.hidden&&this.isVisible&&this.options.onHidden&&this.options.onHidden())}getIsVisible(){return this.isVisible&&this.isPageVisible}updateOptions(t){this.options={...this.options,...t},this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.setupIntersectionObserver()}destroy(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityChangeHandler&&"undefined"!=typeof document&&(document.removeEventListener("visibilitychange",this.visibilityChangeHandler),this.visibilityChangeHandler=null)}}class i{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");if(!e.text)throw new Error("Text is required");this.config={text:e.text,delay:e.delay??.2,duration:e.duration??.6,randomDelay:e.randomDelay??2,threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",root:e.root??null,triggerOnce:e.triggerOnce??!1,enabled:e.enabled??!0,onStart:e.onStart||null,onComplete:e.onComplete||null},this.visibilityManager=null,this.textElements=[],this.randomPoints=[],this.hasTriggered=!1,this.isActive=!1,this.init()}init(){this.injectStyles(),this.createTextStructure(),this.setupVisibilityManager()}injectStyles(){if(document.getElementById("masoneffect-textspin-styles"))return;const t=document.createElement("style");t.id="masoneffect-textspin-styles",t.textContent="\n      .masoneffect-textspin {\n        display: inline-block;\n      }\n      .masoneffect-textspin-char {\n        display: inline-block;\n        opacity: 0;\n        transform: rotateY(90deg);\n      }\n      .masoneffect-textspin-char.active {\n        opacity: 1;\n        transform: rotateY(0deg);\n      }\n      .masoneffect-textspin-char.space {\n        width: 0.25em;\n      }\n    ",document.head.appendChild(t)}createTextStructure(){this.container.innerHTML="",this.textElements=[],this.randomPoints=[];const t=this.config.text.split("");t.forEach(()=>{this.randomPoints.push(Math.random())}),t.forEach((t,e)=>{const i=document.createElement("span");i.className="masoneffect-textspin-char",i.style.transition=`opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`," "===t?(i.classList.add("space"),i.innerHTML=" "):i.textContent=t,this.container.appendChild(i),this.textElements.push(i)}),this.container.classList.add("masoneffect-textspin")}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,root:this.config.root,onVisible:()=>{this.config.enabled&&(this.config.triggerOnce&&this.hasTriggered||(this.hasTriggered=!0,this.start()))},onHidden:()=>{this.config.enabled&&(this.stop(),this.config.triggerOnce||(this.hasTriggered=!1))}})}start(){if(this.isActive)return;this.isActive=!0,this.config.onStart&&this.config.onStart(),this.textElements.forEach((t,e)=>{const i=this.config.delay+this.randomPoints[e]*this.config.randomDelay;t.style.transitionDelay=`${i}s`,requestAnimationFrame(()=>{t.classList.add("active")})});const t=this.config.delay+this.config.randomDelay+this.config.duration;setTimeout(()=>{this.config.onComplete&&this.config.onComplete()},1e3*t)}stop(){this.isActive&&(this.isActive=!1,this.textElements.forEach(t=>{t.classList.remove("active"),t.style.transitionDelay=""}))}reset(){this.stop(),this.hasTriggered=!1}updateText(t){this.config.text=t,this.createTextStructure(),this.isActive&&this.start()}updateTransitions(){this.textElements.forEach(t=>{t.style.transition=`opacity ${this.config.duration}s ease-out, transform ${this.config.duration}s ease-out`})}updateConfig(t){const e=this.isActive;this.stop(),this.config={...this.config,...t,text:t.text??this.config.text,onStart:t.onStart??this.config.onStart,onComplete:t.onComplete??this.config.onComplete},void 0!==t.text?this.createTextStructure():void 0!==t.duration&&this.updateTransitions(),void 0===t.threshold&&void 0===t.rootMargin&&void 0===t.root||(this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.setupVisibilityManager()),e&&this.config.enabled&&this.start()}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null),this.container.innerHTML="",this.container.classList.remove("masoneffect-textspin")}}const n=t.defineComponent({__name:"TextSpin",props:{className:{default:""},style:{default:()=>({})},onStart:{type:Function,default:null},onComplete:{type:Function,default:null},text:{default:""},delay:{default:.2},duration:{default:.6},randomDelay:{default:2},threshold:{default:.1},rootMargin:{default:"0px"},root:{default:null},triggerOnce:{type:Boolean,default:!1},enabled:{type:Boolean,default:!0}},emits:["start","complete"],setup(e,{expose:n,emit:s}){const o=e,r=s,a=t.ref(null);let l=null;return t.onMounted(()=>{(()=>{if(!a.value)return;const t={text:o.text,delay:o.delay,duration:o.duration,randomDelay:o.randomDelay,threshold:o.threshold,rootMargin:o.rootMargin,root:o.root,triggerOnce:o.triggerOnce,enabled:o.enabled,onStart:()=>{o.onStart&&o.onStart(),r("start")},onComplete:()=>{o.onComplete&&o.onComplete(),r("complete")}};l=new i(a.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),t.watch(()=>[o.text,o.delay,o.duration,o.randomDelay,o.threshold,o.rootMargin,o.root,o.triggerOnce,o.enabled,o.onStart,o.onComplete],()=>{l&&l.updateConfig({text:o.text,delay:o.delay,duration:o.duration,randomDelay:o.randomDelay,threshold:o.threshold,rootMargin:o.rootMargin,root:o.root,triggerOnce:o.triggerOnce,enabled:o.enabled,onStart:o.onStart||void 0,onComplete:o.onComplete||void 0})},{deep:!0}),n({start:()=>{l&&l.start()},stop:()=>{l&&l.stop()},reset:()=>{l&&l.reset()},updateText:t=>{l&&l.updateText(t)},updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(i,n)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:a,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});exports.TextSpin=i,exports.default=n;