@fiddle-digital/string-tune 0.0.1
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/LICENSE +21 -0
- package/dist/IStringModule.d.ts +20 -0
- package/dist/Loading/Modules/StringLazy.d.ts +8 -0
- package/dist/Loading/Modules/StringLoading.d.ts +6 -0
- package/dist/Loading/Modules/StringVideoAutoplay.d.ts +7 -0
- package/dist/Mouse/Modules/StringCursor.d.ts +16 -0
- package/dist/Mouse/Modules/StringMagnetic.d.ts +9 -0
- package/dist/Mouse/StringVirtualCursor.d.ts +18 -0
- package/dist/Objects/StringObject.d.ts +54 -0
- package/dist/Scroll/Modules/Scrollbar/StringScrollbar.d.ts +30 -0
- package/dist/Scroll/Modules/Scrollbar/StringScrollbarHorizontal.d.ts +14 -0
- package/dist/Scroll/Modules/Scrollbar/StringScrollbarVertical.d.ts +14 -0
- package/dist/Scroll/Modules/StringDisplacement.d.ts +6 -0
- package/dist/Scroll/Modules/StringParallax.d.ts +8 -0
- package/dist/Scroll/Modules/StringProgress.d.ts +9 -0
- package/dist/Scroll/Types/StringScroll.d.ts +20 -0
- package/dist/Scroll/Types/StringScrollDefault.d.ts +10 -0
- package/dist/Scroll/Types/StringScrollDisable.d.ts +9 -0
- package/dist/Scroll/Types/StringScrollSmooth.d.ts +11 -0
- package/dist/Scroll/Types/StringTypeSettings.d.ts +11 -0
- package/dist/Split/Modules/StringSplit.d.ts +68 -0
- package/dist/StringFPS.d.ts +12 -0
- package/dist/StringModule.d.ts +41 -0
- package/dist/Tracker/StringFPSTracker.d.ts +12 -0
- package/dist/Tracker/StringPositionTracker.d.ts +13 -0
- package/dist/Utils/StringAttribute.d.ts +3 -0
- package/dist/Utils/StringBoundingClientRect.d.ts +3 -0
- package/dist/Utils/StringData.d.ts +16 -0
- package/dist/Utils/StringEvent.d.ts +10 -0
- package/dist/Utils/StringLerp.d.ts +3 -0
- package/dist/Utils/StringParser.d.ts +3 -0
- package/dist/Utils/StringPosition.d.ts +6 -0
- package/dist/bundle.js +2 -0
- package/dist/bundle.js.map +1 -0
- package/dist/index.d.ts +72 -0
- package/package.json +79 -0
- package/readme.md +83 -0
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2023 Fiddle-Digital
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { StringObject } from './Objects/StringObject';
|
2
|
+
import { StringData } from './Utils/StringData';
|
3
|
+
export interface IStringModule {
|
4
|
+
destructor(): void;
|
5
|
+
onStart(): void;
|
6
|
+
onUpdate(data: StringData): void;
|
7
|
+
onConnect(object: StringObject): void;
|
8
|
+
onResize(): void;
|
9
|
+
onRebuild(): void;
|
10
|
+
onScroll(data: StringData): void;
|
11
|
+
onMouseMove(e: MouseEvent): void;
|
12
|
+
onWheel(e: WheelEvent): void;
|
13
|
+
onChangeDevice(): void;
|
14
|
+
onChangeScrollDirection(): void;
|
15
|
+
onMutationObserver(added: NodeList, removed: NodeList): void;
|
16
|
+
tryConnect(object: StringObject): boolean;
|
17
|
+
connect(object: StringObject): void;
|
18
|
+
addObject(id: string, object: StringObject): void;
|
19
|
+
removeObject(id: string): void;
|
20
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { StringObject } from '../../Objects/StringObject';
|
2
|
+
import { StringModule } from '../../StringModule';
|
3
|
+
export declare class StringLazy extends StringModule {
|
4
|
+
constructor(visitor: any);
|
5
|
+
onStart(): void;
|
6
|
+
onConnect(object: StringObject): void;
|
7
|
+
private getImageSize;
|
8
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { StringObject } from "../../Objects/StringObject";
|
2
|
+
import { StringModule } from "../../StringModule";
|
3
|
+
export declare class StringVideoAutoplay extends StringModule {
|
4
|
+
constructor(visitor: any);
|
5
|
+
onConnect(object: StringObject): void;
|
6
|
+
private tryPlay;
|
7
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { StringObject } from '../../Objects/StringObject';
|
2
|
+
import { StringModule } from '../../StringModule';
|
3
|
+
import { StringData } from '../../Utils/StringData';
|
4
|
+
export declare class StringCursor extends StringModule {
|
5
|
+
private lerpFactor;
|
6
|
+
private oldX;
|
7
|
+
private oldY;
|
8
|
+
protected enterObjectsMap: Map<string, StringObject>;
|
9
|
+
protected enterObjects: Array<StringObject>;
|
10
|
+
cursor: any;
|
11
|
+
constructor(visitor: any, settings?: any);
|
12
|
+
onUpdate(data: StringData): void;
|
13
|
+
onConnect(object: StringObject): void;
|
14
|
+
private setMouseCoordinates;
|
15
|
+
private calculateOffset;
|
16
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { StringModule } from "../../StringModule";
|
2
|
+
import { StringObject } from "../../Objects/StringObject";
|
3
|
+
import { StringData } from "../../Utils/StringData";
|
4
|
+
export declare class StringMagnetic extends StringModule {
|
5
|
+
constructor(visitor: any);
|
6
|
+
onConnect(object: StringObject): void;
|
7
|
+
onMouseMove(e: MouseEvent): void;
|
8
|
+
onUpdate(data: StringData): void;
|
9
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
export declare class StringVirtualCursor {
|
2
|
+
private _lF;
|
3
|
+
private lerp;
|
4
|
+
private _x;
|
5
|
+
private _y;
|
6
|
+
private _lerpX;
|
7
|
+
private _lerpY;
|
8
|
+
private targetX;
|
9
|
+
private targetY;
|
10
|
+
get x(): number;
|
11
|
+
get y(): number;
|
12
|
+
get smoothX(): number;
|
13
|
+
get smoothY(): number;
|
14
|
+
get lerpX(): number;
|
15
|
+
get lerpY(): number;
|
16
|
+
onMouseMove(e: MouseEvent): void;
|
17
|
+
onUpdate(): void;
|
18
|
+
}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import { IStringModule } from '../IStringModule';
|
2
|
+
export declare class StringObject {
|
3
|
+
el: HTMLElement;
|
4
|
+
id: string;
|
5
|
+
oStart: number;
|
6
|
+
oEnd: number;
|
7
|
+
size: number;
|
8
|
+
startPos: number;
|
9
|
+
endPos: number;
|
10
|
+
differencePos: number;
|
11
|
+
factor: number;
|
12
|
+
sElPos: string;
|
13
|
+
sScrPos: string;
|
14
|
+
eElPos: string;
|
15
|
+
eScrPos: string;
|
16
|
+
halfWidth: number;
|
17
|
+
halfHeight: number;
|
18
|
+
start: number;
|
19
|
+
end: number;
|
20
|
+
mouseX: number;
|
21
|
+
mouseY: number;
|
22
|
+
magneticTargetX: number;
|
23
|
+
magneticTargetY: number;
|
24
|
+
magneticX: number;
|
25
|
+
magneticY: number;
|
26
|
+
lerp: number;
|
27
|
+
strength: number;
|
28
|
+
radius: number;
|
29
|
+
parallaxPositionStart: number;
|
30
|
+
parallaxPositionEnd: number;
|
31
|
+
connects: Array<HTMLElement>;
|
32
|
+
cursorTarget: any;
|
33
|
+
key: string;
|
34
|
+
showObserver: IntersectionObserver | null;
|
35
|
+
progressObserver: IntersectionObserver | null;
|
36
|
+
inviewObserver: IntersectionObserver | null;
|
37
|
+
repeat: boolean;
|
38
|
+
selfDisable: boolean;
|
39
|
+
active: boolean;
|
40
|
+
abs: boolean;
|
41
|
+
isMouseMove: boolean;
|
42
|
+
started: boolean;
|
43
|
+
isMagneting: boolean;
|
44
|
+
onEnter: () => void;
|
45
|
+
onLeave: () => void;
|
46
|
+
private modules;
|
47
|
+
constructor(element: HTMLElement);
|
48
|
+
enter(): void;
|
49
|
+
leave(): void;
|
50
|
+
show(): void;
|
51
|
+
hide(): void;
|
52
|
+
connect(module: IStringModule): void;
|
53
|
+
calculatePositions(windowSize: number): void;
|
54
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { StringModule } from '../../../StringModule';
|
2
|
+
import { StringData } from '../../../Utils/StringData';
|
3
|
+
export declare class StringScrollbar extends StringModule {
|
4
|
+
private scrollbar;
|
5
|
+
private thumb;
|
6
|
+
private scrollTimeout;
|
7
|
+
private isDragging;
|
8
|
+
private startY;
|
9
|
+
private startScrollTop;
|
10
|
+
private mouseUpEventBind;
|
11
|
+
private mouseDownEventBind;
|
12
|
+
private mouseMoveEventBind;
|
13
|
+
private scrollbarState;
|
14
|
+
private scrollbarStateHorizontal;
|
15
|
+
private scrollbarStateVertical;
|
16
|
+
constructor(visitor: any);
|
17
|
+
destructor(): void;
|
18
|
+
onStart(): void;
|
19
|
+
onScroll(data: StringData): void;
|
20
|
+
onResize(): void;
|
21
|
+
onChangeScrollDirection(): void;
|
22
|
+
private addCustomStyles;
|
23
|
+
private createScrollbar;
|
24
|
+
private updateThumb;
|
25
|
+
private mouseDownEvent;
|
26
|
+
private mouseMoveEvent;
|
27
|
+
private mouseUpEvent;
|
28
|
+
private showScrollbar;
|
29
|
+
private hideScrollbar;
|
30
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { StringData } from '../../../Utils/StringData';
|
2
|
+
export declare class StringScrollbarHorizontal {
|
3
|
+
private scrollbar;
|
4
|
+
private thumb;
|
5
|
+
private isDragging;
|
6
|
+
private startY;
|
7
|
+
private startScrollPosition;
|
8
|
+
data: StringData;
|
9
|
+
constructor(data: StringData, scrollbar: any, thumb: any);
|
10
|
+
onResize(): void;
|
11
|
+
updateThumb(): void;
|
12
|
+
mouseDownEvent(e: MouseEvent): void;
|
13
|
+
mouseMoveEvent(e: MouseEvent): void;
|
14
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import { StringData } from '../../../Utils/StringData';
|
2
|
+
export declare class StringScrollbarVertical {
|
3
|
+
private scrollbar;
|
4
|
+
private thumb;
|
5
|
+
private isDragging;
|
6
|
+
private startCoordinate;
|
7
|
+
private startScrollPosition;
|
8
|
+
data: StringData;
|
9
|
+
constructor(data: StringData, scrollbar: any, thumb: any);
|
10
|
+
onResize(): void;
|
11
|
+
updateThumb(): void;
|
12
|
+
mouseDownEvent(e: MouseEvent): void;
|
13
|
+
mouseMoveEvent(e: MouseEvent): void;
|
14
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { StringModule } from "../../StringModule";
|
2
|
+
import { StringData } from "../../Utils/StringData";
|
3
|
+
export declare class StringParallax extends StringModule {
|
4
|
+
private setupParallax;
|
5
|
+
constructor(visitor: any);
|
6
|
+
onScroll(data: StringData): void;
|
7
|
+
onChangeScrollDirection(): void;
|
8
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { StringObject } from '../../Objects/StringObject';
|
2
|
+
import { StringModule } from '../../StringModule';
|
3
|
+
import { StringData } from '../../Utils/StringData';
|
4
|
+
export declare class StringProgress extends StringModule {
|
5
|
+
constructor(visitor: any);
|
6
|
+
onScroll(data: StringData): void;
|
7
|
+
onConnect(object: StringObject): void;
|
8
|
+
private setUpObject;
|
9
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import { StringData } from '../../Utils/StringData';
|
2
|
+
import { StringTypeSettings } from './StringTypeSettings';
|
3
|
+
export declare class StringScroll {
|
4
|
+
data: StringData;
|
5
|
+
isProg: boolean;
|
6
|
+
isParallaxEnabled: boolean;
|
7
|
+
name: string;
|
8
|
+
settings: StringTypeSettings;
|
9
|
+
v: number;
|
10
|
+
protected vT: number;
|
11
|
+
protected d: any;
|
12
|
+
scrollContainer: any;
|
13
|
+
constructor(document: any, settings: StringTypeSettings, data: StringData);
|
14
|
+
onCalcUpdate: any;
|
15
|
+
onUpdate(): void;
|
16
|
+
onWheel(e: any): void;
|
17
|
+
onScroll(e: any): void;
|
18
|
+
protected _scrollDirection: 'vertical' | 'horizontal';
|
19
|
+
set scrollDirection(scrollDirection: 'vertical' | 'horizontal');
|
20
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { StringData } from "../../Utils/StringData";
|
2
|
+
import { StringScroll } from "./StringScroll";
|
3
|
+
import { StringTypeSettings } from "./StringTypeSettings";
|
4
|
+
export declare class StringScrollDefault extends StringScroll {
|
5
|
+
private animateC;
|
6
|
+
constructor(document: any, settings: StringTypeSettings, data: StringData);
|
7
|
+
onUpdate(): void;
|
8
|
+
onWheel(e: any): void;
|
9
|
+
onScroll(e: any): void;
|
10
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { StringData } from "../../Utils/StringData";
|
2
|
+
import { StringScroll } from "./StringScroll";
|
3
|
+
import { StringTypeSettings } from "./StringTypeSettings";
|
4
|
+
export declare class StringScrollDisable extends StringScroll {
|
5
|
+
constructor(document: any, settings: StringTypeSettings, data: StringData);
|
6
|
+
onUpdate(): void;
|
7
|
+
onWheel(e: any): void;
|
8
|
+
onScroll(e: any): void;
|
9
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { StringData } from '../../Utils/StringData';
|
2
|
+
import { StringScroll } from './StringScroll';
|
3
|
+
import { StringTypeSettings } from './StringTypeSettings';
|
4
|
+
export declare class StringScrollSmooth extends StringScroll {
|
5
|
+
name: string;
|
6
|
+
private isScroll;
|
7
|
+
constructor(document: any, settings: StringTypeSettings, data: StringData);
|
8
|
+
onUpdate(): void;
|
9
|
+
onWheel(e: any): void;
|
10
|
+
onScroll(e: any): void;
|
11
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
export declare class StringTypeSettings {
|
2
|
+
private sC;
|
3
|
+
private sA;
|
4
|
+
private sD;
|
5
|
+
get speed(): number;
|
6
|
+
get speedAccelerate(): number;
|
7
|
+
get speedDecelerate(): number;
|
8
|
+
set speedAccelerate(speed: number);
|
9
|
+
set speedDecelerate(speed: number);
|
10
|
+
private updateScrollParams;
|
11
|
+
}
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import { StringObject } from '../../Objects/StringObject';
|
2
|
+
import { StringModule } from '../../StringModule';
|
3
|
+
interface ISplitOptions {
|
4
|
+
line?: Array<{
|
5
|
+
align: string;
|
6
|
+
random?: {
|
7
|
+
min: number;
|
8
|
+
max: number;
|
9
|
+
};
|
10
|
+
abs?: boolean;
|
11
|
+
}>;
|
12
|
+
word?: Array<{
|
13
|
+
align: string;
|
14
|
+
random?: {
|
15
|
+
min: number;
|
16
|
+
max: number;
|
17
|
+
};
|
18
|
+
abs?: boolean;
|
19
|
+
}>;
|
20
|
+
char?: Array<{
|
21
|
+
align: string;
|
22
|
+
random?: {
|
23
|
+
min: number;
|
24
|
+
max: number;
|
25
|
+
};
|
26
|
+
abs?: boolean;
|
27
|
+
}>;
|
28
|
+
charLine?: Array<{
|
29
|
+
align: string;
|
30
|
+
random?: {
|
31
|
+
min: number;
|
32
|
+
max: number;
|
33
|
+
};
|
34
|
+
abs?: boolean;
|
35
|
+
}>;
|
36
|
+
charWord?: Array<{
|
37
|
+
align: string;
|
38
|
+
random?: {
|
39
|
+
min: number;
|
40
|
+
max: number;
|
41
|
+
};
|
42
|
+
abs?: boolean;
|
43
|
+
}>;
|
44
|
+
wordLine?: Array<{
|
45
|
+
align: string;
|
46
|
+
random?: {
|
47
|
+
min: number;
|
48
|
+
max: number;
|
49
|
+
};
|
50
|
+
abs?: boolean;
|
51
|
+
}>;
|
52
|
+
}
|
53
|
+
export declare class StringSplit extends StringModule {
|
54
|
+
constructor(visitor: any);
|
55
|
+
onStart(): void;
|
56
|
+
onResize(): void;
|
57
|
+
onConnect(object: StringObject): void;
|
58
|
+
private parseSplitOptions;
|
59
|
+
private parseParam;
|
60
|
+
split(options: ISplitOptions, elementRoot: any): any;
|
61
|
+
private appendVirtualLineToDOM;
|
62
|
+
private applyOptions;
|
63
|
+
private createSpaceSpan;
|
64
|
+
private decodeHtmlEntity;
|
65
|
+
private calculateIndex;
|
66
|
+
private generateVariableName;
|
67
|
+
}
|
68
|
+
export {};
|
@@ -0,0 +1,12 @@
|
|
1
|
+
export declare class StringFPS {
|
2
|
+
private isAnimationStarted;
|
3
|
+
private fpsInterval;
|
4
|
+
private now;
|
5
|
+
private then;
|
6
|
+
private elapsed;
|
7
|
+
private requestAnimationId;
|
8
|
+
onFrame: () => void;
|
9
|
+
start(fps: number): void;
|
10
|
+
stop(): void;
|
11
|
+
private animate;
|
12
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import { IStringModule } from './IStringModule';
|
2
|
+
import { StringVirtualCursor } from './Mouse/StringVirtualCursor';
|
3
|
+
import { StringObject } from './Objects/StringObject';
|
4
|
+
import { StringAttribute } from './Utils/StringAttribute';
|
5
|
+
import { StringBoundingClientRect } from './Utils/StringBoundingClientRect';
|
6
|
+
import { StringData } from './Utils/StringData';
|
7
|
+
import { StringEvent } from './Utils/StringEvent';
|
8
|
+
import { StringLerp } from './Utils/StringLerp';
|
9
|
+
import { StringPosition } from './Utils/StringPosition';
|
10
|
+
export declare class StringModule implements IStringModule {
|
11
|
+
lerp: StringLerp;
|
12
|
+
attribute: StringAttribute;
|
13
|
+
boundingClientRect: StringBoundingClientRect;
|
14
|
+
position: StringPosition;
|
15
|
+
events: StringEvent;
|
16
|
+
data: StringData;
|
17
|
+
virtualCursor: StringVirtualCursor;
|
18
|
+
settings: any;
|
19
|
+
protected objectsMap: Map<string, StringObject>;
|
20
|
+
protected objects: Array<StringObject>;
|
21
|
+
protected htmlKey: string;
|
22
|
+
protected _type: number;
|
23
|
+
get type(): number;
|
24
|
+
constructor(visitor: any, settings?: any);
|
25
|
+
destructor(): void;
|
26
|
+
tryConnect(object: StringObject): boolean;
|
27
|
+
connect(object: StringObject): void;
|
28
|
+
addObject(id: string, object: StringObject): void;
|
29
|
+
removeObject(id: string): void;
|
30
|
+
onStart(): void;
|
31
|
+
onUpdate(data: StringData): void;
|
32
|
+
onResize(): void;
|
33
|
+
onConnect(object: StringObject): void;
|
34
|
+
onRebuild(): void;
|
35
|
+
onScroll(data: StringData): void;
|
36
|
+
onMouseMove(e: MouseEvent): void;
|
37
|
+
onWheel(e: WheelEvent): void;
|
38
|
+
onChangeDevice(): void;
|
39
|
+
onChangeScrollDirection(): void;
|
40
|
+
onMutationObserver(added: NodeList, removed: NodeList): void;
|
41
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import { StringModule } from "../StringModule";
|
2
|
+
import { StringData } from "../Utils/StringData";
|
3
|
+
export declare class StringFPSTracker extends StringModule {
|
4
|
+
private callCount;
|
5
|
+
private intervalId;
|
6
|
+
private displayElement;
|
7
|
+
constructor(visitor: any);
|
8
|
+
private createDisplayElement;
|
9
|
+
onStart(): void;
|
10
|
+
onUpdate(data: StringData): void;
|
11
|
+
destructor(): void;
|
12
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { StringModule } from "../StringModule";
|
2
|
+
import { StringData } from "../Utils/StringData";
|
3
|
+
export declare class StringPositionTracker extends StringModule {
|
4
|
+
private callCount;
|
5
|
+
private intervalId;
|
6
|
+
private displayElement;
|
7
|
+
constructor(visitor: any);
|
8
|
+
private createDisplayElement;
|
9
|
+
onStart(): void;
|
10
|
+
onScroll(data: StringData): void;
|
11
|
+
onUpdate(data: StringData): void;
|
12
|
+
destructor(): void;
|
13
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
export declare class StringData {
|
2
|
+
t: number;
|
3
|
+
c: number;
|
4
|
+
d: number;
|
5
|
+
v: number;
|
6
|
+
bS: number;
|
7
|
+
cF: number;
|
8
|
+
wS: number;
|
9
|
+
hnwS: number;
|
10
|
+
psW: number;
|
11
|
+
psH: number;
|
12
|
+
scsW: number;
|
13
|
+
scsH: number;
|
14
|
+
sD: 'vertical' | 'horizontal';
|
15
|
+
sC: any;
|
16
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
export declare class StringEvent {
|
2
|
+
private eventsByKey;
|
3
|
+
private events;
|
4
|
+
on(id: string, event: Function): void;
|
5
|
+
has(id: string): boolean;
|
6
|
+
emit(id: string, value: any): void;
|
7
|
+
off(id: string, event: Function): void;
|
8
|
+
all(value: any): void;
|
9
|
+
private updateAllEvents;
|
10
|
+
}
|
package/dist/bundle.js
ADDED
@@ -0,0 +1,2 @@
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.StringTune=e():t.StringTune=e()}(this,(()=>(()=>{"use strict";var t={d:(e,s)=>{for(var i in s)t.o(s,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{StringCursor:()=>n,StringDisplacement:()=>y,StringFPSTracker:()=>_,StringLazy:()=>i,StringLoading:()=>r,StringMagnetic:()=>a,StringParallax:()=>E,StringPositionTracker:()=>D,StringProgress:()=>f,StringScrollbar:()=>b,StringSplit:()=>L,StringTune:()=>H,StringVideoAutoplay:()=>o,default:()=>H});class s{get type(){return this._type}constructor(t,e=null){this.settings=null,this.objectsMap=new Map,this.objects=new Array,this.htmlKey="",this._type=1,this.data=t.data,this.lerp=t.lerp,this.attribute=t.attribute,this.boundingClientRect=t.boundingClientRect,this.position=t.position,this.virtualCursor=t.virtualCursor,this.events=t.events,this.settings=e}destructor(){}tryConnect(t){let e=this.attribute.process(t.el,"string","").split("|"),s=!1;return e.forEach((t=>{t==this.htmlKey&&(s=!0)})),s}connect(t){t.connect(this),this.onConnect(t)}addObject(t,e){this.objectsMap.set(t,e),this.objects=Array.from(this.objectsMap).map((([t,e])=>e))}removeObject(t){this.objectsMap.delete(t),this.objects=Array.from(this.objectsMap).map((([t,e])=>e))}onStart(){}onUpdate(t){}onResize(){}onConnect(t){}onRebuild(){}onScroll(t){}onMouseMove(t){}onWheel(t){}onChangeDevice(){}onChangeScrollDirection(){}onMutationObserver(t,e){}}class i extends s{constructor(t){super(t),this.htmlKey="lazy"}onStart(){document.querySelectorAll("img[string-lazy]").forEach((t=>{this.getImageSize(t,t.getAttribute("string-lazy")),t.classList.add("lazyLoad"),t.src=t.getAttribute("string-lazy"),t.addEventListener("load",(()=>{t.classList.add("-loaded")}))}))}onConnect(t){t.el}getImageSize(t,e){return new Promise(((s,i)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.responseType="arraybuffer",r.onload=()=>{if(206===r.status||200===r.status){const e=r.response,o=new Blob([e]),n=new Image;n.onload=()=>{t.style.aspectRatio=`${n.width} / ${n.height}`,s({width:n.width,height:n.height}),URL.revokeObjectURL(n.src)},n.onerror=()=>{i(new Error("Failed to load image"))},n.src=URL.createObjectURL(o)}else i(new Error("Failed to load image"))},r.onerror=()=>{i(new Error("Network error"))},r.setRequestHeader("Range","bytes=0-"),r.send()}))}}class r extends s{constructor(t,e=null){super(t),this.loadingTimeout=0,this._type=2,null!=e&&null!=e.timeout&&(this.loadingTimeout=e.timeout)}onStart(){setTimeout((()=>{document.documentElement.classList.add("-loaded")}),this.loadingTimeout)}}class o extends s{constructor(t){super(t),this.htmlKey="autoplay"}onConnect(t){const e=t.el,s=this.attribute.process(e,"string-src",""),i=null!=this.attribute.process(e,"string-started",null);"video"===e.tagName.toLowerCase()&&s&&0==i?(e.setAttribute("muted","muted"),e.setAttribute("playsinline",""),e.setAttribute("loop",""),e.setAttribute("autoplay",""),e.src=s,e.muted=!0,e.addEventListener("canplaythrough",(()=>{0==(null!=this.attribute.process(e,"string-started",null))&&this.tryPlay(t,e)}),{once:!0}),e.load()):console.warn("StringVideoAutoplay: Element is not a <video> tag or string-src is missing.",t.el)}tryPlay(t,e){e.play().catch((e=>{console.warn("Autoplay failed:",e),t.started=!1})).then((()=>{t.started=!0,e.setAttribute("string-started","")}))}}class n extends s{constructor(t,e=null){super(t),this.lerpFactor=.2,this.oldX=0,this.oldY=0,this.enterObjectsMap=new Map,this.enterObjects=new Array,this.htmlKey="cursor",this.cursor=document.querySelector("[string-cursor]"),null!=e&&null!=e.lerp&&(this.lerpFactor=e.lerp)}onUpdate(t){if(this.virtualCursor.smoothX!=this.oldX||this.virtualCursor.smoothY!=this.oldY){let t={lerpX:this.virtualCursor.lerpX,lerpY:this.virtualCursor.lerpY,x:this.virtualCursor.x,y:this.virtualCursor.y};this.events.emit("cursor",t),this.cursor.style.setProperty("--x",this.virtualCursor.smoothX),this.cursor.style.setProperty("--y",this.virtualCursor.smoothY),this.oldX=this.virtualCursor.smoothX,this.oldY=this.virtualCursor.smoothY}this.objects.forEach((t=>{if(t.isMouseMove){let e=t.el.getBoundingClientRect();const s=this.calculateOffset("center",this.virtualCursor.x-e.left,e.width),i=this.calculateOffset("center",this.virtualCursor.y-e.top,e.height);t.mouseX+=this.lerp.process(t.mouseX,s,t.lerp),t.mouseY+=this.lerp.process(t.mouseY,i,t.lerp),this.setMouseCoordinates(t,t.mouseX,t.mouseY)}else if(0!=t.mouseX||0!=t.mouseY){let e=t.el.getBoundingClientRect();const s=this.calculateOffset("center",t.halfWidth,e.width),i=this.calculateOffset("center",t.halfHeight,e.height);t.mouseX+=this.lerp.process(t.mouseX,s,t.lerp),t.mouseY+=this.lerp.process(t.mouseY,i,t.lerp),this.setMouseCoordinates(t,t.mouseX,t.mouseY)}}))}onConnect(t){let e=t.el,s=()=>{e.addEventListener("mousemove",i),e.addEventListener("mouseleave",r),t.isMouseMove=!0,null!=t.cursorTarget&&t.cursorTarget.classList.add("-show")},i=t=>{},r=()=>{e.removeEventListener("mousemove",i),e.removeEventListener("mouseleave",r),t.isMouseMove=!1,null!=t.cursorTarget&&t.cursorTarget.classList.remove("-show")};t.onEnter=()=>{e.addEventListener("mouseenter",s)},t.onLeave=()=>{e.removeEventListener("mouseenter",s),e.removeEventListener("mousemove",i),e.removeEventListener("mouseleave",r)}}setMouseCoordinates(t,e,s){0==t.selfDisable&&(t.el.style.setProperty("--mouse-x",e.toFixed(2)),t.el.style.setProperty("--mouse-y",s.toFixed(2))),t.connects.forEach((t=>{t.style.setProperty("--mouse-x",e.toFixed(2)),t.style.setProperty("--mouse-y",s.toFixed(2))}))}calculateOffset(t,e,s){switch(t){case"start":return e/s;case"end":return(e-s)/s;default:return(e-s/2)/(s/2)}}}class a extends s{constructor(t){super(t),this.htmlKey="magnetic"}onConnect(t){t.el}onMouseMove(t){this.objects.forEach((e=>{const s=e.el.getBoundingClientRect(),i=s.left+e.halfWidth,r=s.top+e.halfHeight,o=t.clientX-i,n=t.clientY-r,a=Math.sqrt(o**2+n**2);a<e.radius?(e.magneticTargetX=o*e.strength*((e.radius-a)/e.radius),e.magneticTargetY=n*e.strength*((e.radius-a)/e.radius),e.isMagneting=!0):(e.magneticTargetX=0,e.magneticTargetY=0)}))}onUpdate(t){this.objects.forEach((t=>{if(t.isMagneting){let e=this.lerp.process(t.magneticX,t.magneticTargetX,t.lerp),s=this.lerp.process(t.magneticY,t.magneticTargetY,t.lerp);e>-.01&&e<.01&&(e=0,t.magneticX=t.magneticTargetX),s>-.01&&s<.01&&(s=0,t.magneticY=t.magneticTargetY),t.magneticX+=e,t.magneticY+=s,t.el.style.setProperty("--magnetic-x",t.magneticX.toString()),t.el.style.setProperty("--magnetic-y",t.magneticY.toString()),t.magneticTargetX!=t.magneticX&&t.magneticTargetY!=t.magneticY||(t.isMagneting=!1)}}))}}class l{process(t,e,s){return s*(e-t)}}class h{constructor(){this._lF=.1,this.lerp=new l,this._x=0,this._y=0,this._lerpX=0,this._lerpY=0,this.targetX=0,this.targetY=0}get x(){return this.targetX}get y(){return this.targetY}get smoothX(){return this._x}get smoothY(){return this._y}get lerpX(){return this._lerpX}get lerpY(){return this._lerpY}onMouseMove(t){this.targetX=t.clientX,this.targetY=t.clientY}onUpdate(){this._lerpX=this.lerp.process(this._x,this.targetX,this._lF),this._lerpY=this.lerp.process(this._y,this.targetY,this._lF),this._x=Math.floor(this._x+this._lerpX),this._y=Math.floor(this._y+this._lerpY)}}const c="top",d="bottom",u="left",p="right";class m{constructor(t){this.id="",this.oStart=0,this.oEnd=0,this.size=0,this.startPos=0,this.endPos=0,this.differencePos=0,this.factor=1,this.sElPos="",this.sScrPos="",this.eElPos="",this.eScrPos="",this.halfWidth=0,this.halfHeight=0,this.start=0,this.end=0,this.mouseX=0,this.mouseY=0,this.magneticTargetX=0,this.magneticTargetY=0,this.magneticX=0,this.magneticY=0,this.lerp=0,this.strength=0,this.radius=0,this.parallaxPositionStart=0,this.parallaxPositionEnd=0,this.connects=new Array,this.cursorTarget=null,this.key="--progress",this.showObserver=null,this.progressObserver=null,this.inviewObserver=null,this.repeat=!1,this.selfDisable=!1,this.active=!1,this.abs=!1,this.isMouseMove=!1,this.started=!1,this.isMagneting=!1,this.onEnter=()=>{},this.onLeave=()=>{},this.modules=new Array,this.el=t}enter(){this.active=!0,this.modules.forEach((t=>{t.addObject(this.id,this)})),this.onEnter()}leave(){this.active=!1,this.modules.forEach((t=>{t.removeObject(this.id)})),this.onLeave()}show(){this.el.classList.add("-inview")}hide(){this.repeat&&this.el.classList.remove("-inview")}connect(t){this.modules.push(t)}calculatePositions(t){this.sElPos===c&&this.sScrPos===c||this.sElPos===u&&this.sScrPos===u?this.startPos=this.start-this.oEnd:this.sElPos===c&&this.sScrPos===d||this.sElPos===u&&this.sScrPos===p?this.startPos=this.start-t-this.oEnd:this.sElPos===d&&this.sScrPos===c||this.sElPos===p&&this.sScrPos===u?this.startPos=this.start+this.size-this.oEnd:(this.sElPos===d&&this.sScrPos===d||this.sElPos===p&&this.sScrPos===p)&&(this.startPos=this.start-t-this.oEnd),this.eElPos===c&&this.eScrPos===c||this.eElPos===u&&this.eScrPos===u?this.endPos=this.start+this.oStart:this.eElPos===c&&this.eScrPos===d||this.eElPos===u&&this.eScrPos===p?this.endPos=this.start-t+this.oStart:this.eElPos===d&&this.eScrPos===c||this.eElPos===p&&this.eScrPos===u?this.endPos=this.start+this.size+this.oStart:(this.eElPos===d&&this.eScrPos===d||this.eElPos===p&&this.eScrPos===p)&&(this.endPos=this.start-t+this.size+this.oStart),this.differencePos=this.endPos-this.startPos}}class g{constructor(t,e,s){this.isDragging=!1,this.startY=0,this.startScrollPosition=0,this.data=t,this.scrollbar=e,this.thumb=s}onResize(){const t=this.data.psH,e=this.data.wS,s=e/t*e;this.thumb.style.setProperty("--size",s+"px"),t<=e?this.scrollbar.classList.add("-hide"):this.scrollbar.classList.remove("-hide")}updateThumb(){const t=this.data.psH,e=this.data.wS;this.thumb.style.setProperty("--position",this.data.c/t*e+"px")}mouseDownEvent(t){this.startY=t.clientY,this.startScrollPosition=this.data.c}mouseMoveEvent(t){if(!this.isDragging)return;const e=t.clientY-this.startY,s=this.startScrollPosition+e/this.data.wS*this.data.psH;this.data.c=s,this.data.t=s,window.scrollTo(0,s),this.updateThumb()}}class v{constructor(t,e,s){this.isDragging=!1,this.startCoordinate=0,this.startScrollPosition=0,this.data=t,this.scrollbar=e,this.thumb=s}onResize(){const t=this.data.psW,e=this.data.wS,s=e/t*e;this.thumb.style.setProperty("--size",s+"px"),t<=e?this.scrollbar.classList.add("-hide"):this.scrollbar.classList.remove("-hide")}updateThumb(){const t=this.data.psW,e=this.data.wS;this.thumb.style.setProperty("--position",this.data.c/t*e+"px")}mouseDownEvent(t){this.startCoordinate=t.clientX,this.startScrollPosition=this.data.c}mouseMoveEvent(t){const e=t.clientX-this.startCoordinate,s=this.startScrollPosition+e/this.data.wS*this.data.psW;this.data.c=s,this.data.t=s,window.scrollTo(0,s),this.updateThumb()}}class b extends s{constructor(t){super(t),this.isDragging=!1,this.startY=0,this.startScrollTop=0,this.mouseUpEventBind=this.mouseUpEvent.bind(this),this.mouseDownEventBind=this.mouseDownEvent.bind(this),this.mouseMoveEventBind=this.mouseMoveEvent.bind(this)}destructor(){document.removeEventListener("mouseup",this.mouseUpEventBind),this.thumb.removeEventListener("mousedown",this.mouseDownEventBind),document.removeEventListener("mousemove",this.mouseMoveEventBind)}onStart(){this.createScrollbar(),this.updateThumb(),this.addCustomStyles(),document.addEventListener("mouseup",this.mouseUpEventBind),this.thumb.addEventListener("mousedown",this.mouseDownEventBind),document.addEventListener("mousemove",this.mouseMoveEventBind),document.documentElement.classList.add("-without-scrollbar")}onScroll(t){this.updateThumb(),this.showScrollbar(),this.hideScrollbar()}onResize(){this.scrollbarState.onResize()}onChangeScrollDirection(){"horizontal"==this.data.sD?this.scrollbarState=this.scrollbarStateVertical:this.scrollbarState=this.scrollbarStateHorizontal,this.scrollbarState.onResize()}addCustomStyles(){const t=document.createElement("style");t.textContent="\n ::-webkit-scrollbar {\n display: none;\n width: 0;\n height: 0;\n -webkit-appearance: none;\n }\n body {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n .-without-scrollbar::-webkit-scrollbar {\n display: none;\n }\n .-without-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n }\n ",document.head.appendChild(t)}createScrollbar(){this.scrollbar=document.createElement("div"),this.scrollbar.classList.add("scrollbar"),this.thumb=document.createElement("div"),this.thumb.classList.add("thumb"),this.scrollbar.appendChild(this.thumb),document.body.appendChild(this.scrollbar),this.scrollbarStateHorizontal=new g(this.data,this.scrollbar,this.thumb),this.scrollbarStateVertical=new v(this.data,this.scrollbar,this.thumb),this.scrollbarState=this.scrollbarStateHorizontal}updateThumb(){this.scrollbarState.updateThumb()}mouseDownEvent(t){this.isDragging=!0,this.scrollbarState.mouseDownEvent(t),document.body.style.userSelect="none",this.scrollbar.classList.add("-touch")}mouseMoveEvent(t){this.isDragging&&this.scrollbarState.mouseMoveEvent(t)}mouseUpEvent(){this.isDragging=!1,document.body.style.userSelect="",this.hideScrollbar(),this.scrollbar.classList.remove("-touch")}showScrollbar(){this.scrollbar.classList.add("-scroll")}hideScrollbar(){this.scrollTimeout&&clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>{this.scrollbar.classList.remove("-scroll")}),1e3)}}class y extends s{constructor(t){super(t),this.htmlKey="displacement."}onScroll(t){document.documentElement.style.setProperty("--lerp",t.v.toString())}}class E extends s{constructor(t){super(t),this.setupParallax=(t,e)=>{},this.htmlKey="parallax"}onScroll(t){this.objects.forEach((t=>{let e=Math.min(1,Math.max(0,(this.data.c-t.startPos)/t.differencePos));t.el.style.setProperty(t.key,e.toString()),this.setupParallax(t,e)}))}onChangeScrollDirection(){"vertical"==this.data.sD?this.setupParallax=(t,e)=>{let s=`translate3d(0, ${t.factor*this.data.wS*t.parallaxPositionStart+e*t.factor*this.data.wS*t.parallaxPositionEnd}px, 0)`;t.el.style.transform=s,t.connects.forEach((t=>{t.style.transform=s}))}:this.setupParallax=(t,e)=>{let s=`translate3d(${t.factor*this.data.wS*t.parallaxPositionStart+e*t.factor*this.data.wS*t.parallaxPositionEnd}px, 0, 0)`;t.el.style.transform=s,t.connects.forEach((t=>{t.style.transform=s}))}}}class f extends s{constructor(t){super(t),this.htmlKey="progress"}onScroll(t){this.objects.forEach((t=>{this.setUpObject(t,this.data.c)}))}onConnect(t){t.onEnter=()=>{this.setUpObject(t,this.data.c)}}setUpObject(t,e){let s=Math.min(1,Math.max(0,(e-t.startPos)/t.differencePos));this.events.emit(`progress_${t.id}`,s),t.el.style.setProperty(t.key,s.toString()),t.connects.forEach((e=>{e.style.setProperty(t.key,s.toString())}))}}class w{constructor(t,e,s){this.isProg=!1,this.isParallaxEnabled=!1,this.name="",this.v=0,this.vT=0,this.onCalcUpdate=()=>{this.scrollContainer.scrollTo(0,this.data.c)},this._scrollDirection="vertical",this.d=t,this.settings=e,this.data=s,this.scrollContainer=window}onUpdate(){}onWheel(t){}onScroll(t){}set scrollDirection(t){this._scrollDirection=t,"vertical"==this._scrollDirection?this.onCalcUpdate=()=>{this.scrollContainer.scrollTo(0,this.data.c)}:"horizontal"==this._scrollDirection&&(this.onCalcUpdate=()=>{this.scrollContainer.scrollTo(this.data.c,0)})}}class S extends w{constructor(t,e,s){super(t,e,s),this.animateC=0,this.name="mobile"}onUpdate(){this.vT=this.d.documentElement.scrollTop-this.animateC,this.animateC=this.d.documentElement.scrollTop,this.v=this.vT}onWheel(t){}onScroll(t){this.data.c=this.d.documentElement.scrollTop,this.data.t=this.d.documentElement.scrollTop,this.data.d=0}}class C extends w{constructor(t,e,s){super(t,e,s),this.name="disable"}onUpdate(){}onWheel(t){}onScroll(t){t.preventDefault()}}class P extends w{constructor(t,e,s){super(t,e,s),this.name="desktop",this.isScroll=!1,this.name="desktop"}onUpdate(){if(this.data.v=(this.data.t-this.data.c)*this.settings.speed,0!=this.data.v){let t;this.isScroll=!0,this.data.v>0?(t=Math.ceil(this.data.c+this.data.v),document.documentElement.classList.add("-scroll-forward"),document.documentElement.classList.remove("-scroll-back")):(t=Math.floor(this.data.c+this.data.v),document.documentElement.classList.add("-scroll-back"),document.documentElement.classList.remove("-scroll-forward")),this.data.c!=t?(this.data.c=t,this.isProg=!0,this.onCalcUpdate()):this.data.c=t}else this.isScroll&&(this.isScroll=!1,this.data.v=0,this.data.c=this.data.t,this.isProg=!1,document.documentElement.classList.remove("-scroll-back"),document.documentElement.classList.remove("-scroll-forward"),document.documentElement.style.setProperty("--lerp","0"))}onWheel(t){0!=t.deltaY&&(t.preventDefault(),this.data.d=t.deltaY,this.data.t+=this.data.d,this.data.t=Math.min(Math.max(this.data.t,0),this.data.bS))}onScroll(t){t.preventDefault(),0==this.isProg&&(this.data.v=this.d.documentElement.scrollTop-this.data.c,this.data.c=this.d.documentElement.scrollTop,this.data.t=this.d.documentElement.scrollTop,this.data.d=0,this.onCalcUpdate())}}class x{constructor(){this.sC=0,this.sA=.13,this.sD=.04}get speed(){return this.sC}get speedAccelerate(){return this.sA}get speedDecelerate(){return this.sD}set speedAccelerate(t){this.sA=t,this.updateScrollParams()}set speedDecelerate(t){this.sD=t,this.updateScrollParams()}updateScrollParams(){this.sC=this.sA*(1-this.sD)}}class L extends s{constructor(t){super(t),this.htmlKey="split"}onStart(){}onResize(){document.querySelectorAll('[string="split"].-splited').forEach((t=>{const e=this.parseSplitOptions(t.getAttribute("string-split"));t.innerHTML=this.split(e,t).html}))}onConnect(t){let e=t.el;if(!e.classList.contains("-splited")){e.classList.add("-splited"),e.setAttribute("string-split-original",e.innerHTML);const t=this.parseSplitOptions(e.getAttribute("string-split"));e.innerHTML=this.split(t,e).html}}parseSplitOptions(t){const e={line:[],word:[],char:[],charLine:[],charWord:[],wordLine:[]};return t&&t.split("|").forEach((t=>{const s=t.match(/^(\w+-)?(\w+)(\[(.*?)\])?$/);if(s){const t=s[1]||"",i=s[2],r=s[4]?s[4].split(","):[];switch(t+i){case"char-line":e.charLine.push(this.parseParam(r));break;case"char-word":e.charWord.push(this.parseParam(r));break;case"word-line":e.wordLine.push(this.parseParam(r));break;case"line":e.line.push(this.parseParam(r));break;case"word":e.word.push(this.parseParam(r));break;case"char":e.char.push(this.parseParam(r))}}})),e}parseParam(t){const e={align:"start"};return t.forEach((t=>{if("abs"===t)e.abs=!0;else if(t.startsWith("random")){const s=t.match(/random\((\d+),(\d+)\)/);s?(e.random={min:parseInt(s[1]),max:parseInt(s[2])},e.align="random"):e.align="random"}else["start","center","end"].includes(t)?e.align=t:e.align="start"})),e}split(t,e){let s=e.getAttribute("string-split-original");if(0===s.length)return"";s=this.decodeHtmlEntity(s);const i=document.createElement("span"),r=s.split(/\s+/);let o=0,n=0;const a=s.replace(/\s/g,"").length,l=document.createElement("span"),h=window.getComputedStyle(e);l.style.fontFamily=h.fontFamily,l.style.fontSize=h.fontSize,l.style.letterSpacing=h.letterSpacing,l.style.lineHeight=h.lineHeight,l.style.fontWeight=h.fontWeight,l.classList.add("-s-char"),document.body.appendChild(l);let c=[],d=[],u=0;r.forEach(((t,s)=>{l.textContent=t,t.length>0&&(l.textContent+=" ");const i=l.offsetWidth,r={text:t,width:i,chars:new Array};Array.from(t).forEach(((t,e)=>{const s={text:t};r.chars.push(s)})),u+i>e.offsetWidth&&(c.push(d),d=[],u=0,o+=d.length),d.push(r),u+=i})),c.push(d);let p=!1;null!=t.line&&t.line.length>0&&(p=!0),null!=t.wordLine&&t.wordLine.length>0&&(p=!0),null!=t.charLine&&t.charLine.length>0&&(p=!0);let m=0;if(p)for(let e=0;e<c.length;e++)this.appendVirtualLineToDOM(e,c.length,r.length,i,c[e],t,o,a,m),m+=c[e].length;else for(let e=0;e<c.length;e++)c[e].forEach(((e,s)=>{if(e.chars.length>0){const l=document.createElement("span");l.classList.add("-s-word"),e.chars.forEach(((s,i)=>{const r=document.createElement("span");r.classList.add("-s-char"),r.textContent=s.text,this.applyOptions(r,t.char,o,"char",i,a),this.applyOptions(r,t.charWord,i,"char-word",i,e.text.length),l.appendChild(r),o++})),this.applyOptions(l,t.word,n,"word",s,r.length),e.chars.length>0&&(l.innerHTML+=" "),i.appendChild(l),n++}}));return document.body.removeChild(l),{html:i.innerHTML}}appendVirtualLineToDOM(t,e,s,i,r,o,n,a,l){const h=document.createElement("span");h.classList.add("-s-line"),this.applyOptions(h,o.line,t,"line",0,e);let c=0,d=0,u=0;r.forEach(((t,e)=>{u+=t.text.length})),r.forEach(((t,e)=>{if(t.chars.length>0){const i=document.createElement("span");i.classList.add("-s-word"),t.chars.forEach(((e,s)=>{const r=document.createElement("span");r.classList.add("-s-char"),r.textContent=e.text,this.applyOptions(r,o.char,n,"char",s,a),this.applyOptions(r,o.charLine,c,"char-line",s,u),this.applyOptions(r,o.charWord,s,"char-word",s,t.text.length),i.appendChild(r),n++,c++})),this.applyOptions(i,o.word,l+d,"word",l+d,s-1),this.applyOptions(i,o.wordLine,e,"word-line",e,r.length),e<r.length-1&&(i.innerHTML+=" "),h.appendChild(i),d++}})),i.appendChild(h)}applyOptions(t,e,s,i,r,o){e&&e.forEach(((e,n)=>{let a=this.calculateIndex(e,s,r,o);const l=this.generateVariableName(i,e,n);t.style.setProperty(l,String(a))}))}createSpaceSpan(){const t=document.createElement("span");return t.innerHTML=" ",t}decodeHtmlEntity(t){return t.replace(/&/g,"&")}calculateIndex(t,e,s,i){let r=e;if("random"===t.align){void 0===t.random&&(t.random={min:0,max:i});const e=t.random.min||0,s=t.random.max||i;r=Math.floor(Math.random()*(s-e+1))+e}return"end"===t.align?r=i-r-1:"center"===t.align&&(r-=Math.floor(i/2)),t.abs&&(r=Math.abs(r)),r}generateVariableName(t,e,s){let i=`--${t}`;return e.align&&(i+=`-${e.align}`),i}}class M{constructor(){this.isAnimationStarted=!1,this.requestAnimationId=0,this.onFrame=()=>{}}start(t){this.isAnimationStarted||(this.fpsInterval=1e3/t,this.then=Date.now(),this.animate(),this.isAnimationStarted=!0)}stop(){this.isAnimationStarted&&(cancelAnimationFrame(this.requestAnimationId),this.isAnimationStarted=!1)}animate(){this.requestAnimationId=requestAnimationFrame((()=>{this.animate()})),this.now=Date.now(),this.elapsed=this.now-this.then,this.elapsed>this.fpsInterval&&(this.then=this.now-this.elapsed%this.fpsInterval,this.onFrame())}}class _ extends s{constructor(t){super(t),this.callCount=0,this._type=2}createDisplayElement(){this.displayElement=document.createElement("div"),this.displayElement.style.position="fixed",this.displayElement.style.bottom="10px",this.displayElement.style.right="10px",this.displayElement.style.backgroundColor="#C8C2CF",this.displayElement.style.border="1px solid #101214",this.displayElement.style.color="green",this.displayElement.style.zIndex="1000",this.displayElement.setAttribute("data-fps","0"),document.body.appendChild(this.displayElement);const t=document.createElement("style");t.innerHTML="\n [data-fps]::after {\n content: attr(fps);\n position: relative;\n bottom: 0;\n right: 0;\n color: #101214;\n padding: 2px 8px;\n font-family: Arial, sans-serif;\n font-size: 12px;\n }\n ",document.head.appendChild(t)}onStart(){this.createDisplayElement(),this.intervalId=setInterval((()=>{this.displayElement.setAttribute("fps",`${this.callCount}`),this.callCount=0}),1e3)}onUpdate(t){this.callCount++}destructor(){clearInterval(this.intervalId),document.body.removeChild(this.displayElement)}}class D extends s{constructor(t){super(t),this.callCount=0,this._type=2}createDisplayElement(){this.displayElement=document.createElement("div"),this.displayElement.style.position="fixed",this.displayElement.style.bottom="10px",this.displayElement.style.left="10px",this.displayElement.style.backgroundColor="#C8C2CF",this.displayElement.style.border="1px solid #101214",this.displayElement.style.color="green",this.displayElement.style.zIndex="1000",this.displayElement.setAttribute("data-position","0"),document.body.appendChild(this.displayElement);const t=document.createElement("style");t.innerHTML="\n [data-position]::after {\n content: attr(value);\n position: relative;\n bottom: 0;\n right: 0;\n color: #101214;\n padding: 2px 8px;\n font-family: Arial, sans-serif;\n font-size: 12px;\n }\n ",document.head.appendChild(t)}onStart(){this.createDisplayElement()}onScroll(t){this.displayElement.setAttribute("value",`${this.data.c}`)}onUpdate(t){this.callCount++}destructor(){document.body.removeChild(this.displayElement)}}class T{process(t,e,s=null){return null==t.getAttribute(e)?s:t.getAttribute(e)}}class O{process(t){return t.getBoundingClientRect()}}class A{constructor(){this.t=0,this.c=0,this.d=0,this.v=0,this.bS=0,this.cF=1,this.wS=0,this.hnwS=0,this.psW=0,this.psH=0,this.scsW=1,this.scsH=1,this.sD="vertical"}}class W{constructor(){this.eventsByKey=new Map,this.events=new Array}on(t,e){var s;0==this.eventsByKey.has(t)&&this.eventsByKey.set(t,[]),null===(s=this.eventsByKey.get(t))||void 0===s||s.push(e),this.updateAllEvents()}has(t){return this.eventsByKey.has(t)}emit(t,e){var s;this.eventsByKey.has(t)&&(null===(s=this.eventsByKey.get(t))||void 0===s||s.forEach((t=>{t(e)})))}off(t,e){let s=this.eventsByKey.get(t);null!=s&&this.eventsByKey.set(t,s.filter((t=>t!==e))),this.updateAllEvents()}all(t){this.events.forEach((e=>{e(t)}))}updateAllEvents(){Array.from(this.eventsByKey.values()).forEach((t=>{t.forEach((t=>{this.events.push(t)}))}))}}class j{parseSingle(t,e,s,i){let r,o=t.startsWith("-");return o&&(t=t.slice(1)),"selfHeight"===t?r=e.offsetHeight:t.endsWith("px")?r=parseFloat(t):t.endsWith("%")?r=parseFloat(t)*s/100:t.endsWith("rem")&&(r=parseFloat(t)*i),o?-r:r}}class z{process(t,e=document.body){let s;try{s=e.getBoundingClientRect()}catch(t){s=document.body.getBoundingClientRect()}let i=function(t){let{top:e,left:s,width:i,height:r}=t.getBoundingClientRect(),o=function(t){return window.getComputedStyle(t).transform.split(/\(|,|\)/).slice(1,-1).map((function(t){return parseFloat(t)}))}(t);if(6==o.length){var n=o;let t=n[0]*n[3]-n[1]*n[2];return{width:i/n[0],height:r/n[3],left:(s*n[3]-e*n[2]+n[2]*n[5]-n[4]*n[3])/t,top:(-s*n[1]+e*n[0]+n[4]*n[1]-n[0]*n[5])/t}}return{top:e,left:s,width:i,height:r}}(t);return{top:i.top-s.top,left:i.left-s.left}}}class H{get scrollDirection(){return this.data.sD}set scrollDirection(t){this.data.sD=t,this.sEn.scrollDirection=t,this.sEnSmooth.scrollDirection=t,this.sEnDefault.scrollDirection=t,this.sEnDisable.scrollDirection=t,"horizontal"==t?(document.documentElement.classList.add("-horizontal"),document.documentElement.classList.remove("-vertical")):(document.documentElement.classList.add("-vertical"),document.documentElement.classList.remove("-horizontal")),this.rebuild(),this.initObjects(),this.modules.forEach((t=>{t.onChangeScrollDirection()}))}get speedAccelerate(){return this.settings.speedAccelerate}set speedAccelerate(t){this.settings.speedAccelerate=t}get speedDecelerate(){return this.settings.speedDecelerate}set speedDecelerate(t){this.settings.speedDecelerate=t}get scrollPosition(){return this.data.c}set scrollPosition(t){this.data.c=t,this.data.t=t,window.scrollTo(0,this.data.c),this.modules.forEach((t=>{t.onScroll(this.data)}))}set scrollContainer(t){let e=null!=this.data.sC;e&&(this.data.sC.removeEventListener("scroll",this.onScrollBind),this.data.sC.removeEventListener("resize",this.onResizeBind)),this.sEn.scrollContainer=t,this.sEnSmooth.scrollContainer=t,this.sEnDefault.scrollContainer=t,this.sEnDisable.scrollContainer=t,this.data.sC=t,e&&(this.data.sC.addEventListener("scroll",this.onScrollBind),this.data.sC.addEventListener("resize",this.onResizeBind)),this.rebuild(),this.initObjects()}constructor(){this.modules=new Array,this.modulesUI=new Array,this.events=new W,this.loop=new M,this.wW=0,this.wH=0,this._virtualCursor=new h,this._lerp=new l,this._attribute=new T,this._boundingClientRect=new O,this._position=new z,this.objects=new Map,this.connectQueue=new Array,this.globalId=1,this._parser=new j,this.root=document.body,this.window=window,this.settings=new x,this.data=new A,this.settings.speedAccelerate=.13,this.settings.speedDecelerate=.04,this.sEnSmooth=new P(document,this.settings,this.data),this.sEnDefault=new S(document,this.settings,this.data),this.sEnDisable=new C(document,this.settings,this.data),this.sEn=this.sEnSmooth,this.scrollContainer=window,this.data.sC=this.window,this.data.sD="vertical",document.documentElement.classList.add("-vertical"),this.onWheelBind=this.onWheelEvent.bind(this),this.onScrollBind=this.onScrollEvent.bind(this),this.onResizeBind=this.onResizeEvent.bind(this),this.onMouseMoveBind=this.onMouseMoveEvent.bind(this),this.loop.onFrame=()=>{this.onUpdateEvent()},this.rebuild()}static getInstance(){return H.i||(H.i=new H),H.i}use(t,e=null){const s=new t({data:this.data,lerp:this._lerp,attribute:this._attribute,boundingClientRect:this._boundingClientRect,position:this._position,virtualCursor:this._virtualCursor,events:this.events},e);1==s.type&&this.modules.push(s),2==s.type&&this.modulesUI.push(s)}start(t){this.data.sC.addEventListener("scroll",this.onScrollBind),this.data.sC.addEventListener("resize",this.onResizeBind),this.root.addEventListener("wheel",this.onWheelBind,{passive:!1}),this.root.addEventListener("mousemove",this.onMouseMoveBind),new ResizeObserver((t=>{Array.from(this.objects.values()).forEach((t=>{this.setupObject(t.el,t)}))})).observe(document.body),this.loop.start(t),document.documentElement.classList.add("-string"),this.modules.forEach((t=>{t.onStart()})),this.modulesUI.forEach((t=>{t.onStart()})),this.initObjects(),this.initMutationObserver()}initObjects(){document.querySelectorAll("[string]").forEach((t=>{this.addObject(t)})),document.querySelectorAll("[string-copy-from]").forEach((t=>{let e=this._attribute.process(t,"string-copy-from");if(null!=e&&this.objects.has(e)){let s=this.objects.get(e);null!=s&&s.connects.push(t)}})),this.modules.forEach((t=>{t.onResize(),t.onScroll(this.data),t.onUpdate(this.data)}))}destroy(){this.window.removeEventListener("scroll",this.onScrollBind),this.root.removeEventListener("wheel",this.onScrollBind),this.window.removeEventListener("resize",this.onResizeBind),this.root.removeEventListener("mousemove",this.onMouseMoveBind),this.loop.stop(),this.modules.forEach((t=>{t.destructor()})),this.modulesUI.forEach((t=>{t.destructor()}))}on(t,e,s=""){switch(t){case"scroll":this.events.on("scroll",e);break;case"progress":this.events.on(`progress_${s}`,e);break;case"lerp":this.events.on("lerp",e);break;case"intersection":this.events.on(`intersection_${s}`,e);break;case"inview":this.events.on(`inview_${s}`,e);break;case"cursor":this.events.on("cursor",e)}}off(t,e,s=""){switch(t){case"scroll":this.events.off("scroll",e);break;case"progress":this.events.off(`progress_${s}`,e);break;case"lerp":this.events.off("lerp",e);break;case"intersection":this.events.off(`intersection_${s}`,e);break;case"inview":this.events.off(`inview_${s}`,e);break;case"cursor":this.events.off("cursor",e)}}setupObject(t,e){var s,i,r;null===(s=e.showObserver)||void 0===s||s.disconnect(),null===(i=e.progressObserver)||void 0===i||i.disconnect(),null===(r=e.inviewObserver)||void 0===r||r.disconnect();let o=this._boundingClientRect.process(t),n=o.width/this.data.scsW,a=o.height/this.data.scsH,l=this._attribute.process(t,"string-enter-el")||"top",h=this._attribute.process(t,"string-enter-vp")||"bottom",c=this._attribute.process(t,"string-exit-el")||"bottom",d=this._attribute.process(t,"string-exit-vp")||"top";e.selfDisable=null!=this._attribute.process(t,"string-self-disable"),e.abs=null!=this._attribute.process(t,"string-abs");let u=this._attribute.process(t,"string-cursor-target");null!=u&&(e.cursorTarget=document.querySelector(`[string-cursor-content="${u}"]`)),e.id=this._attribute.process(t,"string-id",`string-${this.globalId}`),e.key=this._attribute.process(t,"string-key","--progress"),e.strength=this._attribute.process(t,"string-strength",.3),e.radius=this._attribute.process(t,"string-radius",150),e.lerp=this._attribute.process(t,"string-lerp",.2);let p=this._attribute.process(t,"string-parallax-bias",0);e.parallaxPositionStart=.5*p-.5,e.parallaxPositionEnd=.5+.5*(1-p),t.setAttribute("string-id",e.id),"vertical"==this.data.sD?e.size=a:e.size=n,e.oStart=-1*this._parser.parseSingle(this._attribute.process(t,"string-offset-start","0%"),t,this.data.wS,16),e.oEnd=-1*this._parser.parseSingle(this._attribute.process(t,"string-offset-end","0%"),t,this.data.wS,16);let m=-1*this._parser.parseSingle(this._attribute.process(t,"string-offset-start","0%"),t,this.data.wS,16),g=-1*this._parser.parseSingle(this._attribute.process(t,"string-offset-end","0%"),t,this.data.wS,16);e.factor=this._attribute.process(t,"string-parallax",0),e.oStart+=e.factor*this.data.wS*.5,e.oEnd+=e.factor*this.data.wS*.5,e.repeat=null!=this._attribute.process(t,"string-repeat"),e.sElPos=l,e.sScrPos=h,e.eElPos=c,e.eScrPos=d,e.halfWidth=n/2,e.halfHeight=a/2;let v=this.data.wS;if("vertical"==this.data.sD){let s=this._position.process(t,this.data.sC).top/this.data.scsH;e.start=s,e.end=s+a}else{let s=this._position.process(t,this.data.sC).left/this.data.scsW;e.start=s,e.end=s+n}e.calculatePositions(v);let b,y,E=this.connectQueue.filter((t=>t.id==e.id));this.connectQueue=this.connectQueue.filter((t=>t.id!=e.id)),E.forEach((t=>{e.connects.push(t.element)})),"vertical"==this.data.sD?(b={root:null,rootMargin:`${m+this.data.wS}px 0px ${g+this.data.wS}px 0px`,threshold:.001},y={root:null,rootMargin:`${m}px 0px ${g}px 0px`,threshold:.001}):(b={root:null,rootMargin:`0px ${m+this.data.wS}px 0px ${g+this.data.wS}px`,threshold:.001},y={root:null,rootMargin:`0px ${m}px 0px ${g}px`,threshold:.001});let f=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting?0==e.active&&(this.events.emit(`activate_object_${e.id}`,!0),e.enter()):1==e.active&&(this.events.emit(`activate_object_${e.id}`,!1),e.leave())}))}),b),w=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting?(this.events.emit(`intersection_${e.id}`,!0),e.show()):(this.events.emit(`intersection_${e.id}`,!1),e.hide())}))}),y),S=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting?this.events.emit(`inview_${e.id}`,!0):this.events.emit(`inview_${e.id}`,!1)}))}),{root:null,rootMargin:"0px 0px 0px 0px",threshold:.001});f.observe(t),w.observe(t),S.observe(t),e.showObserver=w,e.progressObserver=f,e.inviewObserver=S}addObject(t){let e,s=this._attribute.process(t,"string-inited");e=null==s?new m(t):this.objects.get(this._attribute.process(t,"string-id")),t.setAttribute("string-inited",""),this.setupObject(t,e),this.modules.forEach((t=>{t.tryConnect(e)&&t.connect(e)})),this.objects.set(e.id,e),this.globalId++}removeObject(t){let e=this.objects.get(t);null!=(null==e?void 0:e.showObserver)&&(null==e||e.showObserver.disconnect()),null!=(null==e?void 0:e.progressObserver)&&(null==e||e.progressObserver.disconnect()),null!=(null==e?void 0:e.inviewObserver)&&(null==e||e.inviewObserver.disconnect()),this.objects.delete(t),null==e||e.el.removeAttribute("string-inited"),null==e||e.leave(),e=void 0}onMouseMoveEvent(t){this._virtualCursor.onMouseMove(t),this.modules.forEach((e=>{e.onMouseMove(t)})),this.modulesUI.forEach((e=>{e.onMouseMove(t)}))}onWheelEvent(t){this.sEn.onWheel(t),this.modules.forEach((e=>{e.onWheel(t)})),this.modulesUI.forEach((e=>{e.onWheel(t)}))}onScrollEvent(t){this.modules.forEach((t=>{t.onScroll(this.data)})),this.modulesUI.forEach((t=>{t.onScroll(this.data)})),this.events.emit("lerp",this.data.v),this.events.emit("scroll",this.data.c)}onUpdateEvent(){this._virtualCursor.onUpdate(),this.sEn.onUpdate(),this.modules.forEach((t=>{t.onUpdate(this.data)})),this.modulesUI.forEach((t=>{t.onUpdate(this.data)}))}onResizeEvent(){try{let t=this.sEn.scrollContainer.getBoundingClientRect();this.wW=t.width,this.wH=t.height}catch(t){this.wW=this.sEn.scrollContainer.innerWidth,this.wH=this.sEn.scrollContainer.innerHeight}("vertical"==this.data.sD&&this.wW!=this.data.wS||this.window.innerWidth>1024||"horizontal"==this.data.sD&&this.wW!=this.data.wS||this.window.innerWidth>1024)&&(this.rebuild(),this.modules.forEach((t=>{t.onResize()})),this.modulesUI.forEach((t=>{t.onResize()})))}initMutationObserver(){new MutationObserver((t=>{t.forEach((t=>{"childList"===t.type&&(t.addedNodes.length>0&&t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&t.querySelectorAll("[string]:not([string-inited])").forEach((t=>{this.addObject(t);let e=this._attribute.process(t,"string-copy-from");if(null!=e)if(this.objects.has(e)){let s=this.objects.get(e);null!=s&&s.connects.push(t)}else this.connectQueue.push({id:e,element:t})}))})),t.removedNodes.length>0&&t.removedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&t.querySelectorAll("[string]").forEach((t=>{let e=t.getAttribute("string-id"),s=this._attribute.process(t,"string-copy-from");null!=s&&(this.connectQueue=this.connectQueue.filter((t=>t.id!=s))),null!=e&&this.removeObject(e)}))})),(t.addedNodes.length>0||t.removedNodes.length>0)&&this.modules.forEach((t=>{t.onRebuild()})))}))})).observe(document.body,{attributes:!1,childList:!0,subtree:!0})}rebuild(){try{let e=(t=this.data.sC,window.getComputedStyle(t).transform.split(/\(|,|\)/).slice(1,-1).map((function(t){return parseFloat(t)})));this.data.scsW=e[0],this.data.scsH=e[3]}catch(t){this.data.scsW=1,this.data.scsH=1}var t;try{let t=this.data.sC.getBoundingClientRect();this.wW=t.width/this.data.scsW,this.wH=t.height/this.data.scsH}catch(t){this.wW=this.data.sC.innerWidth,this.wH=this.data.sC.innerHeight}let e=document.body,s=document.documentElement;this.data.psW=this.data.sC.scrollWidth,this.data.psH=this.data.sC.scrollHeight,null==this.data.psW&&(this.data.psW=Math.max(e.scrollWidth,e.offsetWidth,s.clientWidth,s.scrollWidth,s.offsetWidth)),null==this.data.psH&&(this.data.psH=Math.max(e.scrollHeight,e.offsetHeight,s.clientHeight,s.scrollHeight,s.offsetHeight)),"vertical"==this.data.sD?(this.data.bS=this.data.psH-this.wH,this.data.wS=this.wH):(this.data.bS=this.data.psW-this.wW,this.data.wS=this.wW),this.data.hnwS=-.5*this.data.wS}}return e})()));
|
2
|
+
//# sourceMappingURL=bundle.js.map
|