@studiometa/js-toolkit 2.7.0 → 2.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Base/Base.cjs +325 -0
- package/Base/Base.cjs.map +7 -0
- package/Base/Base.d.ts +197 -0
- package/Base/Base.js +304 -0
- package/Base/Base.js.map +7 -0
- package/Base/features.cjs +1 -3
- package/Base/features.cjs.map +2 -2
- package/Base/features.d.ts +1 -1
- package/Base/features.js +1 -3
- package/Base/features.js.map +2 -2
- package/Base/index.cjs +2 -292
- package/Base/index.cjs.map +3 -3
- package/Base/index.d.ts +1 -193
- package/Base/index.js +1 -290
- package/Base/index.js.map +2 -2
- package/Base/managers/AbstractManager.d.ts +2 -2
- package/Base/managers/ChildrenManager.cjs +11 -7
- package/Base/managers/ChildrenManager.cjs.map +2 -2
- package/Base/managers/ChildrenManager.d.ts +1 -1
- package/Base/managers/ChildrenManager.js +12 -8
- package/Base/managers/ChildrenManager.js.map +2 -2
- package/Base/managers/OptionsManager.d.ts +9 -9
- package/Base/managers/RefsManager.cjs +13 -8
- package/Base/managers/RefsManager.cjs.map +2 -2
- package/Base/managers/RefsManager.js +14 -9
- package/Base/managers/RefsManager.js.map +2 -2
- package/Base/managers/ResponsiveOptionsManager.d.ts +1 -1
- package/Base/managers/ServicesManager.d.ts +2 -2
- package/Base/managers/index.cjs +0 -2
- package/Base/managers/index.cjs.map +2 -2
- package/Base/managers/index.d.ts +0 -1
- package/Base/managers/index.js +0 -2
- package/Base/managers/index.js.map +2 -2
- package/Base/types.d.ts +1 -1
- package/Base/utils.cjs +28 -1
- package/Base/utils.cjs.map +2 -2
- package/Base/utils.d.ts +4 -0
- package/Base/utils.js +29 -2
- package/Base/utils.js.map +2 -2
- package/decorators/index.cjs +1 -1
- package/decorators/index.cjs.map +2 -2
- package/decorators/index.d.ts +1 -1
- package/decorators/index.js +1 -1
- package/decorators/index.js.map +1 -1
- package/decorators/withDrag.d.ts +1 -1
- package/decorators/withScrolledInView/index.cjs +22 -0
- package/decorators/withScrolledInView/index.cjs.map +7 -0
- package/decorators/withScrolledInView/index.d.ts +2 -0
- package/decorators/withScrolledInView/index.js +3 -0
- package/decorators/withScrolledInView/index.js.map +7 -0
- package/decorators/withScrolledInView/types.cjs +19 -0
- package/decorators/withScrolledInView/types.cjs.map +7 -0
- package/decorators/withScrolledInView/types.d.ts +2 -0
- package/decorators/withScrolledInView/types.js +1 -0
- package/decorators/withScrolledInView/types.js.map +7 -0
- package/decorators/withScrolledInView/utils.cjs +99 -0
- package/decorators/withScrolledInView/utils.cjs.map +7 -0
- package/decorators/withScrolledInView/utils.d.ts +17 -0
- package/decorators/withScrolledInView/utils.js +77 -0
- package/decorators/withScrolledInView/utils.js.map +7 -0
- package/decorators/{withScrolledInView.cjs → withScrolledInView/withScrolledInView.cjs} +47 -46
- package/decorators/withScrolledInView/withScrolledInView.cjs.map +7 -0
- package/decorators/{withScrolledInView.d.ts → withScrolledInView/withScrolledInView.d.ts} +7 -11
- package/decorators/{withScrolledInView.js → withScrolledInView/withScrolledInView.js} +53 -45
- package/decorators/withScrolledInView/withScrolledInView.js.map +7 -0
- package/helpers/createApp.d.ts +1 -1
- package/helpers/getClosestParent.cjs +3 -11
- package/helpers/getClosestParent.cjs.map +2 -2
- package/helpers/getClosestParent.js +3 -11
- package/helpers/getClosestParent.js.map +2 -2
- package/helpers/importWhenIdle.d.ts +1 -1
- package/package.json +2 -2
- package/services/drag.d.ts +2 -2
- package/services/index.d.ts +7 -7
- package/services/key.d.ts +1 -1
- package/services/load.d.ts +1 -1
- package/services/pointer.d.ts +1 -1
- package/services/raf.d.ts +1 -1
- package/services/resize.d.ts +1 -1
- package/services/scroll.d.ts +1 -1
- package/utils/Queue.cjs +4 -1
- package/utils/Queue.cjs.map +2 -2
- package/utils/Queue.d.ts +1 -1
- package/utils/Queue.js +4 -1
- package/utils/Queue.js.map +2 -2
- package/utils/SmartQueue.cjs +57 -0
- package/utils/SmartQueue.cjs.map +7 -0
- package/utils/SmartQueue.d.ts +25 -0
- package/utils/SmartQueue.js +29 -0
- package/utils/SmartQueue.js.map +7 -0
- package/utils/css/animate.cjs +18 -1
- package/utils/css/animate.cjs.map +3 -3
- package/utils/css/animate.d.ts +6 -3
- package/utils/css/animate.js +18 -1
- package/utils/css/animate.js.map +3 -3
- package/utils/css/getOffsetSizes.cjs +1 -1
- package/utils/css/getOffsetSizes.cjs.map +1 -1
- package/utils/css/getOffsetSizes.js +1 -1
- package/utils/css/getOffsetSizes.js.map +1 -1
- package/utils/css/matrix.d.ts +1 -1
- package/utils/css/transform.d.ts +1 -1
- package/utils/css/transition.d.ts +2 -2
- package/utils/dom/ancestors.cjs +37 -0
- package/utils/dom/ancestors.cjs.map +7 -0
- package/utils/dom/ancestors.d.ts +8 -0
- package/utils/dom/ancestors.js +15 -0
- package/utils/dom/ancestors.js.map +7 -0
- package/utils/dom/index.cjs +21 -0
- package/utils/dom/index.cjs.map +7 -0
- package/utils/dom/index.d.ts +1 -0
- package/utils/dom/index.js +2 -0
- package/utils/dom/index.js.map +7 -0
- package/utils/index.cjs +4 -0
- package/utils/index.cjs.map +2 -2
- package/utils/index.d.ts +3 -0
- package/utils/index.js +4 -0
- package/utils/index.js.map +2 -2
- package/utils/is.cjs +1 -1
- package/utils/is.cjs.map +2 -2
- package/utils/is.js +1 -1
- package/utils/is.js.map +2 -2
- package/utils/math/createEases.d.ts +1 -1
- package/utils/nextTick.cjs +2 -5
- package/utils/nextTick.cjs.map +2 -2
- package/utils/nextTick.js +2 -5
- package/utils/nextTick.js.map +2 -2
- package/utils/tween.cjs +3 -2
- package/utils/tween.cjs.map +2 -2
- package/utils/tween.d.ts +2 -1
- package/utils/tween.js +3 -2
- package/utils/tween.js.map +2 -2
- package/utils/wait.cjs +31 -0
- package/utils/wait.cjs.map +7 -0
- package/utils/wait.d.ts +1 -0
- package/utils/wait.js +9 -0
- package/utils/wait.js.map +7 -0
- package/Base/managers/AsyncChildrenManager.cjs +0 -61
- package/Base/managers/AsyncChildrenManager.cjs.map +0 -7
- package/Base/managers/AsyncChildrenManager.d.ts +0 -18
- package/Base/managers/AsyncChildrenManager.js +0 -39
- package/Base/managers/AsyncChildrenManager.js.map +0 -7
- package/decorators/withScrolledInView.cjs.map +0 -7
- package/decorators/withScrolledInView.js.map +0 -7
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../packages/js-toolkit/Base/managers/AsyncChildrenManager.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-use-before-define */\nimport type { Base, BaseConstructor, BaseAsyncConstructor } from '../index.js';\nimport { ChildrenManager } from './ChildrenManager.js';\nimport { Queue, nextTick } from '../../utils/index.js';\n\nconst queue = new Queue(10, nextTick);\n\n/**\n * Children manager.\n */\nexport class AsyncChildrenManager extends ChildrenManager {\n /**\n * Register instances of all children components.\n */\n registerAll() {\n Object.entries(this.__config.components).forEach(([name, component]) => {\n queue.add(() => this.__register(name, component));\n });\n }\n\n __register(name: string, component: BaseConstructor | BaseAsyncConstructor): void {\n Object.defineProperty(this, name, {\n enumerable: true,\n configurable: true,\n value: this.__getValue(name, component).map((childOrPromise) => {\n if (childOrPromise instanceof Promise) {\n childOrPromise.then((child) => {\n if (child !== 'terminated') {\n this.__triggerHook('$mount', child, name);\n }\n });\n } else if (childOrPromise !== 'terminated') {\n this.__triggerHook('$mount', childOrPromise, name);\n }\n\n return childOrPromise;\n }),\n });\n }\n\n __triggerHook(hook: '$mount' | '$update' | '$destroy', instance: Base, name: string): void {\n queue.add(() => {\n super.__triggerHook(hook, instance, name);\n });\n }\n\n /**\n * Children are mounted right after they are registered in this AsyncChildrenManager class, so we\n * do not need to do anything in the `mountAll` method.\n */\n mountAll(): void {\n // silence is golden\n }\n}\n"],
|
|
5
|
-
"mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,OAAO,gBAAgB;AAEhC,MAAM,QAAQ,IAAI,MAAM,IAAI,QAAQ;AAK7B,MAAM,6BAA6B,gBAAgB;AAAA,EAIxD,cAAc;AACZ,WAAO,QAAQ,KAAK,SAAS,UAAU,EAAE,QAAQ,CAAC,CAAC,MAAM,SAAS,MAAM;AACtE,YAAM,IAAI,MAAM,KAAK,WAAW,MAAM,SAAS,CAAC;AAAA,IAClD,CAAC;AAAA,EACH;AAAA,EAEA,WAAW,MAAc,WAAyD;AAChF,WAAO,eAAe,MAAM,MAAM;AAAA,MAChC,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,OAAO,KAAK,WAAW,MAAM,SAAS,EAAE,IAAI,CAAC,mBAAmB;AAC9D,YAAI,0BAA0B,SAAS;AACrC,yBAAe,KAAK,CAAC,UAAU;AAC7B,gBAAI,UAAU,cAAc;AAC1B,mBAAK,cAAc,UAAU,OAAO,IAAI;AAAA,YAC1C;AAAA,UACF,CAAC;AAAA,QACH,WAAW,mBAAmB,cAAc;AAC1C,eAAK,cAAc,UAAU,gBAAgB,IAAI;AAAA,QACnD;AAEA,eAAO;AAAA,MACT,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEA,cAAc,MAAyC,UAAgB,MAAoB;AACzF,UAAM,IAAI,MAAM;AACd,YAAM,cAAc,MAAM,UAAU,IAAI;AAAA,IAC1C,CAAC;AAAA,EACH;AAAA,EAMA,WAAiB;AAAA,EAEjB;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../packages/js-toolkit/decorators/withScrolledInView.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n $options: {\n dampFactor: number;\n dampPrecision: number;\n };\n}\n\nexport type ScrollInViewProps = {\n start: {\n x: number;\n y: number;\n };\n end: {\n x: number;\n y: number;\n };\n current: {\n x: number;\n y: number;\n };\n dampedCurrent: {\n x: number;\n y: number;\n };\n progress: {\n x: number;\n y: number;\n };\n dampedProgress: {\n x: number;\n y: number;\n };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n props: ScrollInViewProps,\n dampFactor: number,\n dampPrecision: number,\n axis: 'x' | 'y' = 'x',\n): void {\n props.current[axis] = clamp(\n axis === 'x' ? window.pageXOffset : window.pageYOffset,\n props.start[axis],\n props.end[axis],\n );\n props.dampedCurrent[axis] = damp(\n props.current[axis],\n props.dampedCurrent[axis],\n dampFactor,\n dampPrecision,\n );\n props.progress[axis] = clamp01(\n (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\n props.dampedProgress[axis] = clamp01(\n (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n /**\n * @private\n * @type {ScrollInViewProps}\n */\n __props: ScrollInViewProps;\n dampFactor?: number;\n dampPrecision?: number;\n mounted(): void;\n resized(props: ResizeServiceProps): void;\n scrolled(props: ScrollServiceProps): void;\n ticked(props: RafServiceProps): void;\n destroyed(): void;\n /**\n * @private\n */\n __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n BaseClass: typeof Base,\n options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n /**\n * Class.\n */\n class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n BaseClass,\n options,\n )<T & WithScrolledInViewProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: `${BaseClass.config.name}WithMountWhenInView`,\n emits: ['scrolledInView'],\n options: {\n dampFactor: {\n type: Number,\n default: 0.1,\n },\n dampPrecision: {\n type: Number,\n default: 0.001,\n },\n },\n };\n\n __props: ScrollInViewProps = {\n start: {\n x: 0,\n y: 0,\n },\n end: {\n x: 0,\n y: 0,\n },\n current: {\n x: 0,\n y: 0,\n },\n dampedCurrent: {\n x: 0,\n y: 0,\n },\n progress: {\n x: 0,\n y: 0,\n },\n dampedProgress: {\n x: 0,\n y: 0,\n },\n };\n\n /**\n * Factor used for the `dampedProgress` props.\n * @deprecated\n * @todo v3 delete in favor of option API\n */\n dampFactor?: number = null;\n\n /**\n * Precision for the `dampedProgress` props.\n * @deprecated\n * @todo v3 delete in favor of option API\n */\n dampPrecision?: number = null;\n\n /**\n * Bind listeners.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n const render = () => {\n scheduler.update(() => {\n // @ts-ignore\n const renderFn = this.__callMethod('scrolledInView', this.__props);\n if (isFunction(renderFn)) {\n scheduler.render(() => {\n renderFn(this.__props);\n });\n }\n });\n };\n\n const delegate = {\n handleEvent(event) {\n delegate[event.type](event.detail[0]);\n },\n resized: () => {\n this.__setProps();\n },\n scrolled: (props) => {\n if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n this.$services.enable('ticked');\n }\n },\n ticked: () => {\n const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n const dampPrecision = this.dampFactor ?? this.$options.dampFactor;\n\n updateProps(this.__props, dampFactor, dampPrecision, 'x');\n updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n if (\n this.__props.dampedCurrent.x === this.__props.current.x &&\n this.__props.dampedCurrent.y === this.__props.current.y\n ) {\n this.$services.disable('ticked');\n }\n\n render();\n },\n };\n\n this.$on('before-mounted', () => {\n this.$on('resized', delegate);\n this.$on('scrolled', delegate);\n this.$on('ticked', delegate);\n });\n\n this.$on('mounted', () => {\n this.__setProps();\n });\n\n this.$on('destroyed', () => {\n this.$off('resized', delegate);\n this.$off('scrolled', delegate);\n this.$off('ticked', delegate);\n\n // Clamp damped values to their final value and trigger one last render on destroy\n this.__props.dampedCurrent.x = this.__props.current.x;\n this.__props.dampedCurrent.y = this.__props.current.y;\n this.__props.dampedProgress.x = this.__props.progress.x;\n this.__props.dampedProgress.y = this.__props.progress.y;\n render();\n });\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n // @ts-ignore\n if (isFunction(super.mounted)) {\n // @ts-ignore\n super.mounted();\n }\n }\n\n /**\n * Resized hook.\n */\n resized(props: ResizeServiceProps) {\n // @ts-ignore\n if (isFunction(super.resized)) {\n // @ts-ignore\n super.resized(props);\n }\n }\n\n /**\n * Scrolled hook.\n */\n scrolled(props: ScrollServiceProps) {\n // @ts-ignore\n if (isFunction(super.scrolled)) {\n // @ts-ignore\n super.scrolled(props);\n }\n }\n\n /**\n * Ticked hook.\n */\n ticked(props: RafServiceProps) {\n // @ts-ignore\n if (isFunction(super.ticked)) {\n // @ts-ignore\n super.ticked(props);\n }\n }\n\n /**\n * Destroyed hook.\n */\n destroyed() {\n // @ts-ignore\n if (isFunction(super.destroyed)) {\n // @ts-ignore\n super.destroyed();\n }\n }\n\n /**\n * Set the decorator props.\n */\n __setProps() {\n const sizes = options.useOffsetSizes\n ? getOffsetSizes(this.$el)\n : this.$el.getBoundingClientRect();\n\n // Y axis\n const yEnd = sizes.y + window.pageYOffset + sizes.height;\n const yStart = yEnd - window.innerHeight - sizes.height;\n const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n // X axis\n const xEnd = sizes.x + window.pageXOffset + sizes.width;\n const xStart = xEnd - window.innerWidth - sizes.width;\n const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n this.__props.start.x = xStart;\n this.__props.start.y = yStart;\n this.__props.end.x = xEnd;\n this.__props.end.y = yEnd;\n this.__props.current.x = xCurrent;\n this.__props.current.y = yCurrent;\n this.__props.dampedCurrent.x = damp(\n xCurrent,\n this.__props.dampedCurrent.x,\n this.dampFactor,\n this.dampPrecision,\n );\n this.__props.dampedCurrent.y = damp(\n yCurrent,\n this.__props.dampedCurrent.y,\n this.dampFactor,\n this.dampPrecision,\n );\n this.__props.progress.x = xProgress;\n this.__props.progress.y = yProgress;\n this.__props.dampedProgress.x = clamp01(\n (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n );\n this.__props.dampedProgress.y = clamp01(\n (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n );\n }\n }\n\n // @ts-ignore\n return WithScrolledInView;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iCAAoC;AACpC,mBAA+E;AAE/E,IAAM,gBAAY,2BAAa,CAAC,UAAU,QAAQ,CAAC;AA2CnD,SAAS,YACP,OACA,YACA,eACA,OAAkB,KACZ;AACN,QAAM,QAAQ,YAAQ;AAAA,IACpB,SAAS,MAAM,OAAO,cAAc,OAAO;AAAA,IAC3C,MAAM,MAAM;AAAA,IACZ,MAAM,IAAI;AAAA,EACZ;AACA,QAAM,cAAc,YAAQ;AAAA,IAC1B,MAAM,QAAQ;AAAA,IACd,MAAM,cAAc;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AACA,QAAM,SAAS,YAAQ;AAAA,KACpB,MAAM,QAAQ,QAAQ,MAAM,MAAM,UAAU,MAAM,IAAI,QAAQ,MAAM,MAAM;AAAA,EAC7E;AACA,QAAM,eAAe,YAAQ;AAAA,KAC1B,MAAM,cAAc,QAAQ,MAAM,MAAM,UAAU,MAAM,IAAI,QAAQ,MAAM,MAAM;AAAA,EACnF;AACF;AAwBO,SAAS,mBACd,WACA,UAAqC,CAAC,GACkC;AAIxE,QAAM,+BAA4D;AAAA,IAChE;AAAA,IACA;AAAA,EACF,EAA+B;AAAA,IAI7B,OAAO,SAAqB;AAAA,MAC1B,MAAM,GAAG,UAAU,OAAO;AAAA,MAC1B,OAAO,CAAC,gBAAgB;AAAA,MACxB,SAAS;AAAA,QACP,YAAY;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,QACA,eAAe;AAAA,UACb,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,IAEA,UAA6B;AAAA,MAC3B,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,KAAK;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,eAAe;AAAA,QACb,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,UAAU;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA,gBAAgB;AAAA,QACd,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IACF;AAAA,IAOA,aAAsB;AAAA,IAOtB,gBAAyB;AAAA,IAKzB,YAAY,SAAsB;AAChC,YAAM,OAAO;AAEb,YAAM,SAAS,MAAM;AACnB,kBAAU,OAAO,MAAM;AAErB,gBAAM,WAAW,KAAK,aAAa,kBAAkB,KAAK,OAAO;AACjE,kBAAI,yBAAW,QAAQ,GAAG;AACxB,sBAAU,OAAO,MAAM;AACrB,uBAAS,KAAK,OAAO;AAAA,YACvB,CAAC;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH;AAEA,YAAM,WAAW;AAAA,QACf,YAAY,OAAO;AACjB,mBAAS,MAAM,MAAM,MAAM,OAAO,EAAE;AAAA,QACtC;AAAA,QACA,SAAS,MAAM;AACb,eAAK,WAAW;AAAA,QAClB;AAAA,QACA,UAAU,CAAC,UAAU;AACnB,cAAK,CAAC,KAAK,UAAU,IAAI,QAAQ,KAAK,MAAM,QAAQ,KAAM,MAAM,QAAQ,GAAG;AACzE,iBAAK,UAAU,OAAO,QAAQ;AAAA,UAChC;AAAA,QACF;AAAA,QACA,QAAQ,MAAM;AACZ,gBAAM,aAAa,KAAK,cAAc,KAAK,SAAS;AACpD,gBAAM,gBAAgB,KAAK,cAAc,KAAK,SAAS;AAEvD,sBAAY,KAAK,SAAS,YAAY,eAAe,GAAG;AACxD,sBAAY,KAAK,SAAS,YAAY,eAAe,GAAG;AAExD,cACE,KAAK,QAAQ,cAAc,MAAM,KAAK,QAAQ,QAAQ,KACtD,KAAK,QAAQ,cAAc,MAAM,KAAK,QAAQ,QAAQ,GACtD;AACA,iBAAK,UAAU,QAAQ,QAAQ;AAAA,UACjC;AAEA,iBAAO;AAAA,QACT;AAAA,MACF;AAEA,WAAK,IAAI,kBAAkB,MAAM;AAC/B,aAAK,IAAI,WAAW,QAAQ;AAC5B,aAAK,IAAI,YAAY,QAAQ;AAC7B,aAAK,IAAI,UAAU,QAAQ;AAAA,MAC7B,CAAC;AAED,WAAK,IAAI,WAAW,MAAM;AACxB,aAAK,WAAW;AAAA,MAClB,CAAC;AAED,WAAK,IAAI,aAAa,MAAM;AAC1B,aAAK,KAAK,WAAW,QAAQ;AAC7B,aAAK,KAAK,YAAY,QAAQ;AAC9B,aAAK,KAAK,UAAU,QAAQ;AAG5B,aAAK,QAAQ,cAAc,IAAI,KAAK,QAAQ,QAAQ;AACpD,aAAK,QAAQ,cAAc,IAAI,KAAK,QAAQ,QAAQ;AACpD,aAAK,QAAQ,eAAe,IAAI,KAAK,QAAQ,SAAS;AACtD,aAAK,QAAQ,eAAe,IAAI,KAAK,QAAQ,SAAS;AACtD,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IAKA,UAAU;AAER,cAAI,yBAAW,MAAM,OAAO,GAAG;AAE7B,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,IAKA,QAAQ,OAA2B;AAEjC,cAAI,yBAAW,MAAM,OAAO,GAAG;AAE7B,cAAM,QAAQ,KAAK;AAAA,MACrB;AAAA,IACF;AAAA,IAKA,SAAS,OAA2B;AAElC,cAAI,yBAAW,MAAM,QAAQ,GAAG;AAE9B,cAAM,SAAS,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IAKA,OAAO,OAAwB;AAE7B,cAAI,yBAAW,MAAM,MAAM,GAAG;AAE5B,cAAM,OAAO,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,IAKA,YAAY;AAEV,cAAI,yBAAW,MAAM,SAAS,GAAG;AAE/B,cAAM,UAAU;AAAA,MAClB;AAAA,IACF;AAAA,IAKA,aAAa;AACX,YAAM,QAAQ,QAAQ,qBAClB,6BAAe,KAAK,GAAG,IACvB,KAAK,IAAI,sBAAsB;AAGnC,YAAM,OAAO,MAAM,IAAI,OAAO,cAAc,MAAM;AAClD,YAAM,SAAS,OAAO,OAAO,cAAc,MAAM;AACjD,YAAM,eAAW,oBAAM,OAAO,aAAa,QAAQ,IAAI;AACvD,YAAM,gBAAY,uBAAS,WAAW,WAAW,OAAO,OAAO;AAG/D,YAAM,OAAO,MAAM,IAAI,OAAO,cAAc,MAAM;AAClD,YAAM,SAAS,OAAO,OAAO,aAAa,MAAM;AAChD,YAAM,eAAW,oBAAM,OAAO,aAAa,QAAQ,IAAI;AACvD,YAAM,gBAAY,uBAAS,WAAW,WAAW,OAAO,OAAO;AAE/D,WAAK,QAAQ,MAAM,IAAI;AACvB,WAAK,QAAQ,MAAM,IAAI;AACvB,WAAK,QAAQ,IAAI,IAAI;AACrB,WAAK,QAAQ,IAAI,IAAI;AACrB,WAAK,QAAQ,QAAQ,IAAI;AACzB,WAAK,QAAQ,QAAQ,IAAI;AACzB,WAAK,QAAQ,cAAc,QAAI;AAAA,QAC7B;AAAA,QACA,KAAK,QAAQ,cAAc;AAAA,QAC3B,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AACA,WAAK,QAAQ,cAAc,QAAI;AAAA,QAC7B;AAAA,QACA,KAAK,QAAQ,cAAc;AAAA,QAC3B,KAAK;AAAA,QACL,KAAK;AAAA,MACP;AACA,WAAK,QAAQ,SAAS,IAAI;AAC1B,WAAK,QAAQ,SAAS,IAAI;AAC1B,WAAK,QAAQ,eAAe,QAAI;AAAA,SAC7B,KAAK,QAAQ,cAAc,IAAI,WAAW,OAAO;AAAA,MACpD;AACA,WAAK,QAAQ,eAAe,QAAI;AAAA,SAC7B,KAAK,QAAQ,cAAc,IAAI,WAAW,OAAO;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AAGA,SAAO;AACT;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../packages/js-toolkit/decorators/withScrolledInView.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../Base/index.js';\nimport type { RafServiceProps, ScrollServiceProps, ResizeServiceProps } from '../services/index.js';\nimport { withMountWhenInView } from './withMountWhenInView.js';\nimport { damp, clamp, clamp01, getOffsetSizes, isFunction, useScheduler } from '../utils/index.js';\n\nconst scheduler = useScheduler(['update', 'render']);\n\nexport interface WithScrolledInViewProps extends BaseProps {\n $options: {\n dampFactor: number;\n dampPrecision: number;\n };\n}\n\nexport type ScrollInViewProps = {\n start: {\n x: number;\n y: number;\n };\n end: {\n x: number;\n y: number;\n };\n current: {\n x: number;\n y: number;\n };\n dampedCurrent: {\n x: number;\n y: number;\n };\n progress: {\n x: number;\n y: number;\n };\n dampedProgress: {\n x: number;\n y: number;\n };\n};\n\nexport type WithScrolledInViewOptions = IntersectionObserverInit & {\n useOffsetSizes?: boolean;\n};\n\n/**\n * Update props on tick.\n */\nfunction updateProps(\n props: ScrollInViewProps,\n dampFactor: number,\n dampPrecision: number,\n axis: 'x' | 'y' = 'x',\n): void {\n props.current[axis] = clamp(\n axis === 'x' ? window.pageXOffset : window.pageYOffset,\n props.start[axis],\n props.end[axis],\n );\n props.dampedCurrent[axis] = damp(\n props.current[axis],\n props.dampedCurrent[axis],\n dampFactor,\n dampPrecision,\n );\n props.progress[axis] = clamp01(\n (props.current[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\n props.dampedProgress[axis] = clamp01(\n (props.dampedCurrent[axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n /**\n * @private\n * @type {ScrollInViewProps}\n */\n __props: ScrollInViewProps;\n dampFactor?: number;\n dampPrecision?: number;\n mounted(): void;\n resized(props: ResizeServiceProps): void;\n scrolled(props: ScrollServiceProps): void;\n ticked(props: RafServiceProps): void;\n destroyed(): void;\n /**\n * @private\n */\n __setProps(): void;\n}\n\n/**\n * Add scrolled in view capabilities to a component.\n */\nexport function withScrolledInView<S extends Base = Base>(\n BaseClass: typeof Base,\n options: WithScrolledInViewOptions = {},\n): BaseDecorator<WithScrolledInViewInterface, S, WithScrolledInViewProps> {\n /**\n * Class.\n */\n class WithScrolledInView<T extends BaseProps = BaseProps> extends withMountWhenInView(\n BaseClass,\n options,\n )<T & WithScrolledInViewProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: `${BaseClass.config.name}WithMountWhenInView`,\n emits: ['scrolledInView'],\n options: {\n dampFactor: {\n type: Number,\n default: 0.1,\n },\n dampPrecision: {\n type: Number,\n default: 0.001,\n },\n },\n };\n\n __props: ScrollInViewProps = {\n start: {\n x: 0,\n y: 0,\n },\n end: {\n x: 0,\n y: 0,\n },\n current: {\n x: 0,\n y: 0,\n },\n dampedCurrent: {\n x: 0,\n y: 0,\n },\n progress: {\n x: 0,\n y: 0,\n },\n dampedProgress: {\n x: 0,\n y: 0,\n },\n };\n\n /**\n * Factor used for the `dampedProgress` props.\n * @deprecated\n * @todo v3 delete in favor of option API\n */\n dampFactor?: number = null;\n\n /**\n * Precision for the `dampedProgress` props.\n * @deprecated\n * @todo v3 delete in favor of option API\n */\n dampPrecision?: number = null;\n\n /**\n * Bind listeners.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n const render = () => {\n scheduler.update(() => {\n // @ts-ignore\n const renderFn = this.__callMethod('scrolledInView', this.__props);\n if (isFunction(renderFn)) {\n scheduler.render(() => {\n renderFn(this.__props);\n });\n }\n });\n };\n\n const delegate = {\n handleEvent(event) {\n delegate[event.type](event.detail[0]);\n },\n resized: () => {\n this.__setProps();\n },\n scrolled: (props) => {\n if ((!this.$services.has('ticked') && props.changed.y) || props.changed.x) {\n this.$services.enable('ticked');\n }\n },\n ticked: () => {\n const dampFactor = this.dampFactor ?? this.$options.dampFactor;\n const dampPrecision = this.dampFactor ?? this.$options.dampFactor;\n\n updateProps(this.__props, dampFactor, dampPrecision, 'x');\n updateProps(this.__props, dampFactor, dampPrecision, 'y');\n\n if (\n this.__props.dampedCurrent.x === this.__props.current.x &&\n this.__props.dampedCurrent.y === this.__props.current.y\n ) {\n this.$services.disable('ticked');\n }\n\n render();\n },\n };\n\n this.$on('before-mounted', () => {\n this.$on('resized', delegate);\n this.$on('scrolled', delegate);\n this.$on('ticked', delegate);\n });\n\n this.$on('mounted', () => {\n this.__setProps();\n });\n\n this.$on('destroyed', () => {\n this.$off('resized', delegate);\n this.$off('scrolled', delegate);\n this.$off('ticked', delegate);\n\n // Clamp damped values to their final value and trigger one last render on destroy\n this.__props.dampedCurrent.x = this.__props.current.x;\n this.__props.dampedCurrent.y = this.__props.current.y;\n this.__props.dampedProgress.x = this.__props.progress.x;\n this.__props.dampedProgress.y = this.__props.progress.y;\n render();\n });\n }\n\n /**\n * Mounted hook.\n */\n mounted() {\n // @ts-ignore\n if (isFunction(super.mounted)) {\n // @ts-ignore\n super.mounted();\n }\n }\n\n /**\n * Resized hook.\n */\n resized(props: ResizeServiceProps) {\n // @ts-ignore\n if (isFunction(super.resized)) {\n // @ts-ignore\n super.resized(props);\n }\n }\n\n /**\n * Scrolled hook.\n */\n scrolled(props: ScrollServiceProps) {\n // @ts-ignore\n if (isFunction(super.scrolled)) {\n // @ts-ignore\n super.scrolled(props);\n }\n }\n\n /**\n * Ticked hook.\n */\n ticked(props: RafServiceProps) {\n // @ts-ignore\n if (isFunction(super.ticked)) {\n // @ts-ignore\n super.ticked(props);\n }\n }\n\n /**\n * Destroyed hook.\n */\n destroyed() {\n // @ts-ignore\n if (isFunction(super.destroyed)) {\n // @ts-ignore\n super.destroyed();\n }\n }\n\n /**\n * Set the decorator props.\n */\n __setProps() {\n const sizes = options.useOffsetSizes\n ? getOffsetSizes(this.$el)\n : this.$el.getBoundingClientRect();\n\n // Y axis\n const yEnd = sizes.y + window.pageYOffset + sizes.height;\n const yStart = yEnd - window.innerHeight - sizes.height;\n const yCurrent = clamp(window.pageYOffset, yStart, yEnd);\n const yProgress = clamp01((yCurrent - yStart) / (yEnd - yStart));\n\n // X axis\n const xEnd = sizes.x + window.pageXOffset + sizes.width;\n const xStart = xEnd - window.innerWidth - sizes.width;\n const xCurrent = clamp(window.pageXOffset, xStart, xEnd);\n const xProgress = clamp01((xCurrent - xStart) / (xEnd - xStart));\n\n this.__props.start.x = xStart;\n this.__props.start.y = yStart;\n this.__props.end.x = xEnd;\n this.__props.end.y = yEnd;\n this.__props.current.x = xCurrent;\n this.__props.current.y = yCurrent;\n this.__props.dampedCurrent.x = damp(\n xCurrent,\n this.__props.dampedCurrent.x,\n this.dampFactor,\n this.dampPrecision,\n );\n this.__props.dampedCurrent.y = damp(\n yCurrent,\n this.__props.dampedCurrent.y,\n this.dampFactor,\n this.dampPrecision,\n );\n this.__props.progress.x = xProgress;\n this.__props.progress.y = yProgress;\n this.__props.dampedProgress.x = clamp01(\n (this.__props.dampedCurrent.x - xStart) / (xEnd - xStart),\n );\n this.__props.dampedProgress.y = clamp01(\n (this.__props.dampedCurrent.y - yStart) / (yEnd - yStart),\n );\n }\n }\n\n // @ts-ignore\n return WithScrolledInView;\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|