@studiometa/ui 0.2.16 → 0.2.18
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 +1 -0
- package/atoms/Figure/Figure.cjs.map +2 -2
- package/atoms/Figure/Figure.js +1 -0
- package/atoms/Figure/Figure.js.map +2 -2
- package/atoms/ScrollAnimation/AbstractScrollAnimation.cjs.map +2 -2
- package/atoms/ScrollAnimation/AbstractScrollAnimation.d.ts +1 -0
- package/atoms/ScrollAnimation/AbstractScrollAnimation.js.map +2 -2
- package/package.json +2 -2
package/atoms/Figure/Figure.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/Figure.ts"],
|
|
4
|
-
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(Transition, {\n threshold: [0, 1],\n})<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value:string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Load on mount.\n */\n mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const { src } = img.dataset;\n\n if (this.$options.lazy && src && src !== this.src) {\n let tempImg = new Image();\n tempImg.addEventListener(\n 'load',\n async () => {\n this.src = src;\n tempImg = null;\n this.enter();\n },\n { once: true },\n );\n tempImg.src = src;\n }\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAoC;AAEpC,wBAA2B;AAcpB,IAAM,SAAN,kBAAsD,uCAAgC,8BAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAiBlB,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,EAAE,IAAI,IAAI,IAAI;AAEpB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,UAAI,UAAU,IAAI,MAAM;AACxB,cAAQ;AAAA,QACN;AAAA,QACA,YAAY;AACV,eAAK,MAAM;AACX,oBAAU;AACV,eAAK,MAAM;AAAA,QACb;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AACA,cAAQ,MAAM;AAAA,
|
|
4
|
+
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(Transition, {\n threshold: [0, 1],\n})<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value:string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Load on mount.\n */\n mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const { src } = img.dataset;\n\n if (this.$options.lazy && src && src !== this.src) {\n let tempImg = new Image();\n tempImg.addEventListener(\n 'load',\n async () => {\n this.src = src;\n tempImg = null;\n this.enter();\n },\n { once: true },\n );\n tempImg.src = src;\n\n this.$terminate();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAoC;AAEpC,wBAA2B;AAcpB,IAAM,SAAN,kBAAsD,uCAAgC,8BAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAiBlB,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,EAAE,IAAI,IAAI,IAAI;AAEpB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,UAAI,UAAU,IAAI,MAAM;AACxB,cAAQ;AAAA,QACN;AAAA,QACA,YAAY;AACV,eAAK,MAAM;AACX,oBAAU;AACV,eAAK,MAAM;AAAA,QACb;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AACA,cAAQ,MAAM;AAEd,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;AA/DE,cANW,QAMJ,UAAqB;AAAA,EAC1B,GAAG,6BAAW;AAAA,EACd,MAAM;AAAA,EACN,MAAM,CAAC,KAAK;AAAA,EACZ,SAAS;AAAA,IACP,GAAG,6BAAW,OAAO;AAAA,IACrB,MAAM;AAAA,EACR;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/atoms/Figure/Figure.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/Figure/Figure.ts"],
|
|
4
|
-
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(Transition, {\n threshold: [0, 1],\n})<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value:string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Load on mount.\n */\n mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const { src } = img.dataset;\n\n if (this.$options.lazy && src && src !== this.src) {\n let tempImg = new Image();\n tempImg.addEventListener(\n 'load',\n async () => {\n this.src = src;\n tempImg = null;\n this.enter();\n },\n { once: true },\n );\n tempImg.src = src;\n }\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAcpB,MAAM,eAAgD,oBAAgC,YAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAIlB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,KAAK;AAAA,IACZ,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,EAAE,IAAI,IAAI,IAAI;AAEpB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,UAAI,UAAU,IAAI,MAAM;AACxB,cAAQ;AAAA,QACN;AAAA,QACA,YAAY;AACV,eAAK,MAAM;AACX,oBAAU;AACV,eAAK,MAAM;AAAA,QACb;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AACA,cAAQ,MAAM;AAAA,
|
|
4
|
+
"sourcesContent": ["import { withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../../primitives/index.js';\n\nexport interface FigureProps extends BaseProps {\n $refs: {\n img: HTMLImageElement;\n };\n $options: {\n lazy: boolean;\n };\n}\n\n/**\n * Figure class.\n */\nexport class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView<Transition>(Transition, {\n threshold: [0, 1],\n})<T & FigureProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n ...Transition.config,\n name: 'Figure',\n refs: ['img'],\n options: {\n ...Transition.config.options,\n lazy: Boolean,\n },\n };\n\n /**\n * Get the transition target.\n */\n get target() {\n return this.$refs.img;\n }\n\n /**\n * Get the image source.\n */\n get src() {\n return this.$refs.img.src;\n }\n\n /**\n * Set the image source.\n */\n set src(value:string) {\n this.$refs.img.src = value;\n }\n\n /**\n * Load on mount.\n */\n mounted() {\n const { img } = this.$refs;\n\n if (!img) {\n throw new Error('[Figure] The `img` ref is required.');\n }\n\n if (!(img instanceof HTMLImageElement)) {\n throw new Error('[Figure] The `img` ref must be an `<img>` element.');\n }\n\n const { src } = img.dataset;\n\n if (this.$options.lazy && src && src !== this.src) {\n let tempImg = new Image();\n tempImg.addEventListener(\n 'load',\n async () => {\n this.src = src;\n tempImg = null;\n this.enter();\n },\n { once: true },\n );\n tempImg.src = src;\n\n this.$terminate();\n }\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,2BAA2B;AAEpC,SAAS,kBAAkB;AAcpB,MAAM,eAAgD,oBAAgC,YAAY;AAAA,EACvG,WAAW,CAAC,GAAG,CAAC;AAClB,CAAC,EAAmB;AAAA,EAIlB,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,KAAK;AAAA,IACZ,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK,MAAM;AAAA,EACpB;AAAA,EAKA,IAAI,MAAM;AACR,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB;AAAA,EAKA,IAAI,IAAI,OAAc;AACpB,SAAK,MAAM,IAAI,MAAM;AAAA,EACvB;AAAA,EAKA,UAAU;AACR,UAAM,EAAE,IAAI,IAAI,KAAK;AAErB,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,qCAAqC;AAAA,IACvD;AAEA,QAAI,EAAE,eAAe,mBAAmB;AACtC,YAAM,IAAI,MAAM,oDAAoD;AAAA,IACtE;AAEA,UAAM,EAAE,IAAI,IAAI,IAAI;AAEpB,QAAI,KAAK,SAAS,QAAQ,OAAO,QAAQ,KAAK,KAAK;AACjD,UAAI,UAAU,IAAI,MAAM;AACxB,cAAQ;AAAA,QACN;AAAA,QACA,YAAY;AACV,eAAK,MAAM;AACX,oBAAU;AACV,eAAK,MAAM;AAAA,QACb;AAAA,QACA,EAAE,MAAM,KAAK;AAAA,MACf;AACA,cAAQ,MAAM;AAEd,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/ScrollAnimation/AbstractScrollAnimation.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n $options: {\n playRange: [number, number];\n from: Keyframe;\n to: Keyframe;\n keyframes: Keyframe[];\n };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<T extends BaseProps = BaseProps> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractScrollAnimation',\n options: {\n playRange: {\n type: Array,\n default: () => [0, 1],\n },\n from: {\n type: Object,\n default: () => ({}),\n },\n to: {\n type: Object,\n default: () => ({}),\n },\n keyframes: {\n type: Array,\n },\n easing: {\n type: Array,\n default: () => [0, 0, 1, 1],\n },\n },\n };\n\n /**\n * Get the target element for the animation.\n */\n get target() {\n return this.$el as HTMLElement;\n }\n\n /**\n * Lazily get animation.\n */\n get animation():ReturnType<typeof animate> {\n let { keyframes } = this.$options;\n const { from, to } = this.$options;\n\n if (keyframes.length <= 0 && from && to) {\n keyframes = [from, to];\n }\n\n const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n Object.defineProperty(this, 'animation', {\n value: animation,\n configurable: true,\n });\n\n return animation;\n }\n\n scrolledInView(props:ScrollInViewProps) {\n const progress = map(\n clamp(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]),\n this.$options.playRange[0],\n this.$options.playRange[1],\n 0,\n 1,\n );\n\n this.$options.playRange = [0, 0];\n\n this.render(progress);\n }\n\n /**\n * Render the animation for the given progress.\n */\n render(progress:number) {\n this.animation.progress(progress);\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAyC;AAEzC,mBAAoC;
|
|
4
|
+
"sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n $options: {\n playRange: [number, number];\n from: Keyframe;\n to: Keyframe;\n keyframes: Keyframe[];\n easing: [number,number,number,number];\n };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<T extends BaseProps = BaseProps> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractScrollAnimation',\n options: {\n playRange: {\n type: Array,\n default: () => [0, 1],\n },\n from: {\n type: Object,\n default: () => ({}),\n },\n to: {\n type: Object,\n default: () => ({}),\n },\n keyframes: {\n type: Array,\n },\n easing: {\n type: Array,\n default: () => [0, 0, 1, 1],\n },\n },\n };\n\n /**\n * Get the target element for the animation.\n */\n get target() {\n return this.$el as HTMLElement;\n }\n\n /**\n * Lazily get animation.\n */\n get animation():ReturnType<typeof animate> {\n let { keyframes } = this.$options;\n const { from, to } = this.$options;\n\n if (keyframes.length <= 0 && from && to) {\n keyframes = [from, to];\n }\n\n const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n Object.defineProperty(this, 'animation', {\n value: animation,\n configurable: true,\n });\n\n return animation;\n }\n\n scrolledInView(props:ScrollInViewProps) {\n const progress = map(\n clamp(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]),\n this.$options.playRange[0],\n this.$options.playRange[1],\n 0,\n 1,\n );\n\n this.$options.playRange = [0, 0];\n\n this.render(progress);\n }\n\n /**\n * Render the animation for the given progress.\n */\n render(progress:number) {\n this.animation.progress(progress);\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAyC;AAEzC,mBAAoC;AAgB7B,IAAM,0BAAN,kBAAuE,sCAAyB,sBAAI,EAAoC;AAAA,EAgC7I,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAKA,IAAI,YAAuC;AACzC,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,gBAAY,sBAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,eAAe,OAAyB;AACtC,UAAM,eAAW;AAAA,UACf,oBAAM,MAAM,eAAe,GAAG,KAAK,SAAS,UAAU,IAAI,KAAK,SAAS,UAAU,EAAE;AAAA,MACpF,KAAK,SAAS,UAAU;AAAA,MACxB,KAAK,SAAS,UAAU;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAEA,SAAK,SAAS,YAAY,CAAC,GAAG,CAAC;AAE/B,SAAK,OAAO,QAAQ;AAAA,EACtB;AAAA,EAKA,OAAO,UAAiB;AACtB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;AAzEE,cAJW,yBAIJ,UAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,SAAS;AAAA,IACP,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,IACtB;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IAC5B;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,6 +8,7 @@ export interface AbstractScrollAnimationProps extends BaseProps {
|
|
|
8
8
|
from: Keyframe;
|
|
9
9
|
to: Keyframe;
|
|
10
10
|
keyframes: Keyframe[];
|
|
11
|
+
easing: [number, number, number, number];
|
|
11
12
|
};
|
|
12
13
|
}
|
|
13
14
|
declare const AbstractScrollAnimation_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").WithFreezedOptionsInterface, Base<BaseProps>, BaseProps>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/ui/atoms/ScrollAnimation/AbstractScrollAnimation.ts"],
|
|
4
|
-
"sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n $options: {\n playRange: [number, number];\n from: Keyframe;\n to: Keyframe;\n keyframes: Keyframe[];\n };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<T extends BaseProps = BaseProps> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractScrollAnimation',\n options: {\n playRange: {\n type: Array,\n default: () => [0, 1],\n },\n from: {\n type: Object,\n default: () => ({}),\n },\n to: {\n type: Object,\n default: () => ({}),\n },\n keyframes: {\n type: Array,\n },\n easing: {\n type: Array,\n default: () => [0, 0, 1, 1],\n },\n },\n };\n\n /**\n * Get the target element for the animation.\n */\n get target() {\n return this.$el as HTMLElement;\n }\n\n /**\n * Lazily get animation.\n */\n get animation():ReturnType<typeof animate> {\n let { keyframes } = this.$options;\n const { from, to } = this.$options;\n\n if (keyframes.length <= 0 && from && to) {\n keyframes = [from, to];\n }\n\n const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n Object.defineProperty(this, 'animation', {\n value: animation,\n configurable: true,\n });\n\n return animation;\n }\n\n scrolledInView(props:ScrollInViewProps) {\n const progress = map(\n clamp(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]),\n this.$options.playRange[0],\n this.$options.playRange[1],\n 0,\n 1,\n );\n\n this.$options.playRange = [0, 0];\n\n this.render(progress);\n }\n\n /**\n * Render the animation for the given progress.\n */\n render(progress:number) {\n this.animation.progress(progress);\n }\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,OAAO,eAAe;
|
|
4
|
+
"sourcesContent": ["import { Base, withFreezedOptions } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, ScrollInViewProps } from '@studiometa/js-toolkit';\nimport { map, clamp, animate } from '@studiometa/js-toolkit/utils';\nimport type { Keyframe } from '@studiometa/js-toolkit/utils';\n\nexport interface AbstractScrollAnimationProps extends BaseProps {\n $options: {\n playRange: [number, number];\n from: Keyframe;\n to: Keyframe;\n keyframes: Keyframe[];\n easing: [number,number,number,number];\n };\n}\n\n/**\n * AbstractScrollAnimation class.\n */\nexport class AbstractScrollAnimation<T extends BaseProps = BaseProps> extends withFreezedOptions<Base>(Base)<T & AbstractScrollAnimationProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'AbstractScrollAnimation',\n options: {\n playRange: {\n type: Array,\n default: () => [0, 1],\n },\n from: {\n type: Object,\n default: () => ({}),\n },\n to: {\n type: Object,\n default: () => ({}),\n },\n keyframes: {\n type: Array,\n },\n easing: {\n type: Array,\n default: () => [0, 0, 1, 1],\n },\n },\n };\n\n /**\n * Get the target element for the animation.\n */\n get target() {\n return this.$el as HTMLElement;\n }\n\n /**\n * Lazily get animation.\n */\n get animation():ReturnType<typeof animate> {\n let { keyframes } = this.$options;\n const { from, to } = this.$options;\n\n if (keyframes.length <= 0 && from && to) {\n keyframes = [from, to];\n }\n\n const animation = animate(this.target, keyframes, { easing: this.$options.easing });\n\n Object.defineProperty(this, 'animation', {\n value: animation,\n configurable: true,\n });\n\n return animation;\n }\n\n scrolledInView(props:ScrollInViewProps) {\n const progress = map(\n clamp(props.dampedProgress.y, this.$options.playRange[0], this.$options.playRange[1]),\n this.$options.playRange[0],\n this.$options.playRange[1],\n 0,\n 1,\n );\n\n this.$options.playRange = [0, 0];\n\n this.render(progress);\n }\n\n /**\n * Render the animation for the given progress.\n */\n render(progress:number) {\n this.animation.progress(progress);\n }\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,MAAM,0BAA0B;AAEzC,SAAS,KAAK,OAAO,eAAe;AAgB7B,MAAM,gCAAiE,mBAAyB,IAAI,EAAoC;AAAA,EAI7I,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,CAAC;AAAA,MACtB;AAAA,MACA,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS,OAAO,CAAC;AAAA,MACnB;AAAA,MACA,WAAW;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,SAAS,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAKA,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAKA,IAAI,YAAuC;AACzC,QAAI,EAAE,UAAU,IAAI,KAAK;AACzB,UAAM,EAAE,MAAM,GAAG,IAAI,KAAK;AAE1B,QAAI,UAAU,UAAU,KAAK,QAAQ,IAAI;AACvC,kBAAY,CAAC,MAAM,EAAE;AAAA,IACvB;AAEA,UAAM,YAAY,QAAQ,KAAK,QAAQ,WAAW,EAAE,QAAQ,KAAK,SAAS,OAAO,CAAC;AAElF,WAAO,eAAe,MAAM,aAAa;AAAA,MACvC,OAAO;AAAA,MACP,cAAc;AAAA,IAChB,CAAC;AAED,WAAO;AAAA,EACT;AAAA,EAEA,eAAe,OAAyB;AACtC,UAAM,WAAW;AAAA,MACf,MAAM,MAAM,eAAe,GAAG,KAAK,SAAS,UAAU,IAAI,KAAK,SAAS,UAAU,EAAE;AAAA,MACpF,KAAK,SAAS,UAAU;AAAA,MACxB,KAAK,SAAS,UAAU;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AAEA,SAAK,SAAS,YAAY,CAAC,GAAG,CAAC;AAE/B,SAAK,OAAO,QAAQ;AAAA,EACtB;AAAA,EAKA,OAAO,UAAiB;AACtB,SAAK,UAAU,SAAS,QAAQ;AAAA,EAClC;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@studiometa/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.18",
|
|
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.6.
|
|
32
|
+
"@studiometa/js-toolkit": "^2.6.3",
|
|
33
33
|
"deepmerge": "^4.2.2"
|
|
34
34
|
}
|
|
35
35
|
}
|