From cb978e2fe7f8ed99930d894c31986145e9a60e04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Roche?= Date: Tue, 4 Jun 2024 13:34:30 +0200 Subject: [PATCH] cleaner uid --- packages/snap/dist/lenis-snap.d.ts | 82 +++- packages/snap/dist/lenis-snap.js | 520 ++++++++++----------- packages/snap/dist/lenis-snap.js.map | 2 +- packages/snap/dist/lenis-snap.min.js | 2 +- packages/snap/dist/lenis-snap.min.js.map | 2 +- packages/snap/dist/lenis-snap.mjs | 2 +- packages/snap/dist/lenis-snap.mjs.map | 2 +- packages/snap/package.json | 3 + packages/snap/playground/main.js | 5 +- packages/snap/src/{slide.js => element.ts} | 94 +++- packages/snap/src/index.ts | 69 ++- packages/snap/src/uid.ts | 7 + packages/snap/tsconfig.json | 13 +- 13 files changed, 462 insertions(+), 341 deletions(-) rename packages/snap/src/{slide.js => element.ts} (53%) create mode 100644 packages/snap/src/uid.ts diff --git a/packages/snap/dist/lenis-snap.d.ts b/packages/snap/dist/lenis-snap.d.ts index ccfedf40..8f22ff8b 100644 --- a/packages/snap/dist/lenis-snap.d.ts +++ b/packages/snap/dist/lenis-snap.d.ts @@ -1,30 +1,80 @@ +import Lenis from 'lenis'; + +type SnapElementOptions = { + align?: string[]; + ignoreSticky?: boolean; + ignoreTransform?: boolean; +}; +type Rect = { + top: number; + left: number; + width: number; + height: number; + x: number; + y: number; + bottom: number; + right: number; + element: HTMLElement; +}; +declare class SnapElement { + element: HTMLElement; + options: SnapElementOptions; + rect: Rect; + wrapperResizeObserver: ResizeObserver; + resizeObserver: ResizeObserver; + constructor(element: HTMLElement, { align, ignoreSticky, ignoreTransform, }?: SnapElementOptions); + destroy(): void; + setRect({ top, left, width, height, element, }?: { + top?: number; + left?: number; + width?: number; + height?: number; + element?: HTMLElement; + }): void; + onWrapperResize: () => void; + onResize: ([entry]: ResizeObserverEntry[]) => void; +} + +type UID = number; + +type Viewport = { + width: number; + height: number; +}; +type SnapOptions = { + type?: 'mandatory' | 'proximity'; + lerp?: number; + easing?: (t: number) => number; + duration?: number; + velocityThreshold?: number; + onSnapStart?: (t: number) => number; + onSnapComplete?: (t: number) => number; +}; declare class Snap { - constructor(lenis: any, { type, lerp, easing, duration, velocityThreshold, onSnapStart, onSnapComplete, }?: { - type?: string; - lerp: any; - easing: any; - duration: any; - velocityThreshold?: number; - onSnapStart: any; - onSnapComplete: any; - }); + lenis: Lenis; + options: SnapOptions; + elements: Map; + snaps: Map; + viewport: Viewport; + isStopped: Boolean; + constructor(lenis: Lenis, { type, lerp, easing, duration, velocityThreshold, onSnapStart, onSnapComplete, }?: SnapOptions); destroy(): void; start(): void; stop(): void; - add(value: any): () => void; - remove(id: any): void; - addElement(element: any, options?: {}): () => void; - removeElement(id: any): void; + add(value: number): () => void; + remove(id: UID): void; + addElement(element: HTMLElement, options?: SnapElementOptions): () => void; + removeElement(id: UID): void; onWindowResize: () => void; - onScroll: ({ scroll, limit, lastVelocity, velocity, isScrolling, isTouching, userData, }: { + onScroll: ({ scroll, limit, lastVelocity, velocity, isScrolling, userData, isHorizontal, }: { scroll: any; limit: any; lastVelocity: any; velocity: any; isScrolling: any; - isTouching: any; userData: any; + isHorizontal: any; }) => void; } -export { Snap as default }; +export { type SnapOptions, Snap as default }; diff --git a/packages/snap/dist/lenis-snap.js b/packages/snap/dist/lenis-snap.js index 59369f7f..e0849b51 100644 --- a/packages/snap/dist/lenis-snap.js +++ b/packages/snap/dist/lenis-snap.js @@ -1,287 +1,269 @@ (function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : - typeof define === 'function' && define.amd ? define(factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Lenis = factory()); + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Lenis = factory()); })(this, (function () { 'use strict'; - function removeParentSticky(element) { - const position = getComputedStyle(element).position; - - const isSticky = position === 'sticky'; - - if (isSticky) { - element.style.setProperty('position', 'static'); - element.dataset.sticky = 'true'; + function removeParentSticky(element) { + const position = getComputedStyle(element).position; + const isSticky = position === 'sticky'; + if (isSticky) { + element.style.setProperty('position', 'static'); + element.dataset.sticky = 'true'; + } + if (element.offsetParent) { + removeParentSticky(element.offsetParent); + } } - - if (element.offsetParent) { - removeParentSticky(element.offsetParent); + function addParentSticky(element) { + var _a; + if (((_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a.sticky) === 'true') { + element.style.removeProperty('position'); + delete element.dataset.sticky; + } + if (element.offsetParent) { + addParentSticky(element.offsetParent); + } } - } - - function addParentSticky(element) { - if (element?.dataset?.sticky === 'true') { - element.style.removeProperty('position'); - delete element.dataset.sticky; + function offsetTop(element, accumulator = 0) { + const top = accumulator + element.offsetTop; + if (element.offsetParent) { + return offsetTop(element.offsetParent, top); + } + return top; } - - if (element.offsetParent) { - addParentSticky(element.offsetParent); + function offsetLeft(element, accumulator = 0) { + const left = accumulator + element.offsetLeft; + if (element.offsetParent) { + return offsetLeft(element.offsetParent, left); + } + return left; } - } - - function offsetTop(element, accumulator = 0) { - const top = accumulator + element.offsetTop; - if (element.offsetParent) { - return offsetTop(element.offsetParent, top) + function scrollTop(element, accumulator = 0) { + const top = accumulator + element.scrollTop; + if (element.offsetParent) { + return scrollTop(element.offsetParent, top); + } + return top + window.scrollY; } - return top - } - - function offsetLeft(element, accumulator = 0) { - const left = accumulator + element.offsetLeft; - if (element.offsetParent) { - return offsetLeft(element.offsetParent, left) + function scrollLeft(element, accumulator = 0) { + const left = accumulator + element.scrollLeft; + if (element.offsetParent) { + return scrollLeft(element.offsetParent, left); + } + return left + window.scrollX; } - return left - } - - function scrollTop(element, accumulator = 0) { - const top = accumulator + element.scrollTop; - if (element.offsetParent) { - return scrollTop(element.offsetParent, top) + class SnapElement { + constructor(element, { align = ['start'], ignoreSticky = true, ignoreTransform = false, } = {}) { + // @ts-ignore + this.rect = {}; + this.onWrapperResize = () => { + let top, left; + if (this.options.ignoreSticky) + removeParentSticky(this.element); + if (this.options.ignoreTransform) { + top = offsetTop(this.element); + left = offsetLeft(this.element); + } + else { + const rect = this.element.getBoundingClientRect(); + top = rect.top + scrollTop(this.element); + left = rect.left + scrollLeft(this.element); + } + if (this.options.ignoreSticky) + addParentSticky(this.element); + this.setRect({ top, left }); + }; + this.onResize = ([entry]) => { + const width = entry.borderBoxSize[0].inlineSize; + const height = entry.borderBoxSize[0].blockSize; + this.setRect({ width, height }); + }; + this.element = element; + this.options = { align, ignoreSticky, ignoreTransform }; + // this.ignoreSticky = ignoreSticky + // this.ignoreTransform = ignoreTransform + this.align = [align].flat(); + // TODO: assing rect immediately + this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize); + this.wrapperResizeObserver.observe(document.body); + this.onWrapperResize(); + this.resizeObserver = new ResizeObserver(this.onResize); + this.resizeObserver.observe(this.element); + this.setRect({ + width: this.element.offsetWidth, + height: this.element.offsetHeight, + }); + } + destroy() { + this.wrapperResizeObserver.disconnect(); + this.resizeObserver.disconnect(); + } + setRect({ top, left, width, height, element, } = {}) { + top = top !== null && top !== void 0 ? top : this.rect.top; + left = left !== null && left !== void 0 ? left : this.rect.left; + width = width !== null && width !== void 0 ? width : this.rect.width; + height = height !== null && height !== void 0 ? height : this.rect.height; + element = element !== null && element !== void 0 ? element : this.rect.element; + if (top === this.rect.top && + left === this.rect.left && + width === this.rect.width && + height === this.rect.height && + element === this.rect.element) + return; + this.rect.top = top; + this.rect.y = top; + this.rect.width = width; + this.rect.height = height; + this.rect.left = left; + this.rect.x = left; + this.rect.bottom = top + height; + this.rect.right = left + width; + } } - return top + window.scrollY - } - function scrollLeft(element, accumulator = 0) { - const left = accumulator + element.scrollLeft; - if (element.offsetParent) { - return scrollLeft(element.offsetParent, left) + let index = 0; + function uid() { + return index++; } - return left + window.scrollX - } - - class Slide { - constructor( - element, - { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {} - ) { - this.element = element; - - this.ignoreSticky = ignoreSticky; - this.ignoreTransform = ignoreTransform; - - this.align = [align].flat(); - this.rect = {}; - - this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize); - this.wrapperResizeObserver.observe(document.body); - - this.resizeObserver = new ResizeObserver(this.onResize); - this.resizeObserver.observe(this.element); + class Snap { + constructor(lenis, { type = 'mandatory', lerp, easing, duration, velocityThreshold = 1, onSnapStart, onSnapComplete, } = {}) { + this.isStopped = false; + this.onWindowResize = () => { + this.viewport.width = window.innerWidth; + this.viewport.height = window.innerHeight; + }; + this.onScroll = ({ scroll, limit, lastVelocity, velocity, isScrolling, userData, isHorizontal, }) => { + if (this.isStopped) + return; + // console.log(scroll, velocity, type) + // return + const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity); + const isTurningBack = Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0; + // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating }) + // console.log('onScroll') + if (Math.abs(velocity) < this.options.velocityThreshold && + // !isTouching && + isDecelerating && + !isTurningBack && + (userData === null || userData === void 0 ? void 0 : userData.initiator) !== 'snap') { + scroll = Math.ceil(scroll); + let snaps = [0, ...this.snaps.values(), limit]; + this.elements.forEach(({ rect, align }) => { + let snap; + align.forEach((align) => { + if (align === 'start') { + snap = rect.top; + } + else if (align === 'center') { + snap = rect.top + rect.height / 2 - this.viewport.height / 2; + } + else if (align === 'end') { + snap = rect.top + rect.height - this.viewport.height; + } + if (snap !== undefined) { + snaps.push(Math.ceil(snap)); + } + }); + }); + snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b)); + let prevSnap = snaps.findLast((snap) => snap <= scroll); + if (prevSnap === undefined) + prevSnap = snaps[0]; + const distanceToPrevSnap = Math.abs(scroll - prevSnap); + let nextSnap = snaps.find((snap) => snap >= scroll); + if (nextSnap === undefined) + nextSnap = snaps[snaps.length - 1]; + const distanceToNextSnap = Math.abs(scroll - nextSnap); + const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap; + const distance = Math.abs(scroll - snap); + if (this.options.type === 'mandatory' || + (this.options.type === 'proximity' && distance <= this.viewport.height)) { + // this.__isScrolling = true + // this.onSnapStart?.(snap) + // console.log('scroll to') + this.lenis.scrollTo(snap, { + lerp: this.options.lerp, + easing: this.options.easing, + duration: this.options.duration, + userData: { initiator: 'snap' }, + onStart: () => { + var _a, _b; + (_b = (_a = this.options).onSnapStart) === null || _b === void 0 ? void 0 : _b.call(_a, snap); + }, + onComplete: () => { + var _a, _b; + (_b = (_a = this.options).onSnapComplete) === null || _b === void 0 ? void 0 : _b.call(_a, snap); + }, + }); + } + // console.timeEnd('scroll') + } + }; + this.lenis = lenis; + this.options = { + type, + lerp, + easing, + duration, + velocityThreshold, + onSnapStart, + onSnapComplete, + }; + this.elements = new Map(); + this.snaps = new Map(); + this.viewport = { + width: window.innerWidth, + height: window.innerHeight, + }; + this.onWindowResize(); + window.addEventListener('resize', this.onWindowResize); + this.lenis.on('scroll', this.onScroll); + } + // debug() { + // const element = document.createElement('div') + // element.style.cssText = ` + // position: fixed; + // background: red; + // border-bottom: 1px solid red; + // left: 0; + // right: 0; + // top: 0; + // z-index: 9999; + // ` + // document.body.appendChild(element) + // } + destroy() { + this.lenis.off('scroll', this.onScroll); + window.removeEventListener('resize', this.onWindowResize); + this.elements.forEach((element) => element.destroy()); + } + start() { + this.isStopped = false; + } + stop() { + this.isStopped = true; + } + add(value) { + const id = uid(); + this.snaps.set(id, value); + return () => this.remove(id); + } + remove(id) { + this.snaps.delete(id); + } + addElement(element, options = {}) { + const id = uid(); + this.elements.set(id, new SnapElement(element, options)); + return () => this.removeElement(id); + } + removeElement(id) { + this.elements.delete(id); + } } - destroy() { - this.wrapperResizeObserver.disconnect(); - this.resizeObserver.disconnect(); - } - - setRect({ top, left, width, height, element }) { - top = top ?? this.rect.top; - left = left ?? this.rect.left; - width = width ?? this.rect.width; - height = height ?? this.rect.height; - element = element ?? this.rect.element; - - if ( - top === this.rect.top && - left === this.rect.left && - width === this.rect.width && - height === this.rect.height && - element === this.rect.element - ) - return - - this.rect.top = top; - this.rect.y = top; - this.rect.width = width; - this.rect.height = height; - this.rect.left = left; - this.rect.x = left; - this.rect.bottom = top + height; - this.rect.right = left + width; - } - - onWrapperResize = () => { - let top, left; - - if (this.ignoreSticky) removeParentSticky(this.element); - if (this.ignoreTransform) { - top = offsetTop(this.element); - left = offsetLeft(this.element); - } else { - const rect = this.element.getBoundingClientRect(); - top = rect.top + scrollTop(this.element); - left = rect.left + scrollLeft(this.element); - } - if (this.ignoreSticky) addParentSticky(this.element); - - this.setRect({ top, left }); - } - - onResize = ([entry]) => { - const width = entry.borderBoxSize[0].inlineSize; - const height = entry.borderBoxSize[0].blockSize; - - this.setRect({ width, height }); - } - } - - // TODO: - // - horizontal - // - fix trackpad snapping too soon due to velocity (fuck Apple) - // - fix wheel scrolling after limits (see console scroll to) - // - fix touch scroll, do not snap when not released - class Snap { - constructor(lenis, { type = 'mandatory', lerp, easing, duration, velocityThreshold = 1, onSnapStart, onSnapComplete, } = {}) { - this.onWindowResize = () => { - this.viewport.width = window.innerWidth; - this.viewport.height = window.innerHeight; - }; - this.onScroll = ({ scroll, limit, lastVelocity, velocity, isScrolling, isTouching, userData, }) => { - if (this.isStopped) - return; - // console.log(scroll, velocity, type) - // return - const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity); - const isTurningBack = Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0; - // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating }) - // console.log('onScroll') - if (Math.abs(velocity) < this.velocityThreshold && - // !isTouching && - isDecelerating && - !isTurningBack && - (userData === null || userData === void 0 ? void 0 : userData.initiator) !== 'snap') { - scroll = Math.ceil(scroll); - let snaps = [0, ...this.snaps.values(), limit]; - this.elements.forEach(({ rect, align }) => { - let snap; - align.forEach((align) => { - if (align === 'start') { - snap = rect.top; - } - else if (align === 'center') { - snap = rect.top + rect.height / 2 - this.viewport.height / 2; - } - else if (align === 'end') { - snap = rect.top + rect.height - this.viewport.height; - } - if (snap !== undefined) { - snaps.push(Math.ceil(snap)); - } - }); - }); - snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b)); - let prevSnap = snaps.findLast((snap) => snap <= scroll); - if (prevSnap === undefined) - prevSnap = snaps[0]; - const distanceToPrevSnap = Math.abs(scroll - prevSnap); - let nextSnap = snaps.find((snap) => snap >= scroll); - if (nextSnap === undefined) - nextSnap = snaps[snaps.length - 1]; - const distanceToNextSnap = Math.abs(scroll - nextSnap); - const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap; - const distance = Math.abs(scroll - snap); - if (this.type === 'mandatory' || - (this.type === 'proximity' && distance <= this.viewport.height)) { - // this.__isScrolling = true - // this.onSnapStart?.(snap) - // console.log('scroll to') - this.lenis.scrollTo(snap, { - lerp: this.options.lerp, - easing: this.options.easing, - duration: this.options.duration, - userData: { initiator: 'snap' }, - onStart: () => { - var _a; - (_a = this.onSnapStart) === null || _a === void 0 ? void 0 : _a.call(this, snap); - }, - onComplete: () => { - var _a; - (_a = this.onSnapComplete) === null || _a === void 0 ? void 0 : _a.call(this, snap); - }, - }); - } - // console.timeEnd('scroll') - } - }; - this.lenis = lenis; - this.options = { - type, - lerp, - easing, - duration, - velocityThreshold, - }; - this.type = type; - this.elements = new Map(); - this.snaps = new Map(); - this.velocityThreshold = velocityThreshold; - this.onSnapStart = onSnapStart; - this.onSnapComplete = onSnapComplete; - this.viewport = { - width: window.innerWidth, - height: window.innerHeight, - }; - this.onWindowResize(); - window.addEventListener('resize', this.onWindowResize); - this.lenis.on('scroll', this.onScroll); - } - // debug() { - // const element = document.createElement('div') - // element.style.cssText = ` - // position: fixed; - // background: red; - // border-bottom: 1px solid red; - // left: 0; - // right: 0; - // top: 0; - // z-index: 9999; - // ` - // document.body.appendChild(element) - // } - destroy() { - this.lenis.off('scroll', this.onScroll); - window.removeEventListener('resize', this.onWindowResize); - this.elements.forEach((slide) => slide.destroy()); - } - start() { - this.isStopped = false; - } - stop() { - this.isStopped = true; - } - add(value) { - const id = crypto.randomUUID(); - this.snaps.set(id, value); - return () => this.remove(id); - } - remove(id) { - this.snaps.delete(id); - } - addElement(element, options = {}) { - const id = crypto.randomUUID(); - this.elements.set(id, new Slide(element, options)); - return () => this.removeElement(id); - } - removeElement(id) { - this.elements.delete(id); - } - } - - return Snap; + return Snap; })); //# sourceMappingURL=lenis-snap.js.map diff --git a/packages/snap/dist/lenis-snap.js.map b/packages/snap/dist/lenis-snap.js.map index 581699e0..ab4852c5 100644 --- a/packages/snap/dist/lenis-snap.js.map +++ b/packages/snap/dist/lenis-snap.js.map @@ -1 +1 @@ -{"version":3,"file":"lenis-snap.js","sources":["../src/slide.js","../src/index.ts"],"sourcesContent":["function removeParentSticky(element) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction offsetTop(element, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport default class Slide {\r\n constructor(\r\n element,\r\n { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {}\r\n ) {\r\n this.element = element\r\n\r\n this.ignoreSticky = ignoreSticky\r\n this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n this.rect = {}\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({ top, left, width, height, element }) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.ignoreSticky) removeParentSticky(this.element)\r\n if (this.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","import Slide from './slide'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\nexport default class Snap {\r\n constructor(\r\n lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n } = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n }\r\n\r\n this.type = type\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.velocityThreshold = velocityThreshold\r\n this.onSnapStart = onSnapStart\r\n this.onSnapComplete = onSnapComplete\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((slide) => slide.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value) {\r\n const id = crypto.randomUUID()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element, options = {}) {\r\n const id = crypto.randomUUID()\r\n\r\n this.elements.set(id, new Slide(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n isTouching,\r\n userData,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.type === 'mandatory' ||\r\n (this.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"lenis-snap.js","sources":["../src/element.ts","../src/uid.ts","../src/index.ts"],"sourcesContent":["function removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n // this.ignoreSticky = ignoreSticky\r\n // this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n // TODO: assing rect immediately\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\r\n\r\nexport type UID = number\r\n\r\nexport function uid(): UID {\r\n return index++\r\n}\r\n","import Lenis from 'lenis'\r\nimport { SnapElement, SnapElementOptions } from './element'\r\nimport { uid, UID } from './uid'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\ntype Viewport = {\r\n width: number\r\n height: number\r\n}\r\n\r\nexport type SnapOptions = {\r\n type?: 'mandatory' | 'proximity'\r\n lerp?: number\r\n easing?: (t: number) => number\r\n duration?: number\r\n velocityThreshold?: number\r\n onSnapStart?: (t: number) => number\r\n onSnapComplete?: (t: number) => number\r\n}\r\n\r\nexport default class Snap {\r\n lenis: Lenis\r\n options: SnapOptions\r\n elements: Map\r\n snaps: Map\r\n viewport: Viewport\r\n isStopped: Boolean = false\r\n\r\n constructor(\r\n lenis: Lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {},\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((element) => element.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value: number) {\r\n const id = uid()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id: UID) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element: HTMLElement, options = {} as SnapElementOptions) {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id: UID) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n userData,\r\n isHorizontal,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.options.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit] as number[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.options.type === 'mandatory' ||\r\n (this.options.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":[],"mappings":";;;;;;IAAA,SAAS,kBAAkB,CAAC,OAAoB,EAAA;QAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAA;IAEnD,IAAA,MAAM,QAAQ,GAAG,QAAQ,KAAK,QAAQ,CAAA;QAEtC,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;IAC/C,QAAA,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAA;SAChC;IAED,IAAA,IAAI,OAAO,CAAC,YAAY,EAAE;IACxB,QAAA,kBAAkB,CAAC,OAAO,CAAC,YAA2B,CAAC,CAAA;SACxD;IACH,CAAC;IAED,SAAS,eAAe,CAAC,OAAoB,EAAA;;IAC3C,IAAA,IAAI,CAAA,CAAA,EAAA,GAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,OAAO,CAAE,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,MAAK,MAAM,EAAE;IACvC,QAAA,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAA;IACxC,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,CAAA;SAC9B;IAED,IAAA,IAAI,OAAO,CAAC,YAAY,EAAE;IACxB,QAAA,eAAe,CAAC,OAAO,CAAC,YAA2B,CAAC,CAAA;SACrD;IACH,CAAC;IAED,SAAS,SAAS,CAAC,OAAoB,EAAE,WAAW,GAAG,CAAC,EAAA;IACtD,IAAA,MAAM,GAAG,GAAG,WAAW,GAAG,OAAO,CAAC,SAAS,CAAA;IAC3C,IAAA,IAAI,OAAO,CAAC,YAAY,EAAE;YACxB,OAAO,SAAS,CAAC,OAAO,CAAC,YAA2B,EAAE,GAAG,CAAC,CAAA;SAC3D;IACD,IAAA,OAAO,GAAG,CAAA;IACZ,CAAC;IAED,SAAS,UAAU,CAAC,OAAoB,EAAE,WAAW,GAAG,CAAC,EAAA;IACvD,IAAA,MAAM,IAAI,GAAG,WAAW,GAAG,OAAO,CAAC,UAAU,CAAA;IAC7C,IAAA,IAAI,OAAO,CAAC,YAAY,EAAE;YACxB,OAAO,UAAU,CAAC,OAAO,CAAC,YAA2B,EAAE,IAAI,CAAC,CAAA;SAC7D;IACD,IAAA,OAAO,IAAI,CAAA;IACb,CAAC;IAED,SAAS,SAAS,CAAC,OAAoB,EAAE,WAAW,GAAG,CAAC,EAAA;IACtD,IAAA,MAAM,GAAG,GAAG,WAAW,GAAG,OAAO,CAAC,SAAS,CAAA;IAC3C,IAAA,IAAI,OAAO,CAAC,YAAY,EAAE;YACxB,OAAO,SAAS,CAAC,OAAO,CAAC,YAA2B,EAAE,GAAG,CAAC,CAAA;SAC3D;IACD,IAAA,OAAO,GAAG,GAAG,MAAM,CAAC,OAAO,CAAA;IAC7B,CAAC;IAED,SAAS,UAAU,CAAC,OAAoB,EAAE,WAAW,GAAG,CAAC,EAAA;IACvD,IAAA,MAAM,IAAI,GAAG,WAAW,GAAG,OAAO,CAAC,UAAU,CAAA;IAC7C,IAAA,IAAI,OAAO,CAAC,YAAY,EAAE;YACxB,OAAO,UAAU,CAAC,OAAO,CAAC,YAA2B,EAAE,IAAI,CAAC,CAAA;SAC7D;IACD,IAAA,OAAO,IAAI,GAAG,MAAM,CAAC,OAAO,CAAA;IAC9B,CAAC;UAoBY,WAAW,CAAA;IAQtB,IAAA,WAAA,CACE,OAAoB,EACpB,EACE,KAAK,GAAG,CAAC,OAAO,CAAC,EACjB,YAAY,GAAG,IAAI,EACnB,eAAe,GAAG,KAAK,MACD,EAAE,EAAA;;YAV5B,IAAI,CAAA,IAAA,GAAS,EAAE,CAAA;YA8Ef,IAAe,CAAA,eAAA,GAAG,MAAK;gBACrB,IAAI,GAAG,EAAE,IAAI,CAAA;IAEb,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY;IAAE,gBAAA,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC/D,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,eAAe,EAAE;IAChC,gBAAA,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC7B,gBAAA,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;iBAChC;qBAAM;oBACL,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;oBACjD,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;oBACxC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;iBAC5C;IACD,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY;IAAE,gBAAA,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;gBAE5D,IAAI,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAA;IAC7B,SAAC,CAAA;IAED,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAwB,KAAI;gBAC5C,MAAM,KAAK,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,UAAU,CAAA;gBAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;gBAE/C,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAA;IACjC,SAAC,CAAA;IAxFC,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;YAEtB,IAAI,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA;;;YAKvD,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAA;;YAI3B,IAAI,CAAC,qBAAqB,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;YACrE,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YACjD,IAAI,CAAC,eAAe,EAAE,CAAA;YAEtB,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YACvD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;YACzC,IAAI,CAAC,OAAO,CAAC;IACX,YAAA,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW;IAC/B,YAAA,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY;IAClC,SAAA,CAAC,CAAA;SACH;QAED,OAAO,GAAA;IACL,QAAA,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,CAAA;IACvC,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAA;SACjC;IAED,IAAA,OAAO,CAAC,EACN,GAAG,EACH,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,GAAA,GAOL,EAAE,EAAA;IACJ,QAAA,GAAG,GAAG,GAAG,KAAH,IAAA,IAAA,GAAG,KAAH,KAAA,CAAA,GAAA,GAAG,GAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;IAC1B,QAAA,IAAI,GAAG,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,IAAI,GAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAA;IAC7B,QAAA,KAAK,GAAG,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAK,GAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAA;IAChC,QAAA,MAAM,GAAG,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,KAAA,CAAA,GAAA,MAAM,GAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAA;IACnC,QAAA,OAAO,GAAG,OAAO,KAAP,IAAA,IAAA,OAAO,KAAP,KAAA,CAAA,GAAA,OAAO,GAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAA;IAEtC,QAAA,IACE,GAAG,KAAK,IAAI,CAAC,IAAI,CAAC,GAAG;IACrB,YAAA,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI;IACvB,YAAA,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK;IACzB,YAAA,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM;IAC3B,YAAA,OAAO,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO;gBAE7B,OAAM;IAER,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;IACnB,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAA;IACjB,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;IACvB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACzB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;IACrB,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAA;YAClB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,MAAM,CAAA;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK,CAAA;SAC/B;IAyBF;;ICrLD,IAAI,KAAK,GAAG,CAAC,CAAA;aAIG,GAAG,GAAA;QACjB,OAAO,KAAK,EAAE,CAAA;IAChB;;ICmBc,MAAO,IAAI,CAAA;QAQvB,WACE,CAAA,KAAY,EACZ,EACE,IAAI,GAAG,WAAW,EAClB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,iBAAiB,GAAG,CAAC,EACrB,WAAW,EACX,cAAc,GAAA,GACC,EAAE,EAAA;YAZrB,IAAS,CAAA,SAAA,GAAY,KAAK,CAAA;YA2F1B,IAAc,CAAA,cAAA,GAAG,MAAK;gBACpB,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,MAAM,CAAC,UAAU,CAAA;gBACvC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAA;IAC3C,SAAC,CAAA;IAED,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,EACV,MAAM,EACN,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,YAAY,GACb,KAAI;gBACH,IAAI,IAAI,CAAC,SAAS;oBAAE,OAAM;;;IAI1B,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAClE,YAAA,MAAM,aAAa,GACjB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,CAAC,CAAA;;;gBAMnE,IACE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB;;oBAEnD,cAAc;IACd,gBAAA,CAAC,aAAa;oBACd,CAAA,QAAQ,KAAR,IAAA,IAAA,QAAQ,KAAR,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,QAAQ,CAAE,SAAS,MAAK,MAAM,EAC9B;IACA,gBAAA,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAE1B,gBAAA,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,CAAa,CAAA;IAE1D,gBAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAI;IACxC,oBAAA,IAAI,IAAI,CAAA;IAER,oBAAA,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;IACtB,wBAAA,IAAI,KAAK,KAAK,OAAO,EAAE;IACrB,4BAAA,IAAI,GAAG,IAAI,CAAC,GAAG,CAAA;6BAChB;IAAM,6BAAA,IAAI,KAAK,KAAK,QAAQ,EAAE;IAC7B,4BAAA,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAA;6BAC7D;IAAM,6BAAA,IAAI,KAAK,KAAK,KAAK,EAAE;IAC1B,4BAAA,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;6BACrD;IAED,wBAAA,IAAI,IAAI,KAAK,SAAS,EAAE;gCACtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;6BAC5B;IACH,qBAAC,CAAC,CAAA;IACJ,iBAAC,CAAC,CAAA;oBAEF,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IAEvD,gBAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,IAAI,IAAI,MAAM,CAAC,CAAA;oBACvD,IAAI,QAAQ,KAAK,SAAS;IAAE,oBAAA,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;oBAC/C,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAA;IAEtD,gBAAA,IAAI,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,IAAI,MAAM,CAAC,CAAA;oBACnD,IAAI,QAAQ,KAAK,SAAS;wBAAE,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;oBAC9D,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAA;IAEtD,gBAAA,MAAM,IAAI,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAA;oBAE1E,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;IAExC,gBAAA,IACE,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,WAAW;IACjC,qBAAC,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,WAAW,IAAI,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EACvE;;;;IAMA,oBAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE;IACxB,wBAAA,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;IACvB,wBAAA,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;IAC3B,wBAAA,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;IAC/B,wBAAA,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE;4BAC/B,OAAO,EAAE,MAAK;;gCACZ,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,EAAC,WAAW,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,IAAI,CAAC,CAAA;6BACjC;4BACD,UAAU,EAAE,MAAK;;gCACf,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,EAAC,cAAc,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,IAAI,CAAC,CAAA;6BACpC;IACF,qBAAA,CAAC,CAAA;qBACH;;iBAGF;IACH,SAAC,CAAA;IA3KC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAElB,IAAI,CAAC,OAAO,GAAG;gBACb,IAAI;gBACJ,IAAI;gBACJ,MAAM;gBACN,QAAQ;gBACR,iBAAiB;gBACjB,WAAW;gBACX,cAAc;aACf,CAAA;IAED,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,EAAE,CAAA;IACzB,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,EAAE,CAAA;YAEtB,IAAI,CAAC,QAAQ,GAAG;gBACd,KAAK,EAAE,MAAM,CAAC,UAAU;gBACxB,MAAM,EAAE,MAAM,CAAC,WAAW;aAC3B,CAAA;YACD,IAAI,CAAC,cAAc,EAAE,CAAA;YACrB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;YAEtD,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;SACvC;;;;;;;;;;;;;;QAgBD,OAAO,GAAA;YACL,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YACvC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;IACzD,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;SACtD;QAED,KAAK,GAAA;IACH,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;SACvB;QAED,IAAI,GAAA;IACF,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;SACtB;IAED,IAAA,GAAG,CAAC,KAAa,EAAA;IACf,QAAA,MAAM,EAAE,GAAG,GAAG,EAAE,CAAA;YAEhB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAA;YAEzB,OAAO,MAAM,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;SAC7B;IAED,IAAA,MAAM,CAAC,EAAO,EAAA;IACZ,QAAA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;SACtB;IAED,IAAA,UAAU,CAAC,OAAoB,EAAE,OAAA,GAAU,EAAwB,EAAA;IACjE,QAAA,MAAM,EAAE,GAAG,GAAG,EAAE,CAAA;IAEhB,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAA;YAExD,OAAO,MAAM,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAA;SACpC;IAED,IAAA,aAAa,CAAC,EAAO,EAAA;IACnB,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;SACzB;IAiGF;;;;;;;;"} \ No newline at end of file diff --git a/packages/snap/dist/lenis-snap.min.js b/packages/snap/dist/lenis-snap.min.js index 472496fc..0ca24429 100644 --- a/packages/snap/dist/lenis-snap.min.js +++ b/packages/snap/dist/lenis-snap.min.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Lenis=e()}(this,(function(){"use strict";function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){"true"===t?.dataset?.sticky&&(t.style.removeProperty("position"),delete t.dataset.sticky),t.offsetParent&&addParentSticky(t.offsetParent)}function offsetTop(t,e=0){const i=e+t.offsetTop;return t.offsetParent?offsetTop(t.offsetParent,i):i}function offsetLeft(t,e=0){const i=e+t.offsetLeft;return t.offsetParent?offsetLeft(t.offsetParent,i):i}function scrollTop(t,e=0){const i=e+t.scrollTop;return t.offsetParent?scrollTop(t.offsetParent,i):i+window.scrollY}function scrollLeft(t,e=0){const i=e+t.scrollLeft;return t.offsetParent?scrollLeft(t.offsetParent,i):i+window.scrollX}class Slide{constructor(t,{align:e=["start"],ignoreSticky:i=!0,ignoreTransform:s=!1}={}){this.element=t,this.ignoreSticky=i,this.ignoreTransform=s,this.align=[e].flat(),this.rect={},this.wrapperResizeObserver=new ResizeObserver(this.onWrapperResize),this.wrapperResizeObserver.observe(document.body),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element)}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:t,left:e,width:i,height:s,element:o}){t=t??this.rect.top,e=e??this.rect.left,i=i??this.rect.width,s=s??this.rect.height,o=o??this.rect.element,t===this.rect.top&&e===this.rect.left&&i===this.rect.width&&s===this.rect.height&&o===this.rect.element||(this.rect.top=t,this.rect.y=t,this.rect.width=i,this.rect.height=s,this.rect.left=e,this.rect.x=e,this.rect.bottom=t+s,this.rect.right=e+i)}onWrapperResize=()=>{let t,e;if(this.ignoreSticky&&removeParentSticky(this.element),this.ignoreTransform)t=offsetTop(this.element),e=offsetLeft(this.element);else{const i=this.element.getBoundingClientRect();t=i.top+scrollTop(this.element),e=i.left+scrollLeft(this.element)}this.ignoreSticky&&addParentSticky(this.element),this.setRect({top:t,left:e})};onResize=([t])=>{const e=t.borderBoxSize[0].inlineSize,i=t.borderBoxSize[0].blockSize;this.setRect({width:e,height:i})}}return class Snap{constructor(t,{type:e="mandatory",lerp:i,easing:s,duration:o,velocityThreshold:n=1,onSnapStart:r,onSnapComplete:h}={}){this.onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight},this.onScroll=({scroll:t,limit:e,lastVelocity:i,velocity:s,isScrolling:o,isTouching:n,userData:r})=>{if(this.isStopped)return;const h=Math.abs(i)>Math.abs(s),l=Math.sign(i)!==Math.sign(s)&&0!==s;if(Math.abs(s){let s;e.forEach((e=>{"start"===e?s=t.top:"center"===e?s=t.top+t.height/2-this.viewport.height/2:"end"===e&&(s=t.top+t.height-this.viewport.height),void 0!==s&&i.push(Math.ceil(s))}))})),i=i.sort(((t,e)=>Math.abs(t)-Math.abs(e)));let s=i.findLast((e=>e<=t));void 0===s&&(s=i[0]);const o=Math.abs(t-s);let n=i.find((e=>e>=t));void 0===n&&(n=i[i.length-1]);const r=o{var t;null===(t=this.onSnapStart)||void 0===t||t.call(this,r)},onComplete:()=>{var t;null===(t=this.onSnapComplete)||void 0===t||t.call(this,r)}})}},this.lenis=t,this.options={type:e,lerp:i,easing:s,duration:o,velocityThreshold:n},this.type=e,this.elements=new Map,this.snaps=new Map,this.velocityThreshold=n,this.onSnapStart=r,this.onSnapComplete=h,this.viewport={width:window.innerWidth,height:window.innerHeight},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize),this.lenis.on("scroll",this.onScroll)}destroy(){this.lenis.off("scroll",this.onScroll),window.removeEventListener("resize",this.onWindowResize),this.elements.forEach((t=>t.destroy()))}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(t){const e=crypto.randomUUID();return this.snaps.set(e,t),()=>this.remove(e)}remove(t){this.snaps.delete(t)}addElement(t,e={}){const i=crypto.randomUUID();return this.elements.set(i,new Slide(t,e)),()=>this.removeElement(i)}removeElement(t){this.elements.delete(t)}}})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Lenis=e()}(this,(function(){"use strict";function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){var e;"true"===(null===(e=null==t?void 0:t.dataset)||void 0===e?void 0:e.sticky)&&(t.style.removeProperty("position"),delete t.dataset.sticky),t.offsetParent&&addParentSticky(t.offsetParent)}function offsetTop(t,e=0){const i=e+t.offsetTop;return t.offsetParent?offsetTop(t.offsetParent,i):i}function offsetLeft(t,e=0){const i=e+t.offsetLeft;return t.offsetParent?offsetLeft(t.offsetParent,i):i}function scrollTop(t,e=0){const i=e+t.scrollTop;return t.offsetParent?scrollTop(t.offsetParent,i):i+window.scrollY}function scrollLeft(t,e=0){const i=e+t.scrollLeft;return t.offsetParent?scrollLeft(t.offsetParent,i):i+window.scrollX}class SnapElement{constructor(t,{align:e=["start"],ignoreSticky:i=!0,ignoreTransform:s=!1}={}){this.rect={},this.onWrapperResize=()=>{let t,e;if(this.options.ignoreSticky&&removeParentSticky(this.element),this.options.ignoreTransform)t=offsetTop(this.element),e=offsetLeft(this.element);else{const i=this.element.getBoundingClientRect();t=i.top+scrollTop(this.element),e=i.left+scrollLeft(this.element)}this.options.ignoreSticky&&addParentSticky(this.element),this.setRect({top:t,left:e})},this.onResize=([t])=>{const e=t.borderBoxSize[0].inlineSize,i=t.borderBoxSize[0].blockSize;this.setRect({width:e,height:i})},this.element=t,this.options={align:e,ignoreSticky:i,ignoreTransform:s},this.align=[e].flat(),this.wrapperResizeObserver=new ResizeObserver(this.onWrapperResize),this.wrapperResizeObserver.observe(document.body),this.onWrapperResize(),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element),this.setRect({width:this.element.offsetWidth,height:this.element.offsetHeight})}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:t,left:e,width:i,height:s,element:o}={}){t=null!=t?t:this.rect.top,e=null!=e?e:this.rect.left,i=null!=i?i:this.rect.width,s=null!=s?s:this.rect.height,o=null!=o?o:this.rect.element,t===this.rect.top&&e===this.rect.left&&i===this.rect.width&&s===this.rect.height&&o===this.rect.element||(this.rect.top=t,this.rect.y=t,this.rect.width=i,this.rect.height=s,this.rect.left=e,this.rect.x=e,this.rect.bottom=t+s,this.rect.right=e+i)}}let t=0;function uid(){return t++}return class Snap{constructor(t,{type:e="mandatory",lerp:i,easing:s,duration:o,velocityThreshold:n=1,onSnapStart:r,onSnapComplete:h}={}){this.isStopped=!1,this.onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight},this.onScroll=({scroll:t,limit:e,lastVelocity:i,velocity:s,isScrolling:o,userData:n,isHorizontal:r})=>{if(this.isStopped)return;const h=Math.abs(i)>Math.abs(s),l=Math.sign(i)!==Math.sign(s)&&0!==s;if(Math.abs(s){let s;e.forEach((e=>{"start"===e?s=t.top:"center"===e?s=t.top+t.height/2-this.viewport.height/2:"end"===e&&(s=t.top+t.height-this.viewport.height),void 0!==s&&i.push(Math.ceil(s))}))})),i=i.sort(((t,e)=>Math.abs(t)-Math.abs(e)));let s=i.findLast((e=>e<=t));void 0===s&&(s=i[0]);const o=Math.abs(t-s);let n=i.find((e=>e>=t));void 0===n&&(n=i[i.length-1]);const r=o{var t,e;null===(e=(t=this.options).onSnapStart)||void 0===e||e.call(t,r)},onComplete:()=>{var t,e;null===(e=(t=this.options).onSnapComplete)||void 0===e||e.call(t,r)}})}},this.lenis=t,this.options={type:e,lerp:i,easing:s,duration:o,velocityThreshold:n,onSnapStart:r,onSnapComplete:h},this.elements=new Map,this.snaps=new Map,this.viewport={width:window.innerWidth,height:window.innerHeight},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize),this.lenis.on("scroll",this.onScroll)}destroy(){this.lenis.off("scroll",this.onScroll),window.removeEventListener("resize",this.onWindowResize),this.elements.forEach((t=>t.destroy()))}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(t){const e=uid();return this.snaps.set(e,t),()=>this.remove(e)}remove(t){this.snaps.delete(t)}addElement(t,e={}){const i=uid();return this.elements.set(i,new SnapElement(t,e)),()=>this.removeElement(i)}removeElement(t){this.elements.delete(t)}}})); //# sourceMappingURL=lenis-snap.min.js.map diff --git a/packages/snap/dist/lenis-snap.min.js.map b/packages/snap/dist/lenis-snap.min.js.map index d1e8bbc8..ec7adee9 100644 --- a/packages/snap/dist/lenis-snap.min.js.map +++ b/packages/snap/dist/lenis-snap.min.js.map @@ -1 +1 @@ -{"version":3,"file":"lenis-snap.min.js","sources":["../src/slide.js","../src/index.ts"],"sourcesContent":["function removeParentSticky(element) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction offsetTop(element, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport default class Slide {\r\n constructor(\r\n element,\r\n { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {}\r\n ) {\r\n this.element = element\r\n\r\n this.ignoreSticky = ignoreSticky\r\n this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n this.rect = {}\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({ top, left, width, height, element }) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.ignoreSticky) removeParentSticky(this.element)\r\n if (this.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","import Slide from './slide'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\nexport default class Snap {\r\n constructor(\r\n lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n } = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n }\r\n\r\n this.type = type\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.velocityThreshold = velocityThreshold\r\n this.onSnapStart = onSnapStart\r\n this.onSnapComplete = onSnapComplete\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((slide) => slide.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value) {\r\n const id = crypto.randomUUID()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element, options = {}) {\r\n const id = crypto.randomUUID()\r\n\r\n this.elements.set(id, new Slide(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n isTouching,\r\n userData,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.type === 'mandatory' ||\r\n (this.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","Slide","constructor","align","ignoreSticky","ignoreTransform","this","flat","rect","wrapperResizeObserver","ResizeObserver","onWrapperResize","observe","document","body","resizeObserver","onResize","destroy","disconnect","setRect","width","height","y","x","bottom","right","getBoundingClientRect","entry","borderBoxSize","inlineSize","blockSize","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","isTouching","userData","isStopped","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","options","onStart","_a","call","onComplete","Map","addEventListener","on","off","removeEventListener","slide","start","stop","add","value","id","crypto","randomUUID","set","remove","delete","addElement","removeElement"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"lenis-snap.min.js","sources":["../src/element.ts","../src/uid.ts","../src/index.ts"],"sourcesContent":["function removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n // this.ignoreSticky = ignoreSticky\r\n // this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n // TODO: assing rect immediately\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\r\n\r\nexport type UID = number\r\n\r\nexport function uid(): UID {\r\n return index++\r\n}\r\n","import Lenis from 'lenis'\r\nimport { SnapElement, SnapElementOptions } from './element'\r\nimport { uid, UID } from './uid'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\ntype Viewport = {\r\n width: number\r\n height: number\r\n}\r\n\r\nexport type SnapOptions = {\r\n type?: 'mandatory' | 'proximity'\r\n lerp?: number\r\n easing?: (t: number) => number\r\n duration?: number\r\n velocityThreshold?: number\r\n onSnapStart?: (t: number) => number\r\n onSnapComplete?: (t: number) => number\r\n}\r\n\r\nexport default class Snap {\r\n lenis: Lenis\r\n options: SnapOptions\r\n elements: Map\r\n snaps: Map\r\n viewport: Viewport\r\n isStopped: Boolean = false\r\n\r\n constructor(\r\n lenis: Lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {},\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((element) => element.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value: number) {\r\n const id = uid()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id: UID) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element: HTMLElement, options = {} as SnapElementOptions) {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id: UID) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n userData,\r\n isHorizontal,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.options.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit] as number[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.options.type === 'mandatory' ||\r\n (this.options.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","_a","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","SnapElement","constructor","align","ignoreSticky","ignoreTransform","this","rect","onWrapperResize","options","getBoundingClientRect","setRect","onResize","entry","width","borderBoxSize","inlineSize","height","blockSize","flat","wrapperResizeObserver","ResizeObserver","observe","document","body","resizeObserver","offsetWidth","offsetHeight","destroy","disconnect","y","x","bottom","right","index","uid","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","isStopped","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","userData","isHorizontal","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","onStart","_b","call","onComplete","Map","addEventListener","on","off","removeEventListener","start","stop","add","value","id","set","remove","delete","addElement","removeElement"],"mappings":"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"} \ No newline at end of file diff --git a/packages/snap/dist/lenis-snap.mjs b/packages/snap/dist/lenis-snap.mjs index bdc920d2..7a6b3851 100644 --- a/packages/snap/dist/lenis-snap.mjs +++ b/packages/snap/dist/lenis-snap.mjs @@ -1,2 +1,2 @@ -function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){"true"===t?.dataset?.sticky&&(t.style.removeProperty("position"),delete t.dataset.sticky),t.offsetParent&&addParentSticky(t.offsetParent)}function offsetTop(t,e=0){const i=e+t.offsetTop;return t.offsetParent?offsetTop(t.offsetParent,i):i}function offsetLeft(t,e=0){const i=e+t.offsetLeft;return t.offsetParent?offsetLeft(t.offsetParent,i):i}function scrollTop(t,e=0){const i=e+t.scrollTop;return t.offsetParent?scrollTop(t.offsetParent,i):i+window.scrollY}function scrollLeft(t,e=0){const i=e+t.scrollLeft;return t.offsetParent?scrollLeft(t.offsetParent,i):i+window.scrollX}class Slide{constructor(t,{align:e=["start"],ignoreSticky:i=!0,ignoreTransform:s=!1}={}){this.element=t,this.ignoreSticky=i,this.ignoreTransform=s,this.align=[e].flat(),this.rect={},this.wrapperResizeObserver=new ResizeObserver(this.onWrapperResize),this.wrapperResizeObserver.observe(document.body),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element)}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:t,left:e,width:i,height:s,element:o}){t=t??this.rect.top,e=e??this.rect.left,i=i??this.rect.width,s=s??this.rect.height,o=o??this.rect.element,t===this.rect.top&&e===this.rect.left&&i===this.rect.width&&s===this.rect.height&&o===this.rect.element||(this.rect.top=t,this.rect.y=t,this.rect.width=i,this.rect.height=s,this.rect.left=e,this.rect.x=e,this.rect.bottom=t+s,this.rect.right=e+i)}onWrapperResize=()=>{let t,e;if(this.ignoreSticky&&removeParentSticky(this.element),this.ignoreTransform)t=offsetTop(this.element),e=offsetLeft(this.element);else{const i=this.element.getBoundingClientRect();t=i.top+scrollTop(this.element),e=i.left+scrollLeft(this.element)}this.ignoreSticky&&addParentSticky(this.element),this.setRect({top:t,left:e})};onResize=([t])=>{const e=t.borderBoxSize[0].inlineSize,i=t.borderBoxSize[0].blockSize;this.setRect({width:e,height:i})}}class Snap{constructor(t,{type:e="mandatory",lerp:i,easing:s,duration:o,velocityThreshold:n=1,onSnapStart:r,onSnapComplete:h}={}){this.onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight},this.onScroll=({scroll:t,limit:e,lastVelocity:i,velocity:s,isScrolling:o,isTouching:n,userData:r})=>{if(this.isStopped)return;const h=Math.abs(i)>Math.abs(s),l=Math.sign(i)!==Math.sign(s)&&0!==s;if(Math.abs(s){let s;e.forEach((e=>{"start"===e?s=t.top:"center"===e?s=t.top+t.height/2-this.viewport.height/2:"end"===e&&(s=t.top+t.height-this.viewport.height),void 0!==s&&i.push(Math.ceil(s))}))})),i=i.sort(((t,e)=>Math.abs(t)-Math.abs(e)));let s=i.findLast((e=>e<=t));void 0===s&&(s=i[0]);const o=Math.abs(t-s);let n=i.find((e=>e>=t));void 0===n&&(n=i[i.length-1]);const r=o{var t;null===(t=this.onSnapStart)||void 0===t||t.call(this,r)},onComplete:()=>{var t;null===(t=this.onSnapComplete)||void 0===t||t.call(this,r)}})}},this.lenis=t,this.options={type:e,lerp:i,easing:s,duration:o,velocityThreshold:n},this.type=e,this.elements=new Map,this.snaps=new Map,this.velocityThreshold=n,this.onSnapStart=r,this.onSnapComplete=h,this.viewport={width:window.innerWidth,height:window.innerHeight},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize),this.lenis.on("scroll",this.onScroll)}destroy(){this.lenis.off("scroll",this.onScroll),window.removeEventListener("resize",this.onWindowResize),this.elements.forEach((t=>t.destroy()))}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(t){const e=crypto.randomUUID();return this.snaps.set(e,t),()=>this.remove(e)}remove(t){this.snaps.delete(t)}addElement(t,e={}){const i=crypto.randomUUID();return this.elements.set(i,new Slide(t,e)),()=>this.removeElement(i)}removeElement(t){this.elements.delete(t)}}export{Snap as default}; +function removeParentSticky(t){"sticky"===getComputedStyle(t).position&&(t.style.setProperty("position","static"),t.dataset.sticky="true"),t.offsetParent&&removeParentSticky(t.offsetParent)}function addParentSticky(t){var e;"true"===(null===(e=null==t?void 0:t.dataset)||void 0===e?void 0:e.sticky)&&(t.style.removeProperty("position"),delete t.dataset.sticky),t.offsetParent&&addParentSticky(t.offsetParent)}function offsetTop(t,e=0){const i=e+t.offsetTop;return t.offsetParent?offsetTop(t.offsetParent,i):i}function offsetLeft(t,e=0){const i=e+t.offsetLeft;return t.offsetParent?offsetLeft(t.offsetParent,i):i}function scrollTop(t,e=0){const i=e+t.scrollTop;return t.offsetParent?scrollTop(t.offsetParent,i):i+window.scrollY}function scrollLeft(t,e=0){const i=e+t.scrollLeft;return t.offsetParent?scrollLeft(t.offsetParent,i):i+window.scrollX}class SnapElement{constructor(t,{align:e=["start"],ignoreSticky:i=!0,ignoreTransform:s=!1}={}){this.rect={},this.onWrapperResize=()=>{let t,e;if(this.options.ignoreSticky&&removeParentSticky(this.element),this.options.ignoreTransform)t=offsetTop(this.element),e=offsetLeft(this.element);else{const i=this.element.getBoundingClientRect();t=i.top+scrollTop(this.element),e=i.left+scrollLeft(this.element)}this.options.ignoreSticky&&addParentSticky(this.element),this.setRect({top:t,left:e})},this.onResize=([t])=>{const e=t.borderBoxSize[0].inlineSize,i=t.borderBoxSize[0].blockSize;this.setRect({width:e,height:i})},this.element=t,this.options={align:e,ignoreSticky:i,ignoreTransform:s},this.align=[e].flat(),this.wrapperResizeObserver=new ResizeObserver(this.onWrapperResize),this.wrapperResizeObserver.observe(document.body),this.onWrapperResize(),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element),this.setRect({width:this.element.offsetWidth,height:this.element.offsetHeight})}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:t,left:e,width:i,height:s,element:o}={}){t=null!=t?t:this.rect.top,e=null!=e?e:this.rect.left,i=null!=i?i:this.rect.width,s=null!=s?s:this.rect.height,o=null!=o?o:this.rect.element,t===this.rect.top&&e===this.rect.left&&i===this.rect.width&&s===this.rect.height&&o===this.rect.element||(this.rect.top=t,this.rect.y=t,this.rect.width=i,this.rect.height=s,this.rect.left=e,this.rect.x=e,this.rect.bottom=t+s,this.rect.right=e+i)}}let t=0;function uid(){return t++}class Snap{constructor(t,{type:e="mandatory",lerp:i,easing:s,duration:o,velocityThreshold:n=1,onSnapStart:r,onSnapComplete:h}={}){this.isStopped=!1,this.onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight},this.onScroll=({scroll:t,limit:e,lastVelocity:i,velocity:s,isScrolling:o,userData:n,isHorizontal:r})=>{if(this.isStopped)return;const h=Math.abs(i)>Math.abs(s),l=Math.sign(i)!==Math.sign(s)&&0!==s;if(Math.abs(s){let s;e.forEach((e=>{"start"===e?s=t.top:"center"===e?s=t.top+t.height/2-this.viewport.height/2:"end"===e&&(s=t.top+t.height-this.viewport.height),void 0!==s&&i.push(Math.ceil(s))}))})),i=i.sort(((t,e)=>Math.abs(t)-Math.abs(e)));let s=i.findLast((e=>e<=t));void 0===s&&(s=i[0]);const o=Math.abs(t-s);let n=i.find((e=>e>=t));void 0===n&&(n=i[i.length-1]);const r=o{var t,e;null===(e=(t=this.options).onSnapStart)||void 0===e||e.call(t,r)},onComplete:()=>{var t,e;null===(e=(t=this.options).onSnapComplete)||void 0===e||e.call(t,r)}})}},this.lenis=t,this.options={type:e,lerp:i,easing:s,duration:o,velocityThreshold:n,onSnapStart:r,onSnapComplete:h},this.elements=new Map,this.snaps=new Map,this.viewport={width:window.innerWidth,height:window.innerHeight},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize),this.lenis.on("scroll",this.onScroll)}destroy(){this.lenis.off("scroll",this.onScroll),window.removeEventListener("resize",this.onWindowResize),this.elements.forEach((t=>t.destroy()))}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(t){const e=uid();return this.snaps.set(e,t),()=>this.remove(e)}remove(t){this.snaps.delete(t)}addElement(t,e={}){const i=uid();return this.elements.set(i,new SnapElement(t,e)),()=>this.removeElement(i)}removeElement(t){this.elements.delete(t)}}export{Snap as default}; //# sourceMappingURL=lenis-snap.mjs.map diff --git a/packages/snap/dist/lenis-snap.mjs.map b/packages/snap/dist/lenis-snap.mjs.map index 94325811..af8dbef6 100644 --- a/packages/snap/dist/lenis-snap.mjs.map +++ b/packages/snap/dist/lenis-snap.mjs.map @@ -1 +1 @@ -{"version":3,"file":"lenis-snap.mjs","sources":["../src/slide.js","../src/index.ts"],"sourcesContent":["function removeParentSticky(element) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent)\r\n }\r\n}\r\n\r\nfunction offsetTop(element, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport default class Slide {\r\n constructor(\r\n element,\r\n { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {}\r\n ) {\r\n this.element = element\r\n\r\n this.ignoreSticky = ignoreSticky\r\n this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n this.rect = {}\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({ top, left, width, height, element }) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.ignoreSticky) removeParentSticky(this.element)\r\n if (this.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","import Slide from './slide'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\nexport default class Snap {\r\n constructor(\r\n lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n } = {}\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n }\r\n\r\n this.type = type\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.velocityThreshold = velocityThreshold\r\n this.onSnapStart = onSnapStart\r\n this.onSnapComplete = onSnapComplete\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((slide) => slide.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value) {\r\n const id = crypto.randomUUID()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element, options = {}) {\r\n const id = crypto.randomUUID()\r\n\r\n this.elements.set(id, new Slide(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n isTouching,\r\n userData,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.type === 'mandatory' ||\r\n (this.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","Slide","constructor","align","ignoreSticky","ignoreTransform","this","flat","rect","wrapperResizeObserver","ResizeObserver","onWrapperResize","observe","document","body","resizeObserver","onResize","destroy","disconnect","setRect","width","height","y","x","bottom","right","getBoundingClientRect","entry","borderBoxSize","inlineSize","blockSize","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","isTouching","userData","isStopped","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","options","onStart","_a","call","onComplete","Map","addEventListener","on","off","removeEventListener","slide","start","stop","add","value","id","crypto","randomUUID","set","remove","delete","addElement","removeElement"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"lenis-snap.mjs","sources":["../src/element.ts","../src/uid.ts","../src/index.ts"],"sourcesContent":["function removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n // this.ignoreSticky = ignoreSticky\r\n // this.ignoreTransform = ignoreTransform\r\n\r\n this.align = [align].flat()\r\n\r\n // TODO: assing rect immediately\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\r\n\r\nexport type UID = number\r\n\r\nexport function uid(): UID {\r\n return index++\r\n}\r\n","import Lenis from 'lenis'\r\nimport { SnapElement, SnapElementOptions } from './element'\r\nimport { uid, UID } from './uid'\r\n\r\n// TODO:\r\n// - horizontal\r\n// - fix trackpad snapping too soon due to velocity (fuck Apple)\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - fix touch scroll, do not snap when not released\r\n\r\ntype Viewport = {\r\n width: number\r\n height: number\r\n}\r\n\r\nexport type SnapOptions = {\r\n type?: 'mandatory' | 'proximity'\r\n lerp?: number\r\n easing?: (t: number) => number\r\n duration?: number\r\n velocityThreshold?: number\r\n onSnapStart?: (t: number) => number\r\n onSnapComplete?: (t: number) => number\r\n}\r\n\r\nexport default class Snap {\r\n lenis: Lenis\r\n options: SnapOptions\r\n elements: Map\r\n snaps: Map\r\n viewport: Viewport\r\n isStopped: Boolean = false\r\n\r\n constructor(\r\n lenis: Lenis,\r\n {\r\n type = 'mandatory',\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold = 1,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {},\r\n ) {\r\n this.lenis = lenis\r\n\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n velocityThreshold,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.elements = new Map()\r\n this.snaps = new Map()\r\n\r\n this.viewport = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize)\r\n\r\n this.lenis.on('scroll', this.onScroll)\r\n }\r\n\r\n // debug() {\r\n // const element = document.createElement('div')\r\n // element.style.cssText = `\r\n // position: fixed;\r\n // background: red;\r\n // border-bottom: 1px solid red;\r\n // left: 0;\r\n // right: 0;\r\n // top: 0;\r\n // z-index: 9999;\r\n // `\r\n // document.body.appendChild(element)\r\n // }\r\n\r\n destroy() {\r\n this.lenis.off('scroll', this.onScroll)\r\n window.removeEventListener('resize', this.onWindowResize)\r\n this.elements.forEach((element) => element.destroy())\r\n }\r\n\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n add(value: number) {\r\n const id = uid()\r\n\r\n this.snaps.set(id, value)\r\n\r\n return () => this.remove(id)\r\n }\r\n\r\n remove(id: UID) {\r\n this.snaps.delete(id)\r\n }\r\n\r\n addElement(element: HTMLElement, options = {} as SnapElementOptions) {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.removeElement(id)\r\n }\r\n\r\n removeElement(id: UID) {\r\n this.elements.delete(id)\r\n }\r\n\r\n onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n onScroll = ({\r\n scroll,\r\n limit,\r\n lastVelocity,\r\n velocity,\r\n isScrolling,\r\n userData,\r\n isHorizontal,\r\n }) => {\r\n if (this.isStopped) return\r\n // console.log(scroll, velocity, type)\r\n\r\n // return\r\n const isDecelerating = Math.abs(lastVelocity) > Math.abs(velocity)\r\n const isTurningBack =\r\n Math.sign(lastVelocity) !== Math.sign(velocity) && velocity !== 0\r\n\r\n // console.log({ lastVelocity, velocity, isTurningBack, isDecelerating })\r\n\r\n // console.log('onScroll')\r\n\r\n if (\r\n Math.abs(velocity) < this.options.velocityThreshold &&\r\n // !isTouching &&\r\n isDecelerating &&\r\n !isTurningBack &&\r\n userData?.initiator !== 'snap'\r\n ) {\r\n scroll = Math.ceil(scroll)\r\n\r\n let snaps = [0, ...this.snaps.values(), limit] as number[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let snap\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n snap = rect.top\r\n } else if (align === 'center') {\r\n snap = rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n snap = rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (snap !== undefined) {\r\n snaps.push(Math.ceil(snap))\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a) - Math.abs(b))\r\n\r\n let prevSnap = snaps.findLast((snap) => snap <= scroll)\r\n if (prevSnap === undefined) prevSnap = snaps[0]\r\n const distanceToPrevSnap = Math.abs(scroll - prevSnap)\r\n\r\n let nextSnap = snaps.find((snap) => snap >= scroll)\r\n if (nextSnap === undefined) nextSnap = snaps[snaps.length - 1]\r\n const distanceToNextSnap = Math.abs(scroll - nextSnap)\r\n\r\n const snap = distanceToPrevSnap < distanceToNextSnap ? prevSnap : nextSnap\r\n\r\n const distance = Math.abs(scroll - snap)\r\n\r\n if (\r\n this.options.type === 'mandatory' ||\r\n (this.options.type === 'proximity' && distance <= this.viewport.height)\r\n ) {\r\n // this.__isScrolling = true\r\n // this.onSnapStart?.(snap)\r\n\r\n // console.log('scroll to')\r\n\r\n this.lenis.scrollTo(snap, {\r\n lerp: this.options.lerp,\r\n easing: this.options.easing,\r\n duration: this.options.duration,\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.(snap)\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.(snap)\r\n },\r\n })\r\n }\r\n\r\n // console.timeEnd('scroll')\r\n }\r\n }\r\n}\r\n"],"names":["removeParentSticky","element","getComputedStyle","position","style","setProperty","dataset","sticky","offsetParent","addParentSticky","_a","removeProperty","offsetTop","accumulator","top","offsetLeft","left","scrollTop","window","scrollY","scrollLeft","scrollX","SnapElement","constructor","align","ignoreSticky","ignoreTransform","this","rect","onWrapperResize","options","getBoundingClientRect","setRect","onResize","entry","width","borderBoxSize","inlineSize","height","blockSize","flat","wrapperResizeObserver","ResizeObserver","observe","document","body","resizeObserver","offsetWidth","offsetHeight","destroy","disconnect","y","x","bottom","right","index","uid","Snap","lenis","type","lerp","easing","duration","velocityThreshold","onSnapStart","onSnapComplete","isStopped","onWindowResize","viewport","innerWidth","innerHeight","onScroll","scroll","limit","lastVelocity","velocity","isScrolling","userData","isHorizontal","isDecelerating","Math","abs","isTurningBack","sign","initiator","ceil","snaps","values","elements","forEach","snap","undefined","push","sort","a","b","prevSnap","findLast","distanceToPrevSnap","nextSnap","find","length","distance","scrollTo","onStart","_b","call","onComplete","Map","addEventListener","on","off","removeEventListener","start","stop","add","value","id","set","remove","delete","addElement","removeElement"],"mappings":"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"} \ No newline at end of file diff --git a/packages/snap/package.json b/packages/snap/package.json index 5aa8610c..24f5ffff 100644 --- a/packages/snap/package.json +++ b/packages/snap/package.json @@ -6,5 +6,8 @@ "dev": "npm-run-all --parallel watch playground", "watch": "rollup --bundleConfigAsCjs -c -w", "playground": "npm run dev --prefix ./playground" + }, + "dependencies": { + "lenis": "workspace:lenis*" } } diff --git a/packages/snap/playground/main.js b/packages/snap/playground/main.js index 9f5cc32e..aa8486c6 100644 --- a/packages/snap/playground/main.js +++ b/packages/snap/playground/main.js @@ -1,7 +1,6 @@ // import { LoremIpsum } from 'lorem-ipsum' import Lenis from '../../core/src/index.ts' import Snap from '../dist/lenis-snap.mjs' -// import Snap from '../dist/lenis-snap.mjs' // import Snap from '../src/index.ts' import './style.css' @@ -15,6 +14,8 @@ if (true) { }) window.lenis = lenis + const i = 0 + const snap = new Snap(lenis, { type: 'mandatory', // 'mandatory', 'proximity' velocityThreshold: 1, @@ -32,7 +33,7 @@ if (true) { const section2 = document.querySelector('.section-2') const section3 = document.querySelector('.section-3') - // snap.add(500) + snap.add(500) snap.addElement(section2, { align: ['start', 'end'], // 'start', 'center', 'end' diff --git a/packages/snap/src/slide.js b/packages/snap/src/element.ts similarity index 53% rename from packages/snap/src/slide.js rename to packages/snap/src/element.ts index 2b7bf78b..807207e6 100644 --- a/packages/snap/src/slide.js +++ b/packages/snap/src/element.ts @@ -1,4 +1,4 @@ -function removeParentSticky(element) { +function removeParentSticky(element: HTMLElement) { const position = getComputedStyle(element).position const isSticky = position === 'sticky' @@ -9,72 +9,108 @@ function removeParentSticky(element) { } if (element.offsetParent) { - removeParentSticky(element.offsetParent) + removeParentSticky(element.offsetParent as HTMLElement) } } -function addParentSticky(element) { +function addParentSticky(element: HTMLElement) { if (element?.dataset?.sticky === 'true') { element.style.removeProperty('position') delete element.dataset.sticky } if (element.offsetParent) { - addParentSticky(element.offsetParent) + addParentSticky(element.offsetParent as HTMLElement) } } -function offsetTop(element, accumulator = 0) { +function offsetTop(element: HTMLElement, accumulator = 0) { const top = accumulator + element.offsetTop if (element.offsetParent) { - return offsetTop(element.offsetParent, top) + return offsetTop(element.offsetParent as HTMLElement, top) } return top } -function offsetLeft(element, accumulator = 0) { +function offsetLeft(element: HTMLElement, accumulator = 0) { const left = accumulator + element.offsetLeft if (element.offsetParent) { - return offsetLeft(element.offsetParent, left) + return offsetLeft(element.offsetParent as HTMLElement, left) } return left } -function scrollTop(element, accumulator = 0) { +function scrollTop(element: HTMLElement, accumulator = 0) { const top = accumulator + element.scrollTop if (element.offsetParent) { - return scrollTop(element.offsetParent, top) + return scrollTop(element.offsetParent as HTMLElement, top) } return top + window.scrollY } -function scrollLeft(element, accumulator = 0) { +function scrollLeft(element: HTMLElement, accumulator = 0) { const left = accumulator + element.scrollLeft if (element.offsetParent) { - return scrollLeft(element.offsetParent, left) + return scrollLeft(element.offsetParent as HTMLElement, left) } return left + window.scrollX } -export default class Slide { +export type SnapElementOptions = { + align?: string[] + ignoreSticky?: boolean + ignoreTransform?: boolean +} + +type Rect = { + top: number + left: number + width: number + height: number + x: number + y: number + bottom: number + right: number + element: HTMLElement +} + +export class SnapElement { + element: HTMLElement + options: SnapElementOptions + // @ts-ignore + rect: Rect = {} + wrapperResizeObserver: ResizeObserver + resizeObserver: ResizeObserver + constructor( - element, - { align = ['start'], ignoreSticky = true, ignoreTransform = false } = {} + element: HTMLElement, + { + align = ['start'], + ignoreSticky = true, + ignoreTransform = false, + }: SnapElementOptions = {} ) { this.element = element - this.ignoreSticky = ignoreSticky - this.ignoreTransform = ignoreTransform + this.options = { align, ignoreSticky, ignoreTransform } + + // this.ignoreSticky = ignoreSticky + // this.ignoreTransform = ignoreTransform this.align = [align].flat() - this.rect = {} + // TODO: assing rect immediately this.wrapperResizeObserver = new ResizeObserver(this.onWrapperResize) this.wrapperResizeObserver.observe(document.body) + this.onWrapperResize() this.resizeObserver = new ResizeObserver(this.onResize) this.resizeObserver.observe(this.element) + this.setRect({ + width: this.element.offsetWidth, + height: this.element.offsetHeight, + }) } destroy() { @@ -82,7 +118,19 @@ export default class Slide { this.resizeObserver.disconnect() } - setRect({ top, left, width, height, element }) { + setRect({ + top, + left, + width, + height, + element, + }: { + top?: number + left?: number + width?: number + height?: number + element?: HTMLElement + } = {}) { top = top ?? this.rect.top left = left ?? this.rect.left width = width ?? this.rect.width @@ -111,8 +159,8 @@ export default class Slide { onWrapperResize = () => { let top, left - if (this.ignoreSticky) removeParentSticky(this.element) - if (this.ignoreTransform) { + if (this.options.ignoreSticky) removeParentSticky(this.element) + if (this.options.ignoreTransform) { top = offsetTop(this.element) left = offsetLeft(this.element) } else { @@ -120,12 +168,12 @@ export default class Slide { top = rect.top + scrollTop(this.element) left = rect.left + scrollLeft(this.element) } - if (this.ignoreSticky) addParentSticky(this.element) + if (this.options.ignoreSticky) addParentSticky(this.element) this.setRect({ top, left }) } - onResize = ([entry]) => { + onResize = ([entry]: ResizeObserverEntry[]) => { const width = entry.borderBoxSize[0].inlineSize const height = entry.borderBoxSize[0].blockSize diff --git a/packages/snap/src/index.ts b/packages/snap/src/index.ts index 313f833a..de6046e7 100644 --- a/packages/snap/src/index.ts +++ b/packages/snap/src/index.ts @@ -1,4 +1,6 @@ -import Slide from './slide' +import Lenis from 'lenis' +import { SnapElement, SnapElementOptions } from './element' +import { uid, UID } from './uid' // TODO: // - horizontal @@ -6,9 +8,31 @@ import Slide from './slide' // - fix wheel scrolling after limits (see console scroll to) // - fix touch scroll, do not snap when not released +type Viewport = { + width: number + height: number +} + +export type SnapOptions = { + type?: 'mandatory' | 'proximity' + lerp?: number + easing?: (t: number) => number + duration?: number + velocityThreshold?: number + onSnapStart?: (t: number) => number + onSnapComplete?: (t: number) => number +} + export default class Snap { + lenis: Lenis + options: SnapOptions + elements: Map + snaps: Map + viewport: Viewport + isStopped: Boolean = false + constructor( - lenis, + lenis: Lenis, { type = 'mandatory', lerp, @@ -17,7 +41,7 @@ export default class Snap { velocityThreshold = 1, onSnapStart, onSnapComplete, - } = {} + }: SnapOptions = {}, ) { this.lenis = lenis @@ -27,16 +51,13 @@ export default class Snap { easing, duration, velocityThreshold, + onSnapStart, + onSnapComplete, } - this.type = type this.elements = new Map() this.snaps = new Map() - this.velocityThreshold = velocityThreshold - this.onSnapStart = onSnapStart - this.onSnapComplete = onSnapComplete - this.viewport = { width: window.innerWidth, height: window.innerHeight, @@ -64,7 +85,7 @@ export default class Snap { destroy() { this.lenis.off('scroll', this.onScroll) window.removeEventListener('resize', this.onWindowResize) - this.elements.forEach((slide) => slide.destroy()) + this.elements.forEach((element) => element.destroy()) } start() { @@ -75,27 +96,27 @@ export default class Snap { this.isStopped = true } - add(value) { - const id = crypto.randomUUID() + add(value: number) { + const id = uid() this.snaps.set(id, value) return () => this.remove(id) } - remove(id) { + remove(id: UID) { this.snaps.delete(id) } - addElement(element, options = {}) { - const id = crypto.randomUUID() + addElement(element: HTMLElement, options = {} as SnapElementOptions) { + const id = uid() - this.elements.set(id, new Slide(element, options)) + this.elements.set(id, new SnapElement(element, options)) return () => this.removeElement(id) } - removeElement(id) { + removeElement(id: UID) { this.elements.delete(id) } @@ -110,8 +131,8 @@ export default class Snap { lastVelocity, velocity, isScrolling, - isTouching, userData, + isHorizontal, }) => { if (this.isStopped) return // console.log(scroll, velocity, type) @@ -126,7 +147,7 @@ export default class Snap { // console.log('onScroll') if ( - Math.abs(velocity) < this.velocityThreshold && + Math.abs(velocity) < this.options.velocityThreshold && // !isTouching && isDecelerating && !isTurningBack && @@ -134,10 +155,10 @@ export default class Snap { ) { scroll = Math.ceil(scroll) - let snaps = [0, ...this.snaps.values(), limit] + let snaps = [0, ...this.snaps.values(), limit] as number[] this.elements.forEach(({ rect, align }) => { - let snap + let snap: number | undefined align.forEach((align) => { if (align === 'start') { @@ -169,8 +190,8 @@ export default class Snap { const distance = Math.abs(scroll - snap) if ( - this.type === 'mandatory' || - (this.type === 'proximity' && distance <= this.viewport.height) + this.options.type === 'mandatory' || + (this.options.type === 'proximity' && distance <= this.viewport.height) ) { // this.__isScrolling = true // this.onSnapStart?.(snap) @@ -183,10 +204,10 @@ export default class Snap { duration: this.options.duration, userData: { initiator: 'snap' }, onStart: () => { - this.onSnapStart?.(snap) + this.options.onSnapStart?.(snap) }, onComplete: () => { - this.onSnapComplete?.(snap) + this.options.onSnapComplete?.(snap) }, }) } diff --git a/packages/snap/src/uid.ts b/packages/snap/src/uid.ts new file mode 100644 index 00000000..74dc7964 --- /dev/null +++ b/packages/snap/src/uid.ts @@ -0,0 +1,7 @@ +let index = 0 + +export type UID = number + +export function uid(): UID { + return index++ +} diff --git a/packages/snap/tsconfig.json b/packages/snap/tsconfig.json index 5cddba6d..1635d543 100644 --- a/packages/snap/tsconfig.json +++ b/packages/snap/tsconfig.json @@ -2,6 +2,15 @@ "compilerOptions": { "outDir": "./dist", "declaration": true, - "target": "es2015" - } + "target": "es2015", + "allowJs": true, + "checkJs": true, + "lib": ["esnext", "dom"], + "moduleResolution": "node", + "module": "esnext", + "esModuleInterop": true, + "noUnusedParameters": true, + "strict": true + }, + "include": ["src"] }