masoneffect 2.0.3 → 2.0.5

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 (101) hide show
  1. package/README.md +2 -2
  2. package/dist/core/count/index.d.ts +3 -2
  3. package/dist/core/count/index.d.ts.map +1 -1
  4. package/dist/core/textToParticle/index.d.ts +3 -3
  5. package/dist/core/textToParticle/index.d.ts.map +1 -1
  6. package/dist/core/typing/index.d.ts +8 -6
  7. package/dist/core/typing/index.d.ts.map +1 -1
  8. package/dist/core/utils/visibilityManager.d.ts +35 -0
  9. package/dist/core/utils/visibilityManager.d.ts.map +1 -0
  10. package/dist/count/core/count/index.d.ts +3 -2
  11. package/dist/count/core/count/index.d.ts.map +1 -1
  12. package/dist/count/core/textToParticle/index.d.ts +3 -3
  13. package/dist/count/core/textToParticle/index.d.ts.map +1 -1
  14. package/dist/count/core/typing/index.d.ts +8 -6
  15. package/dist/count/core/typing/index.d.ts.map +1 -1
  16. package/dist/count/core/utils/visibilityManager.d.ts +35 -0
  17. package/dist/count/core/utils/visibilityManager.d.ts.map +1 -0
  18. package/dist/count/index.cjs +1 -1
  19. package/dist/count/index.mjs +1 -1
  20. package/dist/index.cjs +1 -1
  21. package/dist/index.mjs +1 -1
  22. package/dist/index.umd.min.js +1 -1
  23. package/dist/react/core/count/index.d.ts +3 -2
  24. package/dist/react/core/textToParticle/index.d.ts +3 -3
  25. package/dist/react/core/typing/index.d.ts +8 -6
  26. package/dist/react/core/utils/visibilityManager.d.ts +34 -0
  27. package/dist/react/count/core/count/index.d.ts +3 -2
  28. package/dist/react/count/core/count/index.d.ts.map +1 -1
  29. package/dist/react/count/core/textToParticle/index.d.ts +3 -3
  30. package/dist/react/count/core/textToParticle/index.d.ts.map +1 -1
  31. package/dist/react/count/core/typing/index.d.ts +8 -6
  32. package/dist/react/count/core/typing/index.d.ts.map +1 -1
  33. package/dist/react/count/core/utils/visibilityManager.d.ts +35 -0
  34. package/dist/react/count/core/utils/visibilityManager.d.ts.map +1 -0
  35. package/dist/react/count/index.cjs +1 -1
  36. package/dist/react/count/index.mjs +1 -1
  37. package/dist/react/textToParticle/core/count/index.d.ts +3 -2
  38. package/dist/react/textToParticle/core/count/index.d.ts.map +1 -1
  39. package/dist/react/textToParticle/core/textToParticle/index.d.ts +3 -3
  40. package/dist/react/textToParticle/core/textToParticle/index.d.ts.map +1 -1
  41. package/dist/react/textToParticle/core/typing/index.d.ts +8 -6
  42. package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
  43. package/dist/react/textToParticle/core/utils/visibilityManager.d.ts +35 -0
  44. package/dist/react/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
  45. package/dist/react/textToParticle/index.cjs +1 -1
  46. package/dist/react/textToParticle/index.mjs +1 -1
  47. package/dist/react/typing/core/count/index.d.ts +3 -2
  48. package/dist/react/typing/core/count/index.d.ts.map +1 -1
  49. package/dist/react/typing/core/textToParticle/index.d.ts +3 -3
  50. package/dist/react/typing/core/textToParticle/index.d.ts.map +1 -1
  51. package/dist/react/typing/core/typing/index.d.ts +8 -6
  52. package/dist/react/typing/core/typing/index.d.ts.map +1 -1
  53. package/dist/react/typing/core/utils/visibilityManager.d.ts +35 -0
  54. package/dist/react/typing/core/utils/visibilityManager.d.ts.map +1 -0
  55. package/dist/react/typing/index.cjs +1 -1
  56. package/dist/react/typing/index.mjs +1 -1
  57. package/dist/svelte/count/index.cjs +1 -1
  58. package/dist/svelte/count/index.d.ts +46 -32
  59. package/dist/svelte/count/index.mjs +120 -42
  60. package/dist/svelte/index.cjs +1 -1
  61. package/dist/svelte/index.d.ts +46 -32
  62. package/dist/svelte/index.mjs +211 -160
  63. package/dist/svelte/textToParticle/index.cjs +1 -1
  64. package/dist/svelte/textToParticle/index.d.ts +46 -32
  65. package/dist/svelte/textToParticle/index.mjs +119 -33
  66. package/dist/svelte/typing/index.cjs +1 -1
  67. package/dist/svelte/typing/index.d.ts +46 -32
  68. package/dist/svelte/typing/index.mjs +174 -85
  69. package/dist/textToParticle/core/count/index.d.ts +3 -2
  70. package/dist/textToParticle/core/count/index.d.ts.map +1 -1
  71. package/dist/textToParticle/core/textToParticle/index.d.ts +3 -3
  72. package/dist/textToParticle/core/textToParticle/index.d.ts.map +1 -1
  73. package/dist/textToParticle/core/typing/index.d.ts +8 -6
  74. package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
  75. package/dist/textToParticle/core/utils/visibilityManager.d.ts +35 -0
  76. package/dist/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
  77. package/dist/textToParticle/index.cjs +1 -1
  78. package/dist/textToParticle/index.mjs +1 -1
  79. package/dist/typing/core/count/index.d.ts +3 -2
  80. package/dist/typing/core/count/index.d.ts.map +1 -1
  81. package/dist/typing/core/textToParticle/index.d.ts +3 -3
  82. package/dist/typing/core/textToParticle/index.d.ts.map +1 -1
  83. package/dist/typing/core/typing/index.d.ts +8 -6
  84. package/dist/typing/core/typing/index.d.ts.map +1 -1
  85. package/dist/typing/core/utils/visibilityManager.d.ts +35 -0
  86. package/dist/typing/core/utils/visibilityManager.d.ts.map +1 -0
  87. package/dist/typing/index.cjs +1 -1
  88. package/dist/typing/index.mjs +1 -1
  89. package/dist/vue/count/index.cjs +1 -1
  90. package/dist/vue/count/index.d.ts +46 -32
  91. package/dist/vue/count/index.mjs +119 -41
  92. package/dist/vue/index.cjs +1 -1
  93. package/dist/vue/index.d.ts +46 -32
  94. package/dist/vue/index.mjs +209 -158
  95. package/dist/vue/textToParticle/index.cjs +1 -1
  96. package/dist/vue/textToParticle/index.d.ts +46 -32
  97. package/dist/vue/textToParticle/index.mjs +119 -33
  98. package/dist/vue/typing/index.cjs +1 -1
  99. package/dist/vue/typing/index.d.ts +46 -32
  100. package/dist/vue/typing/index.mjs +173 -84
  101. package/package.json +1 -1
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { TextToParticle } from 'masoneffect/textToParticle';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface TextToParticleOptions {
9
10
  text?: string;
10
11
  densityStep?: number;
@@ -55,14 +56,13 @@ export declare class TextToParticle {
55
56
  };
56
57
  animationId: number | null;
57
58
  isRunning: boolean;
58
- isVisible: boolean;
59
- intersectionObserver: IntersectionObserver | null;
59
+ visibilityManager: VisibilityManager | null;
60
60
  debounceDelay: number;
61
61
  _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
62
62
  _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
63
63
  constructor(container: HTMLElement | string, options?: TextToParticleOptions);
64
64
  init(): void;
65
- setupIntersectionObserver(): void;
65
+ setupVisibilityManager(): void;
66
66
  resize(): void;
67
67
  /**
68
68
  * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/textToParticle/index.ts"],"names":[],"mappings":"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"}
@@ -5,6 +5,7 @@
5
5
  * 사용법:
6
6
  * import { Typing } from 'masoneffect/typing';
7
7
  */
8
+ import { VisibilityManager } from '../utils/visibilityManager.js';
8
9
  export interface TypingOptions {
9
10
  text: string;
10
11
  speed?: number;
@@ -25,20 +26,21 @@ export declare class Typing {
25
26
  onComplete: TypingOptions['onComplete'];
26
27
  };
27
28
  textUnits: string[];
29
+ charUnitRanges: Array<{
30
+ start: number;
31
+ end: number;
32
+ isHangul: boolean;
33
+ }>;
28
34
  currentIndex: number;
29
35
  displayedText: string;
30
36
  timeoutId: ReturnType<typeof setTimeout> | null;
31
- intersectionObserver: IntersectionObserver | null;
37
+ visibilityManager: VisibilityManager | null;
32
38
  isRunning: boolean;
33
39
  hasTriggered: boolean;
34
40
  originalText: string;
35
41
  constructor(container: HTMLElement | string, options: TypingOptions);
36
42
  init(): void;
37
- setupIntersectionObserver(): void;
38
- private originalChars;
39
- private charUnitMap;
40
- private initializeTextStructure;
41
- private getCharIndexFromUnitIndex;
43
+ setupVisibilityManager(): void;
42
44
  private buildTextFromUnits;
43
45
  start(): void;
44
46
  typeNext(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0DD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IAgDnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAAgB;IAEnC,OAAO,CAAC,uBAAuB;IAuB/B,OAAO,CAAC,yBAAyB;IAqCjC,OAAO,CAAC,kBAAkB;IAO1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAwChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAY9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAyFD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACzE,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IA6CnE,IAAI,IAAI,IAAI;IAQZ,sBAAsB,IAAI,IAAI;IAmB9B,OAAO,CAAC,kBAAkB;IAgD1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAuChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
@@ -0,0 +1,35 @@
1
+ /**
2
+ * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
3
+ * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
4
+ */
5
+ export interface VisibilityManagerOptions {
6
+ threshold?: number;
7
+ rootMargin?: string;
8
+ onVisible?: () => void;
9
+ onHidden?: () => void;
10
+ }
11
+ export declare class VisibilityManager {
12
+ private container;
13
+ private options;
14
+ private intersectionObserver;
15
+ private visibilityChangeHandler;
16
+ private isVisible;
17
+ private isPageVisible;
18
+ constructor(container: HTMLElement, options?: VisibilityManagerOptions);
19
+ private setupIntersectionObserver;
20
+ private setupPageVisibility;
21
+ /**
22
+ * 현재 요소가 화면에 보이는지 확인
23
+ */
24
+ getIsVisible(): boolean;
25
+ /**
26
+ * 옵션 업데이트
27
+ */
28
+ updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
29
+ /**
30
+ * 리소스 정리
31
+ */
32
+ destroy(): void;
33
+ }
34
+ export default VisibilityManager;
35
+ //# sourceMappingURL=visibilityManager.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"visibilityManager.d.ts","sourceRoot":"","sources":["../../../../src/core/utils/visibilityManager.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,oBAAoB,CAA8B;IAC1D,OAAO,CAAC,uBAAuB,CAAsB;IACrD,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,aAAa,CAAU;gBAEnB,SAAS,EAAE,WAAW,EAAE,OAAO,GAAE,wBAA6B;IAiB1E,OAAO,CAAC,yBAAyB;IAsCjC,OAAO,CAAC,mBAAmB;IA+B3B;;OAEG;IACH,YAAY,IAAI,OAAO;IAIvB;;OAEG;IACH,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,IAAI;IAWlE;;OAEG;IACH,OAAO,IAAI,IAAI;CAUhB;AAED,eAAe,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(s){const i=[];for(let h=0;h<s.length;h++){const e=s[h],n=e.charCodeAt(0);if(n>=44032&&n<=55203){const s=t(e);i.push(...s)}else i.push(e)}return i}Object.defineProperty(exports,"t",{value:!0});class i{constructor(t,i){if(this.originalChars=[],this.charUnitMap=[],this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=i.text,this.config={text:i.text,speed:i.speed??50,delay:i.delay??0,enabled:i.enabled??!0,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,showCursor:i.showCursor??!0,cursorChar:i.cursorChar??"|",onUpdate:i.onUpdate||null,onComplete:i.onComplete||null},this.textUnits=s(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.disconnect())},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let s=0;s<this.originalText.length;s++){const i=this.originalText[s],h=i.charCodeAt(0);if(this.originalChars.push(i),h>=44032&&h<=55203){const s=t(i);this.charUnitMap.push(s.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let s=0,i=0;for(let h=0;h<this.charUnitMap.length;h++){const e=this.charUnitMap[h];if(i+=e,!(t>=i)){const n=t-(i-e);if(n>0){const t=this.originalChars[h]&&this.originalChars[h].charCodeAt(0)>=44032&&this.originalChars[h].charCodeAt(0)<=55203;(t&&n>=2||!t&&n>=1)&&(s=h+1)}break}s=h+1}return s}buildTextFromUnits(t){if(0===t.length)return"";const s=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,s)}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let s=this.displayedText;this.config.showCursor&&(s+=this.config.cursorChar),this.updateDisplay(s),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t,this.textUnits=s(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}exports.Typing=i,exports.default=i;
1
+ Object.defineProperty(exports,"t",{value:!0});class t{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.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 i of t)i.target===this.container&&(i.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}),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)}}function i(t){const i=t.charCodeAt(0);if(i<44032||i>55203)return[t];const s=i-44032,h=Math.floor(s/588),e=Math.floor(s%588/28),n=s%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(t,i,s){const h=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),e=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(i),n=s?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(s):0;if(-1===h||-1===e)return t+(i||"")+(s||"");const o=44032+21*h*28+28*e+n;return String.fromCharCode(o)}function h(t){const s=[],h=[];for(let e=0;e<t.length;e++){const n=t[e],o=n.charCodeAt(0),r=s.length;if(o>=44032&&o<=55203){const t=i(n);s.push(...t),h.push({start:r,end:s.length,isHangul:!0})}else s.push(n),h.push({start:r,end:s.length,isHangul:!1})}return{units:s,charUnitRanges:h}}class e{constructor(t,i){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=i.text,this.config={text:i.text,speed:i.speed??50,delay:i.delay??0,enabled:i.enabled??!0,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,showCursor:i.showCursor??!0,cursorChar:i.cursorChar??"|",onUpdate:i.onUpdate||null,onComplete:i.onComplete||null};const s=h(this.config.text);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new t(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let i="";for(let h=0;h<this.charUnitRanges.length;h++){const e=this.charUnitRanges[h];if(e.start>=t)break;const n=Math.min(t-e.start,e.end-e.start);if(n<=0)break;if(e.isHangul){const t=this.textUnits.slice(e.start,e.start+n);1===t.length?i+=t[0]:2===t.length?i+=s(t[0],t[1]):t.length>=3&&(i+=s(t[0],t[1],t[2]))}else n>0&&(i+=this.textUnits[e.start])}return i}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const i=h(t);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}exports.Typing=e,exports.default=e;
@@ -1 +1 @@
1
- function t(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(s){const i=[];for(let h=0;h<s.length;h++){const e=s[h],n=e.charCodeAt(0);if(n>=44032&&n<=55203){const s=t(e);i.push(...s)}else i.push(e)}return i}class i{constructor(t,i){if(this.originalChars=[],this.charUnitMap=[],this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=i.text,this.config={text:i.text,speed:i.speed??50,delay:i.delay??0,enabled:i.enabled??!0,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,showCursor:i.showCursor??!0,cursorChar:i.cursorChar??"|",onUpdate:i.onUpdate||null,onComplete:i.onComplete||null},this.textUnits=s(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.disconnect())},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let s=0;s<this.originalText.length;s++){const i=this.originalText[s],h=i.charCodeAt(0);if(this.originalChars.push(i),h>=44032&&h<=55203){const s=t(i);this.charUnitMap.push(s.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let s=0,i=0;for(let h=0;h<this.charUnitMap.length;h++){const e=this.charUnitMap[h];if(i+=e,!(t>=i)){const n=t-(i-e);if(n>0){const t=this.originalChars[h]&&this.originalChars[h].charCodeAt(0)>=44032&&this.originalChars[h].charCodeAt(0)<=55203;(t&&n>=2||!t&&n>=1)&&(s=h+1)}break}s=h+1}return s}buildTextFromUnits(t){if(0===t.length)return"";const s=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,s)}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let s=this.displayedText;this.config.showCursor&&(s+=this.config.cursorChar),this.updateDisplay(s),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t,this.textUnits=s(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}export{i as Typing,i as default};
1
+ class t{constructor(t,i={}){this.container=t,this.options={threshold:i.threshold??.1,rootMargin:i.rootMargin??"0px",onVisible:i.onVisible,onHidden:i.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 i of t)i.target===this.container&&(i.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}),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)}}function i(t){const i=t.charCodeAt(0);if(i<44032||i>55203)return[t];const s=i-44032,h=Math.floor(s/588),e=Math.floor(s%588/28),n=s%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function s(t,i,s){const h=["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(t),e=["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"].indexOf(i),n=s?["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"].indexOf(s):0;if(-1===h||-1===e)return t+(i||"")+(s||"");const o=44032+21*h*28+28*e+n;return String.fromCharCode(o)}function h(t){const s=[],h=[];for(let e=0;e<t.length;e++){const n=t[e],o=n.charCodeAt(0),r=s.length;if(o>=44032&&o<=55203){const t=i(n);s.push(...t),h.push({start:r,end:s.length,isHangul:!0})}else s.push(n),h.push({start:r,end:s.length,isHangul:!1})}return{units:s,charUnitRanges:h}}class e{constructor(t,i){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=i.text,this.config={text:i.text,speed:i.speed??50,delay:i.delay??0,enabled:i.enabled??!0,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,showCursor:i.showCursor??!0,cursorChar:i.cursorChar??"|",onUpdate:i.onUpdate||null,onComplete:i.onComplete||null};const s=h(this.config.text);this.textUnits=s.units,this.charUnitRanges=s.charUnitRanges,this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new t(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,setTimeout(()=>this.start(),this.config.delay))},onHidden:()=>{}})}buildTextFromUnits(t){if(0===t)return"";let i="";for(let h=0;h<this.charUnitRanges.length;h++){const e=this.charUnitRanges[h];if(e.start>=t)break;const n=Math.min(t-e.start,e.end-e.start);if(n<=0)break;if(e.isHangul){const t=this.textUnits.slice(e.start,e.start+n);1===t.length?i+=t[0]:2===t.length?i+=s(t[0],t[1]):t.length>=3&&(i+=s(t[0],t[1],t[2]))}else n>0&&(i+=this.textUnits[e.start])}return i}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());this.displayedText=this.buildTextFromUnits(this.currentIndex+1);let t=this.displayedText;this.config.showCursor&&(t+=this.config.cursorChar),this.updateDisplay(t),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t;const i=h(t);this.textUnits=i.units,this.charUnitRanges=i.charUnitRanges,this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}export{e as Typing,e as default};
@@ -1 +1 @@
1
- "use strict";const t=require("vue"),e={linear:t=>t};class n{constructor(t,n){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:n.targetValue,duration:n.duration??2e3,startValue:n.startValue??0,enabled:n.enabled??!0,easing:n.easing??e.linear,threshold:n.threshold??.2,rootMargin:n.rootMargin??"0px 0px -100px 0px",triggerOnce:n.triggerOnce??!1,onUpdate:n.onUpdate||null,onComplete:n.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{var e;for(const n of t)if(n.target===this.container)if(n.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&(null==(e=this.intersectionObserver)||e.unobserve(this.container));else if(!this.config.triggerOnce){const t=n.boundingClientRect,e=window.innerHeight,i=window.innerWidth;(t.bottom<=0||t.top>=e||t.right<=0||t.left>=i)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const n=e-this.startTime,i=Math.min(n/this.config.duration,1),r=this.config.easing(i);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*r),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),i<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}const i=t.defineComponent({__name:"Count",props:{className:{default:""},style:{default:()=>({})},targetValue:{default:0},duration:{default:2e3},startValue:{default:0},enabled:{type:Boolean,default:!0},easing:{type:Function,default:()=>t=>t},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},onUpdate:{type:Function,default:null},onComplete:{type:Function,default:null}},emits:["update","complete"],setup(e,{expose:i,emit:r}){const s=e,a=r,o=t.ref(null);let l=null;return t.watch(()=>[s.targetValue,s.duration,s.startValue,s.enabled,s.easing,s.threshold,s.rootMargin,s.triggerOnce],()=>{l&&l.updateConfig({targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}})}),t.onMounted(()=>{(()=>{if(!o.value)return;const t={targetValue:s.targetValue,duration:s.duration,startValue:s.startValue,enabled:s.enabled,easing:s.easing,threshold:s.threshold,rootMargin:s.rootMargin,triggerOnce:s.triggerOnce,onUpdate:t=>{s.onUpdate&&s.onUpdate(t),a("update",t)},onComplete:()=>{s.onComplete&&s.onComplete(),a("complete")}};l=new n(o.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),i({start:()=>{l&&l.start()},stop:()=>{l&&l.stop()},reset:()=>{l&&l.reset()},getValue:()=>l?l.getValue():0,updateConfig:t=>{l&&l.updateConfig(t)},destroy:()=>{l&&(l.destroy(),l=null)}}),(n,i)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:o,class:t.normalizeClass(e.className),style:t.normalizeStyle(e.style)},null,6))}});module.exports=i;
1
+ "use strict";const t=require("vue");class e{constructor(t,e={}){this.container=t,this.options={threshold:e.threshold??.1,rootMargin:e.rootMargin??"0px",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}),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)}}const i={linear:t=>t};class n{constructor(t,e){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:e.targetValue,duration:e.duration??2e3,startValue:e.startValue??0,enabled:e.enabled??!0,easing:e.easing??i.linear,threshold:e.threshold??.2,rootMargin:e.rootMargin??"0px 0px -100px 0px",triggerOnce:e.triggerOnce??!1,onUpdate:e.onUpdate||null,onComplete:e.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.visibilityManager=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupVisibilityManager()}setupVisibilityManager(){this.visibilityManager=new e(this.container,{threshold:this.config.threshold,rootMargin:this.config.rootMargin,onVisible:()=>{!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start())},onHidden:()=>{!this.config.triggerOnce&&this.isRunning&&this.reset()}})}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=e=>{null===this.startTime&&(this.startTime=e);const i=e-this.startTime,n=Math.min(i/this.config.duration,1),s=this.config.easing(n);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*s),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),n<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const e=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),e&&this.config.enabled&&this.start()):e&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.visibilityManager&&(this.visibilityManager.destroy(),this.visibilityManager=null)}}const s=t.defineComponent({__name:"Count",props:{className:{default:""},style:{default:()=>({})},targetValue:{default:0},duration:{default:2e3},startValue:{default:0},enabled:{type:Boolean,default:!0},easing:{type:Function,default:()=>t=>t},threshold:{default:.2},rootMargin:{default:"0px 0px -100px 0px"},triggerOnce:{type:Boolean,default:!1},onUpdate:{type:Function,default:null},onComplete:{type:Function,default:null}},emits:["update","complete"],setup(e,{expose:i,emit:s}){const o=e,r=s,a=t.ref(null);let l=null;return t.watch(()=>[o.targetValue,o.duration,o.startValue,o.enabled,o.easing,o.threshold,o.rootMargin,o.triggerOnce],()=>{l&&l.updateConfig({targetValue:o.targetValue,duration:o.duration,startValue:o.startValue,enabled:o.enabled,easing:o.easing,threshold:o.threshold,rootMargin:o.rootMargin,triggerOnce:o.triggerOnce,onUpdate:t=>{o.onUpdate&&o.onUpdate(t),r("update",t)},onComplete:()=>{o.onComplete&&o.onComplete(),r("complete")}})}),t.onMounted(()=>{(()=>{if(!a.value)return;const t={targetValue:o.targetValue,duration:o.duration,startValue:o.startValue,enabled:o.enabled,easing:o.easing,threshold:o.threshold,rootMargin:o.rootMargin,triggerOnce:o.triggerOnce,onUpdate:t=>{o.onUpdate&&o.onUpdate(t),r("update",t)},onComplete:()=>{o.onComplete&&o.onComplete(),r("complete")}};l=new n(a.value,t)})()}),t.onBeforeUnmount(()=>{l&&(l.destroy(),l=null)}),i({start:()=>{l&&l.start()},stop:()=>{l&&l.stop()},reset:()=>{l&&l.reset()},getValue:()=>l?l.getValue():0,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))}});module.exports=s;
@@ -7,12 +7,12 @@ export declare class Count {
7
7
  currentValue: number;
8
8
  startTime: number | null;
9
9
  animationFrameId: number | null;
10
- intersectionObserver: IntersectionObserver | null;
10
+ visibilityManager: VisibilityManager | null;
11
11
  isRunning: boolean;
12
12
  hasTriggered: boolean;
13
13
  constructor(container: HTMLElement | string, options: CountOptions);
14
14
  init(): void;
15
- setupIntersectionObserver(): void;
15
+ setupVisibilityManager(): void;
16
16
  start(): void;
17
17
  stop(): void;
18
18
  reset(): void;
@@ -23,13 +23,6 @@ export declare class Count {
23
23
  destroy(): void;
24
24
  }
25
25
 
26
- /**
27
- * Count - 숫자 카운팅 애니메이션 효과
28
- * 바닐라 JS 코어 클래스
29
- *
30
- * 사용법:
31
- * import { Count } from 'masoneffect/count';
32
- */
33
26
  export declare interface CountOptions {
34
27
  targetValue: number;
35
28
  duration?: number;
@@ -84,14 +77,13 @@ declare class TextToParticle {
84
77
  };
85
78
  animationId: number | null;
86
79
  isRunning: boolean;
87
- isVisible: boolean;
88
- intersectionObserver: IntersectionObserver | null;
80
+ visibilityManager: VisibilityManager | null;
89
81
  debounceDelay: number;
90
82
  _debouncedMorph: (textOrOptions?: string | Partial<TextToParticleOptions> | null) => void;
91
83
  _debouncedUpdateConfig: (newConfig: Partial<TextToParticleOptions>) => void;
92
84
  constructor(container: HTMLElement | string, options?: TextToParticleOptions);
93
85
  init(): void;
94
- setupIntersectionObserver(): void;
86
+ setupVisibilityManager(): void;
95
87
  resize(): void;
96
88
  /**
97
89
  * 텍스트가 영역 안에 들어가는지 확인하는 헬퍼 함수 (줄바꿈 지원)
@@ -132,13 +124,6 @@ declare class TextToParticle {
132
124
  export { TextToParticle }
133
125
  export default TextToParticle;
134
126
 
135
- /**
136
- * TextToParticle - 텍스트를 파티클로 변환하는 효과
137
- * 바닐라 JS 코어 클래스
138
- *
139
- * 사용법:
140
- * import { TextToParticle } from 'masoneffect/textToParticle';
141
- */
142
127
  declare interface TextToParticleOptions {
143
128
  text?: string;
144
129
  densityStep?: number;
@@ -167,20 +152,21 @@ declare class TextToParticle {
167
152
  onComplete: TypingOptions['onComplete'];
168
153
  };
169
154
  textUnits: string[];
155
+ charUnitRanges: Array<{
156
+ start: number;
157
+ end: number;
158
+ isHangul: boolean;
159
+ }>;
170
160
  currentIndex: number;
171
161
  displayedText: string;
172
162
  timeoutId: ReturnType<typeof setTimeout> | null;
173
- intersectionObserver: IntersectionObserver | null;
163
+ visibilityManager: VisibilityManager | null;
174
164
  isRunning: boolean;
175
165
  hasTriggered: boolean;
176
166
  originalText: string;
177
167
  constructor(container: HTMLElement | string, options: TypingOptions);
178
168
  init(): void;
179
- setupIntersectionObserver(): void;
180
- private originalChars;
181
- private charUnitMap;
182
- private initializeTextStructure;
183
- private getCharIndexFromUnitIndex;
169
+ setupVisibilityManager(): void;
184
170
  private buildTextFromUnits;
185
171
  start(): void;
186
172
  typeNext(): void;
@@ -191,13 +177,6 @@ declare class TextToParticle {
191
177
  destroy(): void;
192
178
  }
193
179
 
194
- /**
195
- * Typing - 타이핑 애니메이션 효과
196
- * 바닐라 JS 코어 클래스
197
- *
198
- * 사용법:
199
- * import { Typing } from 'masoneffect/typing';
200
- */
201
180
  export declare interface TypingOptions {
202
181
  text: string;
203
182
  speed?: number;
@@ -212,4 +191,39 @@ declare class TextToParticle {
212
191
  onComplete?: () => void;
213
192
  }
214
193
 
194
+ declare class VisibilityManager {
195
+ private container;
196
+ private options;
197
+ private intersectionObserver;
198
+ private visibilityChangeHandler;
199
+ private isVisible;
200
+ private isPageVisible;
201
+ constructor(container: HTMLElement, options?: VisibilityManagerOptions);
202
+ private setupIntersectionObserver;
203
+ private setupPageVisibility;
204
+ /**
205
+ * 현재 요소가 화면에 보이는지 확인
206
+ */
207
+ getIsVisible(): boolean;
208
+ /**
209
+ * 옵션 업데이트
210
+ */
211
+ updateOptions(newOptions: Partial<VisibilityManagerOptions>): void;
212
+ /**
213
+ * 리소스 정리
214
+ */
215
+ destroy(): void;
216
+ }
217
+
218
+ /**
219
+ * VisibilityManager - IntersectionObserver와 Page Visibility API를 통합 관리
220
+ * 모든 효과에서 공통으로 사용하는 가시성 관리 유틸리티
221
+ */
222
+ declare interface VisibilityManagerOptions {
223
+ threshold?: number;
224
+ rootMargin?: string;
225
+ onVisible?: () => void;
226
+ onHidden?: () => void;
227
+ }
228
+
215
229
  export { }
@@ -1,4 +1,105 @@
1
1
  import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, normalizeClass } from "vue";
2
+ class VisibilityManager {
3
+ constructor(container, options = {}) {
4
+ this.container = container;
5
+ this.options = {
6
+ threshold: options.threshold ?? 0.1,
7
+ rootMargin: options.rootMargin ?? "0px",
8
+ onVisible: options.onVisible,
9
+ onHidden: options.onHidden
10
+ };
11
+ this.intersectionObserver = null;
12
+ this.visibilityChangeHandler = null;
13
+ this.isVisible = false;
14
+ this.isPageVisible = typeof document !== "undefined" ? !document.hidden : true;
15
+ this.setupIntersectionObserver();
16
+ this.setupPageVisibility();
17
+ }
18
+ setupIntersectionObserver() {
19
+ if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
20
+ this.isVisible = true;
21
+ if (this.isPageVisible && this.options.onVisible) {
22
+ this.options.onVisible();
23
+ }
24
+ return;
25
+ }
26
+ this.intersectionObserver = new IntersectionObserver(
27
+ (entries) => {
28
+ for (const entry of entries) {
29
+ if (entry.target !== this.container) continue;
30
+ if (entry.isIntersecting) {
31
+ this.isVisible = true;
32
+ if (this.isPageVisible && this.options.onVisible) {
33
+ this.options.onVisible();
34
+ }
35
+ } else {
36
+ this.isVisible = false;
37
+ if (this.options.onHidden) {
38
+ this.options.onHidden();
39
+ }
40
+ }
41
+ }
42
+ },
43
+ {
44
+ threshold: this.options.threshold,
45
+ rootMargin: this.options.rootMargin
46
+ }
47
+ );
48
+ this.intersectionObserver.observe(this.container);
49
+ }
50
+ setupPageVisibility() {
51
+ if (typeof document === "undefined") return;
52
+ this.visibilityChangeHandler = () => {
53
+ const wasVisible = this.isPageVisible;
54
+ this.isPageVisible = !document.hidden;
55
+ if (document.hidden) {
56
+ if (this.options.onHidden) {
57
+ this.options.onHidden();
58
+ }
59
+ } else if (wasVisible !== this.isPageVisible) {
60
+ if (this.isVisible && this.options.onVisible) {
61
+ this.options.onVisible();
62
+ }
63
+ }
64
+ };
65
+ document.addEventListener("visibilitychange", this.visibilityChangeHandler);
66
+ if (document.hidden && this.isVisible) {
67
+ if (this.options.onHidden) {
68
+ this.options.onHidden();
69
+ }
70
+ }
71
+ }
72
+ /**
73
+ * 현재 요소가 화면에 보이는지 확인
74
+ */
75
+ getIsVisible() {
76
+ return this.isVisible && this.isPageVisible;
77
+ }
78
+ /**
79
+ * 옵션 업데이트
80
+ */
81
+ updateOptions(newOptions) {
82
+ this.options = { ...this.options, ...newOptions };
83
+ if (this.intersectionObserver) {
84
+ this.intersectionObserver.disconnect();
85
+ this.intersectionObserver = null;
86
+ }
87
+ this.setupIntersectionObserver();
88
+ }
89
+ /**
90
+ * 리소스 정리
91
+ */
92
+ destroy() {
93
+ if (this.intersectionObserver) {
94
+ this.intersectionObserver.disconnect();
95
+ this.intersectionObserver = null;
96
+ }
97
+ if (this.visibilityChangeHandler && typeof document !== "undefined") {
98
+ document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
99
+ this.visibilityChangeHandler = null;
100
+ }
101
+ }
102
+ }
2
103
  const easingFunctions = {
3
104
  linear: (t) => t
4
105
  };
@@ -23,54 +124,31 @@ class Count {
23
124
  this.currentValue = this.config.startValue;
24
125
  this.startTime = null;
25
126
  this.animationFrameId = null;
26
- this.intersectionObserver = null;
127
+ this.visibilityManager = null;
27
128
  this.isRunning = false;
28
129
  this.hasTriggered = false;
29
130
  this.init();
30
131
  }
31
132
  init() {
32
133
  this.updateDisplay(this.config.startValue);
33
- this.setupIntersectionObserver();
134
+ this.setupVisibilityManager();
34
135
  }
35
- setupIntersectionObserver() {
36
- if (typeof window === "undefined" || typeof window.IntersectionObserver === "undefined") {
37
- if (this.config.enabled) {
38
- this.start();
39
- }
40
- return;
41
- }
42
- this.intersectionObserver = new IntersectionObserver(
43
- (entries) => {
44
- var _a;
45
- for (const entry of entries) {
46
- if (entry.target !== this.container) continue;
47
- if (entry.isIntersecting) {
48
- if (!this.hasTriggered && this.config.enabled) {
49
- this.hasTriggered = true;
50
- this.start();
51
- }
52
- if (this.config.triggerOnce) {
53
- (_a = this.intersectionObserver) == null ? void 0 : _a.unobserve(this.container);
54
- }
55
- } else {
56
- if (!this.config.triggerOnce) {
57
- const rect = entry.boundingClientRect;
58
- const viewportHeight = window.innerHeight;
59
- const viewportWidth = window.innerWidth;
60
- const isCompletelyOutOfViewport = rect.bottom <= 0 || rect.top >= viewportHeight || rect.right <= 0 || rect.left >= viewportWidth;
61
- if (isCompletelyOutOfViewport && this.isRunning) {
62
- this.reset();
63
- }
64
- }
65
- }
136
+ setupVisibilityManager() {
137
+ this.visibilityManager = new VisibilityManager(this.container, {
138
+ threshold: this.config.threshold,
139
+ rootMargin: this.config.rootMargin,
140
+ onVisible: () => {
141
+ if (!this.hasTriggered && this.config.enabled) {
142
+ this.hasTriggered = true;
143
+ this.start();
66
144
  }
67
145
  },
68
- {
69
- threshold: this.config.threshold,
70
- rootMargin: this.config.rootMargin
146
+ onHidden: () => {
147
+ if (!this.config.triggerOnce && this.isRunning) {
148
+ this.reset();
149
+ }
71
150
  }
72
- );
73
- this.intersectionObserver.observe(this.container);
151
+ });
74
152
  }
75
153
  start() {
76
154
  if (this.isRunning) return;
@@ -154,9 +232,9 @@ class Count {
154
232
  // 파괴 및 정리
155
233
  destroy() {
156
234
  this.stop();
157
- if (this.intersectionObserver) {
158
- this.intersectionObserver.disconnect();
159
- this.intersectionObserver = null;
235
+ if (this.visibilityManager) {
236
+ this.visibilityManager.destroy();
237
+ this.visibilityManager = null;
160
238
  }
161
239
  }
162
240
  }