@studiometa/ui 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/atoms/Figure/Figure.cjs +12 -3
- package/atoms/Figure/Figure.d.ts +18 -0
- package/atoms/Figure/Figure.js +1 -1
- package/atoms/Figure/FigureTwicPics.cjs +72 -0
- package/atoms/Figure/FigureTwicPics.d.ts +48 -0
- package/atoms/Figure/FigureTwicPics.js +1 -0
- package/atoms/Figure/index.cjs +31 -0
- package/atoms/Figure/index.d.ts +2 -0
- package/atoms/Figure/index.js +1 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs +126 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts +133 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimation.cjs +51 -0
- package/atoms/ScrollAnimation/ScrollAnimation.d.ts +55 -0
- package/atoms/ScrollAnimation/ScrollAnimation.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.cjs +51 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.d.ts +13 -0
- package/atoms/ScrollAnimation/ScrollAnimationChild.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.cjs +41 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.d.ts +6 -0
- package/atoms/ScrollAnimation/ScrollAnimationChildWithEase.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.cjs +48 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.d.ts +35 -0
- package/atoms/ScrollAnimation/ScrollAnimationParent.js +1 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.cjs +41 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.d.ts +6 -0
- package/atoms/ScrollAnimation/ScrollAnimationWithEase.js +1 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.cjs +70 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.d.ts +11 -0
- package/atoms/ScrollAnimation/animationScrollWithEase.js +1 -0
- package/atoms/ScrollAnimation/index.cjs +41 -0
- package/atoms/ScrollAnimation/index.d.ts +7 -0
- package/atoms/ScrollAnimation/index.js +1 -0
- package/atoms/index.cjs +2 -2
- package/atoms/index.d.ts +2 -1
- package/atoms/index.js +1 -1
- package/package.json +2 -2
package/atoms/Figure/Figure.cjs
CHANGED
|
@@ -29,6 +29,12 @@ __export(Figure_exports, {
|
|
|
29
29
|
module.exports = __toCommonJS(Figure_exports);
|
|
30
30
|
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
31
31
|
var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_toolkit.Base, { threshold: [0, 1] }) {
|
|
32
|
+
get src() {
|
|
33
|
+
return this.$refs.img.src;
|
|
34
|
+
}
|
|
35
|
+
set src(value) {
|
|
36
|
+
this.$refs.img.src = value;
|
|
37
|
+
}
|
|
32
38
|
mounted() {
|
|
33
39
|
if (!this.$refs.img) {
|
|
34
40
|
throw new Error("[Figure] The `img` ref is required.");
|
|
@@ -36,13 +42,16 @@ var Figure = class extends (0, import_js_toolkit.withMountWhenInView)(import_js_
|
|
|
36
42
|
if (!(this.$refs.img instanceof HTMLImageElement)) {
|
|
37
43
|
throw new Error("[Figure] The `img` ref must be an `<img>` element.");
|
|
38
44
|
}
|
|
39
|
-
if (this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this
|
|
40
|
-
this
|
|
45
|
+
if (this.$options.lazy && this.$refs.img.hasAttribute("data-src") && this.$refs.img.getAttribute("data-src") !== this.src) {
|
|
46
|
+
this.src = this.$refs.img.getAttribute("data-src");
|
|
41
47
|
}
|
|
42
48
|
}
|
|
43
49
|
};
|
|
44
50
|
__publicField(Figure, "config", {
|
|
45
51
|
name: "Figure",
|
|
46
|
-
refs: ["img"]
|
|
52
|
+
refs: ["img"],
|
|
53
|
+
options: {
|
|
54
|
+
lazy: Boolean
|
|
55
|
+
}
|
|
47
56
|
});
|
|
48
57
|
if (module.exports.default) module.exports = module.exports.default;
|
package/atoms/Figure/Figure.d.ts
CHANGED
|
@@ -15,7 +15,25 @@ export default class Figure extends Base {
|
|
|
15
15
|
static config: {
|
|
16
16
|
name: string;
|
|
17
17
|
refs: string[];
|
|
18
|
+
options: {
|
|
19
|
+
lazy: BooleanConstructor;
|
|
20
|
+
};
|
|
18
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* Set the image source.
|
|
24
|
+
*
|
|
25
|
+
* @this {Figure & FigureInterface}
|
|
26
|
+
* @param {string} value
|
|
27
|
+
* @returns {void}
|
|
28
|
+
*/
|
|
29
|
+
set src(arg: string);
|
|
30
|
+
/**
|
|
31
|
+
* Get the image source.
|
|
32
|
+
*
|
|
33
|
+
* @this {Figure & FigureInterface}
|
|
34
|
+
* @returns {string}
|
|
35
|
+
*/
|
|
36
|
+
get src(): string;
|
|
19
37
|
/**
|
|
20
38
|
* Load on mount.
|
|
21
39
|
* @this {Figure & FigureInterface}
|
package/atoms/Figure/Figure.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Base as
|
|
1
|
+
import{Base as t,withMountWhenInView as r}from"@studiometa/js-toolkit";class i extends r(t,{threshold:[0,1]}){static config={name:"Figure",refs:["img"],options:{lazy:Boolean}};get src(){return this.$refs.img.src}set src(e){this.$refs.img.src=e}mounted(){if(!this.$refs.img)throw new Error("[Figure] The `img` ref is required.");if(!(this.$refs.img instanceof HTMLImageElement))throw new Error("[Figure] The `img` ref must be an `<img>` element.");this.$options.lazy&&this.$refs.img.hasAttribute("data-src")&&this.$refs.img.getAttribute("data-src")!==this.src&&(this.src=this.$refs.img.getAttribute("data-src"))}}export{i as default};
|
|
@@ -0,0 +1,72 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/Figure/FigureTwicPics.js
|
|
28
|
+
var FigureTwicPics_exports = {};
|
|
29
|
+
__export(FigureTwicPics_exports, {
|
|
30
|
+
default: () => FigureTwicPics
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(FigureTwicPics_exports);
|
|
33
|
+
var import_Figure = __toESM(require("./Figure.cjs"), 1);
|
|
34
|
+
function normalizeSize(that, prop) {
|
|
35
|
+
const { step } = that.$options;
|
|
36
|
+
return Math.ceil(that.$refs.img[prop] / step) * step;
|
|
37
|
+
}
|
|
38
|
+
var FigureTwicPics = class extends import_Figure.default {
|
|
39
|
+
get domain() {
|
|
40
|
+
const url = new URL(this.$refs.img.dataset.src);
|
|
41
|
+
return url.host;
|
|
42
|
+
}
|
|
43
|
+
set src(value) {
|
|
44
|
+
const url = new URL(value);
|
|
45
|
+
url.host = this.domain;
|
|
46
|
+
const width = normalizeSize(this, "offsetWidth");
|
|
47
|
+
const height = normalizeSize(this, "offsetHeight");
|
|
48
|
+
url.searchParams.set("twic", ["v1", this.$options.transform, `${this.$options.mode}=${width}x${height}`].filter(Boolean).join("/"));
|
|
49
|
+
url.search = decodeURIComponent(url.search);
|
|
50
|
+
super.src = url.toString();
|
|
51
|
+
}
|
|
52
|
+
resized() {
|
|
53
|
+
this.src = this.$refs.img.dataset.src;
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
__publicField(FigureTwicPics, "config", {
|
|
57
|
+
...import_Figure.default.config,
|
|
58
|
+
name: "FigureTwicPics",
|
|
59
|
+
options: {
|
|
60
|
+
...import_Figure.default.config.options,
|
|
61
|
+
transform: String,
|
|
62
|
+
step: {
|
|
63
|
+
type: Number,
|
|
64
|
+
default: 50
|
|
65
|
+
},
|
|
66
|
+
mode: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: "cover"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Figure class.
|
|
3
|
+
*
|
|
4
|
+
* Manager lazyloading image sources.
|
|
5
|
+
*/
|
|
6
|
+
export default class FigureTwicPics extends Figure {
|
|
7
|
+
/**
|
|
8
|
+
* Config.
|
|
9
|
+
*/
|
|
10
|
+
static config: {
|
|
11
|
+
name: string;
|
|
12
|
+
options: {
|
|
13
|
+
transform: StringConstructor;
|
|
14
|
+
step: {
|
|
15
|
+
type: NumberConstructor;
|
|
16
|
+
default: number;
|
|
17
|
+
};
|
|
18
|
+
mode: {
|
|
19
|
+
type: StringConstructor;
|
|
20
|
+
default: string;
|
|
21
|
+
};
|
|
22
|
+
lazy: BooleanConstructor;
|
|
23
|
+
};
|
|
24
|
+
refs: string[];
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Get the TwicPics domain.
|
|
28
|
+
*
|
|
29
|
+
* @this {FigureTwicPicsInterface}
|
|
30
|
+
* @returns {string}
|
|
31
|
+
*/
|
|
32
|
+
get domain(): string;
|
|
33
|
+
/**
|
|
34
|
+
* Reassign the source from the original on resized.
|
|
35
|
+
*
|
|
36
|
+
* @this {FigureTwicPicsInterface}
|
|
37
|
+
* @returns {void}
|
|
38
|
+
*/
|
|
39
|
+
resized(this: FigureTwicPicsInterface): void;
|
|
40
|
+
}
|
|
41
|
+
export type FigureInterface = import('./Figure.js').FigureInterface;
|
|
42
|
+
export type FigureTwicPicsInterface = FigureTwicPics & FigureInterface & {
|
|
43
|
+
$options: {
|
|
44
|
+
transform: string;
|
|
45
|
+
step: number;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
import Figure from "./Figure.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import i from"./Figure.js";function o(e,s){const{step:t}=e.$options;return Math.ceil(e.$refs.img[s]/t)*t}class c extends i{static config={...i.config,name:"FigureTwicPics",options:{...i.config.options,transform:String,step:{type:Number,default:50},mode:{type:String,default:"cover"}}};get domain(){return new URL(this.$refs.img.dataset.src).host}set src(s){const t=new URL(s);t.host=this.domain;const r=o(this,"offsetWidth"),n=o(this,"offsetHeight");t.searchParams.set("twic",["v1",this.$options.transform,`${this.$options.mode}=${r}x${n}`].filter(Boolean).join("/")),t.search=decodeURIComponent(t.search),super.src=t.toString()}resized(){this.src=this.$refs.img.dataset.src}}export{c as default};
|
|
@@ -0,0 +1,31 @@
|
|
|
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/ui/atoms/Figure/index.js
|
|
23
|
+
var Figure_exports = {};
|
|
24
|
+
__export(Figure_exports, {
|
|
25
|
+
Figure: () => import_Figure.default,
|
|
26
|
+
FigureTwicPics: () => import_FigureTwicPics.default
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(Figure_exports);
|
|
29
|
+
var import_Figure = __toESM(require("./Figure.cjs"), 1);
|
|
30
|
+
var import_FigureTwicPics = __toESM(require("./FigureTwicPics.cjs"), 1);
|
|
31
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{default as a}from"./Figure.js";import{default as i}from"./FigureTwicPics.js";export{a as Figure,i as FigureTwicPics};
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var __publicField = (obj, key, value) => {
|
|
20
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
21
|
+
return value;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// packages/ui/atoms/ScrollAnimation/AbstractScrollAnimation.js
|
|
25
|
+
var AbstractScrollAnimation_exports = {};
|
|
26
|
+
__export(AbstractScrollAnimation_exports, {
|
|
27
|
+
default: () => AbstractScrollAnimation
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(AbstractScrollAnimation_exports);
|
|
30
|
+
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
31
|
+
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
32
|
+
function getDefaults() {
|
|
33
|
+
return {
|
|
34
|
+
x: 0,
|
|
35
|
+
y: 0,
|
|
36
|
+
z: 0,
|
|
37
|
+
scale: 1,
|
|
38
|
+
scaleX: 1,
|
|
39
|
+
scaleY: 1,
|
|
40
|
+
rotate: 0,
|
|
41
|
+
skewX: 0,
|
|
42
|
+
skewY: 0,
|
|
43
|
+
opacity: 1
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
var AbstractScrollAnimation = class extends (0, import_js_toolkit.withFreezedOptions)(import_js_toolkit.Base) {
|
|
47
|
+
get target() {
|
|
48
|
+
return this.$el;
|
|
49
|
+
}
|
|
50
|
+
get has() {
|
|
51
|
+
const has = {
|
|
52
|
+
x: false,
|
|
53
|
+
y: false,
|
|
54
|
+
z: false,
|
|
55
|
+
scale: false,
|
|
56
|
+
scaleX: false,
|
|
57
|
+
scaleY: false,
|
|
58
|
+
rotate: false,
|
|
59
|
+
skewX: false,
|
|
60
|
+
skewY: false,
|
|
61
|
+
opacity: false,
|
|
62
|
+
transform: false
|
|
63
|
+
};
|
|
64
|
+
Object.keys(this.$options.from).forEach((key) => {
|
|
65
|
+
has[key] = this.$options.from[key] !== this.$options.to[key];
|
|
66
|
+
});
|
|
67
|
+
has.transform = Object.keys(has).filter((key) => key !== "opacity" && key !== "transform").some((key) => has[key]);
|
|
68
|
+
Object.defineProperty(this, "has", { value: has });
|
|
69
|
+
return has;
|
|
70
|
+
}
|
|
71
|
+
scrolledInView(props) {
|
|
72
|
+
if (!this.has.opacity && !this.has.transform) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
const progress = (0, import_utils.map)((0, import_utils.clamp)(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]), this.$options.playRange[0], this.$options.playRange[1], 0, 1);
|
|
76
|
+
this.render(progress);
|
|
77
|
+
}
|
|
78
|
+
render(progress) {
|
|
79
|
+
if (this.has.opacity) {
|
|
80
|
+
this.target.style.opacity = String((0, import_utils.map)(progress, 0, 1, this.$options.from.opacity, this.$options.to.opacity));
|
|
81
|
+
}
|
|
82
|
+
if (this.has.transform) {
|
|
83
|
+
let transform = (0, import_utils.matrix)({
|
|
84
|
+
translateX: this.has.x ? (0, import_utils.lerp)(this.$options.from.x, this.$options.to.x, progress) : void 0,
|
|
85
|
+
translateY: this.has.y ? (0, import_utils.lerp)(this.$options.from.y, this.$options.to.y, progress) : void 0,
|
|
86
|
+
scaleX: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleX ? (0, import_utils.lerp)(this.$options.from.scaleX, this.$options.to.scaleX, progress) : void 0,
|
|
87
|
+
scaleY: this.has.scale ? (0, import_utils.lerp)(this.$options.from.scale, this.$options.to.scale, progress) : this.has.scaleY ? (0, import_utils.lerp)(this.$options.from.scaleY, this.$options.to.scaleY, progress) : void 0,
|
|
88
|
+
skewX: this.has.skewX ? (0, import_utils.lerp)(this.$options.from.skewX, this.$options.to.skewX, progress) : void 0,
|
|
89
|
+
skewY: this.has.skewY ? (0, import_utils.lerp)(this.$options.from.skewY, this.$options.to.skewY, progress) : void 0
|
|
90
|
+
});
|
|
91
|
+
if (this.has.rotate) {
|
|
92
|
+
transform += ` rotate(${(0, import_utils.lerp)(this.$options.from.rotate, this.$options.to.rotate, progress)}deg)`;
|
|
93
|
+
}
|
|
94
|
+
transform += `translateZ(${this.has.z ? (0, import_utils.lerp)(this.$options.from.z, this.$options.to.z, progress) : 0})`;
|
|
95
|
+
this.target.style.transform = transform;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
__publicField(AbstractScrollAnimation, "config", {
|
|
100
|
+
name: "AbstractScrollAnimation",
|
|
101
|
+
options: {
|
|
102
|
+
playRange: {
|
|
103
|
+
type: Array,
|
|
104
|
+
default: () => [0, 1]
|
|
105
|
+
},
|
|
106
|
+
dampFactor: {
|
|
107
|
+
type: Number,
|
|
108
|
+
default: 0.5
|
|
109
|
+
},
|
|
110
|
+
dampPrecision: {
|
|
111
|
+
type: Number,
|
|
112
|
+
default: 1e-3
|
|
113
|
+
},
|
|
114
|
+
from: {
|
|
115
|
+
type: Object,
|
|
116
|
+
default: getDefaults,
|
|
117
|
+
merge: true
|
|
118
|
+
},
|
|
119
|
+
to: {
|
|
120
|
+
type: Object,
|
|
121
|
+
default: getDefaults,
|
|
122
|
+
merge: true
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {AbstractScrollAnimation & {
|
|
3
|
+
* $options: {
|
|
4
|
+
* playRange: string,
|
|
5
|
+
* dampFactor: number,
|
|
6
|
+
* dampPrecision: number,
|
|
7
|
+
* from: AnimationOptions,
|
|
8
|
+
* to: AnimationOptions,
|
|
9
|
+
* },
|
|
10
|
+
* }} ScrollAnimationChildInterface
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* AbstractScrollAnimation class.
|
|
14
|
+
*
|
|
15
|
+
* @todo add support for magic values in options to access key values:
|
|
16
|
+
* - viewport size
|
|
17
|
+
* - target size
|
|
18
|
+
* - root element size
|
|
19
|
+
* - etc.
|
|
20
|
+
*
|
|
21
|
+
* ```
|
|
22
|
+
* data-option-to="{ x: 100%, y: innerWidth / 2 }"
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export default class AbstractScrollAnimation extends Base {
|
|
26
|
+
/**
|
|
27
|
+
* Config.
|
|
28
|
+
*/
|
|
29
|
+
static config: {
|
|
30
|
+
name: string;
|
|
31
|
+
options: {
|
|
32
|
+
playRange: {
|
|
33
|
+
type: ArrayConstructor;
|
|
34
|
+
default: () => number[];
|
|
35
|
+
};
|
|
36
|
+
dampFactor: {
|
|
37
|
+
type: NumberConstructor;
|
|
38
|
+
default: number;
|
|
39
|
+
};
|
|
40
|
+
dampPrecision: {
|
|
41
|
+
type: NumberConstructor;
|
|
42
|
+
default: number;
|
|
43
|
+
};
|
|
44
|
+
from: {
|
|
45
|
+
type: ObjectConstructor;
|
|
46
|
+
default: typeof getDefaults;
|
|
47
|
+
merge: boolean;
|
|
48
|
+
};
|
|
49
|
+
to: {
|
|
50
|
+
type: ObjectConstructor;
|
|
51
|
+
default: typeof getDefaults;
|
|
52
|
+
merge: boolean;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
/**
|
|
57
|
+
* Get the target element for the animation.
|
|
58
|
+
*
|
|
59
|
+
* @returns {HTMLElement}
|
|
60
|
+
*/
|
|
61
|
+
get target(): HTMLElement;
|
|
62
|
+
/**
|
|
63
|
+
* Flags for style detection.
|
|
64
|
+
*/
|
|
65
|
+
get has(): {
|
|
66
|
+
x: boolean;
|
|
67
|
+
y: boolean;
|
|
68
|
+
z: boolean;
|
|
69
|
+
scale: boolean;
|
|
70
|
+
scaleX: boolean;
|
|
71
|
+
scaleY: boolean;
|
|
72
|
+
rotate: boolean;
|
|
73
|
+
skewX: boolean;
|
|
74
|
+
skewY: boolean;
|
|
75
|
+
opacity: boolean;
|
|
76
|
+
transform: boolean;
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* @todo do not add unnecessary styles
|
|
80
|
+
*/
|
|
81
|
+
scrolledInView(props: any): void;
|
|
82
|
+
/**
|
|
83
|
+
* Render the animation for the given progress.
|
|
84
|
+
*
|
|
85
|
+
* @param {number} progress
|
|
86
|
+
* @returns {void}
|
|
87
|
+
*/
|
|
88
|
+
render(progress: number): void;
|
|
89
|
+
}
|
|
90
|
+
export type AbstractScrollAnimationConstructor = typeof AbstractScrollAnimation;
|
|
91
|
+
export type AnimationOptions = {
|
|
92
|
+
x?: number;
|
|
93
|
+
y?: number;
|
|
94
|
+
z?: number;
|
|
95
|
+
scale?: number;
|
|
96
|
+
scaleX?: number;
|
|
97
|
+
scaleY?: number;
|
|
98
|
+
rotate?: number;
|
|
99
|
+
skewX?: number;
|
|
100
|
+
skewY?: number;
|
|
101
|
+
opacity?: number;
|
|
102
|
+
};
|
|
103
|
+
export type ScrollAnimationChildInterface = AbstractScrollAnimation & {
|
|
104
|
+
$options: {
|
|
105
|
+
playRange: string;
|
|
106
|
+
dampFactor: number;
|
|
107
|
+
dampPrecision: number;
|
|
108
|
+
from: AnimationOptions;
|
|
109
|
+
to: AnimationOptions;
|
|
110
|
+
};
|
|
111
|
+
};
|
|
112
|
+
import { Base } from "@studiometa/js-toolkit";
|
|
113
|
+
/**
|
|
114
|
+
* @typedef {typeof AbstractScrollAnimation} AbstractScrollAnimationConstructor
|
|
115
|
+
* @typedef {{
|
|
116
|
+
* x?: number;
|
|
117
|
+
* y?: number;
|
|
118
|
+
* z?: number;
|
|
119
|
+
* scale?: number;
|
|
120
|
+
* scaleX?: number;
|
|
121
|
+
* scaleY?: number;
|
|
122
|
+
* rotate?: number;
|
|
123
|
+
* skewX?: number;
|
|
124
|
+
* skewY?: number;
|
|
125
|
+
* opacity?: number;
|
|
126
|
+
* }} AnimationOptions
|
|
127
|
+
*/
|
|
128
|
+
/**
|
|
129
|
+
* Get animation configuration defaults.
|
|
130
|
+
* @returns {AnimationOptions}
|
|
131
|
+
*/
|
|
132
|
+
declare function getDefaults(): AnimationOptions;
|
|
133
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Base as a,withFreezedOptions as n}from"@studiometa/js-toolkit";import{matrix as h,lerp as e,map as o,clamp as r}from"@studiometa/js-toolkit/utils";function i(){return{x:0,y:0,z:0,scale:1,scaleX:1,scaleY:1,rotate:0,skewX:0,skewY:0,opacity:1}}class l extends n(a){static config={name:"AbstractScrollAnimation",options:{playRange:{type:Array,default:()=>[0,1]},dampFactor:{type:Number,default:.5},dampPrecision:{type:Number,default:.001},from:{type:Object,default:i,merge:!0},to:{type:Object,default:i,merge:!0}}};get target(){return this.$el}get has(){const t={x:!1,y:!1,z:!1,scale:!1,scaleX:!1,scaleY:!1,rotate:!1,skewX:!1,skewY:!1,opacity:!1,transform:!1};return Object.keys(this.$options.from).forEach(s=>{t[s]=this.$options.from[s]!==this.$options.to[s]}),t.transform=Object.keys(t).filter(s=>s!=="opacity"&&s!=="transform").some(s=>t[s]),Object.defineProperty(this,"has",{value:t}),t}scrolledInView(t){if(!this.has.opacity&&!this.has.transform)return;const s=o(r(t.dampedProgress.y,this.$options.playRange[0],this.$options.playRange[1]),this.$options.playRange[0],this.$options.playRange[1],0,1);this.render(s)}render(t){if(this.has.opacity&&(this.target.style.opacity=String(o(t,0,1,this.$options.from.opacity,this.$options.to.opacity))),this.has.transform){let s=h({translateX:this.has.x?e(this.$options.from.x,this.$options.to.x,t):void 0,translateY:this.has.y?e(this.$options.from.y,this.$options.to.y,t):void 0,scaleX:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleX?e(this.$options.from.scaleX,this.$options.to.scaleX,t):void 0,scaleY:this.has.scale?e(this.$options.from.scale,this.$options.to.scale,t):this.has.scaleY?e(this.$options.from.scaleY,this.$options.to.scaleY,t):void 0,skewX:this.has.skewX?e(this.$options.from.skewX,this.$options.to.skewX,t):void 0,skewY:this.has.skewY?e(this.$options.from.skewY,this.$options.to.skewY,t):void 0});this.has.rotate&&(s+=` rotate(${e(this.$options.from.rotate,this.$options.to.rotate,t)}deg)`),s+=`translateZ(${this.has.z?e(this.$options.from.z,this.$options.to.z,t):0})`,this.target.style.transform=s}}}export{l as default};
|
|
@@ -0,0 +1,51 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/ScrollAnimation/ScrollAnimation.js
|
|
28
|
+
var ScrollAnimation_exports = {};
|
|
29
|
+
__export(ScrollAnimation_exports, {
|
|
30
|
+
default: () => ScrollAnimation
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(ScrollAnimation_exports);
|
|
33
|
+
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
34
|
+
var import_AbstractScrollAnimation = __toESM(require("./AbstractScrollAnimation.cjs"), 1);
|
|
35
|
+
var ScrollAnimation = class extends (0, import_js_toolkit.withScrolledInView)(import_AbstractScrollAnimation.default, {}) {
|
|
36
|
+
get target() {
|
|
37
|
+
return this.$refs.target;
|
|
38
|
+
}
|
|
39
|
+
get dampFactor() {
|
|
40
|
+
return this.$options.dampFactor;
|
|
41
|
+
}
|
|
42
|
+
get dampPrecision() {
|
|
43
|
+
return this.$options.dampPrecision;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
__publicField(ScrollAnimation, "config", {
|
|
47
|
+
...import_AbstractScrollAnimation.default.config,
|
|
48
|
+
name: "ScrollAnimation",
|
|
49
|
+
refs: ["target"]
|
|
50
|
+
});
|
|
51
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {ScrollAnimation & { $refs: { target: HTMLElement }}} ScrollAnimationInterface
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* ScrollAnimation class.
|
|
6
|
+
*/
|
|
7
|
+
export default class ScrollAnimation extends AbstractScrollAnimation {
|
|
8
|
+
/**
|
|
9
|
+
* Config.
|
|
10
|
+
*/
|
|
11
|
+
static config: {
|
|
12
|
+
name: string;
|
|
13
|
+
refs: string[];
|
|
14
|
+
options: {
|
|
15
|
+
playRange: {
|
|
16
|
+
type: ArrayConstructor;
|
|
17
|
+
default: () => number[];
|
|
18
|
+
};
|
|
19
|
+
dampFactor: {
|
|
20
|
+
type: NumberConstructor;
|
|
21
|
+
default: number;
|
|
22
|
+
};
|
|
23
|
+
dampPrecision: {
|
|
24
|
+
type: NumberConstructor;
|
|
25
|
+
default: number;
|
|
26
|
+
};
|
|
27
|
+
from: {
|
|
28
|
+
type: ObjectConstructor;
|
|
29
|
+
default: () => import("./AbstractScrollAnimation.js").AnimationOptions;
|
|
30
|
+
merge: boolean;
|
|
31
|
+
};
|
|
32
|
+
to: {
|
|
33
|
+
type: ObjectConstructor;
|
|
34
|
+
default: () => import("./AbstractScrollAnimation.js").AnimationOptions;
|
|
35
|
+
merge: boolean;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Get the damp factor from the freezed options.
|
|
41
|
+
* @returns {number}
|
|
42
|
+
*/
|
|
43
|
+
get dampFactor(): number;
|
|
44
|
+
/**
|
|
45
|
+
* Get the damp precision from the freezed options.
|
|
46
|
+
* @returns {number}
|
|
47
|
+
*/
|
|
48
|
+
get dampPrecision(): number;
|
|
49
|
+
}
|
|
50
|
+
export type ScrollAnimationInterface = ScrollAnimation & {
|
|
51
|
+
$refs: {
|
|
52
|
+
target: HTMLElement;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
import AbstractScrollAnimation from "./AbstractScrollAnimation.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{withScrolledInView as r}from"@studiometa/js-toolkit";import t from"./AbstractScrollAnimation.js";class i extends r(t,{}){static config={...t.config,name:"ScrollAnimation",refs:["target"]};get target(){return this.$refs.target}get dampFactor(){return this.$options.dampFactor}get dampPrecision(){return this.$options.dampPrecision}}export{i as default};
|
|
@@ -0,0 +1,51 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/ScrollAnimation/ScrollAnimationChild.js
|
|
28
|
+
var ScrollAnimationChild_exports = {};
|
|
29
|
+
__export(ScrollAnimationChild_exports, {
|
|
30
|
+
default: () => ScrollAnimationChild
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(ScrollAnimationChild_exports);
|
|
33
|
+
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
34
|
+
var import_AbstractScrollAnimation = __toESM(require("./AbstractScrollAnimation.cjs"), 1);
|
|
35
|
+
var ScrollAnimationChild = class extends import_AbstractScrollAnimation.default {
|
|
36
|
+
dampedProgress = {
|
|
37
|
+
x: 0,
|
|
38
|
+
y: 0
|
|
39
|
+
};
|
|
40
|
+
scrolledInView(props) {
|
|
41
|
+
this.dampedProgress.y = (0, import_utils.damp)(props.progress.y, this.dampedProgress.y, this.$options.dampFactor, this.$options.dampPrecision);
|
|
42
|
+
this.dampedProgress.x = (0, import_utils.damp)(props.progress.x, this.dampedProgress.x, this.$options.dampFactor, this.$options.dampPrecision);
|
|
43
|
+
props.dampedProgress = this.dampedProgress;
|
|
44
|
+
super.scrolledInView(props);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
__publicField(ScrollAnimationChild, "config", {
|
|
48
|
+
name: "ScrollAnimationChild",
|
|
49
|
+
...import_AbstractScrollAnimation.default.config
|
|
50
|
+
});
|
|
51
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ScrollAnimationChild class.
|
|
3
|
+
*/
|
|
4
|
+
export default class ScrollAnimationChild extends AbstractScrollAnimation {
|
|
5
|
+
/**
|
|
6
|
+
* Local damped progress.
|
|
7
|
+
*/
|
|
8
|
+
dampedProgress: {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
import AbstractScrollAnimation from "./AbstractScrollAnimation.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{damp as o}from"@studiometa/js-toolkit/utils";import i from"./AbstractScrollAnimation.js";class r extends i{static config={name:"ScrollAnimationChild",...i.config};dampedProgress={x:0,y:0};scrolledInView(s){this.dampedProgress.y=o(s.progress.y,this.dampedProgress.y,this.$options.dampFactor,this.$options.dampPrecision),this.dampedProgress.x=o(s.progress.x,this.dampedProgress.x,this.$options.dampFactor,this.$options.dampPrecision),s.dampedProgress=this.dampedProgress,super.scrolledInView(s)}}export{r as default};
|
|
@@ -0,0 +1,41 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/ScrollAnimation/ScrollAnimationChildWithEase.js
|
|
28
|
+
var ScrollAnimationChildWithEase_exports = {};
|
|
29
|
+
__export(ScrollAnimationChildWithEase_exports, {
|
|
30
|
+
default: () => ScrollAnimationChildWithEase
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(ScrollAnimationChildWithEase_exports);
|
|
33
|
+
var import_ScrollAnimationChild = __toESM(require("./ScrollAnimationChild.cjs"), 1);
|
|
34
|
+
var import_animationScrollWithEase = __toESM(require("./animationScrollWithEase.cjs"), 1);
|
|
35
|
+
var ScrollAnimationChildWithEase = class extends (0, import_animationScrollWithEase.default)(import_ScrollAnimationChild.default) {
|
|
36
|
+
};
|
|
37
|
+
__publicField(ScrollAnimationChildWithEase, "config", {
|
|
38
|
+
...import_ScrollAnimationChild.default.config,
|
|
39
|
+
name: "ScrollAnimationChildWithEase"
|
|
40
|
+
});
|
|
41
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import i from"./ScrollAnimationChild.js";import o from"./animationScrollWithEase.js";class t extends o(i){static config={...i.config,name:"ScrollAnimationChildWithEase"}}export{t as default};
|
|
@@ -0,0 +1,48 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/ScrollAnimation/ScrollAnimationParent.js
|
|
28
|
+
var ScrollAnimationParent_exports = {};
|
|
29
|
+
__export(ScrollAnimationParent_exports, {
|
|
30
|
+
default: () => ScrollAnimationParent
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(ScrollAnimationParent_exports);
|
|
33
|
+
var import_js_toolkit = require("@studiometa/js-toolkit");
|
|
34
|
+
var import_ScrollAnimationChild = __toESM(require("./ScrollAnimationChild.cjs"), 1);
|
|
35
|
+
var ScrollAnimationParent = class extends (0, import_js_toolkit.withScrolledInView)(import_js_toolkit.Base, {}) {
|
|
36
|
+
scrolledInView(props) {
|
|
37
|
+
this.$children.ScrollAnimationChild.forEach((child) => {
|
|
38
|
+
child.scrolledInView(props);
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
__publicField(ScrollAnimationParent, "config", {
|
|
43
|
+
name: "ScrollAnimationParent",
|
|
44
|
+
components: {
|
|
45
|
+
ScrollAnimationChild: import_ScrollAnimationChild.default
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {ScrollAnimationParent & {
|
|
3
|
+
* $children: {
|
|
4
|
+
* ScrollAnimationChild: ScrollAnimationChild[],
|
|
5
|
+
* },
|
|
6
|
+
* }} ScrollAnimationInterface
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* ScrollAnimationParent class.
|
|
10
|
+
*/
|
|
11
|
+
export default class ScrollAnimationParent extends Base {
|
|
12
|
+
/**
|
|
13
|
+
* Config.
|
|
14
|
+
*/
|
|
15
|
+
static config: {
|
|
16
|
+
name: string;
|
|
17
|
+
components: {
|
|
18
|
+
ScrollAnimationChild: typeof ScrollAnimationChild;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* @todo Optimize default value read
|
|
23
|
+
* @todo do not add unnecessary styles
|
|
24
|
+
* @todo freeze options for better perf
|
|
25
|
+
* @this {ScrollAnimationInterface}
|
|
26
|
+
*/
|
|
27
|
+
scrolledInView(this: ScrollAnimationInterface, props: any): void;
|
|
28
|
+
}
|
|
29
|
+
export type ScrollAnimationInterface = ScrollAnimationParent & {
|
|
30
|
+
$children: {
|
|
31
|
+
ScrollAnimationChild: ScrollAnimationChild[];
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
import { Base } from "@studiometa/js-toolkit";
|
|
35
|
+
import ScrollAnimationChild from "./ScrollAnimationChild.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Base as l,withScrolledInView as n}from"@studiometa/js-toolkit";import e from"./ScrollAnimationChild.js";class r extends n(l,{}){static config={name:"ScrollAnimationParent",components:{ScrollAnimationChild:e}};scrolledInView(i){this.$children.ScrollAnimationChild.forEach(o=>{o.scrolledInView(i)})}}export{r as default};
|
|
@@ -0,0 +1,41 @@
|
|
|
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 __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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));
|
|
21
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
|
+
var __publicField = (obj, key, value) => {
|
|
23
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
24
|
+
return value;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// packages/ui/atoms/ScrollAnimation/ScrollAnimationWithEase.js
|
|
28
|
+
var ScrollAnimationWithEase_exports = {};
|
|
29
|
+
__export(ScrollAnimationWithEase_exports, {
|
|
30
|
+
default: () => ScrollAnimationWithEase
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(ScrollAnimationWithEase_exports);
|
|
33
|
+
var import_ScrollAnimation = __toESM(require("./ScrollAnimation.cjs"), 1);
|
|
34
|
+
var import_animationScrollWithEase = __toESM(require("./animationScrollWithEase.cjs"), 1);
|
|
35
|
+
var ScrollAnimationWithEase = class extends (0, import_animationScrollWithEase.default)(import_ScrollAnimation.default) {
|
|
36
|
+
};
|
|
37
|
+
__publicField(ScrollAnimationWithEase, "config", {
|
|
38
|
+
...import_ScrollAnimation.default.config,
|
|
39
|
+
name: "ScrollAnimationWithEase"
|
|
40
|
+
});
|
|
41
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import i from"./ScrollAnimation.js";import o from"./animationScrollWithEase.js";class t extends o(i){static config={...i.config,name:"ScrollAnimationWithEase"}}export{t as default};
|
|
@@ -0,0 +1,70 @@
|
|
|
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/ui/atoms/ScrollAnimation/animationScrollWithEase.js
|
|
20
|
+
var animationScrollWithEase_exports = {};
|
|
21
|
+
__export(animationScrollWithEase_exports, {
|
|
22
|
+
default: () => animationScrollWithEase
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(animationScrollWithEase_exports);
|
|
25
|
+
var import_utils = require("@studiometa/js-toolkit/utils");
|
|
26
|
+
var eases = {
|
|
27
|
+
outQuad: import_utils.easeOutQuad,
|
|
28
|
+
inQuad: import_utils.easeInQuad,
|
|
29
|
+
inOutQuad: import_utils.easeInOutQuad,
|
|
30
|
+
outCubic: import_utils.easeOutCubic,
|
|
31
|
+
inCubic: import_utils.easeInCubic,
|
|
32
|
+
inOutCubic: import_utils.easeInOutCubic,
|
|
33
|
+
outQuart: import_utils.easeOutQuart,
|
|
34
|
+
inQuart: import_utils.easeInQuart,
|
|
35
|
+
inOutQuart: import_utils.easeInOutQuart,
|
|
36
|
+
outQuint: import_utils.easeOutQuint,
|
|
37
|
+
inQuint: import_utils.easeInQuint,
|
|
38
|
+
inOutQuint: import_utils.easeInOutQuint,
|
|
39
|
+
outSine: import_utils.easeOutSine,
|
|
40
|
+
inSine: import_utils.easeInSine,
|
|
41
|
+
inOutSine: import_utils.easeInOutSine,
|
|
42
|
+
outCirc: import_utils.easeOutCirc,
|
|
43
|
+
inCirc: import_utils.easeInCirc,
|
|
44
|
+
inOutCirc: import_utils.easeInOutCirc,
|
|
45
|
+
outExpo: import_utils.easeOutExpo,
|
|
46
|
+
inExpo: import_utils.easeInExpo,
|
|
47
|
+
inOutExpo: import_utils.easeInOutExpo
|
|
48
|
+
};
|
|
49
|
+
function animationScrollWithEase(ScrollAnimation) {
|
|
50
|
+
return class extends ScrollAnimation {
|
|
51
|
+
static config = {
|
|
52
|
+
...ScrollAnimation.config,
|
|
53
|
+
name: `${ScrollAnimation.config.name}WithEase`,
|
|
54
|
+
options: {
|
|
55
|
+
...ScrollAnimation.config.options,
|
|
56
|
+
ease: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: "outExpo"
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
render(progress) {
|
|
63
|
+
if (eases[this.$options.ease]) {
|
|
64
|
+
progress = eases[this.$options.ease](progress);
|
|
65
|
+
}
|
|
66
|
+
super.render(progress);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {import('./AbstractScrollAnimation.js').AbstractScrollAnimationConstructor} AbstractScrollAnimationConstructor
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Extend a `ScrollAnimation` component to use easings.
|
|
6
|
+
* @template {AbstractScrollAnimationConstructor} T
|
|
7
|
+
* @param {T} ScrollAnimation A child class of the `AbstractScrollAnimation` class.
|
|
8
|
+
* @returns {T}
|
|
9
|
+
*/
|
|
10
|
+
export default function animationScrollWithEase<T extends typeof import("./AbstractScrollAnimation.js").default>(ScrollAnimation: T): T;
|
|
11
|
+
export type AbstractScrollAnimationConstructor = import('./AbstractScrollAnimation.js').AbstractScrollAnimationConstructor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{easeOutQuad as n,easeInQuad as i,easeInOutQuad as a,easeOutCubic as s,easeInCubic as o,easeInOutCubic as O,easeOutQuart as c,easeInQuart as Q,easeInOutQuart as r,easeOutQuint as I,easeInQuint as p,easeInOutQuint as C,easeOutSine as d,easeInSine as f,easeInOutSine as x,easeOutCirc as E,easeInCirc as b,easeInOutCirc as S,easeOutExpo as h,easeInExpo as g,easeInOutExpo as $}from"@studiometa/js-toolkit/utils";const u={outQuad:n,inQuad:i,inOutQuad:a,outCubic:s,inCubic:o,inOutCubic:O,outQuart:c,inQuart:Q,inOutQuart:r,outQuint:I,inQuint:p,inOutQuint:C,outSine:d,inSine:f,inOutSine:x,outCirc:E,inCirc:b,inOutCirc:S,outExpo:h,inExpo:g,inOutExpo:$};function m(e){return class extends e{static config={...e.config,name:`${e.config.name}WithEase`,options:{...e.config.options,ease:{type:String,default:"outExpo"}}};render(t){u[this.$options.ease]&&(t=u[this.$options.ease](t)),super.render(t)}}}export{m as default};
|
|
@@ -0,0 +1,41 @@
|
|
|
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/ui/atoms/ScrollAnimation/index.js
|
|
23
|
+
var ScrollAnimation_exports = {};
|
|
24
|
+
__export(ScrollAnimation_exports, {
|
|
25
|
+
AbstractScrollAnimation: () => import_AbstractScrollAnimation.default,
|
|
26
|
+
ScrollAnimation: () => import_ScrollAnimation.default,
|
|
27
|
+
ScrollAnimationChild: () => import_ScrollAnimationChild.default,
|
|
28
|
+
ScrollAnimationChildWithEase: () => import_ScrollAnimationChildWithEase.default,
|
|
29
|
+
ScrollAnimationParent: () => import_ScrollAnimationParent.default,
|
|
30
|
+
ScrollAnimationWithEase: () => import_ScrollAnimationWithEase.default,
|
|
31
|
+
animationScrollWithEase: () => import_animationScrollWithEase.default
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(ScrollAnimation_exports);
|
|
34
|
+
var import_AbstractScrollAnimation = __toESM(require("./AbstractScrollAnimation.cjs"), 1);
|
|
35
|
+
var import_animationScrollWithEase = __toESM(require("./animationScrollWithEase.cjs"), 1);
|
|
36
|
+
var import_ScrollAnimation = __toESM(require("./ScrollAnimation.cjs"), 1);
|
|
37
|
+
var import_ScrollAnimationWithEase = __toESM(require("./ScrollAnimationWithEase.cjs"), 1);
|
|
38
|
+
var import_ScrollAnimationChild = __toESM(require("./ScrollAnimationChild.cjs"), 1);
|
|
39
|
+
var import_ScrollAnimationChildWithEase = __toESM(require("./ScrollAnimationChildWithEase.cjs"), 1);
|
|
40
|
+
var import_ScrollAnimationParent = __toESM(require("./ScrollAnimationParent.cjs"), 1);
|
|
41
|
+
if (module.exports.default) module.exports = module.exports.default;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { default as AbstractScrollAnimation } from "./AbstractScrollAnimation.js";
|
|
2
|
+
export { default as animationScrollWithEase } from "./animationScrollWithEase.js";
|
|
3
|
+
export { default as ScrollAnimation } from "./ScrollAnimation.js";
|
|
4
|
+
export { default as ScrollAnimationWithEase } from "./ScrollAnimationWithEase.js";
|
|
5
|
+
export { default as ScrollAnimationChild } from "./ScrollAnimationChild.js";
|
|
6
|
+
export { default as ScrollAnimationChildWithEase } from "./ScrollAnimationChildWithEase.js";
|
|
7
|
+
export { default as ScrollAnimationParent } from "./ScrollAnimationParent.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{default as t}from"./AbstractScrollAnimation.js";import{default as r}from"./animationScrollWithEase.js";import{default as e}from"./ScrollAnimation.js";import{default as f}from"./ScrollAnimationWithEase.js";import{default as s}from"./ScrollAnimationChild.js";import{default as c}from"./ScrollAnimationChildWithEase.js";import{default as u}from"./ScrollAnimationParent.js";export{t as AbstractScrollAnimation,e as ScrollAnimation,s as ScrollAnimationChild,c as ScrollAnimationChildWithEase,u as ScrollAnimationParent,f as ScrollAnimationWithEase,r as animationScrollWithEase};
|
package/atoms/index.cjs
CHANGED
|
@@ -25,15 +25,15 @@ var atoms_exports = {};
|
|
|
25
25
|
__export(atoms_exports, {
|
|
26
26
|
AnchorScrollTo: () => import_AnchorScrollTo.default,
|
|
27
27
|
Cursor: () => import_Cursor.default,
|
|
28
|
-
Figure: () => import_Figure.default,
|
|
29
28
|
LargeText: () => import_LargeText.default,
|
|
30
29
|
LazyInclude: () => import_LazyInclude.default
|
|
31
30
|
});
|
|
32
31
|
module.exports = __toCommonJS(atoms_exports);
|
|
32
|
+
__reExport(atoms_exports, require("./Figure/index.cjs"), module.exports);
|
|
33
33
|
__reExport(atoms_exports, require("./Prefetch/index.cjs"), module.exports);
|
|
34
|
+
__reExport(atoms_exports, require("./ScrollAnimation/index.cjs"), module.exports);
|
|
34
35
|
var import_AnchorScrollTo = __toESM(require("./AnchorScrollTo/AnchorScrollTo.cjs"), 1);
|
|
35
36
|
var import_Cursor = __toESM(require("./Cursor/Cursor.cjs"), 1);
|
|
36
|
-
var import_Figure = __toESM(require("./Figure/Figure.cjs"), 1);
|
|
37
37
|
var import_LargeText = __toESM(require("./LargeText/LargeText.cjs"), 1);
|
|
38
38
|
var import_LazyInclude = __toESM(require("./LazyInclude/LazyInclude.cjs"), 1);
|
|
39
39
|
if (module.exports.default) module.exports = module.exports.default;
|
package/atoms/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
export * from "./Figure/index.js";
|
|
1
2
|
export * from "./Prefetch/index.js";
|
|
3
|
+
export * from "./ScrollAnimation/index.js";
|
|
2
4
|
export { default as AnchorScrollTo } from "./AnchorScrollTo/AnchorScrollTo.js";
|
|
3
5
|
export { default as Cursor } from "./Cursor/Cursor.js";
|
|
4
|
-
export { default as Figure } from "./Figure/Figure.js";
|
|
5
6
|
export { default as LargeText } from "./LargeText/LargeText.js";
|
|
6
7
|
export { default as LazyInclude } from "./LazyInclude/LazyInclude.js";
|
package/atoms/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export*from"./Prefetch/index.js";
|
|
1
|
+
export*from"./Figure/index.js";export*from"./Prefetch/index.js";export*from"./ScrollAnimation/index.js";import{default as a}from"./AnchorScrollTo/AnchorScrollTo.js";import{default as l}from"./Cursor/Cursor.js";import{default as p}from"./LargeText/LargeText.js";import{default as d}from"./LazyInclude/LazyInclude.js";export{a as AnchorScrollTo,l as Cursor,p as LargeText,d as LazyInclude};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@studiometa/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.5",
|
|
4
4
|
"description": "A set of opiniated, unstyled and accessible components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://github.com/studiometa/ui#readme",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@studiometa/js-toolkit": "^2.0.0
|
|
32
|
+
"@studiometa/js-toolkit": "^2.0.0",
|
|
33
33
|
"deepmerge": "^4.2.2"
|
|
34
34
|
}
|
|
35
35
|
}
|