@studiometa/js-toolkit 3.0.4 → 3.0.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/decorators/withScrolledInView/withScrolledInView.js +2 -5
- package/decorators/withScrolledInView/withScrolledInView.js.map +2 -2
- package/package.json +1 -1
- package/services/ScrollService.d.ts +1 -0
- package/services/ScrollService.js +6 -2
- package/services/ScrollService.js.map +2 -2
- package/utils/scrollTo.js +2 -1
- package/utils/scrollTo.js.map +2 -2
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useScroll } from "../../services/index.js";
|
|
1
2
|
import { withMountWhenInView } from "../withMountWhenInView.js";
|
|
2
3
|
import {
|
|
3
4
|
damp,
|
|
@@ -14,11 +15,7 @@ function updateProgress(props, axis, progressKey, currentKey) {
|
|
|
14
15
|
);
|
|
15
16
|
}
|
|
16
17
|
function updateProps(props, dampFactor, dampPrecision, axis = "x") {
|
|
17
|
-
props.current[axis] = clamp(
|
|
18
|
-
axis === "x" ? window.scrollX : window.scrollY,
|
|
19
|
-
props.start[axis],
|
|
20
|
-
props.end[axis]
|
|
21
|
-
);
|
|
18
|
+
props.current[axis] = clamp(useScroll().props()[axis], props.start[axis], props.end[axis]);
|
|
22
19
|
props.dampedCurrent[axis] = damp(
|
|
23
20
|
props.current[axis],
|
|
24
21
|
props.dampedCurrent[axis],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/js-toolkit/decorators/withScrolledInView/withScrolledInView.ts"],
|
|
4
|
-
"sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n RafServiceProps,\n ScrollServiceProps,\n ResizeServiceProps,\n} from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n damp,\n clamp,\n clamp01,\n getOffsetSizes,\n isFunction,\n domScheduler as scheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nexport interface WithScrolledInViewProps extends BaseProps {\n $options: {\n dampFactor: number;\n dampPrecision: number;\n offset: string;\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\nfunction updateProgress(\n props: ScrollInViewProps,\n axis: 'x' | 'y',\n progressKey: 'progress' | 'dampedProgress',\n currentKey: 'current' | 'dampedCurrent',\n) {\n props[progressKey][axis] =\n props.start[axis] === props.end[axis]\n ? 0\n : clamp01(\n (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\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(
|
|
5
|
-
"mappings": "AAOA,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,OACX;AACP,SAAS,iBAAiB,gBAAgB;AAyC1C,SAAS,eACP,OACA,MACA,aACA,YACA;AACA,QAAM,WAAW,EAAE,IAAI,IACrB,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAChC,IACA;AAAA,KACG,MAAM,UAAU,EAAE,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,IAAI,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACrF;AACR;AAKA,SAAS,YACP,OACA,YACA,eACA,OAAkB,KACZ;AACN,QAAM,QAAQ,IAAI,IAAI
|
|
4
|
+
"sourcesContent": ["import type { BaseInterface, BaseDecorator } from '../../Base/types.js';\nimport type { Base, BaseProps, BaseConfig } from '../../Base/index.js';\nimport type {\n RafServiceProps,\n ScrollServiceProps,\n ResizeServiceProps,\n} from '../../services/index.js';\nimport { useScroll } from '../../services/index.js';\nimport { withMountWhenInView } from '../withMountWhenInView.js';\nimport {\n damp,\n clamp,\n clamp01,\n getOffsetSizes,\n isFunction,\n domScheduler as scheduler,\n} from '../../utils/index.js';\nimport { normalizeOffset, getEdges } from './utils.js';\n\nexport interface WithScrolledInViewProps extends BaseProps {\n $options: {\n dampFactor: number;\n dampPrecision: number;\n offset: string;\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\nfunction updateProgress(\n props: ScrollInViewProps,\n axis: 'x' | 'y',\n progressKey: 'progress' | 'dampedProgress',\n currentKey: 'current' | 'dampedCurrent',\n) {\n props[progressKey][axis] =\n props.start[axis] === props.end[axis]\n ? 0\n : clamp01(\n (props[currentKey][axis] - props.start[axis]) / (props.end[axis] - props.start[axis]),\n );\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(useScroll().props()[axis], props.start[axis], props.end[axis]);\n props.dampedCurrent[axis] = damp(\n props.current[axis],\n props.dampedCurrent[axis],\n dampFactor,\n dampPrecision,\n );\n updateProgress(props, axis, 'progress', 'current');\n updateProgress(props, axis, 'dampedProgress', 'dampedCurrent');\n}\n\nexport interface WithScrolledInViewInterface extends BaseInterface {\n /**\n * @type {ScrollInViewProps}\n */\n readonly 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\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 ...BaseClass.config,\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 offset: {\n type: String,\n default: 'start end / end start',\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 shouldEvaluateProps = true;\n\n get props() {\n if (this.shouldEvaluateProps) {\n this.shouldEvaluateProps = false;\n const targetSizes = options.useOffsetSizes\n ? getOffsetSizes(this.$el)\n : this.$el.getBoundingClientRect();\n\n targetSizes.y += window.scrollY;\n targetSizes.x += window.scrollX;\n\n const containerSizes = {\n x: 0,\n y: 0,\n height: window.innerHeight,\n width: window.innerWidth,\n };\n\n const offset = normalizeOffset(this.$options.offset);\n\n // Y axis\n const [yStart, yEnd] = getEdges('y', targetSizes, containerSizes, offset);\n const yCurrent = clamp(window.scrollY, yStart, yEnd);\n const yProgress = yStart === yEnd ? 0 : clamp01((yCurrent - yStart) / (yEnd - yStart));\n // X axis\n const [xStart, xEnd] = getEdges('x', targetSizes, containerSizes, offset);\n const xCurrent = clamp(window.scrollX, xStart, xEnd);\n const xProgress = xStart === xEnd ? 0 : 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 = xCurrent;\n this.__props.dampedCurrent.y = yCurrent;\n this.__props.progress.x = xProgress;\n this.__props.progress.y = yProgress;\n this.__props.dampedProgress.x = xProgress;\n this.__props.dampedProgress.y = yProgress;\n }\n\n return this.__props;\n }\n\n /**\n * Bind listeners.\n */\n constructor(element: HTMLElement) {\n super(element);\n\n const render = () => {\n scheduler.read(() => {\n // @ts-ignore\n const renderFn = this.__callMethod('scrolledInView', this.props);\n if (isFunction(renderFn)) {\n scheduler.write(() => {\n renderFn(this.__props);\n });\n }\n });\n };\n\n const delegate = {\n handleEvent(event: CustomEvent) {\n delegate[event.type](event.detail[0]);\n },\n resized: () => {\n this.shouldEvaluateProps = true;\n render();\n },\n scrolled: (props: ScrollServiceProps) => {\n if (props.changed.y || props.changed.x) {\n this.$services.enable('ticked');\n }\n },\n mounted: () => render(),\n ticked: () => {\n const { dampFactor, dampPrecision } = this.$options;\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('mounted', delegate);\n this.$on('resized', delegate);\n this.$on('scrolled', delegate);\n this.$on('ticked', delegate);\n });\n\n this.$on('destroyed', () => {\n this.$off('mounted', delegate);\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 // @ts-ignore\n return WithScrolledInView;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -47,6 +47,7 @@ export declare class ScrollService extends AbstractService<ScrollServiceProps> {
|
|
|
47
47
|
static config: ServiceConfig;
|
|
48
48
|
props: ScrollServiceProps;
|
|
49
49
|
updateProps(): ScrollServiceProps;
|
|
50
|
+
update(): void;
|
|
50
51
|
onScrollDebounced: (...args: unknown[]) => void;
|
|
51
52
|
/**
|
|
52
53
|
* Scroll handler.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { AbstractService } from "./AbstractService.js";
|
|
2
2
|
import { debounce } from "../utils/debounce.js";
|
|
3
3
|
import { PASSIVE_CAPTURE_EVENT_OPTIONS } from "./utils.js";
|
|
4
|
+
import { nextTick } from "../utils/nextTick.js";
|
|
4
5
|
class ScrollService extends AbstractService {
|
|
5
6
|
static config = [[() => document, [["scroll", PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
|
|
6
7
|
props = {
|
|
@@ -69,14 +70,17 @@ class ScrollService extends AbstractService {
|
|
|
69
70
|
props.direction.y = props.isDown ? "DOWN" : props.isUp ? "UP" : "NONE";
|
|
70
71
|
return props;
|
|
71
72
|
}
|
|
73
|
+
update() {
|
|
74
|
+
nextTick(() => this.updateProps()).then(() => this.trigger(this.props));
|
|
75
|
+
}
|
|
72
76
|
onScrollDebounced = debounce(() => {
|
|
73
|
-
this.
|
|
77
|
+
this.update();
|
|
74
78
|
}, 100);
|
|
75
79
|
/**
|
|
76
80
|
* Scroll handler.
|
|
77
81
|
*/
|
|
78
82
|
handleEvent() {
|
|
79
|
-
this.
|
|
83
|
+
this.update();
|
|
80
84
|
this.onScrollDebounced();
|
|
81
85
|
}
|
|
82
86
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/js-toolkit/services/ScrollService.ts"],
|
|
4
|
-
"sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { debounce } from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\n\nexport interface ScrollServiceProps {\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n changedX: boolean;\n changedY: boolean;\n last: { x: number; y: number };\n lastX: number;\n lastY: number;\n delta: { x: number; y: number };\n deltaX: number;\n deltaY: number;\n progress: { x: number; y: number };\n progressX: number;\n progressY: number;\n max: { x: number; y: number };\n maxX: number;\n maxY: number;\n direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n isUp: boolean;\n isRight: boolean;\n isDown: boolean;\n isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n props: ScrollServiceProps = {\n x: window.scrollX,\n y: window.scrollY,\n changed: {\n x: false,\n y: false,\n },\n changedX: false,\n changedY: false,\n last: {\n x: window.scrollX,\n y: window.scrollY,\n },\n lastX: window.scrollX,\n lastY: window.scrollY,\n delta: {\n x: 0,\n y: 0,\n },\n deltaX: 0,\n deltaY: 0,\n max: {\n x: document.scrollingElement.scrollWidth - window.innerWidth,\n y: document.scrollingElement.scrollHeight - window.innerHeight,\n },\n maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n progress: {\n x: 0,\n y: 0,\n },\n progressX: 0,\n progressY: 0,\n direction: {\n x: 'NONE',\n y: 'NONE',\n },\n isUp: false,\n isRight: false,\n isDown: false,\n isLeft: false,\n };\n\n updateProps(): ScrollServiceProps {\n const { props } = this;\n const yLast = props.y;\n const xLast = props.x;\n\n props.y = window.scrollY;\n props.x = window.scrollX;\n props.changed.x = props.changedX = props.x !== xLast;\n props.changed.y = props.changedY = props.y !== yLast;\n props.last.x = props.lastX = xLast;\n props.last.y = props.lastY = yLast;\n props.delta.x = props.deltaX = props.x - xLast;\n props.delta.y = props.deltaY = props.y - yLast;\n props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n props.isUp = props.y < yLast;\n props.isRight = props.x > xLast;\n props.isDown = props.y > yLast;\n props.isLeft = props.x < xLast;\n /* eslint-disable no-nested-ternary */\n props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n /* eslint-enable no-nested-ternary */\n\n return props;\n }\n\n onScrollDebounced = debounce(() => {\n this.
|
|
5
|
-
"mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,qCAAqC;
|
|
4
|
+
"sourcesContent": ["import type { ServiceConfig, ServiceInterface } from './AbstractService.js';\nimport { AbstractService } from './AbstractService.js';\nimport { debounce } from '../utils/debounce.js';\nimport { PASSIVE_CAPTURE_EVENT_OPTIONS } from './utils.js';\nimport { nextTick } from '../utils/nextTick.js';\n\nexport interface ScrollServiceProps {\n x: number;\n y: number;\n changed: { x: boolean; y: boolean };\n changedX: boolean;\n changedY: boolean;\n last: { x: number; y: number };\n lastX: number;\n lastY: number;\n delta: { x: number; y: number };\n deltaX: number;\n deltaY: number;\n progress: { x: number; y: number };\n progressX: number;\n progressY: number;\n max: { x: number; y: number };\n maxX: number;\n maxY: number;\n direction: { x: 'LEFT' | 'RIGHT' | 'NONE'; y: 'UP' | 'DOWN' | 'NONE' };\n isUp: boolean;\n isRight: boolean;\n isDown: boolean;\n isLeft: boolean;\n}\n\nexport type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;\n\nexport class ScrollService extends AbstractService<ScrollServiceProps> {\n static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];\n\n props: ScrollServiceProps = {\n x: window.scrollX,\n y: window.scrollY,\n changed: {\n x: false,\n y: false,\n },\n changedX: false,\n changedY: false,\n last: {\n x: window.scrollX,\n y: window.scrollY,\n },\n lastX: window.scrollX,\n lastY: window.scrollY,\n delta: {\n x: 0,\n y: 0,\n },\n deltaX: 0,\n deltaY: 0,\n max: {\n x: document.scrollingElement.scrollWidth - window.innerWidth,\n y: document.scrollingElement.scrollHeight - window.innerHeight,\n },\n maxX: document.scrollingElement.scrollWidth - window.innerWidth,\n maxY: document.scrollingElement.scrollHeight - window.innerHeight,\n progress: {\n x: 0,\n y: 0,\n },\n progressX: 0,\n progressY: 0,\n direction: {\n x: 'NONE',\n y: 'NONE',\n },\n isUp: false,\n isRight: false,\n isDown: false,\n isLeft: false,\n };\n\n updateProps(): ScrollServiceProps {\n const { props } = this;\n const yLast = props.y;\n const xLast = props.x;\n\n props.y = window.scrollY;\n props.x = window.scrollX;\n props.changed.x = props.changedX = props.x !== xLast;\n props.changed.y = props.changedY = props.y !== yLast;\n props.last.x = props.lastX = xLast;\n props.last.y = props.lastY = yLast;\n props.delta.x = props.deltaX = props.x - xLast;\n props.delta.y = props.deltaY = props.y - yLast;\n props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;\n props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;\n props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;\n props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;\n props.isUp = props.y < yLast;\n props.isRight = props.x > xLast;\n props.isDown = props.y > yLast;\n props.isLeft = props.x < xLast;\n /* eslint-disable no-nested-ternary */\n props.direction.x = props.isRight ? 'RIGHT' : props.isLeft ? 'LEFT' : 'NONE';\n props.direction.y = props.isDown ? 'DOWN' : props.isUp ? 'UP' : 'NONE';\n /* eslint-enable no-nested-ternary */\n\n return props;\n }\n\n update() {\n nextTick(() => this.updateProps()).then(() => this.trigger(this.props));\n }\n\n onScrollDebounced = debounce(() => {\n this.update();\n }, 100);\n\n /**\n * Scroll handler.\n */\n handleEvent() {\n this.update();\n this.onScrollDebounced();\n }\n}\n\n/**\n * Use the scroll service.\n *\n * ```js\n * import { useScroll } from '@studiometa/js-toolkit/services';\n * const { add, remove, props } = useScroll();\n * add(key, (props) => {});\n * remove(key);\n * props();\n * ```\n */\nexport function useScroll(): ScrollServiceInterface {\n return ScrollService.getInstance();\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/utils/scrollTo.js
CHANGED
|
@@ -80,7 +80,8 @@ function scrollTo(target, { rootElement = window, axis = yAxis, offset = 0, ...t
|
|
|
80
80
|
(progress) => {
|
|
81
81
|
rootElement.scrollTo({
|
|
82
82
|
left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),
|
|
83
|
-
top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress)
|
|
83
|
+
top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),
|
|
84
|
+
behavior: "instant"
|
|
84
85
|
});
|
|
85
86
|
},
|
|
86
87
|
{
|
package/utils/scrollTo.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../packages/js-toolkit/utils/scrollTo.ts"],
|
|
4
|
-
"sourcesContent": ["import { tween } from './tween.js';\nimport type { TweenOptions } from './tween.js';\nimport { isString, isNumber, isFunction, isDefined } from './is.js';\nimport { lerp } from './math/index.js';\n\nexport interface ScrollPosition {\n left: number;\n top: number;\n}\n\nexport type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;\n\nexport interface ScrollToOptions extends TweenOptions {\n /**\n * Root element that will be scrolled.\n */\n rootElement?: HTMLElement | typeof window;\n /**\n * Scroll direction.\n */\n axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];\n /**\n * Distance from the target.\n */\n offset?: number;\n}\n\nconst xAxis = Symbol(0);\nconst yAxis = Symbol(1);\nconst bothAxis = Symbol(2);\n\nfunction isHtmlElement(rootElement: ScrollToOptions['rootElement']): rootElement is HTMLElement {\n return rootElement instanceof HTMLElement;\n}\n\n/**\n * Get the current root element or window scroll position.\n */\nfunction getCurrentScrollPosition(rootElement: ScrollToOptions['rootElement']): ScrollPosition {\n return {\n left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,\n top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY,\n };\n}\n\n/**\n * Get the maximum scroll position values.\n */\nfunction getMaxScrollPosition(rootElement?: ScrollToOptions['rootElement']): ScrollPosition {\n return {\n left: isHtmlElement(rootElement)\n ? rootElement.scrollWidth - rootElement.offsetWidth\n : document.documentElement.scrollWidth - window.innerWidth,\n top: isHtmlElement(rootElement)\n ? rootElement.scrollHeight - rootElement.offsetHeight\n : document.documentElement.scrollHeight - window.innerHeight,\n };\n}\n\n/**\n * Get the target scroll position.\n */\nfunction getTargetScrollPosition(\n initialScrollPosition: ScrollPosition,\n maxScrollPosition: ScrollPosition,\n target: ScrollTarget,\n axis: ScrollToOptions['axis'],\n offset: number,\n): ScrollPosition {\n let { top, left } = initialScrollPosition;\n\n if (target instanceof HTMLElement || isString(target)) {\n const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);\n\n if (!targetElement) {\n return { top, left };\n }\n\n const sizes = targetElement.getBoundingClientRect();\n const styles = getComputedStyle(targetElement);\n const scrollMargin = {\n left: Number.parseInt(styles.scrollMarginLeft || '0', 10),\n top: Number.parseInt(styles.scrollMarginTop || '0', 10),\n };\n\n // Set the scroll position of the target element.\n left = sizes.left + initialScrollPosition.left - scrollMargin.left;\n top = sizes.top + initialScrollPosition.top - scrollMargin.top;\n } else if (isNumber(target)) {\n left = target;\n top = target;\n } else {\n left = target.left ?? left;\n top = target.top ?? top;\n }\n\n left -= offset;\n top -= offset;\n\n if (axis !== bothAxis) {\n if (axis !== xAxis && !isDefined((target as Partial<ScrollPosition>).left)) {\n left = initialScrollPosition.left;\n }\n\n if (axis !== yAxis) {\n top = initialScrollPosition.top;\n }\n }\n\n return {\n left: Math.min(left, maxScrollPosition.left),\n top: Math.min(top, maxScrollPosition.top),\n };\n}\n\n/**\n * Scroll to an element.\n *\n * @returns {Promise<ScrollPosition>} A promising resolving with the scroll position.\n */\nexport function scrollTo(\n target: string | HTMLElement | number | Partial<ScrollPosition>,\n { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions }: ScrollToOptions = {},\n): Promise<ScrollPosition> {\n const initialScrollPosition = getCurrentScrollPosition(rootElement);\n const maxScrollPosition = getMaxScrollPosition(rootElement);\n const targetScrollPosition = getTargetScrollPosition(\n initialScrollPosition,\n maxScrollPosition,\n target,\n axis,\n offset,\n );\n\n return new Promise((resolve) => {\n function eventHandler() {\n /* eslint-disable @typescript-eslint/no-use-before-define */\n tw.pause();\n stop();\n /* eslint-enable @typescript-eslint/no-use-before-define */\n }\n\n function stop() {\n rootElement.removeEventListener('wheel', eventHandler);\n rootElement.removeEventListener('touchmove', eventHandler);\n\n // Resolve the promise on animation finish.\n resolve(getCurrentScrollPosition(rootElement));\n }\n\n // Setup tween.\n const tw = tween(\n (progress) => {\n rootElement.scrollTo({\n left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),\n top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),\n });\n },\n {\n smooth: 0.2,\n ...tweenOptions,\n onFinish(progress) {\n if (isFunction(tweenOptions.onFinish)) {\n tweenOptions.onFinish(progress);\n }\n\n stop();\n },\n },\n );\n\n rootElement.addEventListener('wheel', eventHandler, { passive: true });\n rootElement.addEventListener('touchmove', eventHandler, { passive: true });\n tw.start();\n });\n}\n\nscrollTo.axis = {\n x: xAxis,\n y: yAxis,\n both: bothAxis,\n};\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,UAAU,UAAU,YAAY,iBAAiB;AAC1D,SAAS,YAAY;AAwBrB,MAAM,QAAQ,OAAO,CAAC;AACtB,MAAM,QAAQ,OAAO,CAAC;AACtB,MAAM,WAAW,OAAO,CAAC;AAEzB,SAAS,cAAc,aAAyE;AAC9F,SAAO,uBAAuB;AAChC;AAKA,SAAS,yBAAyB,aAA6D;AAC7F,SAAO;AAAA,IACL,MAAM,cAAc,WAAW,IAAI,YAAY,YAAY,YAAY;AAAA,IACvE,KAAK,cAAc,WAAW,IAAI,YAAY,aAAa,YAAY;AAAA,EACzE;AACF;AAKA,SAAS,qBAAqB,aAA8D;AAC1F,SAAO;AAAA,IACL,MAAM,cAAc,WAAW,IAC3B,YAAY,cAAc,YAAY,cACtC,SAAS,gBAAgB,cAAc,OAAO;AAAA,IAClD,KAAK,cAAc,WAAW,IAC1B,YAAY,eAAe,YAAY,eACvC,SAAS,gBAAgB,eAAe,OAAO;AAAA,EACrD;AACF;AAKA,SAAS,wBACP,uBACA,mBACA,QACA,MACA,QACgB;AAChB,MAAI,EAAE,KAAK,KAAK,IAAI;AAEpB,MAAI,kBAAkB,eAAe,SAAS,MAAM,GAAG;AACrD,UAAM,gBAAgB,kBAAkB,cAAc,SAAS,SAAS,cAAc,MAAM;AAE5F,QAAI,CAAC,eAAe;AAClB,aAAO,EAAE,KAAK,KAAK;AAAA,IACrB;AAEA,UAAM,QAAQ,cAAc,sBAAsB;AAClD,UAAM,SAAS,iBAAiB,aAAa;AAC7C,UAAM,eAAe;AAAA,MACnB,MAAM,OAAO,SAAS,OAAO,oBAAoB,KAAK,EAAE;AAAA,MACxD,KAAK,OAAO,SAAS,OAAO,mBAAmB,KAAK,EAAE;AAAA,IACxD;AAGA,WAAO,MAAM,OAAO,sBAAsB,OAAO,aAAa;AAC9D,UAAM,MAAM,MAAM,sBAAsB,MAAM,aAAa;AAAA,EAC7D,WAAW,SAAS,MAAM,GAAG;AAC3B,WAAO;AACP,UAAM;AAAA,EACR,OAAO;AACL,WAAO,OAAO,QAAQ;AACtB,UAAM,OAAO,OAAO;AAAA,EACtB;AAEA,UAAQ;AACR,SAAO;AAEP,MAAI,SAAS,UAAU;AACrB,QAAI,SAAS,SAAS,CAAC,UAAW,OAAmC,IAAI,GAAG;AAC1E,aAAO,sBAAsB;AAAA,IAC/B;AAEA,QAAI,SAAS,OAAO;AAClB,YAAM,sBAAsB;AAAA,IAC9B;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM,KAAK,IAAI,MAAM,kBAAkB,IAAI;AAAA,IAC3C,KAAK,KAAK,IAAI,KAAK,kBAAkB,GAAG;AAAA,EAC1C;AACF;AAOO,SAAS,SACd,QACA,EAAE,cAAc,QAAQ,OAAO,OAAO,SAAS,GAAG,GAAG,aAAa,IAAqB,CAAC,GAC/D;AACzB,QAAM,wBAAwB,yBAAyB,WAAW;AAClE,QAAM,oBAAoB,qBAAqB,WAAW;AAC1D,QAAM,uBAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,aAAS,eAAe;AAEtB,SAAG,MAAM;AACT,WAAK;AAAA,IAEP;AAEA,aAAS,OAAO;AACd,kBAAY,oBAAoB,SAAS,YAAY;AACrD,kBAAY,oBAAoB,aAAa,YAAY;AAGzD,cAAQ,yBAAyB,WAAW,CAAC;AAAA,IAC/C;AAGA,UAAM,KAAK;AAAA,MACT,CAAC,aAAa;AACZ,oBAAY,SAAS;AAAA,UACnB,MAAM,KAAK,sBAAsB,MAAM,qBAAqB,MAAM,QAAQ;AAAA,UAC1E,KAAK,KAAK,sBAAsB,KAAK,qBAAqB,KAAK,QAAQ;AAAA,
|
|
4
|
+
"sourcesContent": ["import { tween } from './tween.js';\nimport type { TweenOptions } from './tween.js';\nimport { isString, isNumber, isFunction, isDefined } from './is.js';\nimport { lerp } from './math/index.js';\n\nexport interface ScrollPosition {\n left: number;\n top: number;\n}\n\nexport type ScrollTarget = string | HTMLElement | number | Partial<ScrollPosition>;\n\nexport interface ScrollToOptions extends TweenOptions {\n /**\n * Root element that will be scrolled.\n */\n rootElement?: HTMLElement | typeof window;\n /**\n * Scroll direction.\n */\n axis?: (typeof scrollTo.axis)[keyof typeof scrollTo.axis];\n /**\n * Distance from the target.\n */\n offset?: number;\n}\n\nconst xAxis = Symbol(0);\nconst yAxis = Symbol(1);\nconst bothAxis = Symbol(2);\n\nfunction isHtmlElement(rootElement: ScrollToOptions['rootElement']): rootElement is HTMLElement {\n return rootElement instanceof HTMLElement;\n}\n\n/**\n * Get the current root element or window scroll position.\n */\nfunction getCurrentScrollPosition(rootElement: ScrollToOptions['rootElement']): ScrollPosition {\n return {\n left: isHtmlElement(rootElement) ? rootElement.scrollTop : rootElement.scrollX,\n top: isHtmlElement(rootElement) ? rootElement.scrollLeft : rootElement.scrollY,\n };\n}\n\n/**\n * Get the maximum scroll position values.\n */\nfunction getMaxScrollPosition(rootElement?: ScrollToOptions['rootElement']): ScrollPosition {\n return {\n left: isHtmlElement(rootElement)\n ? rootElement.scrollWidth - rootElement.offsetWidth\n : document.documentElement.scrollWidth - window.innerWidth,\n top: isHtmlElement(rootElement)\n ? rootElement.scrollHeight - rootElement.offsetHeight\n : document.documentElement.scrollHeight - window.innerHeight,\n };\n}\n\n/**\n * Get the target scroll position.\n */\nfunction getTargetScrollPosition(\n initialScrollPosition: ScrollPosition,\n maxScrollPosition: ScrollPosition,\n target: ScrollTarget,\n axis: ScrollToOptions['axis'],\n offset: number,\n): ScrollPosition {\n let { top, left } = initialScrollPosition;\n\n if (target instanceof HTMLElement || isString(target)) {\n const targetElement = target instanceof HTMLElement ? target : document.querySelector(target);\n\n if (!targetElement) {\n return { top, left };\n }\n\n const sizes = targetElement.getBoundingClientRect();\n const styles = getComputedStyle(targetElement);\n const scrollMargin = {\n left: Number.parseInt(styles.scrollMarginLeft || '0', 10),\n top: Number.parseInt(styles.scrollMarginTop || '0', 10),\n };\n\n // Set the scroll position of the target element.\n left = sizes.left + initialScrollPosition.left - scrollMargin.left;\n top = sizes.top + initialScrollPosition.top - scrollMargin.top;\n } else if (isNumber(target)) {\n left = target;\n top = target;\n } else {\n left = target.left ?? left;\n top = target.top ?? top;\n }\n\n left -= offset;\n top -= offset;\n\n if (axis !== bothAxis) {\n if (axis !== xAxis && !isDefined((target as Partial<ScrollPosition>).left)) {\n left = initialScrollPosition.left;\n }\n\n if (axis !== yAxis) {\n top = initialScrollPosition.top;\n }\n }\n\n return {\n left: Math.min(left, maxScrollPosition.left),\n top: Math.min(top, maxScrollPosition.top),\n };\n}\n\n/**\n * Scroll to an element.\n *\n * @returns {Promise<ScrollPosition>} A promising resolving with the scroll position.\n */\nexport function scrollTo(\n target: string | HTMLElement | number | Partial<ScrollPosition>,\n { rootElement = window, axis = yAxis, offset = 0, ...tweenOptions }: ScrollToOptions = {},\n): Promise<ScrollPosition> {\n const initialScrollPosition = getCurrentScrollPosition(rootElement);\n const maxScrollPosition = getMaxScrollPosition(rootElement);\n const targetScrollPosition = getTargetScrollPosition(\n initialScrollPosition,\n maxScrollPosition,\n target,\n axis,\n offset,\n );\n\n return new Promise((resolve) => {\n function eventHandler() {\n /* eslint-disable @typescript-eslint/no-use-before-define */\n tw.pause();\n stop();\n /* eslint-enable @typescript-eslint/no-use-before-define */\n }\n\n function stop() {\n rootElement.removeEventListener('wheel', eventHandler);\n rootElement.removeEventListener('touchmove', eventHandler);\n\n // Resolve the promise on animation finish.\n resolve(getCurrentScrollPosition(rootElement));\n }\n\n // Setup tween.\n const tw = tween(\n (progress) => {\n rootElement.scrollTo({\n left: lerp(initialScrollPosition.left, targetScrollPosition.left, progress),\n top: lerp(initialScrollPosition.top, targetScrollPosition.top, progress),\n behavior: 'instant',\n });\n },\n {\n smooth: 0.2,\n ...tweenOptions,\n onFinish(progress) {\n if (isFunction(tweenOptions.onFinish)) {\n tweenOptions.onFinish(progress);\n }\n\n stop();\n },\n },\n );\n\n rootElement.addEventListener('wheel', eventHandler, { passive: true });\n rootElement.addEventListener('touchmove', eventHandler, { passive: true });\n tw.start();\n });\n}\n\nscrollTo.axis = {\n x: xAxis,\n y: yAxis,\n both: bothAxis,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|