@studiometa/js-toolkit 2.0.0 → 2.2.0-alpha.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/index.cjs +55 -18
- package/Base/index.d.ts +23 -1
- package/Base/index.js +55 -18
- package/Base/managers/AbstractManager.cjs +56 -0
- package/Base/managers/AbstractManager.d.ts +44 -0
- package/Base/managers/AbstractManager.js +35 -0
- package/Base/managers/ChildrenManager.cjs +79 -100
- package/Base/managers/ChildrenManager.d.ts +7 -82
- package/Base/managers/ChildrenManager.js +76 -100
- package/Base/managers/EventsManager.cjs +75 -99
- package/Base/managers/EventsManager.d.ts +31 -100
- package/Base/managers/EventsManager.js +75 -99
- package/Base/managers/OptionsManager.cjs +65 -78
- package/Base/managers/OptionsManager.d.ts +37 -79
- package/Base/managers/OptionsManager.js +66 -79
- package/Base/managers/RefsManager.cjs +44 -68
- package/Base/managers/RefsManager.d.ts +10 -64
- package/Base/managers/RefsManager.js +41 -69
- package/Base/managers/ResponsiveOptionsManager.cjs +62 -0
- package/Base/managers/ResponsiveOptionsManager.d.ts +26 -0
- package/Base/managers/ResponsiveOptionsManager.js +37 -0
- package/Base/managers/ServicesManager.cjs +5 -11
- package/Base/managers/ServicesManager.d.ts +2 -11
- package/Base/managers/ServicesManager.js +5 -11
- package/decorators/index.cjs +2 -0
- package/decorators/index.d.ts +1 -0
- package/decorators/index.js +6 -4
- package/decorators/withFreezedOptions.cjs +12 -3
- package/decorators/withFreezedOptions.js +13 -3
- package/decorators/withResponsiveOptions.cjs +39 -0
- package/decorators/withResponsiveOptions.d.ts +8 -0
- package/decorators/withResponsiveOptions.js +14 -0
- package/decorators/withScrolledInView.cjs +66 -23
- package/decorators/withScrolledInView.d.ts +4 -2
- package/decorators/withScrolledInView.js +67 -24
- package/package.json +2 -1
- package/services/Service.cjs +2 -2
- package/services/Service.d.ts +9 -1
- package/services/Service.js +2 -2
- package/services/raf.cjs +16 -0
- package/services/raf.js +16 -0
- package/services/scroll.cjs +3 -1
- package/services/scroll.js +3 -1
- package/utils/css/animate.cjs +207 -0
- package/utils/css/animate.d.ts +57 -0
- package/utils/css/animate.js +182 -0
- package/utils/css/getOffsetSizes.cjs +47 -0
- package/utils/css/getOffsetSizes.d.ts +15 -0
- package/utils/css/getOffsetSizes.js +25 -0
- package/utils/css/index.cjs +6 -0
- package/utils/css/index.d.ts +3 -0
- package/utils/css/index.js +9 -4
- package/utils/css/transform.cjs +91 -0
- package/utils/css/transform.d.ts +43 -0
- package/utils/css/transform.js +66 -0
- package/utils/css/transition.cjs +2 -0
- package/utils/css/transition.js +2 -0
- package/utils/index.cjs +5 -0
- package/utils/index.d.ts +3 -0
- package/utils/index.js +5 -0
- package/utils/isDefined.cjs +28 -0
- package/utils/isDefined.d.ts +7 -0
- package/utils/isDefined.js +6 -0
- package/utils/isFunction.cjs +28 -0
- package/utils/isFunction.d.ts +7 -0
- package/utils/isFunction.js +6 -0
- package/utils/math/index.cjs +2 -0
- package/utils/math/index.d.ts +1 -0
- package/utils/math/index.js +2 -0
- package/utils/scheduler.cjs +72 -0
- package/utils/scheduler.d.ts +19 -0
- package/utils/scheduler.js +50 -0
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { cubicBezier } from "@motionone/easing";
|
|
2
|
+
import { lerp, map, clamp01 } from "../math/index.js";
|
|
3
|
+
import isDefined from "../isDefined.js";
|
|
4
|
+
import transform, { TRANSFORM_PROPS } from "./transform.js";
|
|
5
|
+
import useRaf from "../../services/raf.js";
|
|
6
|
+
import { domScheduler as scheduler } from "../scheduler.js";
|
|
7
|
+
let id = 0;
|
|
8
|
+
const running = /* @__PURE__ */ new WeakMap();
|
|
9
|
+
const raf = useRaf();
|
|
10
|
+
const noop = () => {
|
|
11
|
+
};
|
|
12
|
+
const PROGRESS_PRECISION = 1e-4;
|
|
13
|
+
const CSSUnitConverter = {
|
|
14
|
+
"%": (value, getSizeRef) => value * getSizeRef() / 100,
|
|
15
|
+
vh: (value) => value * window.innerHeight / 100,
|
|
16
|
+
vw: (value) => value * window.innerWidth / 100,
|
|
17
|
+
vmin: (value) => value * Math.min(window.innerWidth, window.innerHeight) / 100,
|
|
18
|
+
vmax: (value) => value * Math.max(window.innerWidth, window.innerHeight) / 100
|
|
19
|
+
};
|
|
20
|
+
function getAnimationStepValue(val, getSizeRef) {
|
|
21
|
+
if (typeof val === "number") {
|
|
22
|
+
return val;
|
|
23
|
+
}
|
|
24
|
+
if (!val[1] || !CSSUnitConverter[val[1]]) {
|
|
25
|
+
return val[0];
|
|
26
|
+
}
|
|
27
|
+
return CSSUnitConverter[val[1]](val[0], getSizeRef);
|
|
28
|
+
}
|
|
29
|
+
function linear(value) {
|
|
30
|
+
return value;
|
|
31
|
+
}
|
|
32
|
+
function normalizeEase(ease) {
|
|
33
|
+
if (!isDefined(ease)) {
|
|
34
|
+
return linear;
|
|
35
|
+
}
|
|
36
|
+
if (Array.isArray(ease)) {
|
|
37
|
+
return cubicBezier(...ease);
|
|
38
|
+
}
|
|
39
|
+
return ease;
|
|
40
|
+
}
|
|
41
|
+
const generateTranslateRenderStrategy = (sizeRef) => (element, fromValue, toValue, progress) => lerp(getAnimationStepValue(fromValue != null ? fromValue : 0, () => element[sizeRef]), getAnimationStepValue(toValue != null ? toValue : 0, () => element[sizeRef]), progress);
|
|
42
|
+
const widthBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetWidth");
|
|
43
|
+
const heightBasedTranslateRenderStrategy = generateTranslateRenderStrategy("offsetHeight");
|
|
44
|
+
const generateLerpRenderStrategy = (defaultValue) => (element, fromValue, toValue, progress) => lerp(fromValue != null ? fromValue : defaultValue, toValue != null ? toValue : defaultValue, progress);
|
|
45
|
+
const scaleRenderStrategy = generateLerpRenderStrategy(1);
|
|
46
|
+
const degreesRenderStrategy = generateLerpRenderStrategy(0);
|
|
47
|
+
const transformRenderStrategies = {
|
|
48
|
+
x: widthBasedTranslateRenderStrategy,
|
|
49
|
+
y: heightBasedTranslateRenderStrategy,
|
|
50
|
+
z: widthBasedTranslateRenderStrategy,
|
|
51
|
+
scale: scaleRenderStrategy,
|
|
52
|
+
scaleX: scaleRenderStrategy,
|
|
53
|
+
scaleY: scaleRenderStrategy,
|
|
54
|
+
scaleZ: scaleRenderStrategy,
|
|
55
|
+
skew: degreesRenderStrategy,
|
|
56
|
+
skewX: degreesRenderStrategy,
|
|
57
|
+
skewY: degreesRenderStrategy,
|
|
58
|
+
rotate: degreesRenderStrategy,
|
|
59
|
+
rotateX: degreesRenderStrategy,
|
|
60
|
+
rotateY: degreesRenderStrategy,
|
|
61
|
+
rotateZ: degreesRenderStrategy
|
|
62
|
+
};
|
|
63
|
+
function render(element, from, to, progress) {
|
|
64
|
+
const stepProgress = to.easing(map(progress, from.offset, to.offset, 0, 1));
|
|
65
|
+
scheduler.read(function renderRead() {
|
|
66
|
+
var _a, _b;
|
|
67
|
+
let opacity = false;
|
|
68
|
+
if (isDefined(from.opacity) || isDefined(to.opacity)) {
|
|
69
|
+
opacity = map(stepProgress, 0, 1, (_a = from.opacity) != null ? _a : 1, (_b = to.opacity) != null ? _b : 1);
|
|
70
|
+
} else if (element.style.opacity) {
|
|
71
|
+
opacity = "";
|
|
72
|
+
}
|
|
73
|
+
let transformOrigin = false;
|
|
74
|
+
if (isDefined(to.transformOrigin)) {
|
|
75
|
+
transformOrigin = to.transformOrigin;
|
|
76
|
+
} else if (element.style.transformOrigin) {
|
|
77
|
+
transformOrigin = "";
|
|
78
|
+
}
|
|
79
|
+
const props = Object.fromEntries(TRANSFORM_PROPS.filter((name) => isDefined(from[name]) || isDefined(to[name])).map((name) => {
|
|
80
|
+
return [name, transformRenderStrategies[name](element, from[name], to[name], stepProgress)];
|
|
81
|
+
}));
|
|
82
|
+
scheduler.write(function renderWrite() {
|
|
83
|
+
if (opacity !== false) {
|
|
84
|
+
element.style.opacity = opacity;
|
|
85
|
+
}
|
|
86
|
+
if (transformOrigin !== false) {
|
|
87
|
+
element.style.transformOrigin = transformOrigin;
|
|
88
|
+
}
|
|
89
|
+
transform(element, props);
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
function animate(element, keyframes, options = {}) {
|
|
94
|
+
var _a;
|
|
95
|
+
let progressValue = 0;
|
|
96
|
+
let easedProgress = 0;
|
|
97
|
+
if (!running.has(element)) {
|
|
98
|
+
running.set(element, /* @__PURE__ */ new Map());
|
|
99
|
+
}
|
|
100
|
+
const ease = normalizeEase(options.easing);
|
|
101
|
+
let duration = (_a = options.duration) != null ? _a : 1;
|
|
102
|
+
duration *= 1e3;
|
|
103
|
+
let startTime = performance.now();
|
|
104
|
+
let endTime = startTime + duration;
|
|
105
|
+
const key = `animate-${id}`;
|
|
106
|
+
id += 1;
|
|
107
|
+
const { onProgress = noop, onFinish = noop } = options;
|
|
108
|
+
let isRunning = false;
|
|
109
|
+
const keyframesCount = keyframes.length - 1;
|
|
110
|
+
const normalizedKeyframes = keyframes.map((keyframe, index) => {
|
|
111
|
+
var _a2;
|
|
112
|
+
return {
|
|
113
|
+
...keyframe,
|
|
114
|
+
offset: (_a2 = keyframe.offset) != null ? _a2 : index / keyframesCount,
|
|
115
|
+
easing: normalizeEase(keyframe.easing)
|
|
116
|
+
};
|
|
117
|
+
});
|
|
118
|
+
function pause() {
|
|
119
|
+
isRunning = false;
|
|
120
|
+
raf.remove(key);
|
|
121
|
+
}
|
|
122
|
+
function progress(newProgress) {
|
|
123
|
+
if (typeof newProgress === "undefined") {
|
|
124
|
+
return progressValue;
|
|
125
|
+
}
|
|
126
|
+
progressValue = newProgress;
|
|
127
|
+
if (Math.abs(1 - progressValue) < PROGRESS_PRECISION) {
|
|
128
|
+
progressValue = 1;
|
|
129
|
+
pause();
|
|
130
|
+
scheduler.afterWrite(() => onFinish(progressValue, easedProgress));
|
|
131
|
+
}
|
|
132
|
+
easedProgress = ease(progressValue);
|
|
133
|
+
let toIndex = 0;
|
|
134
|
+
while (normalizedKeyframes[toIndex] && normalizedKeyframes[toIndex].offset <= easedProgress && normalizedKeyframes[toIndex].offset !== 1) {
|
|
135
|
+
toIndex += 1;
|
|
136
|
+
}
|
|
137
|
+
render(element, normalizedKeyframes[toIndex - 1], normalizedKeyframes[toIndex], easedProgress);
|
|
138
|
+
onProgress(progressValue, easedProgress);
|
|
139
|
+
return progressValue;
|
|
140
|
+
}
|
|
141
|
+
function tick(props) {
|
|
142
|
+
if (!isRunning) {
|
|
143
|
+
raf.remove(key);
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
progress(clamp01(map(props.time, startTime, endTime, 0, 1)));
|
|
147
|
+
}
|
|
148
|
+
function start() {
|
|
149
|
+
const runningKeys = running.get(element);
|
|
150
|
+
runningKeys.forEach((runningPause, runningKey) => {
|
|
151
|
+
runningPause();
|
|
152
|
+
runningKeys.delete(runningKey);
|
|
153
|
+
});
|
|
154
|
+
runningKeys.set(key, pause);
|
|
155
|
+
running.set(element, runningKeys);
|
|
156
|
+
startTime = performance.now();
|
|
157
|
+
endTime = startTime + duration;
|
|
158
|
+
progressValue = 0;
|
|
159
|
+
easedProgress = 0;
|
|
160
|
+
isRunning = true;
|
|
161
|
+
raf.add(key, tick);
|
|
162
|
+
}
|
|
163
|
+
function play() {
|
|
164
|
+
if (isRunning) {
|
|
165
|
+
return;
|
|
166
|
+
}
|
|
167
|
+
startTime = performance.now() - lerp(0, duration, progressValue);
|
|
168
|
+
endTime = startTime + duration;
|
|
169
|
+
isRunning = true;
|
|
170
|
+
raf.add(key, tick);
|
|
171
|
+
}
|
|
172
|
+
return {
|
|
173
|
+
start,
|
|
174
|
+
finish: () => progress(1),
|
|
175
|
+
pause,
|
|
176
|
+
play,
|
|
177
|
+
progress
|
|
178
|
+
};
|
|
179
|
+
}
|
|
180
|
+
export {
|
|
181
|
+
animate
|
|
182
|
+
};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/css/getOffsetSizes.js
|
|
20
|
+
var getOffsetSizes_exports = {};
|
|
21
|
+
__export(getOffsetSizes_exports, {
|
|
22
|
+
default: () => getOffsetSizes
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(getOffsetSizes_exports);
|
|
25
|
+
function getOffsetSizes(element) {
|
|
26
|
+
let parent = element;
|
|
27
|
+
let x = -window.pageXOffset;
|
|
28
|
+
let y = -window.pageYOffset;
|
|
29
|
+
while (parent) {
|
|
30
|
+
x += parent.offsetLeft;
|
|
31
|
+
y += parent.offsetTop;
|
|
32
|
+
parent = parent.offsetParent;
|
|
33
|
+
}
|
|
34
|
+
const width = element.offsetWidth;
|
|
35
|
+
const height = element.offsetWidth;
|
|
36
|
+
return {
|
|
37
|
+
x,
|
|
38
|
+
y,
|
|
39
|
+
width,
|
|
40
|
+
height,
|
|
41
|
+
top: y,
|
|
42
|
+
right: width + x,
|
|
43
|
+
bottom: height + y,
|
|
44
|
+
left: x
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get a `DOMRect` like `Object` for an element, without its transforms.
|
|
3
|
+
* @param {HTMLElement} element
|
|
4
|
+
* @returns {{ x: number, y: number, width: number, height: number, top: number, right: number, bottom: number, left: number }}
|
|
5
|
+
*/
|
|
6
|
+
export default function getOffsetSizes(element: HTMLElement): {
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
width: number;
|
|
10
|
+
height: number;
|
|
11
|
+
top: number;
|
|
12
|
+
right: number;
|
|
13
|
+
bottom: number;
|
|
14
|
+
left: number;
|
|
15
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
function getOffsetSizes(element) {
|
|
2
|
+
let parent = element;
|
|
3
|
+
let x = -window.pageXOffset;
|
|
4
|
+
let y = -window.pageYOffset;
|
|
5
|
+
while (parent) {
|
|
6
|
+
x += parent.offsetLeft;
|
|
7
|
+
y += parent.offsetTop;
|
|
8
|
+
parent = parent.offsetParent;
|
|
9
|
+
}
|
|
10
|
+
const width = element.offsetWidth;
|
|
11
|
+
const height = element.offsetWidth;
|
|
12
|
+
return {
|
|
13
|
+
x,
|
|
14
|
+
y,
|
|
15
|
+
width,
|
|
16
|
+
height,
|
|
17
|
+
top: y,
|
|
18
|
+
right: width + x,
|
|
19
|
+
bottom: height + y,
|
|
20
|
+
left: x
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
getOffsetSizes as default
|
|
25
|
+
};
|
package/utils/css/index.cjs
CHANGED
|
@@ -16,6 +16,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
16
|
}
|
|
17
17
|
return to;
|
|
18
18
|
};
|
|
19
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
19
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
21
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
22
|
|
|
@@ -24,15 +25,20 @@ var css_exports = {};
|
|
|
24
25
|
__export(css_exports, {
|
|
25
26
|
addClass: () => import_classes.add,
|
|
26
27
|
addStyle: () => import_styles.add,
|
|
28
|
+
getOffsetSizes: () => import_getOffsetSizes.default,
|
|
27
29
|
matrix: () => import_matrix.default,
|
|
28
30
|
removeClass: () => import_classes.remove,
|
|
29
31
|
removeStyle: () => import_styles.remove,
|
|
30
32
|
toggleClass: () => import_classes.toggle,
|
|
33
|
+
transform: () => import_transform.default,
|
|
31
34
|
transition: () => import_transition.default
|
|
32
35
|
});
|
|
33
36
|
module.exports = __toCommonJS(css_exports);
|
|
37
|
+
__reExport(css_exports, require("./animate.cjs"), module.exports);
|
|
34
38
|
var import_classes = require("./classes.cjs");
|
|
35
39
|
var import_styles = require("./styles.cjs");
|
|
40
|
+
var import_getOffsetSizes = __toESM(require("./getOffsetSizes.cjs"), 1);
|
|
36
41
|
var import_matrix = __toESM(require("./matrix.cjs"), 1);
|
|
42
|
+
var import_transform = __toESM(require("./transform.cjs"), 1);
|
|
37
43
|
var import_transition = __toESM(require("./transition.cjs"), 1);
|
|
38
44
|
if (module.exports.default) module.exports = module.exports.default;
|
package/utils/css/index.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
export * from "./animate.js";
|
|
2
|
+
export { default as getOffsetSizes } from "./getOffsetSizes.js";
|
|
1
3
|
export { default as matrix } from "./matrix.js";
|
|
4
|
+
export { default as transform } from "./transform.js";
|
|
2
5
|
export { default as transition } from "./transition.js";
|
|
3
6
|
export { add as addClass, remove as removeClass, toggle as toggleClass } from "./classes.js";
|
|
4
7
|
export { add as addStyle, remove as removeStyle } from "./styles.js";
|
package/utils/css/index.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
|
+
export * from "./animate.js";
|
|
1
2
|
import { add, remove, toggle } from "./classes.js";
|
|
2
3
|
import { add as add2, remove as remove2 } from "./styles.js";
|
|
3
|
-
import { default as default2 } from "./
|
|
4
|
-
import { default as default3 } from "./
|
|
4
|
+
import { default as default2 } from "./getOffsetSizes.js";
|
|
5
|
+
import { default as default3 } from "./matrix.js";
|
|
6
|
+
import { default as default4 } from "./transform.js";
|
|
7
|
+
import { default as default5 } from "./transition.js";
|
|
5
8
|
export {
|
|
6
9
|
add as addClass,
|
|
7
10
|
add2 as addStyle,
|
|
8
|
-
default2 as
|
|
11
|
+
default2 as getOffsetSizes,
|
|
12
|
+
default3 as matrix,
|
|
9
13
|
remove as removeClass,
|
|
10
14
|
remove2 as removeStyle,
|
|
11
15
|
toggle as toggleClass,
|
|
12
|
-
|
|
16
|
+
default4 as transform,
|
|
17
|
+
default5 as transition
|
|
13
18
|
};
|
|
@@ -0,0 +1,91 @@
|
|
|
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 __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
|
|
20
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
21
|
+
|
|
22
|
+
// packages/js-toolkit/utils/css/transform.js
|
|
23
|
+
var transform_exports = {};
|
|
24
|
+
__export(transform_exports, {
|
|
25
|
+
TRANSFORM_PROPS: () => TRANSFORM_PROPS,
|
|
26
|
+
default: () => transform
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(transform_exports);
|
|
29
|
+
var import_isDefined = __toESM(require("../isDefined.cjs"), 1);
|
|
30
|
+
var TRANSFORM_PROPS = [
|
|
31
|
+
"x",
|
|
32
|
+
"y",
|
|
33
|
+
"z",
|
|
34
|
+
"rotate",
|
|
35
|
+
"rotateX",
|
|
36
|
+
"rotateY",
|
|
37
|
+
"rotateZ",
|
|
38
|
+
"scale",
|
|
39
|
+
"scaleX",
|
|
40
|
+
"scaleY",
|
|
41
|
+
"scaleZ",
|
|
42
|
+
"skew",
|
|
43
|
+
"skewX",
|
|
44
|
+
"skewY"
|
|
45
|
+
];
|
|
46
|
+
function transform(element, props) {
|
|
47
|
+
var _a, _b, _c;
|
|
48
|
+
let value = "";
|
|
49
|
+
if ((0, import_isDefined.default)(props.x) || (0, import_isDefined.default)(props.y) || (0, import_isDefined.default)(props.z)) {
|
|
50
|
+
value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
|
|
51
|
+
}
|
|
52
|
+
if ((0, import_isDefined.default)(props.rotate)) {
|
|
53
|
+
value += `rotate(${props.rotate}deg) `;
|
|
54
|
+
} else {
|
|
55
|
+
if ((0, import_isDefined.default)(props.rotateX)) {
|
|
56
|
+
value += `rotateX(${props.rotateX}deg) `;
|
|
57
|
+
}
|
|
58
|
+
if ((0, import_isDefined.default)(props.rotateY)) {
|
|
59
|
+
value += `rotateY(${props.rotateY}deg) `;
|
|
60
|
+
}
|
|
61
|
+
if ((0, import_isDefined.default)(props.rotateZ)) {
|
|
62
|
+
value += `rotateZ(${props.rotateZ}deg) `;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
if ((0, import_isDefined.default)(props.scale)) {
|
|
66
|
+
value += `scale(${props.scale}) `;
|
|
67
|
+
} else {
|
|
68
|
+
if ((0, import_isDefined.default)(props.scaleX)) {
|
|
69
|
+
value += `scaleX(${props.scaleX}) `;
|
|
70
|
+
}
|
|
71
|
+
if ((0, import_isDefined.default)(props.scaleY)) {
|
|
72
|
+
value += `scaleY(${props.scaleY}) `;
|
|
73
|
+
}
|
|
74
|
+
if ((0, import_isDefined.default)(props.scaleZ)) {
|
|
75
|
+
value += `scaleZ(${props.scaleZ}) `;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
if ((0, import_isDefined.default)(props.skew)) {
|
|
79
|
+
value += `skew(${props.skew}deg) `;
|
|
80
|
+
} else {
|
|
81
|
+
if ((0, import_isDefined.default)(props.skewX)) {
|
|
82
|
+
value += `skewX(${props.skewX}deg) `;
|
|
83
|
+
}
|
|
84
|
+
if ((0, import_isDefined.default)(props.skewY)) {
|
|
85
|
+
value += `skewY(${props.skewY}deg) `;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
element.style.transform = value;
|
|
89
|
+
return value;
|
|
90
|
+
}
|
|
91
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generate a CSS transform.
|
|
3
|
+
*
|
|
4
|
+
* @param {HTMLElement} element
|
|
5
|
+
* @param {TransformProps} props
|
|
6
|
+
* @returns {string}
|
|
7
|
+
*/
|
|
8
|
+
export default function transform(element: HTMLElement, props: TransformProps): string;
|
|
9
|
+
/**
|
|
10
|
+
* @typedef {Partial<{
|
|
11
|
+
* x: number;
|
|
12
|
+
* y: number;
|
|
13
|
+
* z: number;
|
|
14
|
+
* rotate: number;
|
|
15
|
+
* rotateX: number;
|
|
16
|
+
* rotateY: number;
|
|
17
|
+
* rotateZ: number;
|
|
18
|
+
* scale: number;
|
|
19
|
+
* scaleX: number;
|
|
20
|
+
* scaleY: number;
|
|
21
|
+
* scaleZ: number;
|
|
22
|
+
* skew: number;
|
|
23
|
+
* skewX: number;
|
|
24
|
+
* skewY: number;
|
|
25
|
+
* }>} TransformProps
|
|
26
|
+
*/
|
|
27
|
+
export const TRANSFORM_PROPS: string[];
|
|
28
|
+
export type TransformProps = Partial<{
|
|
29
|
+
x: number;
|
|
30
|
+
y: number;
|
|
31
|
+
z: number;
|
|
32
|
+
rotate: number;
|
|
33
|
+
rotateX: number;
|
|
34
|
+
rotateY: number;
|
|
35
|
+
rotateZ: number;
|
|
36
|
+
scale: number;
|
|
37
|
+
scaleX: number;
|
|
38
|
+
scaleY: number;
|
|
39
|
+
scaleZ: number;
|
|
40
|
+
skew: number;
|
|
41
|
+
skewX: number;
|
|
42
|
+
skewY: number;
|
|
43
|
+
}>;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import isDefined from "../isDefined.js";
|
|
2
|
+
const TRANSFORM_PROPS = [
|
|
3
|
+
"x",
|
|
4
|
+
"y",
|
|
5
|
+
"z",
|
|
6
|
+
"rotate",
|
|
7
|
+
"rotateX",
|
|
8
|
+
"rotateY",
|
|
9
|
+
"rotateZ",
|
|
10
|
+
"scale",
|
|
11
|
+
"scaleX",
|
|
12
|
+
"scaleY",
|
|
13
|
+
"scaleZ",
|
|
14
|
+
"skew",
|
|
15
|
+
"skewX",
|
|
16
|
+
"skewY"
|
|
17
|
+
];
|
|
18
|
+
function transform(element, props) {
|
|
19
|
+
var _a, _b, _c;
|
|
20
|
+
let value = "";
|
|
21
|
+
if (isDefined(props.x) || isDefined(props.y) || isDefined(props.z)) {
|
|
22
|
+
value += `translate3d(${(_a = props.x) != null ? _a : 0}px, ${(_b = props.y) != null ? _b : 0}px, ${(_c = props.z) != null ? _c : 0}px) `;
|
|
23
|
+
}
|
|
24
|
+
if (isDefined(props.rotate)) {
|
|
25
|
+
value += `rotate(${props.rotate}deg) `;
|
|
26
|
+
} else {
|
|
27
|
+
if (isDefined(props.rotateX)) {
|
|
28
|
+
value += `rotateX(${props.rotateX}deg) `;
|
|
29
|
+
}
|
|
30
|
+
if (isDefined(props.rotateY)) {
|
|
31
|
+
value += `rotateY(${props.rotateY}deg) `;
|
|
32
|
+
}
|
|
33
|
+
if (isDefined(props.rotateZ)) {
|
|
34
|
+
value += `rotateZ(${props.rotateZ}deg) `;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
if (isDefined(props.scale)) {
|
|
38
|
+
value += `scale(${props.scale}) `;
|
|
39
|
+
} else {
|
|
40
|
+
if (isDefined(props.scaleX)) {
|
|
41
|
+
value += `scaleX(${props.scaleX}) `;
|
|
42
|
+
}
|
|
43
|
+
if (isDefined(props.scaleY)) {
|
|
44
|
+
value += `scaleY(${props.scaleY}) `;
|
|
45
|
+
}
|
|
46
|
+
if (isDefined(props.scaleZ)) {
|
|
47
|
+
value += `scaleZ(${props.scaleZ}) `;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
if (isDefined(props.skew)) {
|
|
51
|
+
value += `skew(${props.skew}deg) `;
|
|
52
|
+
} else {
|
|
53
|
+
if (isDefined(props.skewX)) {
|
|
54
|
+
value += `skewX(${props.skewX}deg) `;
|
|
55
|
+
}
|
|
56
|
+
if (isDefined(props.skewY)) {
|
|
57
|
+
value += `skewY(${props.skewY}deg) `;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
element.style.transform = value;
|
|
61
|
+
return value;
|
|
62
|
+
}
|
|
63
|
+
export {
|
|
64
|
+
TRANSFORM_PROPS,
|
|
65
|
+
transform as default
|
|
66
|
+
};
|
package/utils/css/transition.cjs
CHANGED
|
@@ -68,8 +68,10 @@ async function start(element, classesOrStyles) {
|
|
|
68
68
|
trs.isTransitioning = true;
|
|
69
69
|
setClassesOrStyles(element, classesOrStyles.from);
|
|
70
70
|
await (0, import_nextFrame.default)();
|
|
71
|
+
await (0, import_nextFrame.default)();
|
|
71
72
|
setClassesOrStyles(element, classesOrStyles.active);
|
|
72
73
|
await (0, import_nextFrame.default)();
|
|
74
|
+
await (0, import_nextFrame.default)();
|
|
73
75
|
}
|
|
74
76
|
async function next(element, classesOrStyles) {
|
|
75
77
|
const hasTransition = testTransition(element);
|
package/utils/css/transition.js
CHANGED
|
@@ -41,8 +41,10 @@ async function start(element, classesOrStyles) {
|
|
|
41
41
|
trs.isTransitioning = true;
|
|
42
42
|
setClassesOrStyles(element, classesOrStyles.from);
|
|
43
43
|
await nextFrame();
|
|
44
|
+
await nextFrame();
|
|
44
45
|
setClassesOrStyles(element, classesOrStyles.active);
|
|
45
46
|
await nextFrame();
|
|
47
|
+
await nextFrame();
|
|
46
48
|
}
|
|
47
49
|
async function next(element, classesOrStyles) {
|
|
48
50
|
const hasTransition = testTransition(element);
|
package/utils/index.cjs
CHANGED
|
@@ -27,6 +27,8 @@ __export(utils_exports, {
|
|
|
27
27
|
focusTrap: () => import_focusTrap.default,
|
|
28
28
|
historyPush: () => import_history.push,
|
|
29
29
|
historyReplace: () => import_history.replace,
|
|
30
|
+
isDefined: () => import_isDefined.default,
|
|
31
|
+
isFunction: () => import_isFunction.default,
|
|
30
32
|
keyCodes: () => import_keyCodes.default,
|
|
31
33
|
memoize: () => import_memoize.default,
|
|
32
34
|
nextFrame: () => import_nextFrame.default,
|
|
@@ -46,9 +48,12 @@ var import_nextTick = __toESM(require("./nextTick.cjs"), 1);
|
|
|
46
48
|
var import_nextMicrotask = __toESM(require("./nextMicrotask.cjs"), 1);
|
|
47
49
|
var import_throttle = __toESM(require("./throttle.cjs"), 1);
|
|
48
50
|
var import_scrollTo = __toESM(require("./scrollTo.cjs"), 1);
|
|
51
|
+
var import_isDefined = __toESM(require("./isDefined.cjs"), 1);
|
|
52
|
+
var import_isFunction = __toESM(require("./isFunction.cjs"), 1);
|
|
49
53
|
__reExport(utils_exports, require("./css/index.cjs"), module.exports);
|
|
50
54
|
var import_history = require("./history.cjs");
|
|
51
55
|
__reExport(utils_exports, require("./collide/index.cjs"), module.exports);
|
|
52
56
|
__reExport(utils_exports, require("./math/index.cjs"), module.exports);
|
|
53
57
|
__reExport(utils_exports, require("./string/index.cjs"), module.exports);
|
|
58
|
+
__reExport(utils_exports, require("./scheduler.cjs"), module.exports);
|
|
54
59
|
if (module.exports.default) module.exports = module.exports.default;
|
package/utils/index.d.ts
CHANGED
|
@@ -7,8 +7,11 @@ export { default as nextTick } from "./nextTick.js";
|
|
|
7
7
|
export { default as nextMicrotask } from "./nextMicrotask.js";
|
|
8
8
|
export { default as throttle } from "./throttle.js";
|
|
9
9
|
export { default as scrollTo } from "./scrollTo.js";
|
|
10
|
+
export { default as isDefined } from "./isDefined.js";
|
|
11
|
+
export { default as isFunction } from "./isFunction.js";
|
|
10
12
|
export * from "./css/index.js";
|
|
11
13
|
export * from "./collide/index.js";
|
|
12
14
|
export * from "./math/index.js";
|
|
13
15
|
export * from "./string/index.js";
|
|
16
|
+
export * from "./scheduler.js";
|
|
14
17
|
export { objectToURLSearchParams, push as historyPush, replace as historyReplace } from "./history.js";
|
package/utils/index.js
CHANGED
|
@@ -7,6 +7,8 @@ import { default as default7 } from "./nextTick.js";
|
|
|
7
7
|
import { default as default8 } from "./nextMicrotask.js";
|
|
8
8
|
import { default as default9 } from "./throttle.js";
|
|
9
9
|
import { default as default10 } from "./scrollTo.js";
|
|
10
|
+
import { default as default11 } from "./isDefined.js";
|
|
11
|
+
import { default as default12 } from "./isFunction.js";
|
|
10
12
|
export * from "./css/index.js";
|
|
11
13
|
import {
|
|
12
14
|
objectToURLSearchParams,
|
|
@@ -16,11 +18,14 @@ import {
|
|
|
16
18
|
export * from "./collide/index.js";
|
|
17
19
|
export * from "./math/index.js";
|
|
18
20
|
export * from "./string/index.js";
|
|
21
|
+
export * from "./scheduler.js";
|
|
19
22
|
export {
|
|
20
23
|
default2 as debounce,
|
|
21
24
|
default3 as focusTrap,
|
|
22
25
|
push as historyPush,
|
|
23
26
|
replace as historyReplace,
|
|
27
|
+
default11 as isDefined,
|
|
28
|
+
default12 as isFunction,
|
|
24
29
|
default4 as keyCodes,
|
|
25
30
|
default5 as memoize,
|
|
26
31
|
default6 as nextFrame,
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// packages/js-toolkit/utils/isDefined.js
|
|
20
|
+
var isDefined_exports = {};
|
|
21
|
+
__export(isDefined_exports, {
|
|
22
|
+
default: () => isDefined
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(isDefined_exports);
|
|
25
|
+
function isDefined(value) {
|
|
26
|
+
return typeof value !== "undefined";
|
|
27
|
+
}
|
|
28
|
+
if (module.exports.default) module.exports = module.exports.default;
|