@studiometa/js-toolkit 3.0.0-alpha.8 → 3.0.0-beta.0
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/Base/Base.js +2 -2
- package/Base/Base.js.map +2 -2
- package/Base/features.d.ts +1 -0
- package/Base/features.js +1 -0
- package/Base/features.js.map +2 -2
- package/Base/managers/ChildrenManager.d.ts +1 -1
- package/Base/managers/ChildrenManager.js +8 -1
- package/Base/managers/ChildrenManager.js.map +2 -2
- package/Base/managers/EventsManager.js +15 -17
- package/Base/managers/EventsManager.js.map +2 -2
- package/Base/managers/OptionsManager.d.ts +2 -2
- package/Base/managers/OptionsManager.js +8 -8
- package/Base/managers/OptionsManager.js.map +2 -2
- package/Base/managers/RefsManager.js +7 -5
- package/Base/managers/RefsManager.js.map +2 -2
- package/Base/utils.d.ts +4 -0
- package/Base/utils.js +7 -3
- package/Base/utils.js.map +2 -2
- package/decorators/withBreakpointObserver.js +14 -9
- package/decorators/withBreakpointObserver.js.map +2 -2
- package/decorators/withDrag.d.ts +1 -1
- package/decorators/withDrag.js.map +1 -1
- package/decorators/withRelativePointer.d.ts +1 -1
- package/decorators/withRelativePointer.js.map +1 -1
- package/decorators/withResponsiveOptions.d.ts +3 -1
- package/decorators/withResponsiveOptions.js +22 -2
- package/decorators/withResponsiveOptions.js.map +2 -2
- package/helpers/createApp.js +5 -1
- package/helpers/createApp.js.map +2 -2
- package/helpers/getDirectChildren.js +10 -5
- package/helpers/getDirectChildren.js.map +2 -2
- package/package.json +1 -1
- package/services/AbstractService.d.ts +98 -0
- package/services/AbstractService.js +115 -0
- package/services/AbstractService.js.map +7 -0
- package/services/DragService.d.ts +124 -0
- package/services/DragService.js +217 -0
- package/services/DragService.js.map +7 -0
- package/services/KeyService.d.ts +29 -0
- package/services/KeyService.js +48 -0
- package/services/KeyService.js.map +7 -0
- package/services/LoadService.d.ts +15 -0
- package/services/LoadService.js +19 -0
- package/services/LoadService.js.map +7 -0
- package/services/PointerService.d.ts +56 -0
- package/services/PointerService.js +129 -0
- package/services/PointerService.js.map +7 -0
- package/services/RafService.d.ts +19 -0
- package/services/RafService.js +45 -0
- package/services/RafService.js.map +7 -0
- package/services/ResizeService.d.ts +29 -0
- package/services/ResizeService.js +66 -0
- package/services/ResizeService.js.map +7 -0
- package/services/{scroll.d.ts → ScrollService.d.ts} +14 -3
- package/services/ScrollService.js +90 -0
- package/services/ScrollService.js.map +7 -0
- package/services/index.d.ts +8 -41
- package/services/index.js +8 -18
- package/services/index.js.map +3 -3
- package/services/utils.d.ts +14 -0
- package/services/utils.js +11 -0
- package/services/utils.js.map +7 -0
- package/tsconfig.build.tsbuildinfo +1 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
- package/utils/index.js.map +2 -2
- package/utils/loadElement.d.ts +42 -0
- package/utils/loadElement.js +33 -0
- package/utils/loadElement.js.map +7 -0
- package/utils/tween.js +1 -1
- package/utils/tween.js.map +2 -2
- package/services/drag.d.ts +0 -75
- package/services/drag.js +0 -199
- package/services/drag.js.map +0 -7
- package/services/key.d.ts +0 -21
- package/services/key.js +0 -65
- package/services/key.js.map +0 -7
- package/services/load.d.ts +0 -11
- package/services/load.js +0 -38
- package/services/load.js.map +0 -7
- package/services/pointer.d.ts +0 -32
- package/services/pointer.js +0 -123
- package/services/pointer.js.map +0 -7
- package/services/raf.d.ts +0 -9
- package/services/raf.js +0 -56
- package/services/raf.js.map +0 -7
- package/services/resize.d.ts +0 -15
- package/services/resize.js +0 -67
- package/services/resize.js.map +0 -7
- package/services/scroll.js +0 -105
- package/services/scroll.js.map +0 -7
- package/services/service.d.ts +0 -16
- package/services/service.js +0 -47
- package/services/service.js.map +0 -7
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { AbstractService } from "./AbstractService.js";
|
|
2
|
+
import { ONCE_CAPTURE_EVENT_OPTIONS, PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
|
|
3
|
+
class PointerService extends AbstractService {
|
|
4
|
+
static config = [
|
|
5
|
+
[
|
|
6
|
+
document,
|
|
7
|
+
[
|
|
8
|
+
["mouseenter", ONCE_CAPTURE_EVENT_OPTIONS],
|
|
9
|
+
["mousemove", PASSIVE_CAPTURE_EVENT_OPTIONS],
|
|
10
|
+
["touchmove", PASSIVE_CAPTURE_EVENT_OPTIONS],
|
|
11
|
+
["mousedown", PASSIVE_CAPTURE_EVENT_OPTIONS],
|
|
12
|
+
["touchstart", PASSIVE_CAPTURE_EVENT_OPTIONS],
|
|
13
|
+
["mouseup", PASSIVE_CAPTURE_EVENT_OPTIONS],
|
|
14
|
+
["touchend", PASSIVE_CAPTURE_EVENT_OPTIONS]
|
|
15
|
+
]
|
|
16
|
+
]
|
|
17
|
+
];
|
|
18
|
+
target;
|
|
19
|
+
props = {
|
|
20
|
+
event: null,
|
|
21
|
+
isDown: false,
|
|
22
|
+
x: 0,
|
|
23
|
+
y: 0,
|
|
24
|
+
changed: {
|
|
25
|
+
x: false,
|
|
26
|
+
y: false
|
|
27
|
+
},
|
|
28
|
+
last: {
|
|
29
|
+
x: 0,
|
|
30
|
+
y: 0
|
|
31
|
+
},
|
|
32
|
+
delta: {
|
|
33
|
+
x: 0,
|
|
34
|
+
y: 0
|
|
35
|
+
},
|
|
36
|
+
progress: {
|
|
37
|
+
x: 0.5,
|
|
38
|
+
y: 0.5
|
|
39
|
+
},
|
|
40
|
+
max: {
|
|
41
|
+
x: 0,
|
|
42
|
+
y: 0
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
constructor(target) {
|
|
46
|
+
super();
|
|
47
|
+
this.target = target;
|
|
48
|
+
const targetSize = this.getTargetSize();
|
|
49
|
+
this.props.x = this.props.last.x = targetSize.x / 2;
|
|
50
|
+
this.props.y = this.props.last.y = targetSize.y / 2;
|
|
51
|
+
this.props.max.x = targetSize.width;
|
|
52
|
+
this.props.max.y = targetSize.height;
|
|
53
|
+
}
|
|
54
|
+
isTouchEvent(event) {
|
|
55
|
+
return typeof TouchEvent !== "undefined" && event instanceof TouchEvent;
|
|
56
|
+
}
|
|
57
|
+
getTargetSize() {
|
|
58
|
+
const { target } = this;
|
|
59
|
+
return target instanceof Element ? target.getBoundingClientRect() : {
|
|
60
|
+
width: window.innerWidth,
|
|
61
|
+
height: window.innerHeight,
|
|
62
|
+
x: 0,
|
|
63
|
+
y: 0
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Update the pointer positions.
|
|
68
|
+
*/
|
|
69
|
+
updateProps(event) {
|
|
70
|
+
const { props } = this;
|
|
71
|
+
props.event = event;
|
|
72
|
+
const yLast = props.y;
|
|
73
|
+
const xLast = props.x;
|
|
74
|
+
const targetSize = this.getTargetSize();
|
|
75
|
+
let y = this.isTouchEvent(event) ? event.touches[0]?.clientY : event.clientY;
|
|
76
|
+
y -= targetSize.y;
|
|
77
|
+
if (y !== props.y) {
|
|
78
|
+
props.y = y;
|
|
79
|
+
}
|
|
80
|
+
let x = this.isTouchEvent(event) ? event.touches[0]?.clientX : event.clientX;
|
|
81
|
+
x -= targetSize.x;
|
|
82
|
+
if (x !== props.x) {
|
|
83
|
+
props.x = x;
|
|
84
|
+
}
|
|
85
|
+
props.changed.x = props.x !== xLast;
|
|
86
|
+
props.changed.y = props.y !== yLast;
|
|
87
|
+
props.last.x = xLast;
|
|
88
|
+
props.last.y = yLast;
|
|
89
|
+
props.delta.x = props.x - xLast;
|
|
90
|
+
props.delta.y = props.y - yLast;
|
|
91
|
+
props.max.x = targetSize.width;
|
|
92
|
+
props.max.y = targetSize.height;
|
|
93
|
+
props.progress.x = props.x / props.max.x;
|
|
94
|
+
props.progress.y = props.y / props.max.y;
|
|
95
|
+
return props;
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Handle events.
|
|
99
|
+
*
|
|
100
|
+
* @todo handle scroll as well
|
|
101
|
+
*/
|
|
102
|
+
handleEvent(event) {
|
|
103
|
+
switch (event.type) {
|
|
104
|
+
case "mouseenter":
|
|
105
|
+
case "mousemove":
|
|
106
|
+
case "touchmove":
|
|
107
|
+
this.trigger(this.updateProps(event));
|
|
108
|
+
break;
|
|
109
|
+
case "mousedown":
|
|
110
|
+
case "touchstart":
|
|
111
|
+
this.props.isDown = true;
|
|
112
|
+
this.trigger(this.props);
|
|
113
|
+
break;
|
|
114
|
+
case "mouseup":
|
|
115
|
+
case "touchend":
|
|
116
|
+
this.props.isDown = false;
|
|
117
|
+
this.trigger(this.props);
|
|
118
|
+
break;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
function usePointer(target = window) {
|
|
123
|
+
return PointerService.getInstance(target, target);
|
|
124
|
+
}
|
|
125
|
+
export {
|
|
126
|
+
PointerService,
|
|
127
|
+
usePointer
|
|
128
|
+
};
|
|
129
|
+
//# sourceMappingURL=PointerService.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/js-toolkit/services/PointerService.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { ONCE_CAPTURE_EVENT_OPTIONS, PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface PointerServiceProps {\n event: MouseEvent | TouchEvent;\n isDown: boolean;\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n last: { x: number; y: number };\n delta: { x: number; y: number };\n progress: { x: number; y: number };\n max: { x: number; y: number };\n}\n\nexport type PointerServiceInterface = ServiceInterface<PointerServiceProps>;\n\nexport class PointerService extends AbstractService<PointerServiceProps> {\n static config: ServiceConfig = [\n [\n document,\n [\n ['mouseenter', ONCE_CAPTURE_EVENT_OPTIONS],\n ['mousemove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchmove', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['mousedown', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchstart', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['mouseup', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ['touchend', PASSIVE_CAPTURE_EVENT_OPTIONS],\n ],\n ],\n ];\n\n target: HTMLElement | Window | undefined;\n\n props: PointerServiceProps = {\n event: null,\n isDown: false,\n x: 0,\n y: 0,\n changed: {\n x: false,\n y: false,\n },\n last: {\n x: 0,\n y: 0,\n },\n delta: {\n x: 0,\n y: 0,\n },\n progress: {\n x: 0.5,\n y: 0.5,\n },\n max: {\n x: 0,\n y: 0,\n },\n };\n\n constructor(target: HTMLElement | undefined) {\n super();\n this.target = target;\n const targetSize = this.getTargetSize();\n this.props.x = this.props.last.x = targetSize.x / 2;\n this.props.y = this.props.last.y = targetSize.y / 2;\n this.props.max.x = targetSize.width;\n this.props.max.y = targetSize.height;\n }\n\n isTouchEvent(event: TouchEvent | MouseEvent): boolean {\n return typeof TouchEvent !== 'undefined' && event instanceof TouchEvent;\n }\n\n getTargetSize() {\n const { target } = this;\n return target instanceof Element\n ? target.getBoundingClientRect()\n : {\n width: window.innerWidth,\n height: window.innerHeight,\n x: 0,\n y: 0,\n };\n }\n\n /**\n * Update the pointer positions.\n */\n updateProps(event: MouseEvent | TouchEvent): PointerServiceProps {\n const { props } = this;\n\n props.event = event;\n const yLast = props.y;\n const xLast = props.x;\n\n const targetSize = this.getTargetSize();\n\n // Check pointer Y\n // We either get data from a touch event `event.touches[0].clientY` or from\n // a mouse event `event.clientY`.\n let y = this.isTouchEvent(event)\n ? (event as TouchEvent).touches[0]?.clientY\n : (event as MouseEvent).clientY;\n y -= targetSize.y;\n if (y !== props.y) {\n props.y = y;\n }\n\n // Check pointer X\n // We either get data from a touch event `event.touches[0].clientX` or from\n // a mouse event `event.clientX`.\n let x = this.isTouchEvent(event)\n ? (event as TouchEvent).touches[0]?.clientX\n : (event as MouseEvent).clientX;\n x -= targetSize.x;\n if (x !== props.x) {\n props.x = x;\n }\n\n props.changed.x = props.x !== xLast;\n props.changed.y = props.y !== yLast;\n\n props.last.x = xLast;\n props.last.y = yLast;\n\n props.delta.x = props.x - xLast;\n props.delta.y = props.y - yLast;\n\n props.max.x = targetSize.width;\n props.max.y = targetSize.height;\n\n props.progress.x = props.x / props.max.x;\n props.progress.y = props.y / props.max.y;\n\n return props;\n }\n\n /**\n * Handle events.\n *\n * @todo handle scroll as well\n */\n handleEvent(event: MouseEvent | TouchEvent) {\n // eslint-disable-next-line default-case\n switch (event.type) {\n case 'mouseenter':\n case 'mousemove':\n case 'touchmove':\n this.trigger(this.updateProps(event));\n break;\n case 'mousedown':\n case 'touchstart':\n this.props.isDown = true;\n this.trigger(this.props);\n break;\n case 'mouseup':\n case 'touchend':\n this.props.isDown = false;\n this.trigger(this.props);\n break;\n }\n }\n}\n\n/**\n * Use the pointer service.\n */\nexport function usePointer(target: HTMLElement | Window = window): PointerServiceInterface {\n return PointerService.getInstance(target, target);\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,4BAA4B,qCAAqC;AAgBnE,MAAM,uBAAuB,gBAAqC;AAAA,EACvE,OAAO,SAAwB;AAAA,IAC7B;AAAA,MACE;AAAA,MACA;AAAA,QACE,CAAC,cAAc,0BAA0B;AAAA,QACzC,CAAC,aAAa,6BAA6B;AAAA,QAC3C,CAAC,aAAa,6BAA6B;AAAA,QAC3C,CAAC,aAAa,6BAA6B;AAAA,QAC3C,CAAC,cAAc,6BAA6B;AAAA,QAC5C,CAAC,WAAW,6BAA6B;AAAA,QACzC,CAAC,YAAY,6BAA6B;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EAEA;AAAA,EAEA,QAA6B;AAAA,IAC3B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,GAAG;AAAA,IACH,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,KAAK;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EAEA,YAAY,QAAiC;AAC3C,UAAM;AACN,SAAK,SAAS;AACd,UAAM,aAAa,KAAK,cAAc;AACtC,SAAK,MAAM,IAAI,KAAK,MAAM,KAAK,IAAI,WAAW,IAAI;AAClD,SAAK,MAAM,IAAI,KAAK,MAAM,KAAK,IAAI,WAAW,IAAI;AAClD,SAAK,MAAM,IAAI,IAAI,WAAW;AAC9B,SAAK,MAAM,IAAI,IAAI,WAAW;AAAA,EAChC;AAAA,EAEA,aAAa,OAAyC;AACpD,WAAO,OAAO,eAAe,eAAe,iBAAiB;AAAA,EAC/D;AAAA,EAEA,gBAAgB;AACd,UAAM,EAAE,OAAO,IAAI;AACnB,WAAO,kBAAkB,UACrB,OAAO,sBAAsB,IAC7B;AAAA,MACE,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACN;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY,OAAqD;AAC/D,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ;AACd,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAEpB,UAAM,aAAa,KAAK,cAAc;AAKtC,QAAI,IAAI,KAAK,aAAa,KAAK,IAC1B,MAAqB,QAAQ,CAAC,GAAG,UACjC,MAAqB;AAC1B,SAAK,WAAW;AAChB,QAAI,MAAM,MAAM,GAAG;AACjB,YAAM,IAAI;AAAA,IACZ;AAKA,QAAI,IAAI,KAAK,aAAa,KAAK,IAC1B,MAAqB,QAAQ,CAAC,GAAG,UACjC,MAAqB;AAC1B,SAAK,WAAW;AAChB,QAAI,MAAM,MAAM,GAAG;AACjB,YAAM,IAAI;AAAA,IACZ;AAEA,UAAM,QAAQ,IAAI,MAAM,MAAM;AAC9B,UAAM,QAAQ,IAAI,MAAM,MAAM;AAE9B,UAAM,KAAK,IAAI;AACf,UAAM,KAAK,IAAI;AAEf,UAAM,MAAM,IAAI,MAAM,IAAI;AAC1B,UAAM,MAAM,IAAI,MAAM,IAAI;AAE1B,UAAM,IAAI,IAAI,WAAW;AACzB,UAAM,IAAI,IAAI,WAAW;AAEzB,UAAM,SAAS,IAAI,MAAM,IAAI,MAAM,IAAI;AACvC,UAAM,SAAS,IAAI,MAAM,IAAI,MAAM,IAAI;AAEvC,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,YAAY,OAAgC;AAE1C,YAAQ,MAAM,MAAM;AAAA,MAClB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,aAAK,QAAQ,KAAK,YAAY,KAAK,CAAC;AACpC;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,aAAK,MAAM,SAAS;AACpB,aAAK,QAAQ,KAAK,KAAK;AACvB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,aAAK,MAAM,SAAS;AACpB,aAAK,QAAQ,KAAK,KAAK;AACvB;AAAA,IACJ;AAAA,EACF;AACF;AAKO,SAAS,WAAW,SAA+B,QAAiC;AACzF,SAAO,eAAe,YAAY,QAAQ,MAAM;AAClD;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ServiceInterface } from './AbstractService.js';
|
|
2
|
+
import { AbstractService } from './AbstractService.js';
|
|
3
|
+
export interface RafServiceProps {
|
|
4
|
+
time: DOMHighResTimeStamp;
|
|
5
|
+
}
|
|
6
|
+
export type RafServiceInterface = ServiceInterface<RafServiceProps>;
|
|
7
|
+
export declare class RafService extends AbstractService<RafServiceProps> {
|
|
8
|
+
isTicking: boolean;
|
|
9
|
+
scheduler: Record<"update" | "render", (fn: () => unknown) => void>;
|
|
10
|
+
props: RafServiceProps;
|
|
11
|
+
trigger(props: RafServiceProps): void;
|
|
12
|
+
loop(): void;
|
|
13
|
+
init(): void;
|
|
14
|
+
kill(): void;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Use the RequestAnimationFrame (raf) service.
|
|
18
|
+
*/
|
|
19
|
+
export declare function useRaf(): RafServiceInterface;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { AbstractService } from "./AbstractService.js";
|
|
2
|
+
import { useScheduler } from "../utils/scheduler.js";
|
|
3
|
+
import { isFunction } from "../utils/is.js";
|
|
4
|
+
class RafService extends AbstractService {
|
|
5
|
+
isTicking = false;
|
|
6
|
+
scheduler = useScheduler(["update", "render"]);
|
|
7
|
+
props = {
|
|
8
|
+
time: performance.now()
|
|
9
|
+
};
|
|
10
|
+
trigger(props) {
|
|
11
|
+
for (const callback of this.callbacks.values()) {
|
|
12
|
+
this.scheduler.update(() => {
|
|
13
|
+
const render = callback(props);
|
|
14
|
+
if (isFunction(render)) {
|
|
15
|
+
this.scheduler.render(() => {
|
|
16
|
+
render(props);
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
loop() {
|
|
23
|
+
this.props.time = performance.now();
|
|
24
|
+
this.trigger(this.props);
|
|
25
|
+
if (!this.isTicking) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
requestAnimationFrame(() => this.loop());
|
|
29
|
+
}
|
|
30
|
+
init() {
|
|
31
|
+
this.isTicking = true;
|
|
32
|
+
requestAnimationFrame(() => this.loop());
|
|
33
|
+
}
|
|
34
|
+
kill() {
|
|
35
|
+
this.isTicking = false;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
function useRaf() {
|
|
39
|
+
return RafService.getInstance();
|
|
40
|
+
}
|
|
41
|
+
export {
|
|
42
|
+
RafService,
|
|
43
|
+
useRaf
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=RafService.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/js-toolkit/services/RafService.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { useScheduler } from '../utils/scheduler.js';\nimport { isFunction } from '../utils/is.js';\n\nexport interface RafServiceProps {\n time: DOMHighResTimeStamp;\n}\n\nexport type RafServiceInterface = ServiceInterface<RafServiceProps>;\n\nexport class RafService extends AbstractService<RafServiceProps> {\n isTicking = false;\n scheduler = useScheduler(['update', 'render']);\n\n props: RafServiceProps = {\n time: performance.now(),\n };\n\n trigger(props: RafServiceProps) {\n for (const callback of this.callbacks.values()) {\n this.scheduler.update(() => {\n const render = callback(props) as (() => unknown) | void;\n if (isFunction(render)) {\n this.scheduler.render(() => {\n // @ts-ignore\n render(props);\n });\n }\n });\n }\n }\n\n loop() {\n this.props.time = performance.now();\n this.trigger(this.props);\n\n if (!this.isTicking) {\n return;\n }\n\n requestAnimationFrame(() => this.loop());\n }\n\n init() {\n this.isTicking = true;\n requestAnimationFrame(() => this.loop());\n }\n kill() {\n this.isTicking = false;\n }\n}\n\n/**\n * Use the RequestAnimationFrame (raf) service.\n */\nexport function useRaf(): RafServiceInterface {\n return RafService.getInstance();\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAQpB,MAAM,mBAAmB,gBAAiC;AAAA,EAC/D,YAAY;AAAA,EACZ,YAAY,aAAa,CAAC,UAAU,QAAQ,CAAC;AAAA,EAE7C,QAAyB;AAAA,IACvB,MAAM,YAAY,IAAI;AAAA,EACxB;AAAA,EAEA,QAAQ,OAAwB;AAC9B,eAAW,YAAY,KAAK,UAAU,OAAO,GAAG;AAC9C,WAAK,UAAU,OAAO,MAAM;AAC1B,cAAM,SAAS,SAAS,KAAK;AAC7B,YAAI,WAAW,MAAM,GAAG;AACtB,eAAK,UAAU,OAAO,MAAM;AAE1B,mBAAO,KAAK;AAAA,UACd,CAAC;AAAA,QACH;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,MAAM,OAAO,YAAY,IAAI;AAClC,SAAK,QAAQ,KAAK,KAAK;AAEvB,QAAI,CAAC,KAAK,WAAW;AACnB;AAAA,IACF;AAEA,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EAEA,OAAO;AACL,SAAK,YAAY;AACjB,0BAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EACzC;AAAA,EACA,OAAO;AACL,SAAK,YAAY;AAAA,EACnB;AACF;AAKO,SAAS,SAA8B;AAC5C,SAAO,WAAW,YAAY;AAChC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
|
|
2
|
+
import { AbstractService } from './AbstractService.js';
|
|
3
|
+
import type { Features } from '../Base/features.js';
|
|
4
|
+
export interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
ratio: number;
|
|
8
|
+
orientation: 'square' | 'landscape' | 'portrait';
|
|
9
|
+
breakpoint: string;
|
|
10
|
+
breakpoints: string[];
|
|
11
|
+
activeBreakpoints: Record<keyof U, boolean>;
|
|
12
|
+
}
|
|
13
|
+
export type ResizeServiceInterface<U extends Features['breakpoints'] = Features['breakpoints']> = ServiceInterface<ResizeServiceProps<U>>;
|
|
14
|
+
export declare class ResizeService<T extends Features['breakpoints'] = Features['breakpoints']> extends AbstractService<ResizeServiceProps> {
|
|
15
|
+
static config: ServiceConfig;
|
|
16
|
+
breakpoints: T;
|
|
17
|
+
props: ResizeServiceProps<T>;
|
|
18
|
+
constructor(breakpoints: T);
|
|
19
|
+
/**
|
|
20
|
+
* Update props.
|
|
21
|
+
*/
|
|
22
|
+
updateProps(): ResizeServiceProps<T>;
|
|
23
|
+
onResizeDebounce: (...args: unknown[]) => void;
|
|
24
|
+
handleEvent(): void;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Use the resize service.
|
|
28
|
+
*/
|
|
29
|
+
export declare function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(breakpoints?: T): ResizeServiceInterface<T>;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { AbstractService } from "./AbstractService.js";
|
|
2
|
+
import { features } from "../Base/features.js";
|
|
3
|
+
import debounce from "../utils/debounce.js";
|
|
4
|
+
class ResizeService extends AbstractService {
|
|
5
|
+
static config = [[window, [["resize"]]]];
|
|
6
|
+
breakpoints;
|
|
7
|
+
props = {
|
|
8
|
+
width: window.innerWidth,
|
|
9
|
+
height: window.innerHeight,
|
|
10
|
+
ratio: window.innerWidth / window.innerHeight,
|
|
11
|
+
orientation: "square",
|
|
12
|
+
get breakpoint() {
|
|
13
|
+
return Object.keys(this.activeBreakpoints).toReversed().find((name) => this.activeBreakpoints[name]);
|
|
14
|
+
},
|
|
15
|
+
get breakpoints() {
|
|
16
|
+
return Object.keys(this.activeBreakpoints);
|
|
17
|
+
},
|
|
18
|
+
activeBreakpoints: {}
|
|
19
|
+
};
|
|
20
|
+
constructor(breakpoints) {
|
|
21
|
+
super();
|
|
22
|
+
this.breakpoints = breakpoints;
|
|
23
|
+
Object.defineProperty(this.props, "activeBreakpoints", {
|
|
24
|
+
get: () => {
|
|
25
|
+
const activeBreakpoints = {};
|
|
26
|
+
for (const [name, breakpoint] of Object.entries(
|
|
27
|
+
this.breakpoints ?? features.get("breakpoints")
|
|
28
|
+
)) {
|
|
29
|
+
activeBreakpoints[name] = window.matchMedia(`(min-width: ${breakpoint})`).matches;
|
|
30
|
+
}
|
|
31
|
+
return activeBreakpoints;
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* Update props.
|
|
37
|
+
*/
|
|
38
|
+
updateProps() {
|
|
39
|
+
const { props } = this;
|
|
40
|
+
props.width = window.innerWidth;
|
|
41
|
+
props.height = window.innerHeight;
|
|
42
|
+
props.ratio = window.innerWidth / window.innerHeight;
|
|
43
|
+
props.orientation = "square";
|
|
44
|
+
if (props.ratio > 1) {
|
|
45
|
+
props.orientation = "landscape";
|
|
46
|
+
}
|
|
47
|
+
if (props.ratio < 1) {
|
|
48
|
+
props.orientation = "portrait";
|
|
49
|
+
}
|
|
50
|
+
return props;
|
|
51
|
+
}
|
|
52
|
+
onResizeDebounce = debounce(() => {
|
|
53
|
+
this.trigger(this.updateProps());
|
|
54
|
+
}, 100);
|
|
55
|
+
handleEvent() {
|
|
56
|
+
this.onResizeDebounce();
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
function useResize(breakpoints) {
|
|
60
|
+
return ResizeService.getInstance(breakpoints, breakpoints);
|
|
61
|
+
}
|
|
62
|
+
export {
|
|
63
|
+
ResizeService,
|
|
64
|
+
useResize
|
|
65
|
+
};
|
|
66
|
+
//# sourceMappingURL=ResizeService.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/js-toolkit/services/ResizeService.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport debounce from '../utils/debounce.js';\n\nexport interface ResizeServiceProps<U extends Features['breakpoints'] = Features['breakpoints']> {\n width: number;\n height: number;\n ratio: number;\n orientation: 'square' | 'landscape' | 'portrait';\n breakpoint: string;\n breakpoints: string[];\n activeBreakpoints: Record<keyof U, boolean>;\n}\n\nexport type ResizeServiceInterface<U extends Features['breakpoints'] = Features['breakpoints']> =\n ServiceInterface<ResizeServiceProps<U>>;\n\nexport class ResizeService<\n T extends Features['breakpoints'] = Features['breakpoints'],\n> extends AbstractService<ResizeServiceProps> {\n static config: ServiceConfig = [[window, [['resize']]]];\n\n breakpoints: T;\n\n props: ResizeServiceProps<T> = {\n width: window.innerWidth,\n height: window.innerHeight,\n ratio: window.innerWidth / window.innerHeight,\n orientation: 'square',\n get breakpoint() {\n return Object.keys(this.activeBreakpoints)\n .toReversed()\n .find((name) => this.activeBreakpoints[name]);\n },\n get breakpoints() {\n return Object.keys(this.activeBreakpoints);\n },\n activeBreakpoints: {} as Record<keyof T, boolean>,\n };\n\n constructor(breakpoints: T) {\n super();\n this.breakpoints = breakpoints;\n\n Object.defineProperty(this.props, 'activeBreakpoints', {\n get: () => {\n const activeBreakpoints = {};\n\n for (const [name, breakpoint] of Object.entries(\n this.breakpoints ?? features.get('breakpoints'),\n )) {\n activeBreakpoints[name] = window.matchMedia(`(min-width: ${breakpoint})`).matches;\n }\n\n return activeBreakpoints as Record<keyof T, boolean>;\n },\n });\n }\n\n /**\n * Update props.\n */\n updateProps(): ResizeServiceProps<T> {\n const { props } = this;\n\n props.width = window.innerWidth;\n props.height = window.innerHeight;\n props.ratio = window.innerWidth / window.innerHeight;\n props.orientation = 'square';\n\n if (props.ratio > 1) {\n props.orientation = 'landscape';\n }\n\n if (props.ratio < 1) {\n props.orientation = 'portrait';\n }\n\n return props;\n }\n\n onResizeDebounce = debounce(() => {\n this.trigger(this.updateProps());\n }, 100);\n\n handleEvent() {\n this.onResizeDebounce();\n }\n}\n\n/**\n * Use the resize service.\n */\nexport function useResize<T extends Features['breakpoints'] = Features['breakpoints']>(\n breakpoints?: T,\n): ResizeServiceInterface<T> {\n return ResizeService.getInstance(breakpoints, breakpoints);\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,uBAAuB;AAEhC,SAAS,gBAAgB;AACzB,OAAO,cAAc;AAed,MAAM,sBAEH,gBAAoC;AAAA,EAC5C,OAAO,SAAwB,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAAA,EAEtD;AAAA,EAEA,QAA+B;AAAA,IAC7B,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,IACf,OAAO,OAAO,aAAa,OAAO;AAAA,IAClC,aAAa;AAAA,IACb,IAAI,aAAa;AACf,aAAO,OAAO,KAAK,KAAK,iBAAiB,EACtC,WAAW,EACX,KAAK,CAAC,SAAS,KAAK,kBAAkB,IAAI,CAAC;AAAA,IAChD;AAAA,IACA,IAAI,cAAc;AAChB,aAAO,OAAO,KAAK,KAAK,iBAAiB;AAAA,IAC3C;AAAA,IACA,mBAAmB,CAAC;AAAA,EACtB;AAAA,EAEA,YAAY,aAAgB;AAC1B,UAAM;AACN,SAAK,cAAc;AAEnB,WAAO,eAAe,KAAK,OAAO,qBAAqB;AAAA,MACrD,KAAK,MAAM;AACT,cAAM,oBAAoB,CAAC;AAE3B,mBAAW,CAAC,MAAM,UAAU,KAAK,OAAO;AAAA,UACtC,KAAK,eAAe,SAAS,IAAI,aAAa;AAAA,QAChD,GAAG;AACD,4BAAkB,IAAI,IAAI,OAAO,WAAW,eAAe,UAAU,GAAG,EAAE;AAAA,QAC5E;AAEA,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,cAAqC;AACnC,UAAM,EAAE,MAAM,IAAI;AAElB,UAAM,QAAQ,OAAO;AACrB,UAAM,SAAS,OAAO;AACtB,UAAM,QAAQ,OAAO,aAAa,OAAO;AACzC,UAAM,cAAc;AAEpB,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,QAAI,MAAM,QAAQ,GAAG;AACnB,YAAM,cAAc;AAAA,IACtB;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,mBAAmB,SAAS,MAAM;AAChC,SAAK,QAAQ,KAAK,YAAY,CAAC;AAAA,EACjC,GAAG,GAAG;AAAA,EAEN,cAAc;AACZ,SAAK,iBAAiB;AAAA,EACxB;AACF;AAKO,SAAS,UACd,aAC2B;AAC3B,SAAO,cAAc,YAAY,aAAa,WAAW;AAC3D;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ServiceInterface } from './
|
|
2
|
-
|
|
1
|
+
import type { ServiceConfig, ServiceInterface } from './AbstractService.js';
|
|
2
|
+
import { AbstractService } from './AbstractService.js';
|
|
3
3
|
export interface ScrollServiceProps {
|
|
4
4
|
x: number;
|
|
5
5
|
y: number;
|
|
@@ -42,6 +42,17 @@ export interface ScrollServiceProps {
|
|
|
42
42
|
isDown: boolean;
|
|
43
43
|
isLeft: boolean;
|
|
44
44
|
}
|
|
45
|
+
export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
|
|
46
|
+
export declare class ScrollService extends AbstractService<ScrollServiceProps> {
|
|
47
|
+
static config: ServiceConfig;
|
|
48
|
+
props: ScrollServiceProps;
|
|
49
|
+
updateProps(): ScrollServiceProps;
|
|
50
|
+
onScrollDebounced: (...args: unknown[]) => void;
|
|
51
|
+
/**
|
|
52
|
+
* Scroll handler.
|
|
53
|
+
*/
|
|
54
|
+
handleEvent(): void;
|
|
55
|
+
}
|
|
45
56
|
/**
|
|
46
57
|
* Use the scroll service.
|
|
47
58
|
*
|
|
@@ -53,4 +64,4 @@ export interface ScrollServiceProps {
|
|
|
53
64
|
* props();
|
|
54
65
|
* ```
|
|
55
66
|
*/
|
|
56
|
-
export
|
|
67
|
+
export declare function useScroll(): ScrollServiceInterface;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { AbstractService } from "./AbstractService.js";
|
|
2
|
+
import debounce from "../utils/debounce.js";
|
|
3
|
+
import { PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
|
|
4
|
+
class ScrollService extends AbstractService {
|
|
5
|
+
static config = [[document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
|
|
6
|
+
props = {
|
|
7
|
+
x: window.scrollX,
|
|
8
|
+
y: window.scrollY,
|
|
9
|
+
changed: {
|
|
10
|
+
x: false,
|
|
11
|
+
y: false
|
|
12
|
+
},
|
|
13
|
+
changedX: false,
|
|
14
|
+
changedY: false,
|
|
15
|
+
last: {
|
|
16
|
+
x: window.scrollX,
|
|
17
|
+
y: window.scrollY
|
|
18
|
+
},
|
|
19
|
+
lastX: window.scrollX,
|
|
20
|
+
lastY: window.scrollY,
|
|
21
|
+
delta: {
|
|
22
|
+
x: 0,
|
|
23
|
+
y: 0
|
|
24
|
+
},
|
|
25
|
+
deltaX: 0,
|
|
26
|
+
deltaY: 0,
|
|
27
|
+
max: {
|
|
28
|
+
x: document.scrollingElement.scrollWidth - window.innerWidth,
|
|
29
|
+
y: document.scrollingElement.scrollHeight - window.innerHeight
|
|
30
|
+
},
|
|
31
|
+
maxX: document.scrollingElement.scrollWidth - window.innerWidth,
|
|
32
|
+
maxY: document.scrollingElement.scrollHeight - window.innerHeight,
|
|
33
|
+
progress: {
|
|
34
|
+
x: 0,
|
|
35
|
+
y: 0
|
|
36
|
+
},
|
|
37
|
+
progressX: 0,
|
|
38
|
+
progressY: 0,
|
|
39
|
+
direction: {
|
|
40
|
+
x: "NONE",
|
|
41
|
+
y: "NONE"
|
|
42
|
+
},
|
|
43
|
+
isUp: false,
|
|
44
|
+
isRight: false,
|
|
45
|
+
isDown: false,
|
|
46
|
+
isLeft: false
|
|
47
|
+
};
|
|
48
|
+
updateProps() {
|
|
49
|
+
const { props } = this;
|
|
50
|
+
const yLast = props.y;
|
|
51
|
+
const xLast = props.x;
|
|
52
|
+
props.y = window.scrollY;
|
|
53
|
+
props.x = window.scrollX;
|
|
54
|
+
props.changed.x = props.changedX = props.x !== xLast;
|
|
55
|
+
props.changed.y = props.changedY = props.y !== yLast;
|
|
56
|
+
props.last.x = props.lastX = xLast;
|
|
57
|
+
props.last.y = props.lastY = yLast;
|
|
58
|
+
props.delta.x = props.deltaX = props.x - xLast;
|
|
59
|
+
props.delta.y = props.deltaY = props.y - yLast;
|
|
60
|
+
props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;
|
|
61
|
+
props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;
|
|
62
|
+
props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;
|
|
63
|
+
props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;
|
|
64
|
+
props.isUp = props.y < yLast;
|
|
65
|
+
props.isRight = props.x > xLast;
|
|
66
|
+
props.isDown = props.y > yLast;
|
|
67
|
+
props.isLeft = props.x < xLast;
|
|
68
|
+
props.direction.x = props.isRight ? "RIGHT" : props.isLeft ? "LEFT" : "NONE";
|
|
69
|
+
props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
|
|
70
|
+
return props;
|
|
71
|
+
}
|
|
72
|
+
onScrollDebounced = debounce(() => {
|
|
73
|
+
this.trigger(this.updateProps());
|
|
74
|
+
}, 100);
|
|
75
|
+
/**
|
|
76
|
+
* Scroll handler.
|
|
77
|
+
*/
|
|
78
|
+
handleEvent() {
|
|
79
|
+
this.trigger(this.updateProps());
|
|
80
|
+
this.onScrollDebounced();
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
function useScroll() {
|
|
84
|
+
return ScrollService.getInstance();
|
|
85
|
+
}
|
|
86
|
+
export {
|
|
87
|
+
ScrollService,
|
|
88
|
+
useScroll
|
|
89
|
+
};
|
|
90
|
+
//# sourceMappingURL=ScrollService.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/js-toolkit/services/ScrollService.ts"],
|
|
4
|
+
"sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport debounce from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface ScrollServiceProps {\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n changedX: boolean;\n changedY: boolean;\n last: { x: number; y: number };\n lastX: number;\n lastY: number;\n delta: { x: number; y: number };\n deltaX: number;\n deltaY: number;\n progress: { x: number; y: number };\n progressX: number;\n progressY: number;\n max: { x: number; y: number };\n maxX: number;\n maxY: number;\n direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n isUp: boolean;\n isRight: boolean;\n isDown: boolean;\n isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n static config: ServiceConfig = [[document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n props: ScrollServiceProps = {\n x: window.scrollX,\n y: window.scrollY,\n changed: {\n x: false,\n y: false,\n },\n changedX: false,\n changedY: false,\n last: {\n x: window.scrollX,\n y: window.scrollY,\n },\n lastX: window.scrollX,\n lastY: window.scrollY,\n delta: {\n x: 0,\n y: 0,\n },\n deltaX: 0,\n deltaY: 0,\n max: {\n x: document.scrollingElement.scrollWidth - window.innerWidth,\n y: document.scrollingElement.scrollHeight - window.innerHeight,\n },\n maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n progress: {\n x: 0,\n y: 0,\n },\n progressX: 0,\n progressY: 0,\n direction: {\n x: 'NONE',\n y: 'NONE',\n },\n isUp: false,\n isRight: false,\n isDown: false,\n isLeft: false,\n };\n\n updateProps(): ScrollServiceProps {\n const { props } = this;\n const yLast = props.y;\n const xLast = props.x;\n\n props.y = window.scrollY;\n props.x = window.scrollX;\n props.changed.x = props.changedX = props.x !== xLast;\n props.changed.y = props.changedY = props.y !== yLast;\n props.last.x = props.lastX = xLast;\n props.last.y = props.lastY = yLast;\n props.delta.x = props.deltaX = props.x - xLast;\n props.delta.y = props.deltaY = props.y - yLast;\n props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n props.isUp = props.y < yLast;\n props.isRight = props.x > xLast;\n props.isDown = props.y > yLast;\n props.isLeft = props.x < xLast;\n /* eslint-disable no-nested-ternary */\n props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n /* eslint-enable no-nested-ternary */\n\n return props;\n }\n\n onScrollDebounced = debounce(() => {\n this.trigger(this.updateProps());\n }, 100);\n\n /**\n * Scroll handler.\n */\n handleEvent() {\n this.trigger(this.updateProps());\n this.onScrollDebounced();\n }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport function useScroll(): ScrollServiceInterface {\n return ScrollService.getInstance();\n}\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,uBAAuB;AAChC,OAAO,cAAc;AACrB,SAAS,qCAAqC;AA6BvC,MAAM,sBAAsB,gBAAoC;AAAA,EACrE,OAAO,SAAwB,CAAC,CAAC,UAAU,CAAC,CAAC,UAAU,6BAA6B,CAAC,CAAC,CAAC;AAAA,EAEvF,QAA4B;AAAA,IAC1B,GAAG,OAAO;AAAA,IACV,GAAG,OAAO;AAAA,IACV,SAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,MACJ,GAAG,OAAO;AAAA,MACV,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,OAAO,OAAO;AAAA,IACd,OAAO,OAAO;AAAA,IACd,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,KAAK;AAAA,MACH,GAAG,SAAS,iBAAiB,cAAc,OAAO;AAAA,MAClD,GAAG,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACrD;AAAA,IACA,MAAM,SAAS,iBAAiB,cAAc,OAAO;AAAA,IACrD,MAAM,SAAS,iBAAiB,eAAe,OAAO;AAAA,IACtD,UAAU;AAAA,MACR,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,IACN,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EAEA,cAAkC;AAChC,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,QAAQ,MAAM;AACpB,UAAM,QAAQ,MAAM;AAEpB,UAAM,IAAI,OAAO;AACjB,UAAM,IAAI,OAAO;AACjB,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,QAAQ,IAAI,MAAM,WAAW,MAAM,MAAM;AAC/C,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,KAAK,IAAI,MAAM,QAAQ;AAC7B,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,MAAM,IAAI,MAAM,SAAS,MAAM,IAAI;AACzC,UAAM,IAAI,IAAI,MAAM,OAAO,SAAS,iBAAiB,cAAc,OAAO;AAC1E,UAAM,IAAI,IAAI,MAAM,OAAO,SAAS,iBAAiB,eAAe,OAAO;AAC3E,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,SAAS,IAAI,MAAM,YAAY,MAAM,IAAI,MAAM,IAAI,IAAI,MAAM,IAAI,MAAM,IAAI;AACjF,UAAM,OAAO,MAAM,IAAI;AACvB,UAAM,UAAU,MAAM,IAAI;AAC1B,UAAM,SAAS,MAAM,IAAI;AACzB,UAAM,SAAS,MAAM,IAAI;AAEzB,UAAM,UAAU,IAAI,MAAM,UAAU,UAAU,MAAM,SAAS,SAAS;AACtE,UAAM,UAAU,IAAI,MAAM,SAAS,SAAS,MAAM,OAAO,OAAO;AAGhE,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB,SAAS,MAAM;AACjC,SAAK,QAAQ,KAAK,YAAY,CAAC;AAAA,EACjC,GAAG,GAAG;AAAA;AAAA;AAAA;AAAA,EAKN,cAAc;AACZ,SAAK,QAAQ,KAAK,YAAY,CAAC;AAC/B,SAAK,kBAAkB;AAAA,EACzB;AACF;AAaO,SAAS,YAAoC;AAClD,SAAO,cAAc,YAAY;AACnC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/services/index.d.ts
CHANGED
|
@@ -1,41 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export
|
|
9
|
-
/**
|
|
10
|
-
* Remove a function from the resize service by its key.
|
|
11
|
-
*/
|
|
12
|
-
remove(key: string): void;
|
|
13
|
-
/**
|
|
14
|
-
* Add a callback to the service. The callback will receive the current service props as parameter.
|
|
15
|
-
*/
|
|
16
|
-
add(key: string, callback: (props: T) => void): void;
|
|
17
|
-
/**
|
|
18
|
-
* Test if the service has alreaydy a callback for the given key.
|
|
19
|
-
*/
|
|
20
|
-
has(key: string): boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Get the service's props.
|
|
23
|
-
*/
|
|
24
|
-
props(): T;
|
|
25
|
-
}
|
|
26
|
-
export type DragServiceInterface = ServiceInterface<DragServiceProps>;
|
|
27
|
-
export type KeyServiceInterface = ServiceInterface<KeyServiceProps>;
|
|
28
|
-
export type LoadServiceInterface = ServiceInterface<LoadServiceProps>;
|
|
29
|
-
export type PointerServiceInterface = ServiceInterface<PointerServiceProps>;
|
|
30
|
-
export type RafServiceInterface = ServiceInterface<RafServiceProps>;
|
|
31
|
-
export type ResizeServiceInterface<T extends Record<string, string> = Record<string, string>> = ServiceInterface<ResizeServiceProps<T>>;
|
|
32
|
-
export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
|
|
33
|
-
export type { DragServiceProps, KeyServiceProps, LoadServiceProps, PointerServiceProps, RafServiceProps, ResizeServiceProps, ScrollServiceProps, };
|
|
34
|
-
export { default as useDrag } from './drag.js';
|
|
35
|
-
export { default as useKey } from './key.js';
|
|
36
|
-
export { default as useLoad } from './load.js';
|
|
37
|
-
export { default as usePointer } from './pointer.js';
|
|
38
|
-
export { default as useRaf } from './raf.js';
|
|
39
|
-
export { default as useResize } from './resize.js';
|
|
40
|
-
export { default as useScroll } from './scroll.js';
|
|
41
|
-
export { useService } from './service.js';
|
|
1
|
+
export * from './AbstractService.js';
|
|
2
|
+
export * from './DragService.js';
|
|
3
|
+
export * from './KeyService.js';
|
|
4
|
+
export * from './LoadService.js';
|
|
5
|
+
export * from './PointerService.js';
|
|
6
|
+
export * from './RafService.js';
|
|
7
|
+
export * from './ResizeService.js';
|
|
8
|
+
export * from './ScrollService.js';
|
package/services/index.js
CHANGED
|
@@ -1,19 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export {
|
|
10
|
-
default2 as useDrag,
|
|
11
|
-
default3 as useKey,
|
|
12
|
-
default4 as useLoad,
|
|
13
|
-
default5 as usePointer,
|
|
14
|
-
default6 as useRaf,
|
|
15
|
-
default7 as useResize,
|
|
16
|
-
default8 as useScroll,
|
|
17
|
-
useService
|
|
18
|
-
};
|
|
1
|
+
export * from "./AbstractService.js";
|
|
2
|
+
export * from "./DragService.js";
|
|
3
|
+
export * from "./KeyService.js";
|
|
4
|
+
export * from "./LoadService.js";
|
|
5
|
+
export * from "./PointerService.js";
|
|
6
|
+
export * from "./RafService.js";
|
|
7
|
+
export * from "./ResizeService.js";
|
|
8
|
+
export * from "./ScrollService.js";
|
|
19
9
|
//# sourceMappingURL=index.js.map
|
package/services/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/js-toolkit/services/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
4
|
+
"sourcesContent": ["export * from './AbstractService.js';\nexport * from './DragService.js';\nexport * from './KeyService.js';\nexport * from './LoadService.js';\nexport * from './PointerService.js';\nexport * from './RafService.js';\nexport * from './ResizeService.js';\nexport * from './ScrollService.js';\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export declare const ONCE_CAPTURE_EVENT_OPTIONS: {
|
|
2
|
+
once: boolean;
|
|
3
|
+
capture: boolean;
|
|
4
|
+
};
|
|
5
|
+
export declare const PASSIVE_CAPTURE_EVENT_OPTIONS: {
|
|
6
|
+
passive: boolean;
|
|
7
|
+
capture: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const PASSIVE_EVENT_OPTIONS: {
|
|
10
|
+
passive: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const CAPTURE_EVENT_OPTIONS: {
|
|
13
|
+
capture: boolean;
|
|
14
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const ONCE_CAPTURE_EVENT_OPTIONS = { once: true, capture: true };
|
|
2
|
+
const PASSIVE_CAPTURE_EVENT_OPTIONS = { passive: true, capture: true };
|
|
3
|
+
const PASSIVE_EVENT_OPTIONS = { passive: true };
|
|
4
|
+
const CAPTURE_EVENT_OPTIONS = { capture: true };
|
|
5
|
+
export {
|
|
6
|
+
CAPTURE_EVENT_OPTIONS,
|
|
7
|
+
ONCE_CAPTURE_EVENT_OPTIONS,
|
|
8
|
+
PASSIVE_CAPTURE_EVENT_OPTIONS,
|
|
9
|
+
PASSIVE_EVENT_OPTIONS
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../packages/js-toolkit/services/utils.ts"],
|
|
4
|
+
"sourcesContent": ["export const ONCE_CAPTURE_EVENT_OPTIONS = { once: true, capture: true };\nexport const PASSIVE_CAPTURE_EVENT_OPTIONS = { passive: true, capture: true };\nexport const PASSIVE_EVENT_OPTIONS = { passive: true };\nexport const CAPTURE_EVENT_OPTIONS = { capture: true };\n"],
|
|
5
|
+
"mappings": "AAAO,MAAM,6BAA6B,EAAE,MAAM,MAAM,SAAS,KAAK;AAC/D,MAAM,gCAAgC,EAAE,SAAS,MAAM,SAAS,KAAK;AACrE,MAAM,wBAAwB,EAAE,SAAS,KAAK;AAC9C,MAAM,wBAAwB,EAAE,SAAS,KAAK;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"root":["../packages/global.d.ts","../packages/js-toolkit/index.ts","../packages/js-toolkit/base/base.ts","../packages/js-toolkit/base/features.ts","../packages/js-toolkit/base/index.ts","../packages/js-toolkit/base/types.ts","../packages/js-toolkit/base/utils.ts","../packages/js-toolkit/base/managers/abstractmanager.ts","../packages/js-toolkit/base/managers/childrenmanager.ts","../packages/js-toolkit/base/managers/eventsmanager.ts","../packages/js-toolkit/base/managers/optionsmanager.ts","../packages/js-toolkit/base/managers/refsmanager.ts","../packages/js-toolkit/base/managers/responsiveoptionsmanager.ts","../packages/js-toolkit/base/managers/servicesmanager.ts","../packages/js-toolkit/base/managers/index.ts","../packages/js-toolkit/decorators/index.ts","../packages/js-toolkit/decorators/withbreakpointmanager.ts","../packages/js-toolkit/decorators/withbreakpointobserver.ts","../packages/js-toolkit/decorators/withdrag.ts","../packages/js-toolkit/decorators/withextraconfig.ts","../packages/js-toolkit/decorators/withfreezedoptions.ts","../packages/js-toolkit/decorators/withintersectionobserver.ts","../packages/js-toolkit/decorators/withmountonmediaquery.ts","../packages/js-toolkit/decorators/withmountwheninview.ts","../packages/js-toolkit/decorators/withmountwhenprefersmotion.ts","../packages/js-toolkit/decorators/withname.ts","../packages/js-toolkit/decorators/withrelativepointer.ts","../packages/js-toolkit/decorators/withresponsiveoptions.ts","../packages/js-toolkit/decorators/withscrolledinview/index.ts","../packages/js-toolkit/decorators/withscrolledinview/types.ts","../packages/js-toolkit/decorators/withscrolledinview/utils.ts","../packages/js-toolkit/decorators/withscrolledinview/withscrolledinview.ts","../packages/js-toolkit/helpers/createapp.ts","../packages/js-toolkit/helpers/getclosestparent.ts","../packages/js-toolkit/helpers/getdirectchildren.ts","../packages/js-toolkit/helpers/getinstancefromelement.ts","../packages/js-toolkit/helpers/importoninteraction.ts","../packages/js-toolkit/helpers/importonmediaquery.ts","../packages/js-toolkit/helpers/importwhenidle.ts","../packages/js-toolkit/helpers/importwhenprefersmotion.ts","../packages/js-toolkit/helpers/importwhenvisible.ts","../packages/js-toolkit/helpers/index.ts","../packages/js-toolkit/helpers/utils.ts","../packages/js-toolkit/services/abstractservice.ts","../packages/js-toolkit/services/dragservice.ts","../packages/js-toolkit/services/keyservice.ts","../packages/js-toolkit/services/loadservice.ts","../packages/js-toolkit/services/pointerservice.ts","../packages/js-toolkit/services/rafservice.ts","../packages/js-toolkit/services/resizeservice.ts","../packages/js-toolkit/services/scrollservice.ts","../packages/js-toolkit/services/index.ts","../packages/js-toolkit/services/utils.ts","../packages/js-toolkit/utils/queue.ts","../packages/js-toolkit/utils/smartqueue.ts","../packages/js-toolkit/utils/debounce.ts","../packages/js-toolkit/utils/getcomponentresolver.ts","../packages/js-toolkit/utils/has.ts","../packages/js-toolkit/utils/history.ts","../packages/js-toolkit/utils/index.ts","../packages/js-toolkit/utils/is.ts","../packages/js-toolkit/utils/keycodes.ts","../packages/js-toolkit/utils/loadelement.ts","../packages/js-toolkit/utils/memo.ts","../packages/js-toolkit/utils/memoize.ts","../packages/js-toolkit/utils/nextframe.ts","../packages/js-toolkit/utils/nextmicrotask.ts","../packages/js-toolkit/utils/nexttick.ts","../packages/js-toolkit/utils/noop.ts","../packages/js-toolkit/utils/random.ts","../packages/js-toolkit/utils/scheduler.ts","../packages/js-toolkit/utils/scrollto.ts","../packages/js-toolkit/utils/throttle.ts","../packages/js-toolkit/utils/trapfocus.ts","../packages/js-toolkit/utils/tween.ts","../packages/js-toolkit/utils/wait.ts","../packages/js-toolkit/utils/collide/boundingrecttocircle.ts","../packages/js-toolkit/utils/collide/collidecirclecircle.ts","../packages/js-toolkit/utils/collide/collidecirclerect.ts","../packages/js-toolkit/utils/collide/collidepointcircle.ts","../packages/js-toolkit/utils/collide/collidepointrect.ts","../packages/js-toolkit/utils/collide/colliderectrect.ts","../packages/js-toolkit/utils/collide/index.ts","../packages/js-toolkit/utils/css/animate.ts","../packages/js-toolkit/utils/css/classes.ts","../packages/js-toolkit/utils/css/getoffsetsizes.ts","../packages/js-toolkit/utils/css/index.ts","../packages/js-toolkit/utils/css/matrix.ts","../packages/js-toolkit/utils/css/styles.ts","../packages/js-toolkit/utils/css/transform.ts","../packages/js-toolkit/utils/css/transition.ts","../packages/js-toolkit/utils/css/utils.ts","../packages/js-toolkit/utils/dom/ancestors.ts","../packages/js-toolkit/utils/dom/index.ts","../packages/js-toolkit/utils/math/clamp.ts","../packages/js-toolkit/utils/math/clamp01.ts","../packages/js-toolkit/utils/math/createeases.ts","../packages/js-toolkit/utils/math/createrange.ts","../packages/js-toolkit/utils/math/damp.ts","../packages/js-toolkit/utils/math/ease.ts","../packages/js-toolkit/utils/math/index.ts","../packages/js-toolkit/utils/math/inertiafinalvalue.ts","../packages/js-toolkit/utils/math/lerp.ts","../packages/js-toolkit/utils/math/map.ts","../packages/js-toolkit/utils/math/mean.ts","../packages/js-toolkit/utils/math/round.ts","../packages/js-toolkit/utils/object/getallproperties.ts","../packages/js-toolkit/utils/string/changecase.ts","../packages/js-toolkit/utils/string/endswith.ts","../packages/js-toolkit/utils/string/index.ts","../packages/js-toolkit/utils/string/startswith.ts","../packages/js-toolkit/utils/string/withleadingcharacters.ts","../packages/js-toolkit/utils/string/withleadingslash.ts","../packages/js-toolkit/utils/string/withtrailingcharacters.ts","../packages/js-toolkit/utils/string/withtrailingslash.ts","../packages/js-toolkit/utils/string/withoutleadingcharacters.ts","../packages/js-toolkit/utils/string/withoutleadingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withoutleadingslash.ts","../packages/js-toolkit/utils/string/withouttrailingcharacters.ts","../packages/js-toolkit/utils/string/withouttrailingcharactersrecursive.ts","../packages/js-toolkit/utils/string/withouttrailingslash.ts"],"version":"5.6.3"}
|
package/utils/index.d.ts
CHANGED