@studiometa/js-toolkit 2.0.0-beta.11 → 2.0.0-beta.12
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/index.cjs +287 -0
- package/Base/index.js +88 -174
- package/Base/managers/ChildrenManager.cjs +122 -0
- package/Base/managers/ChildrenManager.js +29 -55
- package/Base/managers/EventsManager.cjs +182 -0
- package/Base/managers/EventsManager.js +84 -130
- package/Base/managers/OptionsManager.cjs +167 -0
- package/Base/managers/OptionsManager.js +46 -88
- package/Base/managers/RefsManager.cjs +96 -0
- package/Base/managers/RefsManager.js +22 -38
- package/Base/managers/ServicesManager.cjs +130 -0
- package/Base/managers/ServicesManager.js +31 -65
- package/Base/utils.cjs +43 -0
- package/Base/utils.js +12 -11
- package/decorators/index.cjs +47 -0
- package/decorators/index.js +18 -8
- package/decorators/withBreakpointManager.cjs +89 -0
- package/decorators/withBreakpointManager.js +18 -39
- package/decorators/withBreakpointObserver.cjs +114 -0
- package/decorators/withBreakpointObserver.js +40 -88
- package/decorators/withDrag.cjs +52 -0
- package/decorators/withDrag.js +18 -26
- package/decorators/withExtraConfig.cjs +42 -0
- package/decorators/withExtraConfig.js +11 -12
- package/decorators/withIntersectionObserver.cjs +59 -0
- package/decorators/withIntersectionObserver.js +23 -32
- package/decorators/withMountWhenInView.cjs +66 -0
- package/decorators/withMountWhenInView.js +26 -53
- package/decorators/withScrolledInView.cjs +110 -0
- package/decorators/withScrolledInView.js +50 -63
- package/decorators/withVue2.cjs +58 -0
- package/decorators/withVue2.js +21 -32
- package/helpers/createApp.cjs +54 -0
- package/helpers/createApp.js +12 -12
- package/helpers/importOnInteraction.cjs +54 -0
- package/helpers/importOnInteraction.js +17 -18
- package/helpers/importWhenIdle.cjs +50 -0
- package/helpers/importWhenIdle.js +13 -17
- package/helpers/importWhenVisible.cjs +52 -0
- package/helpers/importWhenVisible.js +16 -18
- package/helpers/index.cjs +39 -0
- package/helpers/index.js +10 -4
- package/helpers/utils.cjs +37 -0
- package/helpers/utils.js +7 -6
- package/index.cjs +36 -0
- package/index.js +7 -4
- package/package.json +14 -3
- package/services/Service.cjs +73 -0
- package/services/Service.js +13 -32
- package/services/drag.cjs +192 -0
- package/services/drag.js +60 -90
- package/services/index.cjs +45 -0
- package/services/index.js +16 -7
- package/services/key.cjs +99 -0
- package/services/key.js +34 -52
- package/services/load.cjs +68 -0
- package/services/load.js +13 -24
- package/services/pointer.cjs +157 -0
- package/services/pointer.js +60 -87
- package/services/raf.cjs +79 -0
- package/services/raf.js +16 -33
- package/services/resize.cjs +104 -0
- package/services/resize.js +31 -49
- package/services/scroll.cjs +127 -0
- package/services/scroll.js +44 -62
- package/utils/collide/boundingRectToCircle.cjs +36 -0
- package/utils/collide/boundingRectToCircle.d.ts +1 -1
- package/utils/collide/boundingRectToCircle.js +7 -10
- package/utils/collide/collideCircleCircle.cjs +36 -0
- package/utils/collide/collideCircleCircle.js +8 -7
- package/utils/collide/collideCircleRect.cjs +48 -0
- package/utils/collide/collideCircleRect.js +10 -12
- package/utils/collide/collidePointCircle.cjs +33 -0
- package/utils/collide/collidePointCircle.js +8 -5
- package/utils/collide/collidePointRect.cjs +30 -0
- package/utils/collide/collidePointRect.js +5 -2
- package/utils/collide/collideRectRect.cjs +30 -0
- package/utils/collide/collideRectRect.js +5 -2
- package/utils/collide/index.cjs +43 -0
- package/utils/collide/index.js +14 -6
- package/utils/css/classes.cjs +46 -0
- package/utils/css/classes.js +13 -12
- package/utils/css/index.cjs +39 -0
- package/utils/css/index.js +10 -6
- package/utils/css/matrix.cjs +31 -0
- package/utils/css/matrix.js +6 -5
- package/utils/css/styles.cjs +49 -0
- package/utils/css/styles.js +13 -12
- package/utils/css/transition.cjs +119 -0
- package/utils/css/transition.js +62 -117
- package/utils/debounce.cjs +36 -0
- package/utils/debounce.js +7 -9
- package/utils/focusTrap.cjs +86 -0
- package/utils/focusTrap.js +30 -21
- package/utils/history.cjs +93 -0
- package/utils/history.js +28 -57
- package/utils/index.cjs +55 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +30 -11
- package/utils/keyCodes.cjs +37 -0
- package/utils/keyCodes.js +5 -2
- package/utils/math/clamp.cjs +30 -0
- package/utils/math/clamp.js +5 -2
- package/utils/math/clamp01.cjs +36 -0
- package/utils/math/clamp01.js +6 -3
- package/utils/math/damp.cjs +30 -0
- package/utils/math/damp.js +5 -4
- package/utils/math/ease.cjs +90 -0
- package/utils/math/ease.js +50 -25
- package/utils/math/index.cjs +46 -0
- package/utils/math/index.js +17 -8
- package/utils/math/inertiaFinalValue.cjs +39 -0
- package/utils/math/inertiaFinalValue.js +8 -10
- package/utils/math/lerp.cjs +30 -0
- package/utils/math/lerp.js +5 -2
- package/utils/math/map.cjs +30 -0
- package/utils/math/map.js +5 -2
- package/utils/math/round.cjs +30 -0
- package/utils/math/round.js +5 -3
- package/utils/memoize.cjs +45 -0
- package/utils/memoize.js +10 -19
- package/utils/nextFrame.cjs +42 -0
- package/utils/nextFrame.js +14 -9
- package/utils/object/autoBind.cjs +53 -0
- package/utils/object/autoBind.js +12 -22
- package/utils/object/getAllProperties.cjs +39 -0
- package/utils/object/getAllProperties.js +10 -13
- package/utils/object/index.cjs +37 -0
- package/utils/object/index.js +8 -3
- package/utils/object/isObject.cjs +30 -0
- package/utils/object/isObject.js +6 -3
- package/utils/scrollTo.cjs +84 -0
- package/utils/scrollTo.js +20 -40
- package/utils/string/index.cjs +51 -0
- package/utils/string/index.js +22 -10
- package/utils/string/withLeadingCharacters.cjs +36 -0
- package/utils/string/withLeadingCharacters.js +7 -4
- package/utils/string/withLeadingSlash.cjs +36 -0
- package/utils/string/withLeadingSlash.js +7 -4
- package/utils/string/withTrailingCharacters.cjs +36 -0
- package/utils/string/withTrailingCharacters.js +7 -4
- package/utils/string/withTrailingSlash.cjs +36 -0
- package/utils/string/withTrailingSlash.js +7 -4
- package/utils/string/withoutLeadingCharacters.cjs +30 -0
- package/utils/string/withoutLeadingCharacters.js +6 -3
- package/utils/string/withoutLeadingCharactersRecursive.cjs +41 -0
- package/utils/string/withoutLeadingCharactersRecursive.js +8 -7
- package/utils/string/withoutLeadingSlash.cjs +36 -0
- package/utils/string/withoutLeadingSlash.js +7 -4
- package/utils/string/withoutTrailingCharacters.cjs +30 -0
- package/utils/string/withoutTrailingCharacters.js +6 -3
- package/utils/string/withoutTrailingCharactersRecursive.cjs +41 -0
- package/utils/string/withoutTrailingCharactersRecursive.js +8 -7
- package/utils/string/withoutTrailingSlash.cjs +36 -0
- package/utils/string/withoutTrailingSlash.js +7 -4
- package/utils/throttle.cjs +38 -0
- package/utils/throttle.js +9 -9
- package/index.modern.js +0 -1
- package/index.umd.js +0 -1
package/services/raf.cjs
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var raf_exports = {};
|
|
29
|
+
__export(raf_exports, {
|
|
30
|
+
default: () => useRaf
|
|
31
|
+
});
|
|
32
|
+
var import_Service = __toESM(require("./Service.js"), 1);
|
|
33
|
+
var import_nextFrame = require("../utils/nextFrame.js");
|
|
34
|
+
class Raf extends import_Service.default {
|
|
35
|
+
isTicking = false;
|
|
36
|
+
id = 0;
|
|
37
|
+
raf = (0, import_nextFrame.getRaf)();
|
|
38
|
+
cancelRaf = (0, import_nextFrame.getCancelRaf)();
|
|
39
|
+
props = {
|
|
40
|
+
time: performance.now()
|
|
41
|
+
};
|
|
42
|
+
init() {
|
|
43
|
+
this.isTicking = true;
|
|
44
|
+
this.loop();
|
|
45
|
+
}
|
|
46
|
+
loop() {
|
|
47
|
+
this.updateProps();
|
|
48
|
+
this.trigger(this.props);
|
|
49
|
+
if (!this.isTicking) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
this.id = this.raf(() => this.loop());
|
|
53
|
+
}
|
|
54
|
+
kill() {
|
|
55
|
+
this.cancelRaf(this.id);
|
|
56
|
+
this.isTicking = false;
|
|
57
|
+
}
|
|
58
|
+
updateProps() {
|
|
59
|
+
this.props.time = window.performance.now();
|
|
60
|
+
return this.props;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
let instance;
|
|
64
|
+
let raf;
|
|
65
|
+
function useRaf() {
|
|
66
|
+
if (!raf) {
|
|
67
|
+
if (!instance) {
|
|
68
|
+
instance = new Raf();
|
|
69
|
+
}
|
|
70
|
+
raf = {
|
|
71
|
+
add: instance.add.bind(instance),
|
|
72
|
+
remove: instance.remove.bind(instance),
|
|
73
|
+
has: instance.has.bind(instance),
|
|
74
|
+
props: instance.updateProps.bind(instance)
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
return raf;
|
|
78
|
+
}
|
|
79
|
+
module.exports = __toCommonJS(raf_exports);
|
package/services/raf.js
CHANGED
|
@@ -1,60 +1,41 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { getRaf, getCancelRaf } from '../utils/nextFrame.js';
|
|
4
|
-
|
|
1
|
+
import Service from "./Service.js";
|
|
2
|
+
import { getRaf, getCancelRaf } from "../utils/nextFrame.js";
|
|
5
3
|
class Raf extends Service {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
_defineProperty(this, "raf", getRaf());
|
|
14
|
-
|
|
15
|
-
_defineProperty(this, "cancelRaf", getCancelRaf());
|
|
16
|
-
|
|
17
|
-
_defineProperty(this, "props", {
|
|
18
|
-
time: performance.now()
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
|
|
4
|
+
isTicking = false;
|
|
5
|
+
id = 0;
|
|
6
|
+
raf = getRaf();
|
|
7
|
+
cancelRaf = getCancelRaf();
|
|
8
|
+
props = {
|
|
9
|
+
time: performance.now()
|
|
10
|
+
};
|
|
22
11
|
init() {
|
|
23
12
|
this.isTicking = true;
|
|
24
13
|
this.loop();
|
|
25
14
|
}
|
|
26
|
-
|
|
27
15
|
loop() {
|
|
28
16
|
this.updateProps();
|
|
29
17
|
this.trigger(this.props);
|
|
30
|
-
|
|
31
18
|
if (!this.isTicking) {
|
|
32
19
|
return;
|
|
33
20
|
}
|
|
34
|
-
|
|
35
21
|
this.id = this.raf(() => this.loop());
|
|
36
22
|
}
|
|
37
|
-
|
|
38
23
|
kill() {
|
|
39
24
|
this.cancelRaf(this.id);
|
|
40
25
|
this.isTicking = false;
|
|
41
26
|
}
|
|
42
|
-
|
|
43
27
|
updateProps() {
|
|
44
28
|
this.props.time = window.performance.now();
|
|
45
29
|
return this.props;
|
|
46
30
|
}
|
|
47
|
-
|
|
48
31
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
export default function useRaf() {
|
|
32
|
+
let instance;
|
|
33
|
+
let raf;
|
|
34
|
+
function useRaf() {
|
|
53
35
|
if (!raf) {
|
|
54
36
|
if (!instance) {
|
|
55
37
|
instance = new Raf();
|
|
56
38
|
}
|
|
57
|
-
|
|
58
39
|
raf = {
|
|
59
40
|
add: instance.add.bind(instance),
|
|
60
41
|
remove: instance.remove.bind(instance),
|
|
@@ -62,6 +43,8 @@ export default function useRaf() {
|
|
|
62
43
|
props: instance.updateProps.bind(instance)
|
|
63
44
|
};
|
|
64
45
|
}
|
|
65
|
-
|
|
66
46
|
return raf;
|
|
67
|
-
}
|
|
47
|
+
}
|
|
48
|
+
export {
|
|
49
|
+
useRaf as default
|
|
50
|
+
};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var resize_exports = {};
|
|
29
|
+
__export(resize_exports, {
|
|
30
|
+
default: () => useResize
|
|
31
|
+
});
|
|
32
|
+
var import_Service = __toESM(require("./Service.js"), 1);
|
|
33
|
+
var import_debounce = __toESM(require("../utils/debounce.js"), 1);
|
|
34
|
+
class Resize extends import_Service.default {
|
|
35
|
+
props = {
|
|
36
|
+
width: window.innerWidth,
|
|
37
|
+
height: window.innerHeight,
|
|
38
|
+
ratio: window.innerWidth / window.innerHeight,
|
|
39
|
+
orientation: "square"
|
|
40
|
+
};
|
|
41
|
+
handler;
|
|
42
|
+
init() {
|
|
43
|
+
this.handler = (0, import_debounce.default)(() => {
|
|
44
|
+
this.updateProps();
|
|
45
|
+
this.trigger(this.props);
|
|
46
|
+
}).bind(this);
|
|
47
|
+
window.addEventListener("resize", this.handler);
|
|
48
|
+
return this;
|
|
49
|
+
}
|
|
50
|
+
kill() {
|
|
51
|
+
window.removeEventListener("resize", this.handler);
|
|
52
|
+
}
|
|
53
|
+
updateProps() {
|
|
54
|
+
this.props.width = window.innerWidth;
|
|
55
|
+
this.props.height = window.innerHeight;
|
|
56
|
+
this.props.ratio = window.innerWidth / window.innerHeight;
|
|
57
|
+
this.props.orientation = "square";
|
|
58
|
+
if (this.props.ratio > 1) {
|
|
59
|
+
this.props.orientation = "landscape";
|
|
60
|
+
}
|
|
61
|
+
if (this.props.ratio < 1) {
|
|
62
|
+
this.props.orientation = "portrait";
|
|
63
|
+
}
|
|
64
|
+
if (this.breakpointElement) {
|
|
65
|
+
this.props.breakpoint = this.breakpoint;
|
|
66
|
+
this.props.breakpoints = this.breakpoints;
|
|
67
|
+
} else {
|
|
68
|
+
this.props.breakpoint = void 0;
|
|
69
|
+
this.props.breakpoints = void 0;
|
|
70
|
+
}
|
|
71
|
+
return this.props;
|
|
72
|
+
}
|
|
73
|
+
get breakpointElement() {
|
|
74
|
+
return document.querySelector("[data-breakpoint]");
|
|
75
|
+
}
|
|
76
|
+
get breakpoint() {
|
|
77
|
+
return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
|
|
78
|
+
}
|
|
79
|
+
get breakpoints() {
|
|
80
|
+
const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
|
|
81
|
+
return breakpoints.split(",");
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
let instance;
|
|
85
|
+
let resize;
|
|
86
|
+
function useResize() {
|
|
87
|
+
if (!resize) {
|
|
88
|
+
if (!instance) {
|
|
89
|
+
instance = new Resize();
|
|
90
|
+
}
|
|
91
|
+
const add = instance.add.bind(instance);
|
|
92
|
+
const remove = instance.remove.bind(instance);
|
|
93
|
+
const has = instance.has.bind(instance);
|
|
94
|
+
const props = instance.updateProps.bind(instance);
|
|
95
|
+
resize = {
|
|
96
|
+
add,
|
|
97
|
+
remove,
|
|
98
|
+
has,
|
|
99
|
+
props
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
return resize;
|
|
103
|
+
}
|
|
104
|
+
module.exports = __toCommonJS(resize_exports);
|
package/services/resize.js
CHANGED
|
@@ -1,86 +1,66 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import debounce from '../utils/debounce.js';
|
|
4
|
-
|
|
1
|
+
import Service from "./Service.js";
|
|
2
|
+
import debounce from "../utils/debounce.js";
|
|
5
3
|
class Resize extends Service {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
orientation: 'square'
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
_defineProperty(this, "handler", void 0);
|
|
17
|
-
}
|
|
18
|
-
|
|
4
|
+
props = {
|
|
5
|
+
width: window.innerWidth,
|
|
6
|
+
height: window.innerHeight,
|
|
7
|
+
ratio: window.innerWidth / window.innerHeight,
|
|
8
|
+
orientation: "square"
|
|
9
|
+
};
|
|
10
|
+
handler;
|
|
19
11
|
init() {
|
|
20
12
|
this.handler = debounce(() => {
|
|
21
13
|
this.updateProps();
|
|
22
14
|
this.trigger(this.props);
|
|
23
15
|
}).bind(this);
|
|
24
|
-
window.addEventListener(
|
|
16
|
+
window.addEventListener("resize", this.handler);
|
|
25
17
|
return this;
|
|
26
18
|
}
|
|
27
|
-
|
|
28
19
|
kill() {
|
|
29
|
-
window.removeEventListener(
|
|
20
|
+
window.removeEventListener("resize", this.handler);
|
|
30
21
|
}
|
|
31
|
-
|
|
32
22
|
updateProps() {
|
|
33
23
|
this.props.width = window.innerWidth;
|
|
34
24
|
this.props.height = window.innerHeight;
|
|
35
25
|
this.props.ratio = window.innerWidth / window.innerHeight;
|
|
36
|
-
this.props.orientation =
|
|
37
|
-
|
|
26
|
+
this.props.orientation = "square";
|
|
38
27
|
if (this.props.ratio > 1) {
|
|
39
|
-
this.props.orientation =
|
|
28
|
+
this.props.orientation = "landscape";
|
|
40
29
|
}
|
|
41
|
-
|
|
42
30
|
if (this.props.ratio < 1) {
|
|
43
|
-
this.props.orientation =
|
|
31
|
+
this.props.orientation = "portrait";
|
|
44
32
|
}
|
|
45
|
-
|
|
46
33
|
if (this.breakpointElement) {
|
|
47
34
|
this.props.breakpoint = this.breakpoint;
|
|
48
35
|
this.props.breakpoints = this.breakpoints;
|
|
49
36
|
} else {
|
|
50
|
-
this.props.breakpoint =
|
|
51
|
-
this.props.breakpoints =
|
|
37
|
+
this.props.breakpoint = void 0;
|
|
38
|
+
this.props.breakpoints = void 0;
|
|
52
39
|
}
|
|
53
|
-
|
|
54
40
|
return this.props;
|
|
55
41
|
}
|
|
56
|
-
|
|
57
42
|
get breakpointElement() {
|
|
58
|
-
return document.querySelector(
|
|
43
|
+
return document.querySelector("[data-breakpoint]");
|
|
59
44
|
}
|
|
60
|
-
|
|
61
45
|
get breakpoint() {
|
|
62
|
-
return window.getComputedStyle(this.breakpointElement,
|
|
46
|
+
return window.getComputedStyle(this.breakpointElement, "::before").getPropertyValue("content").replace(/"/g, "");
|
|
63
47
|
}
|
|
64
|
-
|
|
65
48
|
get breakpoints() {
|
|
66
|
-
|
|
67
|
-
return breakpoints.split(
|
|
49
|
+
const breakpoints = window.getComputedStyle(this.breakpointElement, "::after").getPropertyValue("content").replace(/"/g, "");
|
|
50
|
+
return breakpoints.split(",");
|
|
68
51
|
}
|
|
69
|
-
|
|
70
52
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
export default function useResize() {
|
|
53
|
+
let instance;
|
|
54
|
+
let resize;
|
|
55
|
+
function useResize() {
|
|
75
56
|
if (!resize) {
|
|
76
57
|
if (!instance) {
|
|
77
58
|
instance = new Resize();
|
|
78
59
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
var props = instance.updateProps.bind(instance);
|
|
60
|
+
const add = instance.add.bind(instance);
|
|
61
|
+
const remove = instance.remove.bind(instance);
|
|
62
|
+
const has = instance.has.bind(instance);
|
|
63
|
+
const props = instance.updateProps.bind(instance);
|
|
84
64
|
resize = {
|
|
85
65
|
add,
|
|
86
66
|
remove,
|
|
@@ -88,6 +68,8 @@ export default function useResize() {
|
|
|
88
68
|
props
|
|
89
69
|
};
|
|
90
70
|
}
|
|
91
|
-
|
|
92
71
|
return resize;
|
|
93
|
-
}
|
|
72
|
+
}
|
|
73
|
+
export {
|
|
74
|
+
useResize as default
|
|
75
|
+
};
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var scroll_exports = {};
|
|
29
|
+
__export(scroll_exports, {
|
|
30
|
+
default: () => useScroll
|
|
31
|
+
});
|
|
32
|
+
var import_Service = __toESM(require("./Service.js"), 1);
|
|
33
|
+
var import_debounce = __toESM(require("../utils/debounce.js"), 1);
|
|
34
|
+
class Scroll extends import_Service.default {
|
|
35
|
+
props = {
|
|
36
|
+
x: window.pageXOffset,
|
|
37
|
+
y: window.pageYOffset,
|
|
38
|
+
changed: {
|
|
39
|
+
x: false,
|
|
40
|
+
y: false
|
|
41
|
+
},
|
|
42
|
+
last: {
|
|
43
|
+
x: window.pageXOffset,
|
|
44
|
+
y: window.pageYOffset
|
|
45
|
+
},
|
|
46
|
+
delta: {
|
|
47
|
+
x: 0,
|
|
48
|
+
y: 0
|
|
49
|
+
},
|
|
50
|
+
max: {
|
|
51
|
+
x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
|
|
52
|
+
y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
|
|
53
|
+
},
|
|
54
|
+
progress: {
|
|
55
|
+
x: 0,
|
|
56
|
+
y: 0
|
|
57
|
+
},
|
|
58
|
+
direction: {
|
|
59
|
+
x: "NONE",
|
|
60
|
+
y: "NONE"
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
init() {
|
|
64
|
+
this.updateProps();
|
|
65
|
+
document.addEventListener("scroll", this, { passive: true, capture: true });
|
|
66
|
+
return this;
|
|
67
|
+
}
|
|
68
|
+
get debouncedHandler() {
|
|
69
|
+
const debounced = (0, import_debounce.default)(() => {
|
|
70
|
+
this.updateProps();
|
|
71
|
+
this.trigger(this.props);
|
|
72
|
+
}, 100);
|
|
73
|
+
Object.defineProperty(this, "debouncedHandler", {
|
|
74
|
+
value: debounced
|
|
75
|
+
});
|
|
76
|
+
return debounced;
|
|
77
|
+
}
|
|
78
|
+
handleEvent() {
|
|
79
|
+
this.updateProps();
|
|
80
|
+
this.trigger(this.props);
|
|
81
|
+
this.debouncedHandler();
|
|
82
|
+
}
|
|
83
|
+
kill() {
|
|
84
|
+
document.removeEventListener("scroll", this);
|
|
85
|
+
return this;
|
|
86
|
+
}
|
|
87
|
+
updateProps() {
|
|
88
|
+
const yLast = this.props.y;
|
|
89
|
+
const xLast = this.props.x;
|
|
90
|
+
if (window.pageYOffset !== this.props.y) {
|
|
91
|
+
this.props.y = window.pageYOffset;
|
|
92
|
+
}
|
|
93
|
+
if (window.pageXOffset !== this.props.x) {
|
|
94
|
+
this.props.x = window.pageXOffset;
|
|
95
|
+
}
|
|
96
|
+
this.props.changed.x = this.props.x !== xLast;
|
|
97
|
+
this.props.changed.y = this.props.y !== yLast;
|
|
98
|
+
this.props.last.x = xLast;
|
|
99
|
+
this.props.last.y = yLast;
|
|
100
|
+
this.props.delta.x = this.props.x - xLast;
|
|
101
|
+
this.props.delta.y = this.props.y - yLast;
|
|
102
|
+
this.props.max.x = (document.scrollingElement || document.body).scrollWidth - window.innerWidth;
|
|
103
|
+
this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
|
|
104
|
+
this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
|
|
105
|
+
this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
|
|
106
|
+
this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
|
|
107
|
+
this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
|
|
108
|
+
return this.props;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
let instance;
|
|
112
|
+
let scroll;
|
|
113
|
+
function useScroll() {
|
|
114
|
+
if (!scroll) {
|
|
115
|
+
if (!instance) {
|
|
116
|
+
instance = new Scroll();
|
|
117
|
+
}
|
|
118
|
+
scroll = {
|
|
119
|
+
add: instance.add.bind(instance),
|
|
120
|
+
remove: instance.remove.bind(instance),
|
|
121
|
+
has: instance.has.bind(instance),
|
|
122
|
+
props: instance.updateProps.bind(instance)
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
return scroll;
|
|
126
|
+
}
|
|
127
|
+
module.exports = __toCommonJS(scroll_exports);
|
package/services/scroll.js
CHANGED
|
@@ -1,84 +1,67 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import debounce from '../utils/debounce.js';
|
|
4
|
-
|
|
1
|
+
import Service from "./Service.js";
|
|
2
|
+
import debounce from "../utils/debounce.js";
|
|
5
3
|
class Scroll extends Service {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
props = {
|
|
5
|
+
x: window.pageXOffset,
|
|
6
|
+
y: window.pageYOffset,
|
|
7
|
+
changed: {
|
|
8
|
+
x: false,
|
|
9
|
+
y: false
|
|
10
|
+
},
|
|
11
|
+
last: {
|
|
10
12
|
x: window.pageXOffset,
|
|
11
|
-
y: window.pageYOffset
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
y: 0
|
|
31
|
-
},
|
|
32
|
-
direction: {
|
|
33
|
-
x: 'NONE',
|
|
34
|
-
y: 'NONE'
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
|
|
13
|
+
y: window.pageYOffset
|
|
14
|
+
},
|
|
15
|
+
delta: {
|
|
16
|
+
x: 0,
|
|
17
|
+
y: 0
|
|
18
|
+
},
|
|
19
|
+
max: {
|
|
20
|
+
x: (document.scrollingElement || document.body).scrollWidth - window.innerWidth,
|
|
21
|
+
y: (document.scrollingElement || document.body).scrollHeight - window.innerHeight
|
|
22
|
+
},
|
|
23
|
+
progress: {
|
|
24
|
+
x: 0,
|
|
25
|
+
y: 0
|
|
26
|
+
},
|
|
27
|
+
direction: {
|
|
28
|
+
x: "NONE",
|
|
29
|
+
y: "NONE"
|
|
30
|
+
}
|
|
31
|
+
};
|
|
39
32
|
init() {
|
|
40
33
|
this.updateProps();
|
|
41
|
-
document.addEventListener(
|
|
42
|
-
passive: true,
|
|
43
|
-
capture: true
|
|
44
|
-
});
|
|
34
|
+
document.addEventListener("scroll", this, { passive: true, capture: true });
|
|
45
35
|
return this;
|
|
46
36
|
}
|
|
47
|
-
|
|
48
37
|
get debouncedHandler() {
|
|
49
|
-
|
|
38
|
+
const debounced = debounce(() => {
|
|
50
39
|
this.updateProps();
|
|
51
40
|
this.trigger(this.props);
|
|
52
41
|
}, 100);
|
|
53
|
-
Object.defineProperty(this,
|
|
42
|
+
Object.defineProperty(this, "debouncedHandler", {
|
|
54
43
|
value: debounced
|
|
55
44
|
});
|
|
56
45
|
return debounced;
|
|
57
46
|
}
|
|
58
|
-
|
|
59
47
|
handleEvent() {
|
|
60
48
|
this.updateProps();
|
|
61
49
|
this.trigger(this.props);
|
|
62
50
|
this.debouncedHandler();
|
|
63
51
|
}
|
|
64
|
-
|
|
65
52
|
kill() {
|
|
66
|
-
document.removeEventListener(
|
|
53
|
+
document.removeEventListener("scroll", this);
|
|
67
54
|
return this;
|
|
68
55
|
}
|
|
69
|
-
|
|
70
56
|
updateProps() {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
57
|
+
const yLast = this.props.y;
|
|
58
|
+
const xLast = this.props.x;
|
|
74
59
|
if (window.pageYOffset !== this.props.y) {
|
|
75
60
|
this.props.y = window.pageYOffset;
|
|
76
61
|
}
|
|
77
|
-
|
|
78
62
|
if (window.pageXOffset !== this.props.x) {
|
|
79
63
|
this.props.x = window.pageXOffset;
|
|
80
64
|
}
|
|
81
|
-
|
|
82
65
|
this.props.changed.x = this.props.x !== xLast;
|
|
83
66
|
this.props.changed.y = this.props.y !== yLast;
|
|
84
67
|
this.props.last.x = xLast;
|
|
@@ -89,21 +72,18 @@ class Scroll extends Service {
|
|
|
89
72
|
this.props.max.y = (document.scrollingElement || document.body).scrollHeight - window.innerHeight;
|
|
90
73
|
this.props.progress.x = this.props.max.x === 0 ? 1 : this.props.x / this.props.max.x;
|
|
91
74
|
this.props.progress.y = this.props.max.y === 0 ? 1 : this.props.y / this.props.max.y;
|
|
92
|
-
this.props.direction.x = this.props.x > xLast ?
|
|
93
|
-
this.props.direction.y = this.props.y > yLast ?
|
|
75
|
+
this.props.direction.x = this.props.x > xLast ? "RIGHT" : this.props.x < xLast ? "LEFT" : "NONE";
|
|
76
|
+
this.props.direction.y = this.props.y > yLast ? "DOWN" : this.props.y < yLast ? "UP" : "NONE";
|
|
94
77
|
return this.props;
|
|
95
78
|
}
|
|
96
|
-
|
|
97
79
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
export default function useScroll() {
|
|
80
|
+
let instance;
|
|
81
|
+
let scroll;
|
|
82
|
+
function useScroll() {
|
|
102
83
|
if (!scroll) {
|
|
103
84
|
if (!instance) {
|
|
104
85
|
instance = new Scroll();
|
|
105
86
|
}
|
|
106
|
-
|
|
107
87
|
scroll = {
|
|
108
88
|
add: instance.add.bind(instance),
|
|
109
89
|
remove: instance.remove.bind(instance),
|
|
@@ -111,6 +91,8 @@ export default function useScroll() {
|
|
|
111
91
|
props: instance.updateProps.bind(instance)
|
|
112
92
|
};
|
|
113
93
|
}
|
|
114
|
-
|
|
115
94
|
return scroll;
|
|
116
|
-
}
|
|
95
|
+
}
|
|
96
|
+
export {
|
|
97
|
+
useScroll as default
|
|
98
|
+
};
|