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.
- package/README.md +2 -2
- package/dist/core/count/index.d.ts +3 -2
- package/dist/core/count/index.d.ts.map +1 -1
- package/dist/core/textToParticle/index.d.ts +3 -3
- package/dist/core/textToParticle/index.d.ts.map +1 -1
- package/dist/core/typing/index.d.ts +8 -6
- package/dist/core/typing/index.d.ts.map +1 -1
- package/dist/core/utils/visibilityManager.d.ts +35 -0
- package/dist/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/count/core/count/index.d.ts +3 -2
- package/dist/count/core/count/index.d.ts.map +1 -1
- package/dist/count/core/textToParticle/index.d.ts +3 -3
- package/dist/count/core/textToParticle/index.d.ts.map +1 -1
- package/dist/count/core/typing/index.d.ts +8 -6
- package/dist/count/core/typing/index.d.ts.map +1 -1
- package/dist/count/core/utils/visibilityManager.d.ts +35 -0
- package/dist/count/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/count/index.cjs +1 -1
- package/dist/count/index.mjs +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/react/core/count/index.d.ts +3 -2
- package/dist/react/core/textToParticle/index.d.ts +3 -3
- package/dist/react/core/typing/index.d.ts +8 -6
- package/dist/react/core/utils/visibilityManager.d.ts +34 -0
- package/dist/react/count/core/count/index.d.ts +3 -2
- package/dist/react/count/core/count/index.d.ts.map +1 -1
- package/dist/react/count/core/textToParticle/index.d.ts +3 -3
- package/dist/react/count/core/textToParticle/index.d.ts.map +1 -1
- package/dist/react/count/core/typing/index.d.ts +8 -6
- package/dist/react/count/core/typing/index.d.ts.map +1 -1
- package/dist/react/count/core/utils/visibilityManager.d.ts +35 -0
- package/dist/react/count/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/count/index.cjs +1 -1
- package/dist/react/count/index.mjs +1 -1
- package/dist/react/textToParticle/core/count/index.d.ts +3 -2
- package/dist/react/textToParticle/core/count/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/textToParticle/index.d.ts +3 -3
- package/dist/react/textToParticle/core/textToParticle/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/typing/index.d.ts +8 -6
- package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/utils/visibilityManager.d.ts +35 -0
- package/dist/react/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/textToParticle/index.cjs +1 -1
- package/dist/react/textToParticle/index.mjs +1 -1
- package/dist/react/typing/core/count/index.d.ts +3 -2
- package/dist/react/typing/core/count/index.d.ts.map +1 -1
- package/dist/react/typing/core/textToParticle/index.d.ts +3 -3
- package/dist/react/typing/core/textToParticle/index.d.ts.map +1 -1
- package/dist/react/typing/core/typing/index.d.ts +8 -6
- package/dist/react/typing/core/typing/index.d.ts.map +1 -1
- package/dist/react/typing/core/utils/visibilityManager.d.ts +35 -0
- package/dist/react/typing/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/react/typing/index.cjs +1 -1
- package/dist/react/typing/index.mjs +1 -1
- package/dist/svelte/count/index.cjs +1 -1
- package/dist/svelte/count/index.d.ts +46 -32
- package/dist/svelte/count/index.mjs +120 -42
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +46 -32
- package/dist/svelte/index.mjs +211 -160
- package/dist/svelte/textToParticle/index.cjs +1 -1
- package/dist/svelte/textToParticle/index.d.ts +46 -32
- package/dist/svelte/textToParticle/index.mjs +119 -33
- package/dist/svelte/typing/index.cjs +1 -1
- package/dist/svelte/typing/index.d.ts +46 -32
- package/dist/svelte/typing/index.mjs +174 -85
- package/dist/textToParticle/core/count/index.d.ts +3 -2
- package/dist/textToParticle/core/count/index.d.ts.map +1 -1
- package/dist/textToParticle/core/textToParticle/index.d.ts +3 -3
- package/dist/textToParticle/core/textToParticle/index.d.ts.map +1 -1
- package/dist/textToParticle/core/typing/index.d.ts +8 -6
- package/dist/textToParticle/core/typing/index.d.ts.map +1 -1
- package/dist/textToParticle/core/utils/visibilityManager.d.ts +35 -0
- package/dist/textToParticle/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/textToParticle/index.cjs +1 -1
- package/dist/textToParticle/index.mjs +1 -1
- package/dist/typing/core/count/index.d.ts +3 -2
- package/dist/typing/core/count/index.d.ts.map +1 -1
- package/dist/typing/core/textToParticle/index.d.ts +3 -3
- package/dist/typing/core/textToParticle/index.d.ts.map +1 -1
- package/dist/typing/core/typing/index.d.ts +8 -6
- package/dist/typing/core/typing/index.d.ts.map +1 -1
- package/dist/typing/core/utils/visibilityManager.d.ts +35 -0
- package/dist/typing/core/utils/visibilityManager.d.ts.map +1 -0
- package/dist/typing/index.cjs +1 -1
- package/dist/typing/index.mjs +1 -1
- package/dist/vue/count/index.cjs +1 -1
- package/dist/vue/count/index.d.ts +46 -32
- package/dist/vue/count/index.mjs +119 -41
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +46 -32
- package/dist/vue/index.mjs +209 -158
- package/dist/vue/textToParticle/index.cjs +1 -1
- package/dist/vue/textToParticle/index.d.ts +46 -32
- package/dist/vue/textToParticle/index.mjs +119 -33
- package/dist/vue/typing/index.cjs +1 -1
- package/dist/vue/typing/index.d.ts +46 -32
- package/dist/vue/typing/index.mjs +173 -84
- 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
|
-
|
|
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
|
-
|
|
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":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;CACX;AAoBD,qBAAa,cAAc;IACzB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC,CAAC,GAAG;QACxF,OAAO,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;QAC1C,QAAQ,EAAE,qBAAqB,CAAC,UAAU,CAAC,CAAC;KAC7C,CAAC;IACF,MAAM,EAAE,iBAAiB,CAAC;IAC1B,GAAG,EAAE,wBAAwB,CAAC;IAC9B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,wBAAwB,CAAC;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,
|
|
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
|
-
|
|
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
|
-
|
|
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;
|
|
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"}
|
package/dist/typing/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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;
|
package/dist/typing/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
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};
|
package/dist/vue/count/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const t=require("vue"),e={linear:t=>t};class n{constructor(t,
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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 { }
|
package/dist/vue/count/index.mjs
CHANGED
|
@@ -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.
|
|
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.
|
|
134
|
+
this.setupVisibilityManager();
|
|
34
135
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
70
|
-
|
|
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.
|
|
158
|
-
this.
|
|
159
|
-
this.
|
|
235
|
+
if (this.visibilityManager) {
|
|
236
|
+
this.visibilityManager.destroy();
|
|
237
|
+
this.visibilityManager = null;
|
|
160
238
|
}
|
|
161
239
|
}
|
|
162
240
|
}
|