lenis 1.1.19-dev.6 → 1.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -40
- package/dist/lenis-react.mjs +1 -1
- package/dist/lenis-react.mjs.map +1 -1
- package/dist/lenis-vue.d.ts +0 -9
- package/dist/lenis-vue.mjs +47 -42
- package/dist/lenis-vue.mjs.map +1 -1
- package/dist/lenis.js +8 -6
- package/dist/lenis.js.map +1 -1
- package/dist/lenis.min.js +1 -1
- package/dist/lenis.min.js.map +1 -1
- package/dist/lenis.mjs +8 -6
- package/dist/lenis.mjs.map +1 -1
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -50,7 +50,7 @@ import Lenis from 'lenis'
|
|
|
50
50
|
using scripts:
|
|
51
51
|
|
|
52
52
|
```html
|
|
53
|
-
<script src="https://unpkg.com/lenis@1.1.
|
|
53
|
+
<script src="https://unpkg.com/lenis@1.1.19/dist/lenis.min.js"></script>
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
|
|
@@ -97,7 +97,7 @@ import 'lenis/dist/lenis.css'
|
|
|
97
97
|
or link the CSS file:
|
|
98
98
|
|
|
99
99
|
```html
|
|
100
|
-
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.
|
|
100
|
+
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.19/dist/lenis.css">
|
|
101
101
|
```
|
|
102
102
|
|
|
103
103
|
or add it manually:
|
|
@@ -134,29 +134,29 @@ gsap.ticker.lagSmoothing(0);
|
|
|
134
134
|
|
|
135
135
|
## Instance settings
|
|
136
136
|
|
|
137
|
-
| Option | Type
|
|
138
|
-
|
|
139
|
-
| `wrapper` | `HTMLElement, Window`
|
|
140
|
-
| `content` | `HTMLElement`
|
|
141
|
-
| `eventsTarget` | `HTMLElement, Window`
|
|
142
|
-
| `smoothWheel` | `boolean`
|
|
143
|
-
| `lerp` | `number`
|
|
144
|
-
| `duration` | `number`
|
|
145
|
-
| `easing` | `function`
|
|
146
|
-
| `orientation` | `string`
|
|
147
|
-
| `gestureOrientation` | `string`
|
|
148
|
-
| `syncTouch` | `boolean`
|
|
149
|
-
| `syncTouchLerp` | `number`
|
|
150
|
-
| `touchInertiaMultiplier` | `number`
|
|
151
|
-
| `wheelMultiplier` | `number`
|
|
152
|
-
| `touchMultiplier` | `number`
|
|
153
|
-
| `infinite` | `boolean`
|
|
154
|
-
| `autoResize` | `boolean`
|
|
155
|
-
| `prevent` | `function`
|
|
156
|
-
| `virtualScroll` | `function`
|
|
157
|
-
| `overscroll` | `boolean`
|
|
158
|
-
| `autoRaf` | `boolean`
|
|
159
|
-
|
|
137
|
+
| Option | Type | Default | Description |
|
|
138
|
+
|--------------------------|-----------------------------|----------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
139
|
+
| `wrapper` | `HTMLElement, Window` | `window` | The element that will be used as the scroll container |
|
|
140
|
+
| `content` | `HTMLElement` | `document.documentElement` | The element that contains the content that will be scrolled, usually `wrapper`'s direct child |
|
|
141
|
+
| `eventsTarget` | `HTMLElement, Window` | `wrapper` | The element that will listen to `wheel` and `touch` events |
|
|
142
|
+
| `smoothWheel` | `boolean` | `true` | Smooth the scroll initiated by `wheel` events |
|
|
143
|
+
| `lerp` | `number` | `0.1` | Linear interpolation (lerp) intensity (between 0 and 1) |
|
|
144
|
+
| `duration` | `number` | `1.2` | The duration of scroll animation (in seconds). Useless if lerp defined |
|
|
145
|
+
| `easing` | `function` | `(t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))` | The easing function to use for the scroll animation, our default is custom but you can pick one from [Easings.net](https://easings.net/en). Useless if lerp defined |
|
|
146
|
+
| `orientation` | `string` | `vertical` | The orientation of the scrolling. Can be `vertical` or `horizontal` |
|
|
147
|
+
| `gestureOrientation` | `string` | `vertical` | The orientation of the gestures. Can be `vertical`, `horizontal` or `both` |
|
|
148
|
+
| `syncTouch` | `boolean` | `false` | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16) |
|
|
149
|
+
| `syncTouchLerp` | `number` | `0.075` | Lerp applied during `syncTouch` inertia |
|
|
150
|
+
| `touchInertiaMultiplier` | `number` | `35` | Manage the strength of syncTouch inertia |
|
|
151
|
+
| `wheelMultiplier` | `number` | `1` | The multiplier to use for mouse wheel events |
|
|
152
|
+
| `touchMultiplier` | `number` | `1` | The multiplier to use for touch events |
|
|
153
|
+
| `infinite` | `boolean` | `false` | Enable infinite scrolling! `syncTouch: true` is required on touch devices. ([See example](https://codepen.io/ClementRoche/pen/OJqBLod)) |
|
|
154
|
+
| `autoResize` | `boolean` | `true` | Resize instance automatically based on `ResizeObserver`. If `false` you must resize manually using `.resize()` |
|
|
155
|
+
| `prevent` | `function` | `undefined` | Manually prevent scroll to be smoothed based on elements traversed by events. If `true` is returned, it will prevent the scroll to be smoothed. Example: `(node) => node.classList.contains('cookie-modal')` |
|
|
156
|
+
| `virtualScroll` | `function` | `undefined` | Manually modify the events before they get consumed. If `false` is returned, the scroll will not be smoothed. Examples: `(e) => { e.deltaY /= 2 }` (to slow down vertical scroll) or `({ event }) => !event.shiftKey` (to prevent scroll to be smoothed if shift key is pressed) |
|
|
157
|
+
| `overscroll` | `boolean` | `true` | Wether or not to enable overscroll on a nested Lenis instance, similar to CSS overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) |
|
|
158
|
+
| `autoRaf` | `boolean` | `false` | Wether or not to automatically run `requestAnimationFrame` loop |
|
|
159
|
+
| `anchors` | `boolean | ScrollToOptions` | `false` | Wether or not to enable anchor links. If `true` is passed, it will enable anchor links with default options. If `ScrollToOptions` is passed, it will enable anchor links with the given options. |
|
|
160
160
|
<br/>
|
|
161
161
|
|
|
162
162
|
<!-- `target`: goal to reach
|
|
@@ -322,22 +322,8 @@ new Lenis({
|
|
|
322
322
|
- [Daylight Computer](https://daylightcomputer.com/) by [Basement Studio](https://basement.studio/)
|
|
323
323
|
- [Lifeworld by Olafur Eliasson](https://lifeworld.wetransfer.com/) by Nicolas Garnier, Simon Riisnæs Dagfinrud, Lumír Španihel, Everton Guilherme, Diana Alcausin, Cristiana Sousa
|
|
324
324
|
|
|
325
|
-
|
|
326
|
-
<br/>
|
|
327
|
-
|
|
328
|
-
## Authors
|
|
329
|
-
|
|
330
|
-
This set of hooks is curated and maintained by the darkroom.engineering team:
|
|
331
|
-
|
|
332
|
-
- Clément Roche ([@clementroche\_](https://twitter.com/clementroche_)) – [darkroom.engineering](https://darkroom.engineering)
|
|
333
|
-
- Guido Fier ([@uido15](https://twitter.com/uido15)) – [darkroom.engineering](https://darkroom.engineering)
|
|
334
|
-
- Leandro Soengas ([@lsoengas](https://twitter.com/lsoengas)) - [darkroom.engineering](https://darkroom.engineering)
|
|
335
|
-
- Fermin Fernandez ([@Fermin_FerBridd](https://twitter.com/Fermin_FerBridd)) - [darkroom.engineering](https://darkroom.engineering)
|
|
336
|
-
- Felix Mayr ([@feledori](https://twitter.com/feledori)) - [darkroom.engineering](https://darkroom.engineering)
|
|
337
|
-
- Franco Arza ([@arzafran](https://twitter.com/arzafran)) - [darkroom.engineering](https://darkroom.engineering)
|
|
338
|
-
|
|
339
325
|
<br/>
|
|
340
326
|
|
|
341
327
|
## License
|
|
342
328
|
|
|
343
|
-
|
|
329
|
+
MIT © [darkroom.engineering](https://github.com/darkroomengineering)
|
package/dist/lenis-react.mjs
CHANGED
package/dist/lenis-react.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/react/src/provider.tsx","../packages/react/src/store.ts","../packages/react/src/use-lenis.ts"],"sourcesContent":["import Lenis, { type ScrollCallback } from 'lenis'\r\nimport {\r\n createContext,\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from 'react'\r\nimport { Store } from './store'\r\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\r\n\r\nexport const LenisContext = createContext<LenisContextValue | null>(null)\r\n\r\n/**\r\n * The root store for the lenis context\r\n *\r\n * This store serves as a fallback for the context if it is not available\r\n * and allows us to use the global lenis instance above a provider\r\n */\r\nexport const rootLenisContextStore = new Store<LenisContextValue | null>(null)\r\n\r\n/**\r\n * React component to setup a Lenis instance\r\n */\r\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\r\n (\r\n {\r\n children,\r\n root = false,\r\n options = {},\r\n className,\r\n autoRaf = true,\r\n props,\r\n }: LenisProps,\r\n ref\r\n ) => {\r\n const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n const contentRef = useRef<HTMLDivElement | null>(null)\r\n\r\n const [lenis, setLenis] = useState<Lenis | undefined>(undefined)\r\n\r\n // Setup ref\r\n useImperativeHandle(\r\n ref,\r\n () => ({\r\n wrapper: wrapperRef.current,\r\n content: contentRef.current,\r\n lenis,\r\n }),\r\n [lenis]\r\n )\r\n\r\n // Setup lenis instance\r\n useEffect(() => {\r\n const lenis = new Lenis({\r\n ...options,\r\n ...(!root && {\r\n wrapper: wrapperRef.current!,\r\n content: contentRef.current!,\r\n }),\r\n autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)\r\n })\r\n\r\n setLenis(lenis)\r\n\r\n return () => {\r\n lenis.destroy()\r\n setLenis(undefined)\r\n }\r\n }, [root, JSON.stringify(options)])\r\n\r\n // Handle callbacks\r\n const callbacksRefs = useRef<\r\n {\r\n callback: ScrollCallback\r\n priority: number\r\n }[]\r\n >([])\r\n\r\n const addCallback: LenisContextValue['addCallback'] = useCallback(\r\n (callback, priority) => {\r\n callbacksRefs.current.push({ callback, priority })\r\n callbacksRefs.current.sort((a, b) => a.priority - b.priority)\r\n },\r\n []\r\n )\r\n\r\n const removeCallback: LenisContextValue['removeCallback'] = useCallback(\r\n (callback) => {\r\n callbacksRefs.current = callbacksRefs.current.filter(\r\n (cb) => cb.callback !== callback\r\n )\r\n },\r\n []\r\n )\r\n\r\n // This makes sure to set the global context if the root is true\r\n useEffect(() => {\r\n if (root && lenis) {\r\n rootLenisContextStore.set({ lenis, addCallback, removeCallback })\r\n\r\n return () => rootLenisContextStore.set(null)\r\n }\r\n }, [root, lenis, addCallback, removeCallback])\r\n\r\n // Setup callback listeners\r\n useEffect(() => {\r\n if (!lenis) return\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacksRefs.current.length; i++) {\r\n callbacksRefs.current[i]?.callback(data)\r\n }\r\n }\r\n\r\n lenis.on('scroll', onScroll)\r\n\r\n return () => {\r\n lenis.off('scroll', onScroll)\r\n }\r\n }, [lenis])\r\n\r\n return (\r\n <LenisContext.Provider\r\n value={{ lenis: lenis!, addCallback, removeCallback }}\r\n >\r\n {root ? (\r\n children\r\n ) : (\r\n <div ref={wrapperRef} className={className} {...props}>\r\n <div ref={contentRef}>{children}</div>\r\n </div>\r\n )}\r\n </LenisContext.Provider>\r\n )\r\n }\r\n)\r\n","import { useEffect, useState } from 'react'\r\n\r\ntype Listener<S> = (state: S) => void\r\n\r\nexport class Store<S> {\r\n private listeners: Listener<S>[] = []\r\n\r\n constructor(private state: S) {}\r\n\r\n set(state: S) {\r\n this.state = state\r\n\r\n for (const listener of this.listeners) {\r\n listener(this.state)\r\n }\r\n }\r\n\r\n subscribe(listener: Listener<S>) {\r\n this.listeners = [...this.listeners, listener]\r\n return () => {\r\n this.listeners = this.listeners.filter((l) => l !== listener)\r\n }\r\n }\r\n\r\n get() {\r\n return this.state\r\n }\r\n}\r\n\r\nexport function useStore<S>(store: Store<S>) {\r\n const [state, setState] = useState(store.get())\r\n\r\n useEffect(() => {\r\n return store.subscribe((state) => setState(state))\r\n }, [store])\r\n\r\n return state\r\n}\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { useContext, useEffect } from 'react'\r\nimport { LenisContext, rootLenisContextStore } from './provider'\r\nimport { useStore } from './store'\r\nimport type { LenisContextValue } from './types'\r\n\r\n// Fall back to an empty object if both context and store are not available\r\nconst fallbackContext: Partial<LenisContextValue> = {}\r\n\r\n/**\r\n * Hook to access the Lenis instance and its methods\r\n *\r\n * @example <caption>Scroll callback</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n *\r\n * if (lenis.progress === 1) {\r\n * console.log('At the end!')\r\n * }\r\n * })\r\n *\r\n * @example <caption>Scroll callback with dependencies</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...', someDependency)\r\n * }\r\n * }, [someDependency])\r\n * @example <caption>Scroll callback with priority</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n * }, [], 1)\r\n * @example <caption>Instance access</caption>\r\n * const lenis = useLenis()\r\n *\r\n * handleClick() {\r\n * lenis.scrollTo(100, {\r\n * lerp: 0.1,\r\n * duration: 1,\r\n * easing: (t) => t,\r\n * onComplete: () => {\r\n * console.log('Complete!')\r\n * }\r\n * })\r\n * }\r\n */\r\nexport function useLenis(\r\n callback?: ScrollCallback,\r\n deps: any[] = [],\r\n priority = 0\r\n) {\r\n // Try to get the lenis instance from the context first\r\n const localContext = useContext(LenisContext)\r\n // Fall back to the root store if the context is not available\r\n const rootContext = useStore(rootLenisContextStore)\r\n // Fall back to the fallback context if all else fails\r\n const currentContext = localContext ?? rootContext ?? fallbackContext\r\n\r\n const { lenis, addCallback, removeCallback } = currentContext\r\n\r\n useEffect(() => {\r\n if (!callback || !addCallback || !removeCallback || !lenis) return\r\n\r\n addCallback(callback, priority)\r\n callback(lenis)\r\n\r\n return () => {\r\n removeCallback(callback)\r\n }\r\n }, [lenis, addCallback, removeCallback, priority, ...deps])\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}
|
|
1
|
+
{"version":3,"sources":["../packages/react/src/provider.tsx","../packages/react/src/store.ts","../packages/react/src/use-lenis.ts"],"sourcesContent":["import Lenis, { type ScrollCallback } from 'lenis'\r\nimport {\r\n createContext,\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from 'react'\r\nimport { Store } from './store'\r\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\r\n\r\nexport const LenisContext = createContext<LenisContextValue | null>(null)\r\n\r\n/**\r\n * The root store for the lenis context\r\n *\r\n * This store serves as a fallback for the context if it is not available\r\n * and allows us to use the global lenis instance above a provider\r\n */\r\nexport const rootLenisContextStore = new Store<LenisContextValue | null>(null)\r\n\r\n/**\r\n * React component to setup a Lenis instance\r\n */\r\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\r\n (\r\n {\r\n children,\r\n root = false,\r\n options = {},\r\n className,\r\n autoRaf = true,\r\n props,\r\n }: LenisProps,\r\n ref\r\n ) => {\r\n const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n const contentRef = useRef<HTMLDivElement | null>(null)\r\n\r\n const [lenis, setLenis] = useState<Lenis | undefined>(undefined)\r\n\r\n // Setup ref\r\n useImperativeHandle(\r\n ref,\r\n () => ({\r\n wrapper: wrapperRef.current,\r\n content: contentRef.current,\r\n lenis,\r\n }),\r\n [lenis]\r\n )\r\n\r\n // Setup lenis instance\r\n useEffect(() => {\r\n const lenis = new Lenis({\r\n ...options,\r\n ...(!root && {\r\n wrapper: wrapperRef.current!,\r\n content: contentRef.current!,\r\n }),\r\n autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)\r\n })\r\n\r\n setLenis(lenis)\r\n\r\n return () => {\r\n lenis.destroy()\r\n setLenis(undefined)\r\n }\r\n }, [root, JSON.stringify(options)])\r\n\r\n // Handle callbacks\r\n const callbacksRefs = useRef<\r\n {\r\n callback: ScrollCallback\r\n priority: number\r\n }[]\r\n >([])\r\n\r\n const addCallback: LenisContextValue['addCallback'] = useCallback(\r\n (callback, priority) => {\r\n callbacksRefs.current.push({ callback, priority })\r\n callbacksRefs.current.sort((a, b) => a.priority - b.priority)\r\n },\r\n []\r\n )\r\n\r\n const removeCallback: LenisContextValue['removeCallback'] = useCallback(\r\n (callback) => {\r\n callbacksRefs.current = callbacksRefs.current.filter(\r\n (cb) => cb.callback !== callback\r\n )\r\n },\r\n []\r\n )\r\n\r\n // This makes sure to set the global context if the root is true\r\n useEffect(() => {\r\n if (root && lenis) {\r\n rootLenisContextStore.set({ lenis, addCallback, removeCallback })\r\n\r\n return () => rootLenisContextStore.set(null)\r\n }\r\n }, [root, lenis, addCallback, removeCallback])\r\n\r\n // Setup callback listeners\r\n useEffect(() => {\r\n if (!lenis) return\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacksRefs.current.length; i++) {\r\n callbacksRefs.current[i]?.callback(data)\r\n }\r\n }\r\n\r\n lenis.on('scroll', onScroll)\r\n\r\n return () => {\r\n lenis.off('scroll', onScroll)\r\n }\r\n }, [lenis])\r\n\r\n return (\r\n <LenisContext.Provider\r\n value={{ lenis: lenis!, addCallback, removeCallback }}\r\n >\r\n {root ? (\r\n children\r\n ) : (\r\n <div ref={wrapperRef} className={className} {...props}>\r\n <div ref={contentRef}>{children}</div>\r\n </div>\r\n )}\r\n </LenisContext.Provider>\r\n )\r\n }\r\n)\r\n","import { useEffect, useState } from 'react'\r\n\r\ntype Listener<S> = (state: S) => void\r\n\r\nexport class Store<S> {\r\n private listeners: Listener<S>[] = []\r\n\r\n constructor(private state: S) {}\r\n\r\n set(state: S) {\r\n this.state = state\r\n\r\n for (let listener of this.listeners) {\r\n listener(this.state)\r\n }\r\n }\r\n\r\n subscribe(listener: Listener<S>) {\r\n this.listeners = [...this.listeners, listener]\r\n return () => {\r\n this.listeners = this.listeners.filter((l) => l !== listener)\r\n }\r\n }\r\n\r\n get() {\r\n return this.state\r\n }\r\n}\r\n\r\nexport function useStore<S>(store: Store<S>) {\r\n const [state, setState] = useState(store.get())\r\n\r\n useEffect(() => {\r\n return store.subscribe((state) => setState(state))\r\n }, [store])\r\n\r\n return state\r\n}\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { useContext, useEffect } from 'react'\r\nimport { LenisContext, rootLenisContextStore } from './provider'\r\nimport { useStore } from './store'\r\nimport type { LenisContextValue } from './types'\r\n\r\n// Fall back to an empty object if both context and store are not available\r\nconst fallbackContext: Partial<LenisContextValue> = {}\r\n\r\n/**\r\n * Hook to access the Lenis instance and its methods\r\n *\r\n * @example <caption>Scroll callback</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n *\r\n * if (lenis.progress === 1) {\r\n * console.log('At the end!')\r\n * }\r\n * })\r\n *\r\n * @example <caption>Scroll callback with dependencies</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...', someDependency)\r\n * }\r\n * }, [someDependency])\r\n * @example <caption>Scroll callback with priority</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n * }, [], 1)\r\n * @example <caption>Instance access</caption>\r\n * const lenis = useLenis()\r\n *\r\n * handleClick() {\r\n * lenis.scrollTo(100, {\r\n * lerp: 0.1,\r\n * duration: 1,\r\n * easing: (t) => t,\r\n * onComplete: () => {\r\n * console.log('Complete!')\r\n * }\r\n * })\r\n * }\r\n */\r\nexport function useLenis(\r\n callback?: ScrollCallback,\r\n deps: any[] = [],\r\n priority = 0\r\n) {\r\n // Try to get the lenis instance from the context first\r\n const localContext = useContext(LenisContext)\r\n // Fall back to the root store if the context is not available\r\n const rootContext = useStore(rootLenisContextStore)\r\n // Fall back to the fallback context if all else fails\r\n const currentContext = localContext ?? rootContext ?? fallbackContext\r\n\r\n const { lenis, addCallback, removeCallback } = currentContext\r\n\r\n useEffect(() => {\r\n if (!callback || !addCallback || !removeCallback || !lenis) return\r\n\r\n addCallback(callback, priority)\r\n callback(lenis)\r\n\r\n return () => {\r\n removeCallback(callback)\r\n }\r\n }, [lenis, addCallback, removeCallback, priority, ...deps])\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}
|
package/dist/lenis-vue.d.ts
CHANGED
|
@@ -8,10 +8,6 @@ declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
8
8
|
type: PropType<boolean>;
|
|
9
9
|
default: boolean;
|
|
10
10
|
};
|
|
11
|
-
autoRaf: {
|
|
12
|
-
type: PropType<boolean>;
|
|
13
|
-
default: boolean;
|
|
14
|
-
};
|
|
15
11
|
options: {
|
|
16
12
|
type: PropType<ConstructorParameters<typeof Lenis__default>[0]>;
|
|
17
13
|
default: () => {};
|
|
@@ -29,10 +25,6 @@ declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
29
25
|
type: PropType<boolean>;
|
|
30
26
|
default: boolean;
|
|
31
27
|
};
|
|
32
|
-
autoRaf: {
|
|
33
|
-
type: PropType<boolean>;
|
|
34
|
-
default: boolean;
|
|
35
|
-
};
|
|
36
28
|
options: {
|
|
37
29
|
type: PropType<ConstructorParameters<typeof Lenis__default>[0]>;
|
|
38
30
|
default: () => {};
|
|
@@ -44,7 +36,6 @@ declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
44
36
|
}>> & Readonly<{}>, {
|
|
45
37
|
props: HTMLAttributes;
|
|
46
38
|
root: boolean;
|
|
47
|
-
autoRaf: boolean;
|
|
48
39
|
options: Lenis.LenisOptions | undefined;
|
|
49
40
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
50
41
|
declare const vueLenisPlugin: Plugin;
|
package/dist/lenis-vue.mjs
CHANGED
|
@@ -3,7 +3,8 @@ import Lenis from "lenis";
|
|
|
3
3
|
import {
|
|
4
4
|
defineComponent,
|
|
5
5
|
h,
|
|
6
|
-
|
|
6
|
+
onBeforeUnmount,
|
|
7
|
+
onMounted,
|
|
7
8
|
provide,
|
|
8
9
|
reactive,
|
|
9
10
|
ref,
|
|
@@ -28,10 +29,10 @@ var VueLenis = defineComponent({
|
|
|
28
29
|
type: Boolean,
|
|
29
30
|
default: false
|
|
30
31
|
},
|
|
31
|
-
autoRaf: {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
32
|
+
// autoRaf: {
|
|
33
|
+
// type: Boolean as PropType<boolean>,
|
|
34
|
+
// default: true,
|
|
35
|
+
// },
|
|
35
36
|
// rafPriority: {
|
|
36
37
|
// type: Number as PropType<number>,
|
|
37
38
|
// default: 0,
|
|
@@ -54,43 +55,35 @@ var VueLenis = defineComponent({
|
|
|
54
55
|
wrapper,
|
|
55
56
|
content
|
|
56
57
|
});
|
|
58
|
+
onMounted(() => {
|
|
59
|
+
lenisRef.value = new Lenis({
|
|
60
|
+
...props.options,
|
|
61
|
+
...!props.root ? {
|
|
62
|
+
wrapper: wrapper.value,
|
|
63
|
+
content: content.value
|
|
64
|
+
} : {}
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
onBeforeUnmount(() => {
|
|
68
|
+
lenisRef.value?.destroy();
|
|
69
|
+
lenisRef.value = void 0;
|
|
70
|
+
});
|
|
57
71
|
watch(
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
() => props.root,
|
|
61
|
-
() => props.autoRaf,
|
|
62
|
-
wrapper,
|
|
63
|
-
content
|
|
64
|
-
],
|
|
65
|
-
([options, root, autoRaf, wrapper2, content2], [oldOptions, oldRoot, oldAutoRaf, oldWrapper, oldContent]) => {
|
|
72
|
+
() => props.options,
|
|
73
|
+
(options, oldOptions) => {
|
|
66
74
|
const optionsChanged = JSON.stringify(oldOptions) !== JSON.stringify(options);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
autoRaf: props.options?.autoRaf ?? autoRaf
|
|
76
|
-
});
|
|
77
|
-
} else {
|
|
78
|
-
if (wrapper2 && content2) {
|
|
79
|
-
lenisRef.value = new Lenis({
|
|
80
|
-
...props.options,
|
|
81
|
-
wrapper: wrapper2,
|
|
82
|
-
content: content2,
|
|
83
|
-
autoRaf: props.options?.autoRaf ?? autoRaf
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
onWatcherCleanup(() => {
|
|
88
|
-
lenisRef.value?.destroy();
|
|
89
|
-
lenisRef.value = void 0;
|
|
75
|
+
if (optionsChanged) {
|
|
76
|
+
lenisRef.value?.destroy();
|
|
77
|
+
lenisRef.value = new Lenis({
|
|
78
|
+
...props.options,
|
|
79
|
+
...!props.root ? {
|
|
80
|
+
wrapper: wrapper.value,
|
|
81
|
+
content: content.value
|
|
82
|
+
} : {}
|
|
90
83
|
});
|
|
91
84
|
}
|
|
92
85
|
},
|
|
93
|
-
{ deep: true
|
|
86
|
+
{ deep: true }
|
|
94
87
|
);
|
|
95
88
|
const callbacks = reactive([]);
|
|
96
89
|
function addCallback(callback, priority) {
|
|
@@ -124,10 +117,13 @@ var VueLenis = defineComponent({
|
|
|
124
117
|
return () => {
|
|
125
118
|
if (props.root) {
|
|
126
119
|
return slots.default?.();
|
|
120
|
+
} else {
|
|
121
|
+
const combinedClassName = ["lenis", props.props?.class].filter(Boolean).join(" ");
|
|
122
|
+
delete props.props?.class;
|
|
123
|
+
return h("div", { class: combinedClassName, ref: wrapper, ...props }, [
|
|
124
|
+
h("div", { ref: content }, slots.default?.())
|
|
125
|
+
]);
|
|
127
126
|
}
|
|
128
|
-
return h("div", { ref: wrapper }, [
|
|
129
|
-
h("div", { ref: content }, slots.default?.())
|
|
130
|
-
]);
|
|
131
127
|
};
|
|
132
128
|
}
|
|
133
129
|
});
|
|
@@ -139,7 +135,7 @@ var vueLenisPlugin = (app) => {
|
|
|
139
135
|
};
|
|
140
136
|
|
|
141
137
|
// packages/vue/src/use-lenis.ts
|
|
142
|
-
import { computed, inject, onBeforeUnmount, watch as watch2 } from "vue";
|
|
138
|
+
import { computed, inject, nextTick, onBeforeUnmount as onBeforeUnmount2, watch as watch2 } from "vue";
|
|
143
139
|
function useLenis(callback, priority = 0) {
|
|
144
140
|
const lenisInjection = inject(LenisSymbol);
|
|
145
141
|
const addCallbackInjection = inject(AddCallbackSymbol);
|
|
@@ -153,6 +149,15 @@ function useLenis(callback, priority = 0) {
|
|
|
153
149
|
const lenis = computed(
|
|
154
150
|
() => lenisInjection?.value ? lenisInjection.value : globalLenis.value
|
|
155
151
|
);
|
|
152
|
+
nextTick(() => {
|
|
153
|
+
nextTick(() => {
|
|
154
|
+
if (!lenis.value) {
|
|
155
|
+
throw new Error(
|
|
156
|
+
"No lenis instance found, either mount a root lenis instance or wrap your component in a lenis provider"
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
});
|
|
156
161
|
watch2(
|
|
157
162
|
[lenis, addCallback, removeCallback],
|
|
158
163
|
([lenis2, addCallback2, removeCallback2]) => {
|
|
@@ -161,7 +166,7 @@ function useLenis(callback, priority = 0) {
|
|
|
161
166
|
callback?.(lenis2);
|
|
162
167
|
}
|
|
163
168
|
);
|
|
164
|
-
|
|
169
|
+
onBeforeUnmount2(() => {
|
|
165
170
|
if (!removeCallback.value || !callback) return;
|
|
166
171
|
removeCallback.value?.(callback);
|
|
167
172
|
});
|
package/dist/lenis-vue.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/vue/src/provider.ts","../packages/vue/src/store.ts","../packages/vue/src/use-lenis.ts"],"sourcesContent":["import Lenis, { type ScrollCallback } from 'lenis'\r\nimport type {\r\n HTMLAttributes,\r\n InjectionKey,\r\n Plugin,\r\n PropType,\r\n ShallowRef,\r\n} from 'vue'\r\nimport {\r\n defineComponent,\r\n h,\r\n onWatcherCleanup,\r\n provide,\r\n reactive,\r\n ref,\r\n shallowRef,\r\n watch,\r\n} from 'vue'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport const LenisSymbol: InjectionKey<ShallowRef<Lenis | undefined>> =\r\n Symbol('LenisContext')\r\nexport const AddCallbackSymbol: InjectionKey<\r\n (callback: any, priority: number) => void\r\n> = Symbol('AddCallback')\r\nexport const RemoveCallbackSymbol: InjectionKey<(callback: any) => void> =\r\n Symbol('RemoveCallback')\r\n\r\nexport const VueLenis = defineComponent({\r\n name: 'VueLenis',\r\n props: {\r\n root: {\r\n type: Boolean as PropType<boolean>,\r\n default: false,\r\n },\r\n autoRaf: {\r\n type: Boolean as PropType<boolean>,\r\n default: true,\r\n },\r\n // rafPriority: {\r\n // type: Number as PropType<number>,\r\n // default: 0,\r\n // },\r\n options: {\r\n type: Object as PropType<ConstructorParameters<typeof Lenis>[0]>,\r\n default: () => ({}),\r\n },\r\n props: {\r\n type: Object as PropType<HTMLAttributes>,\r\n default: () => ({}),\r\n },\r\n },\r\n setup(props, { slots, expose }) {\r\n const lenisRef = shallowRef<Lenis>()\r\n // const tempusCleanupRef = shallowRef<() => void>()\r\n const wrapper = ref<HTMLDivElement>()\r\n const content = ref<HTMLDivElement>()\r\n\r\n // Setup exposed properties\r\n expose({\r\n lenis: lenisRef,\r\n wrapper,\r\n content,\r\n })\r\n\r\n // // Setup the lenis instance when the component is mounted\r\n // onMounted(() => {\r\n // console.log('onMounted new Lenis')\r\n // lenisRef.value = new Lenis({\r\n // ...props.options,\r\n // ...(!props.root\r\n // ? {\r\n // wrapper: wrapper.value,\r\n // content: content.value,\r\n // }\r\n // : {}),\r\n // })\r\n // })\r\n\r\n // Destroy the lenis instance when the component is unmounted\r\n // onBeforeUnmount(() => {\r\n // lenisRef.value?.destroy()\r\n // lenisRef.value = undefined\r\n // })\r\n\r\n // Sync options\r\n watch(\r\n [\r\n () => props.options,\r\n () => props.root,\r\n () => props.autoRaf,\r\n wrapper,\r\n content,\r\n ],\r\n (\r\n [options, root, autoRaf, wrapper, content],\r\n [oldOptions, oldRoot, oldAutoRaf, oldWrapper, oldContent]\r\n ) => {\r\n const optionsChanged =\r\n JSON.stringify(oldOptions) !== JSON.stringify(options)\r\n\r\n const rootChanged = root !== oldRoot\r\n const autoRafChanged = autoRaf !== oldAutoRaf\r\n const wrapperChanged = wrapper !== oldWrapper\r\n const contentChanged = content !== oldContent\r\n\r\n // If any of the options changed, destroy the lenis instance and create a new one\r\n if (\r\n optionsChanged ||\r\n rootChanged ||\r\n autoRafChanged ||\r\n wrapperChanged ||\r\n contentChanged\r\n ) {\r\n if (root) {\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n autoRaf: props.options?.autoRaf ?? autoRaf,\r\n })\r\n } else {\r\n if (wrapper && content) {\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n wrapper,\r\n content,\r\n autoRaf: props.options?.autoRaf ?? autoRaf,\r\n })\r\n }\r\n }\r\n\r\n onWatcherCleanup(() => {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = undefined\r\n })\r\n }\r\n },\r\n { deep: true, immediate: true }\r\n )\r\n\r\n const callbacks = reactive<\r\n { callback: ScrollCallback; priority: number }[]\r\n >([])\r\n\r\n function addCallback(callback: ScrollCallback, priority: number) {\r\n callbacks.push({ callback, priority })\r\n callbacks.sort((a, b) => a.priority - b.priority)\r\n }\r\n\r\n function removeCallback(callback: ScrollCallback) {\r\n callbacks.splice(\r\n callbacks.findIndex((cb) => cb.callback === callback),\r\n 1\r\n )\r\n }\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacks.length; i++) {\r\n callbacks[i]?.callback(data)\r\n }\r\n }\r\n\r\n watch(lenisRef, (lenis) => {\r\n lenis?.on('scroll', onScroll)\r\n\r\n if (props.root) {\r\n globalLenis.value = lenis\r\n globalAddCallback.value = addCallback\r\n globalRemoveCallback.value = removeCallback\r\n }\r\n })\r\n\r\n if (!props.root) {\r\n provide(LenisSymbol, lenisRef)\r\n provide(AddCallbackSymbol, addCallback)\r\n provide(RemoveCallbackSymbol, removeCallback)\r\n }\r\n\r\n return () => {\r\n if (props.root) {\r\n return slots.default?.()\r\n }\r\n\r\n return h('div', { ref: wrapper }, [\r\n h('div', { ref: content }, slots.default?.()),\r\n ])\r\n }\r\n },\r\n})\r\n\r\nexport const vueLenisPlugin: Plugin = (app) => {\r\n app.component('vue-lenis', VueLenis)\r\n // Setup a global provide to silence top level useLenis injection warning\r\n app.provide(LenisSymbol, shallowRef(undefined))\r\n app.provide(AddCallbackSymbol, undefined as any)\r\n app.provide(RemoveCallbackSymbol, undefined as any)\r\n}\r\n\r\n// @ts-ignore\r\ndeclare module '@vue/runtime-core' {\r\n export interface GlobalComponents {\r\n 'vue-lenis': typeof VueLenis\r\n }\r\n}\r\n","import type Lenis from 'lenis'\r\nimport type { ScrollCallback } from 'lenis'\r\nimport { shallowRef } from 'vue'\r\n\r\nexport const globalLenis = shallowRef<Lenis>()\r\nexport const globalAddCallback =\r\n shallowRef<(callback: ScrollCallback, priority: number) => void>()\r\nexport const globalRemoveCallback =\r\n shallowRef<(callback: ScrollCallback) => void>()\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { computed, inject, onBeforeUnmount, watch } from 'vue'\r\nimport {\r\n AddCallbackSymbol,\r\n LenisSymbol,\r\n RemoveCallbackSymbol,\r\n} from './provider'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport function useLenis(callback?: ScrollCallback, priority = 0) {\r\n const lenisInjection = inject(LenisSymbol)\r\n const addCallbackInjection = inject(AddCallbackSymbol)\r\n const removeCallbackInjection = inject(RemoveCallbackSymbol)\r\n\r\n const addCallback = computed(() =>\r\n addCallbackInjection ? addCallbackInjection : globalAddCallback.value\r\n )\r\n const removeCallback = computed(() =>\r\n removeCallbackInjection\r\n ? removeCallbackInjection\r\n : globalRemoveCallback.value\r\n )\r\n\r\n const lenis = computed(() =>\r\n lenisInjection?.value ? lenisInjection.value : globalLenis.value\r\n )\r\n\r\n // Wait two ticks to make sure the lenis instance is mounted\r\n // nextTick(() => {\r\n // nextTick(() => {\r\n // if (!lenis.value) {\r\n // throw new Error(\r\n // 'No lenis instance found, either mount a root lenis instance or wrap your component in a lenis provider'\r\n // )\r\n // }\r\n // })\r\n // })\r\n\r\n watch(\r\n [lenis, addCallback, removeCallback],\r\n ([lenis, addCallback, removeCallback]) => {\r\n if (!lenis || !addCallback || !removeCallback || !callback) return\r\n\r\n addCallback?.(callback, priority)\r\n callback?.(lenis as any)\r\n }\r\n )\r\n\r\n onBeforeUnmount(() => {\r\n if (!removeCallback.value || !callback) return\r\n removeCallback.value?.(callback)\r\n })\r\n\r\n return lenis\r\n}\r\n"],"mappings":";AAAA,OAAO,WAAoC;AAQ3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAAA;AAAA,EACA;AAAA,OACK;;;ACfP,SAAS,kBAAkB;AAEpB,IAAM,cAAc,WAAkB;AACtC,IAAM,oBACX,WAAiE;AAC5D,IAAM,uBACX,WAA+C;;;ADY1C,IAAM,cACX,OAAO,cAAc;AAChB,IAAM,oBAET,OAAO,aAAa;AACjB,IAAM,uBACX,OAAO,gBAAgB;AAElB,IAAM,WAAW,gBAAgB;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,OAAO,CAAC;AAAA,IACnB;AAAA,EACF;AAAA,EACA,MAAM,OAAO,EAAE,OAAO,OAAO,GAAG;AAC9B,UAAM,WAAWC,YAAkB;AAEnC,UAAM,UAAU,IAAoB;AACpC,UAAM,UAAU,IAAoB;AAGpC,WAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACF,CAAC;AAuBD;AAAA,MACE;AAAA,QACE,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ,MAAM,MAAM;AAAA,QACZ;AAAA,QACA;AAAA,MACF;AAAA,MACA,CACE,CAAC,SAAS,MAAM,SAASC,UAASC,QAAO,GACzC,CAAC,YAAY,SAAS,YAAY,YAAY,UAAU,MACrD;AACH,cAAM,iBACJ,KAAK,UAAU,UAAU,MAAM,KAAK,UAAU,OAAO;AAEvD,cAAM,cAAc,SAAS;AAC7B,cAAM,iBAAiB,YAAY;AACnC,cAAM,iBAAiBD,aAAY;AACnC,cAAM,iBAAiBC,aAAY;AAGnC,YACE,kBACA,eACA,kBACA,kBACA,gBACA;AACA,cAAI,MAAM;AACR,qBAAS,QAAQ,IAAI,MAAM;AAAA,cACzB,GAAG,MAAM;AAAA,cACT,SAAS,MAAM,SAAS,WAAW;AAAA,YACrC,CAAC;AAAA,UACH,OAAO;AACL,gBAAID,YAAWC,UAAS;AACtB,uBAAS,QAAQ,IAAI,MAAM;AAAA,gBACzB,GAAG,MAAM;AAAA,gBACT,SAAAD;AAAA,gBACA,SAAAC;AAAA,gBACA,SAAS,MAAM,SAAS,WAAW;AAAA,cACrC,CAAC;AAAA,YACH;AAAA,UACF;AAEA,2BAAiB,MAAM;AACrB,qBAAS,OAAO,QAAQ;AACxB,qBAAS,QAAQ;AAAA,UACnB,CAAC;AAAA,QACH;AAAA,MACF;AAAA,MACA,EAAE,MAAM,MAAM,WAAW,KAAK;AAAA,IAChC;AAEA,UAAM,YAAY,SAEhB,CAAC,CAAC;AAEJ,aAAS,YAAY,UAA0B,UAAkB;AAC/D,gBAAU,KAAK,EAAE,UAAU,SAAS,CAAC;AACrC,gBAAU,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ;AAAA,IAClD;AAEA,aAAS,eAAe,UAA0B;AAChD,gBAAU;AAAA,QACR,UAAU,UAAU,CAAC,OAAO,GAAG,aAAa,QAAQ;AAAA,QACpD;AAAA,MACF;AAAA,IACF;AAEA,UAAM,WAA2B,CAAC,SAAS;AACzC,eAAS,IAAI,GAAG,IAAI,UAAU,QAAQ,KAAK;AACzC,kBAAU,CAAC,GAAG,SAAS,IAAI;AAAA,MAC7B;AAAA,IACF;AAEA,UAAM,UAAU,CAAC,UAAU;AACzB,aAAO,GAAG,UAAU,QAAQ;AAE5B,UAAI,MAAM,MAAM;AACd,oBAAY,QAAQ;AACpB,0BAAkB,QAAQ;AAC1B,6BAAqB,QAAQ;AAAA,MAC/B;AAAA,IACF,CAAC;AAED,QAAI,CAAC,MAAM,MAAM;AACf,cAAQ,aAAa,QAAQ;AAC7B,cAAQ,mBAAmB,WAAW;AACtC,cAAQ,sBAAsB,cAAc;AAAA,IAC9C;AAEA,WAAO,MAAM;AACX,UAAI,MAAM,MAAM;AACd,eAAO,MAAM,UAAU;AAAA,MACzB;AAEA,aAAO,EAAE,OAAO,EAAE,KAAK,QAAQ,GAAG;AAAA,QAChC,EAAE,OAAO,EAAE,KAAK,QAAQ,GAAG,MAAM,UAAU,CAAC;AAAA,MAC9C,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;AAEM,IAAM,iBAAyB,CAAC,QAAQ;AAC7C,MAAI,UAAU,aAAa,QAAQ;AAEnC,MAAI,QAAQ,aAAaF,YAAW,MAAS,CAAC;AAC9C,MAAI,QAAQ,mBAAmB,MAAgB;AAC/C,MAAI,QAAQ,sBAAsB,MAAgB;AACpD;;;AElMA,SAAS,UAAU,QAAQ,iBAAiB,SAAAG,cAAa;AAQlD,SAAS,SAAS,UAA2B,WAAW,GAAG;AAChE,QAAM,iBAAiB,OAAO,WAAW;AACzC,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,QAAM,0BAA0B,OAAO,oBAAoB;AAE3D,QAAM,cAAc;AAAA,IAAS,MAC3B,uBAAuB,uBAAuB,kBAAkB;AAAA,EAClE;AACA,QAAM,iBAAiB;AAAA,IAAS,MAC9B,0BACI,0BACA,qBAAqB;AAAA,EAC3B;AAEA,QAAM,QAAQ;AAAA,IAAS,MACrB,gBAAgB,QAAQ,eAAe,QAAQ,YAAY;AAAA,EAC7D;AAaA,EAAAC;AAAA,IACE,CAAC,OAAO,aAAa,cAAc;AAAA,IACnC,CAAC,CAACC,QAAOC,cAAaC,eAAc,MAAM;AACxC,UAAI,CAACF,UAAS,CAACC,gBAAe,CAACC,mBAAkB,CAAC,SAAU;AAE5D,MAAAD,eAAc,UAAU,QAAQ;AAChC,iBAAWD,MAAY;AAAA,IACzB;AAAA,EACF;AAEA,kBAAgB,MAAM;AACpB,QAAI,CAAC,eAAe,SAAS,CAAC,SAAU;AACxC,mBAAe,QAAQ,QAAQ;AAAA,EACjC,CAAC;AAED,SAAO;AACT;","names":["shallowRef","shallowRef","wrapper","content","watch","watch","lenis","addCallback","removeCallback"]}
|
|
1
|
+
{"version":3,"sources":["../packages/vue/src/provider.ts","../packages/vue/src/store.ts","../packages/vue/src/use-lenis.ts"],"sourcesContent":["// import Tempus from '@darkroom.engineering/tempus'\r\nimport Lenis, { type ScrollCallback } from 'lenis'\r\nimport type {\r\n HTMLAttributes,\r\n InjectionKey,\r\n Plugin,\r\n PropType,\r\n ShallowRef,\r\n} from 'vue'\r\nimport {\r\n defineComponent,\r\n h,\r\n onBeforeUnmount,\r\n onMounted,\r\n provide,\r\n reactive,\r\n ref,\r\n shallowRef,\r\n watch,\r\n} from 'vue'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport const LenisSymbol: InjectionKey<ShallowRef<Lenis | undefined>> =\r\n Symbol('LenisContext')\r\nexport const AddCallbackSymbol: InjectionKey<\r\n (callback: any, priority: number) => void\r\n> = Symbol('AddCallback')\r\nexport const RemoveCallbackSymbol: InjectionKey<(callback: any) => void> =\r\n Symbol('RemoveCallback')\r\n\r\nexport const VueLenis = defineComponent({\r\n name: 'VueLenis',\r\n props: {\r\n root: {\r\n type: Boolean as PropType<boolean>,\r\n default: false,\r\n },\r\n // autoRaf: {\r\n // type: Boolean as PropType<boolean>,\r\n // default: true,\r\n // },\r\n // rafPriority: {\r\n // type: Number as PropType<number>,\r\n // default: 0,\r\n // },\r\n options: {\r\n type: Object as PropType<ConstructorParameters<typeof Lenis>[0]>,\r\n default: () => ({}),\r\n },\r\n props: {\r\n type: Object as PropType<HTMLAttributes>,\r\n default: () => ({}),\r\n },\r\n },\r\n setup(props, { slots, expose }) {\r\n const lenisRef = shallowRef<Lenis>()\r\n // const tempusCleanupRef = shallowRef<() => void>()\r\n const wrapper = ref<HTMLDivElement>()\r\n const content = ref<HTMLDivElement>()\r\n\r\n // Setup exposed properties\r\n expose({\r\n lenis: lenisRef,\r\n wrapper,\r\n content,\r\n })\r\n\r\n // Setup the lenis instance when the component is mounted\r\n onMounted(() => {\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n ...(!props.root\r\n ? {\r\n wrapper: wrapper.value,\r\n content: content.value,\r\n }\r\n : {}),\r\n })\r\n })\r\n\r\n // Destroy the lenis instance when the component is unmounted\r\n onBeforeUnmount(() => {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = undefined\r\n })\r\n\r\n // Sync options\r\n watch(\r\n () => props.options,\r\n (options, oldOptions) => {\r\n const optionsChanged =\r\n JSON.stringify(oldOptions) !== JSON.stringify(options)\r\n\r\n // If any of the options changed, destroy the lenis instance and create a new one\r\n if (optionsChanged) {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n ...(!props.root\r\n ? {\r\n wrapper: wrapper.value,\r\n content: content.value,\r\n }\r\n : {}),\r\n })\r\n }\r\n },\r\n { deep: true }\r\n )\r\n\r\n // Sync autoRaf\r\n // watch(\r\n // [lenisRef, () => props.autoRaf, () => props.rafPriority],\r\n // ([lenis, autoRaf, rafPriority]) => {\r\n // if (!lenis || !autoRaf) {\r\n // // If lenis is not defined or autoRaf is false, stop the raf if there is one\r\n // return tempusCleanupRef.value?.()\r\n // }\r\n\r\n // // If either lenis, autoRaf or rafPriority changed, stop the raf if there is one and start a new one\r\n // tempusCleanupRef.value?.()\r\n // if (autoRaf) {\r\n // tempusCleanupRef.value = Tempus.add(\r\n // (time: number) => lenis?.raf(time),\r\n // rafPriority\r\n // )\r\n // }\r\n // }\r\n // )\r\n\r\n const callbacks = reactive<\r\n { callback: ScrollCallback; priority: number }[]\r\n >([])\r\n\r\n function addCallback(callback: ScrollCallback, priority: number) {\r\n callbacks.push({ callback, priority })\r\n callbacks.sort((a, b) => a.priority - b.priority)\r\n }\r\n\r\n function removeCallback(callback: ScrollCallback) {\r\n callbacks.splice(\r\n callbacks.findIndex((cb) => cb.callback === callback),\r\n 1\r\n )\r\n }\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacks.length; i++) {\r\n callbacks[i]?.callback(data)\r\n }\r\n }\r\n\r\n watch(lenisRef, (lenis) => {\r\n lenis?.on('scroll', onScroll)\r\n\r\n if (props.root) {\r\n globalLenis.value = lenis\r\n globalAddCallback.value = addCallback\r\n globalRemoveCallback.value = removeCallback\r\n }\r\n })\r\n\r\n if (!props.root) {\r\n provide(LenisSymbol, lenisRef)\r\n provide(AddCallbackSymbol, addCallback)\r\n provide(RemoveCallbackSymbol, removeCallback)\r\n }\r\n\r\n return () => {\r\n if (props.root) {\r\n return slots.default?.()\r\n } else {\r\n const combinedClassName = ['lenis', props.props?.class]\r\n .filter(Boolean)\r\n .join(' ')\r\n delete props.props?.class\r\n\r\n return h('div', { class: combinedClassName, ref: wrapper, ...props }, [\r\n h('div', { ref: content }, slots.default?.()),\r\n ])\r\n }\r\n }\r\n },\r\n})\r\n\r\nexport const vueLenisPlugin: Plugin = (app) => {\r\n app.component('vue-lenis', VueLenis)\r\n // Setup a global provide to silence top level useLenis injection warning\r\n app.provide(LenisSymbol, shallowRef(undefined))\r\n app.provide(AddCallbackSymbol, undefined as any)\r\n app.provide(RemoveCallbackSymbol, undefined as any)\r\n}\r\n\r\n// @ts-ignore\r\ndeclare module '@vue/runtime-core' {\r\n export interface GlobalComponents {\r\n 'vue-lenis': typeof VueLenis\r\n }\r\n}\r\n","import type Lenis from 'lenis'\r\nimport type { ScrollCallback } from 'lenis'\r\nimport { shallowRef } from 'vue'\r\n\r\nexport const globalLenis = shallowRef<Lenis>()\r\nexport const globalAddCallback =\r\n shallowRef<(callback: ScrollCallback, priority: number) => void>()\r\nexport const globalRemoveCallback =\r\n shallowRef<(callback: ScrollCallback) => void>()\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { computed, inject, nextTick, onBeforeUnmount, watch } from 'vue'\r\nimport {\r\n AddCallbackSymbol,\r\n LenisSymbol,\r\n RemoveCallbackSymbol,\r\n} from './provider'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport function useLenis(callback?: ScrollCallback, priority = 0) {\r\n const lenisInjection = inject(LenisSymbol)\r\n const addCallbackInjection = inject(AddCallbackSymbol)\r\n const removeCallbackInjection = inject(RemoveCallbackSymbol)\r\n\r\n const addCallback = computed(() =>\r\n addCallbackInjection ? addCallbackInjection : globalAddCallback.value\r\n )\r\n const removeCallback = computed(() =>\r\n removeCallbackInjection\r\n ? removeCallbackInjection\r\n : globalRemoveCallback.value\r\n )\r\n\r\n const lenis = computed(() =>\r\n lenisInjection?.value ? lenisInjection.value : globalLenis.value\r\n )\r\n\r\n // Wait two ticks to make sure the lenis instance is mounted\r\n nextTick(() => {\r\n nextTick(() => {\r\n if (!lenis.value) {\r\n throw new Error(\r\n 'No lenis instance found, either mount a root lenis instance or wrap your component in a lenis provider'\r\n )\r\n }\r\n })\r\n })\r\n\r\n watch(\r\n [lenis, addCallback, removeCallback],\r\n ([lenis, addCallback, removeCallback]) => {\r\n if (!lenis || !addCallback || !removeCallback || !callback) return\r\n\r\n addCallback?.(callback, priority)\r\n callback?.(lenis as any)\r\n }\r\n )\r\n\r\n onBeforeUnmount(() => {\r\n if (!removeCallback.value || !callback) return\r\n removeCallback.value?.(callback)\r\n })\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["shallowRef","shallowRef","onBeforeUnmount","watch","watch","lenis","addCallback","removeCallback","onBeforeUnmount"]}
|
package/dist/lenis.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// package.json
|
|
2
|
-
var version = "1.1.19
|
|
2
|
+
var version = "1.1.19";
|
|
3
3
|
|
|
4
4
|
// packages/core/src/maths.ts
|
|
5
5
|
function clamp(min, input, max) {
|
|
@@ -397,7 +397,7 @@ var Lenis = class {
|
|
|
397
397
|
touchInertiaMultiplier = 35,
|
|
398
398
|
duration,
|
|
399
399
|
// in seconds
|
|
400
|
-
easing = (t) => Math.min(1, 1.001 - 2
|
|
400
|
+
easing = (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
|
401
401
|
lerp: lerp2 = 0.1,
|
|
402
402
|
infinite = false,
|
|
403
403
|
orientation = "vertical",
|
|
@@ -574,7 +574,7 @@ var Lenis = class {
|
|
|
574
574
|
let composedPath = event.composedPath();
|
|
575
575
|
composedPath = composedPath.slice(0, composedPath.indexOf(this.rootElement));
|
|
576
576
|
const prevent = this.options.prevent;
|
|
577
|
-
if (composedPath.find(
|
|
577
|
+
if (!!composedPath.find(
|
|
578
578
|
(node) => node instanceof HTMLElement && (typeof prevent === "function" && prevent?.(node) || node.hasAttribute?.("data-lenis-prevent") || isTouch && node.hasAttribute?.("data-lenis-prevent-touch") || isWheel && node.hasAttribute?.("data-lenis-prevent-wheel"))
|
|
579
579
|
))
|
|
580
580
|
return;
|
|
@@ -736,7 +736,7 @@ var Lenis = class {
|
|
|
736
736
|
} else if (typeof target === "string" && ["bottom", "right", "end"].includes(target)) {
|
|
737
737
|
target = this.limit;
|
|
738
738
|
} else {
|
|
739
|
-
let node
|
|
739
|
+
let node;
|
|
740
740
|
if (typeof target === "string") {
|
|
741
741
|
node = document.querySelector(target);
|
|
742
742
|
} else if (target instanceof HTMLElement && target?.nodeType) {
|
|
@@ -835,10 +835,12 @@ var Lenis = class {
|
|
|
835
835
|
if (this.options.__experimental__naiveDimensions) {
|
|
836
836
|
if (this.isHorizontal) {
|
|
837
837
|
return this.rootElement.scrollWidth - this.rootElement.clientWidth;
|
|
838
|
+
} else {
|
|
839
|
+
return this.rootElement.scrollHeight - this.rootElement.clientHeight;
|
|
838
840
|
}
|
|
839
|
-
|
|
841
|
+
} else {
|
|
842
|
+
return this.dimensions.limit[this.isHorizontal ? "x" : "y"];
|
|
840
843
|
}
|
|
841
|
-
return this.dimensions.limit[this.isHorizontal ? "x" : "y"];
|
|
842
844
|
}
|
|
843
845
|
/**
|
|
844
846
|
* Whether or not the scroll is horizontal
|