@brytdesigns/web-component-parallax 3.3.2 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
- import { createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
1
+ import { consumeContext, createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
2
2
  import { motionValue, scroll } from "motion";
3
3
  import { createStore, merge, omit, onCleanup } from "solid-js";
4
- import { consume, createContext, provide } from "component-register";
4
+ import { createContext, provide } from "component-register";
5
5
  //#region src/hooks/useParallax.ts
6
6
  function initializeParallaxContext(props) {
7
7
  const _state = omit(props, "root");
@@ -53,7 +53,7 @@ var useParallaxContext = (context) => {
53
53
  return context;
54
54
  };
55
55
  var useParallax = (element) => {
56
- const context = consume(ParallaxContextState, element);
56
+ const context = consumeContext(ParallaxContextState, element);
57
57
  if (!context) throw new Error("ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.");
58
58
  return useParallaxContext(context);
59
59
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useParallax.js","names":[],"sources":["../../../src/hooks/useParallax.ts"],"sourcesContent":["import {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { motionValue, scroll } from \"motion\";\nimport { createStore, merge, omit, onCleanup } from \"solid-js\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tmaxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst _state = omit(props, \"root\");\n\n\tconst scrollYProgress = motionValue(-1);\n\tconst scrollY = motionValue(-1);\n\tconst [info, setInfo] = createStore({\n\t\toffset: [-1, -1],\n\t\tscrollLength: -1,\n\t});\n\n\tcreateGuardedEffect(\n\t\t() => _state.maxPages,\n\t\t(pages) => {\n\t\t\tprops.root.style.height = `${pages * 100}vh`;\n\t\t\tprops.root.style.width = `100%`;\n\t\t\tprops.root.style.position = \"relative\";\n\t\t\tif (!props.root.style.display) {\n\t\t\t\tprops.root.style.display = \"block\";\n\t\t\t}\n\n\t\t\tconst remove = scroll(\n\t\t\t\t(_, info) => {\n\t\t\t\t\tconst { y } = info;\n\n\t\t\t\t\tscrollYProgress.set(y.progress);\n\t\t\t\t\tscrollY.set(y.current);\n\t\t\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\t\t\t// v2 store setters are draft-first: mutate in place, no paths.\n\t\t\t\t\tsetInfo((draft) => {\n\t\t\t\t\t\tdraft.offset[0] = y.offset?.at(0) || 0;\n\t\t\t\t\t\tdraft.offset[1] = y.offset?.at(1) || 0;\n\t\t\t\t\t\tdraft.scrollLength = y.scrollLength;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttarget: props.root,\n\t\t\t\t\taxis: \"y\",\n\t\t\t\t\toffset: [\"start start\", \"end end\"],\n\t\t\t\t},\n\t\t\t);\n\n\t\t\treturn () => {\n\t\t\t\tif (remove) {\n\t\t\t\t\tremove();\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t);\n\n\t// Context scope, not the effect's cleanup. These two are created here and\n\t// never recreated, but `destroy()` used to run every time `maxPages`\n\t// changed and the effect re-ran — and `destroy()` calls `clearListeners()`,\n\t// which drops every subscriber including each `parallax-sticky-layer`'s.\n\t// Layers happen to re-subscribe because their own effect also depends on\n\t// `maxPages`, so this worked by ordering rather than by design.\n\tonCleanup(() => {\n\t\tscrollYProgress.destroy();\n\t\tscrollY.destroy();\n\t});\n\n\treturn merge(_state, {\n\t\tscrollYProgress,\n\t\tscrollY,\n\t\tinfo,\n\t});\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n\treturn context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n\tconst context: ParallaxContext = consume(ParallaxContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxContext(context);\n};\n\nexport const useParallaxAt =\n\tcreateRemoteContext<ParallaxContext>(ParallaxContextState);\n\nexport const getParallaxContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxContext>(\n\t\tParallaxContextState,\n\t\telement,\n\t);\n\treturn useParallaxContext(context);\n};\n"],"mappings":";;;;;AAuBA,SAAS,0BAA0B,OAA6B;CAE/D,MAAM,SAAS,KAAK,OAAO,MAAM;CAEjC,MAAM,kBAAkB,YAAY,EAAE;CACtC,MAAM,UAAU,YAAY,EAAE;CAC9B,MAAM,CAAC,MAAM,WAAW,YAAY;EACnC,QAAQ,CAAC,IAAI,EAAE;EACf,cAAc;CACf,CAAC;CAED,0BACO,OAAO,WACZ,UAAU;EACV,MAAM,KAAK,MAAM,SAAS,GAAG,QAAQ,IAAI;EACzC,MAAM,KAAK,MAAM,QAAQ;EACzB,MAAM,KAAK,MAAM,WAAW;EAC5B,IAAI,CAAC,MAAM,KAAK,MAAM,SACrB,MAAM,KAAK,MAAM,UAAU;EAG5B,MAAM,SAAS,QACb,GAAG,SAAS;GACZ,MAAM,EAAE,MAAM;GAEd,gBAAgB,IAAI,EAAE,QAAQ;GAC9B,QAAQ,IAAI,EAAE,OAAO;GAGrB,SAAS,UAAU;IAClB,MAAM,OAAO,KAAK,EAAE,QAAQ,GAAG,CAAC,KAAK;IACrC,MAAM,OAAO,KAAK,EAAE,QAAQ,GAAG,CAAC,KAAK;IACrC,MAAM,eAAe,EAAE;GACxB,CAAC;EACF,GACA;GACC,QAAQ,MAAM;GACd,MAAM;GACN,QAAQ,CAAC,eAAe,SAAS;EAClC,CACD;EAEA,aAAa;GACZ,IAAI,QACH,OAAO;EAET;CACD,CACD;CAQA,gBAAgB;EACf,gBAAgB,QAAQ;EACxB,QAAQ,QAAQ;CACjB,CAAC;CAED,OAAO,MAAM,QAAQ;EACpB;EACA;EACA;CACD,CAAC;AACF;AAEA,IAAM,uBAAuB,cAAc,yBAAyB;AAEpE,IAAa,0BACZ,cACA,YACqB;CACrB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,sBAAsB,OAAO,OAAO;AACpD;AAEA,IAAa,sBAAsB,YAA6B;CAC/D,OAAO;AACR;AAEA,IAAa,eAAe,YAA0C;CACrE,MAAM,UAA2B,QAAQ,sBAAsB,OAAO;CAEtE,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,uGACD;CAGD,OAAO,mBAAmB,OAAO;AAClC;AAEA,IAAa,gBACZ,oBAAqC,oBAAoB;AAE1D,IAAa,sBAAsB,YAAqB;CAKvD,OAAO,mBAJS,uBACf,sBACA,OAEyB,CAAO;AAClC"}
1
+ {"version":3,"file":"useParallax.js","names":[],"sources":["../../../src/hooks/useParallax.ts"],"sourcesContent":["import {\n\tconsumeContext,\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { motionValue, scroll } from \"motion\";\nimport { createStore, merge, omit, onCleanup } from \"solid-js\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tmaxPages: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxContext = ReturnType<typeof initializeParallaxContext>;\n\nfunction initializeParallaxContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst _state = omit(props, \"root\");\n\n\tconst scrollYProgress = motionValue(-1);\n\tconst scrollY = motionValue(-1);\n\tconst [info, setInfo] = createStore({\n\t\toffset: [-1, -1],\n\t\tscrollLength: -1,\n\t});\n\n\tcreateGuardedEffect(\n\t\t() => _state.maxPages,\n\t\t(pages) => {\n\t\t\tprops.root.style.height = `${pages * 100}vh`;\n\t\t\tprops.root.style.width = `100%`;\n\t\t\tprops.root.style.position = \"relative\";\n\t\t\tif (!props.root.style.display) {\n\t\t\t\tprops.root.style.display = \"block\";\n\t\t\t}\n\n\t\t\tconst remove = scroll(\n\t\t\t\t(_, info) => {\n\t\t\t\t\tconst { y } = info;\n\n\t\t\t\t\tscrollYProgress.set(y.progress);\n\t\t\t\t\tscrollY.set(y.current);\n\t\t\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\t\t\t// v2 store setters are draft-first: mutate in place, no paths.\n\t\t\t\t\tsetInfo((draft) => {\n\t\t\t\t\t\tdraft.offset[0] = y.offset?.at(0) || 0;\n\t\t\t\t\t\tdraft.offset[1] = y.offset?.at(1) || 0;\n\t\t\t\t\t\tdraft.scrollLength = y.scrollLength;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttarget: props.root,\n\t\t\t\t\taxis: \"y\",\n\t\t\t\t\toffset: [\"start start\", \"end end\"],\n\t\t\t\t},\n\t\t\t);\n\n\t\t\treturn () => {\n\t\t\t\tif (remove) {\n\t\t\t\t\tremove();\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t);\n\n\t// Context scope, not the effect's cleanup. These two are created here and\n\t// never recreated, but `destroy()` used to run every time `maxPages`\n\t// changed and the effect re-ran — and `destroy()` calls `clearListeners()`,\n\t// which drops every subscriber including each `parallax-sticky-layer`'s.\n\t// Layers happen to re-subscribe because their own effect also depends on\n\t// `maxPages`, so this worked by ordering rather than by design.\n\tonCleanup(() => {\n\t\tscrollYProgress.destroy();\n\t\tscrollY.destroy();\n\t});\n\n\treturn merge(_state, {\n\t\tscrollYProgress,\n\t\tscrollY,\n\t\tinfo,\n\t});\n}\n\nconst ParallaxContextState = createContext(initializeParallaxContext);\n\nexport const provideParallaxContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ParallaxContextState, props, element);\n};\n\nexport const useParallaxContext = (context: ParallaxContext) => {\n\treturn context;\n};\n\nexport const useParallax = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<ParallaxContext>(\n\t\tParallaxContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxContext(context);\n};\n\nexport const useParallaxAt =\n\tcreateRemoteContext<ParallaxContext>(ParallaxContextState);\n\nexport const getParallaxContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxContext>(\n\t\tParallaxContextState,\n\t\telement,\n\t);\n\treturn useParallaxContext(context);\n};\n"],"mappings":";;;;;AAuBA,SAAS,0BAA0B,OAA6B;CAE/D,MAAM,SAAS,KAAK,OAAO,MAAM;CAEjC,MAAM,kBAAkB,YAAY,EAAE;CACtC,MAAM,UAAU,YAAY,EAAE;CAC9B,MAAM,CAAC,MAAM,WAAW,YAAY;EACnC,QAAQ,CAAC,IAAI,EAAE;EACf,cAAc;CACf,CAAC;CAED,0BACO,OAAO,WACZ,UAAU;EACV,MAAM,KAAK,MAAM,SAAS,GAAG,QAAQ,IAAI;EACzC,MAAM,KAAK,MAAM,QAAQ;EACzB,MAAM,KAAK,MAAM,WAAW;EAC5B,IAAI,CAAC,MAAM,KAAK,MAAM,SACrB,MAAM,KAAK,MAAM,UAAU;EAG5B,MAAM,SAAS,QACb,GAAG,SAAS;GACZ,MAAM,EAAE,MAAM;GAEd,gBAAgB,IAAI,EAAE,QAAQ;GAC9B,QAAQ,IAAI,EAAE,OAAO;GAGrB,SAAS,UAAU;IAClB,MAAM,OAAO,KAAK,EAAE,QAAQ,GAAG,CAAC,KAAK;IACrC,MAAM,OAAO,KAAK,EAAE,QAAQ,GAAG,CAAC,KAAK;IACrC,MAAM,eAAe,EAAE;GACxB,CAAC;EACF,GACA;GACC,QAAQ,MAAM;GACd,MAAM;GACN,QAAQ,CAAC,eAAe,SAAS;EAClC,CACD;EAEA,aAAa;GACZ,IAAI,QACH,OAAO;EAET;CACD,CACD;CAQA,gBAAgB;EACf,gBAAgB,QAAQ;EACxB,QAAQ,QAAQ;CACjB,CAAC;CAED,OAAO,MAAM,QAAQ;EACpB;EACA;EACA;CACD,CAAC;AACF;AAEA,IAAM,uBAAuB,cAAc,yBAAyB;AAEpE,IAAa,0BACZ,cACA,YACqB;CACrB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,sBAAsB,OAAO,OAAO;AACpD;AAEA,IAAa,sBAAsB,YAA6B;CAC/D,OAAO;AACR;AAEA,IAAa,eAAe,YAA0C;CACrE,MAAM,UAAU,eACf,sBACA,OACD;CAEA,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,uGACD;CAGD,OAAO,mBAAmB,OAAO;AAClC;AAEA,IAAa,gBACZ,oBAAqC,oBAAoB;AAE1D,IAAa,sBAAsB,YAAqB;CAKvD,OAAO,mBAJS,uBACf,sBACA,OAEyB,CAAO;AAClC"}
@@ -1,10 +1,10 @@
1
1
  import { useParallax } from "./useParallax.js";
2
2
  import { isInRange, normalizeTuple } from "../utils.js";
3
- import { createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
3
+ import { consumeContext, createGuardedEffect, createRemoteContext, getContextFromProvider } from "@brytdesigns/web-component-core/utils";
4
4
  import { awaitAllAnimations } from "@brytdesigns/web-component-core/animation";
5
5
  import { animate, frame, motionValue, transform, transformValue } from "motion";
6
6
  import { merge, omit, onCleanup } from "solid-js";
7
- import { consume, createContext, provide } from "component-register";
7
+ import { createContext, provide } from "component-register";
8
8
  import { abortablePromise } from "@brytdesigns/web-component-core/promise";
9
9
  //#region src/hooks/useParallaxStickyLayer.ts
10
10
  function initializeParallaxStickyLayerContext(props) {
@@ -97,7 +97,7 @@ var useParallaxStickyLayerContext = (context) => {
97
97
  return context;
98
98
  };
99
99
  var useParallaxStickyLayer = (element) => {
100
- const context = consume(ParallaxStickyLayerContextState, element);
100
+ const context = consumeContext(ParallaxStickyLayerContextState, element);
101
101
  if (!context) throw new Error("ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.");
102
102
  return useParallaxStickyLayerContext(context);
103
103
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useParallaxStickyLayer.js","names":[],"sources":["../../../src/hooks/useParallaxStickyLayer.ts"],"sourcesContent":["import { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport {\n\ttype AnimationPlaybackControlsWithThen,\n\tanimate,\n\tframe,\n\tmotionValue,\n\ttransform as mTransform,\n\ttransformValue,\n} from \"motion\";\nimport { merge, omit, onCleanup } from \"solid-js\";\nimport { isInRange, normalizeTuple } from \"../utils\";\nimport { useParallax } from \"./useParallax\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tstart: number;\n\tend: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n\ttypeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; picked keys come straight off `props`.\n\tconst _state = omit(props, \"root\", \"start\", \"end\");\n\tconst parallax = useParallax(props.root);\n\n\tconst progress = motionValue(-1);\n\tconst inRange = motionValue(false);\n\tconst belowRange = motionValue(false);\n\tconst aboveRange = motionValue(false);\n\n\tconst position = transformValue(() =>\n\t\tinRange.get() ? \"sticky\" : \"absolute\",\n\t);\n\tconst transform = transformValue(() => {\n\t\tconst isInRange = inRange.get();\n\t\tconst isBelowRange = belowRange.get();\n\t\tconst isAboveRange = aboveRange.get();\n\t\tif (isInRange) return \"none\";\n\t\tif (isBelowRange) return `translate(0px, ${(props.start - 1) * 100}vh)`;\n\t\tif (isAboveRange) return `translate(0px, ${(props.end - 1) * 100}vh)`;\n\t});\n\tconst animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n\tconst styles = transformValue(() => ({\n\t\tposition: position.get(),\n\t\ttransform: transform.get(),\n\t}));\n\n\tprops.root.style.top = \"0px\";\n\tprops.root.style.right = \"0px\";\n\tprops.root.style.bottom = \"0px\";\n\tprops.root.style.left = \"0px\";\n\tprops.root.style.height = `100dvh`;\n\tprops.root.style.overflowX = \"hidden\";\n\tprops.root.style.maxWidth = \"100%\";\n\tif (window.getComputedStyle(props.root).display === \"inline\") {\n\t\tprops.root.style.display = \"block\";\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => ({ start: props.start, end: props.end, maxPages: parallax.maxPages }),\n\t\t({ start, end, maxPages }) => {\n\t\t\tconst range = [start, end];\n\t\t\tconst normalizedRange = normalizeTuple(range as any, maxPages);\n\t\t\tconst [normStart, normEnd] = normalizedRange;\n\t\t\tconst transformer = mTransform(normalizedRange as any, [0, 1]);\n\n\t\t\tconst unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n\t\t\t\tinRange.set(isInRange({ range: normalizedRange as any, value }));\n\t\t\t\tbelowRange.set(value <= normStart);\n\t\t\t\taboveRange.set(value >= normEnd);\n\t\t\t\tprogress.set(transformer(value));\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tunsubscribe();\n\t\t\t};\n\t\t},\n\t);\n\n\tfunction updateStyles() {\n\t\tconst s = styles.get();\n\t\tprops.root.style.position = s.position;\n\t\tprops.root.style.transform = s.transform;\n\t}\n\n\tfunction renderStyles() {\n\t\tframe.render(updateStyles);\n\t}\n\n\tfunction waitForAnimations() {\n\t\tconst a = animations.get();\n\t\tconst controller = new AbortController();\n\t\tabortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n\t\t\tanimations.set([]);\n\t\t\trenderStyles();\n\t\t});\n\t}\n\n\tconst unsubStyles = styles.on(\"change\", (_) => {\n\t\tif (progress.get() === 1 || progress.get() === 0)\n\t\t\treturn waitForAnimations();\n\t\tanimations.set([]);\n\t\trenderStyles();\n\t});\n\n\tfunction _animate(...args: Parameters<typeof animate>) {\n\t\tconst animation = animate(...args);\n\t\tanimations.set([...animations.get(), animation]);\n\t\treturn animation;\n\t}\n\n\tonCleanup(() => {\n\t\tunsubStyles();\n\t});\n\n\treturn [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n\tinitializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxStickyLayerContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n\tcontext: ParallaxStickyLayerContext,\n) => {\n\treturn context;\n};\n\nexport const useParallaxStickyLayer = (\n\telement: HTMLElement & ICustomElement,\n) => {\n\tconst context: ParallaxStickyLayerContext = consume(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxStickyLayerContext(context);\n};\n\nexport const useParallaxStickyLayerAt =\n\tcreateRemoteContext<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t);\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\treturn useParallaxStickyLayerContext(context);\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"useParallaxStickyLayer.js","names":[],"sources":["../../../src/hooks/useParallaxStickyLayer.ts"],"sourcesContent":["import { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tconsumeContext,\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport {\n\ttype AnimationPlaybackControlsWithThen,\n\tanimate,\n\tframe,\n\tmotionValue,\n\ttransform as mTransform,\n\ttransformValue,\n} from \"motion\";\nimport { merge, omit, onCleanup } from \"solid-js\";\nimport { isInRange, normalizeTuple } from \"../utils\";\nimport { useParallax } from \"./useParallax\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tstart: number;\n\tend: number;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ParallaxStickyLayerContext = ReturnType<\n\ttypeof initializeParallaxStickyLayerContext\n>;\n\nfunction initializeParallaxStickyLayerContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; picked keys come straight off `props`.\n\tconst _state = omit(props, \"root\", \"start\", \"end\");\n\tconst parallax = useParallax(props.root);\n\n\tconst progress = motionValue(-1);\n\tconst inRange = motionValue(false);\n\tconst belowRange = motionValue(false);\n\tconst aboveRange = motionValue(false);\n\n\tconst position = transformValue(() =>\n\t\tinRange.get() ? \"sticky\" : \"absolute\",\n\t);\n\tconst transform = transformValue(() => {\n\t\tconst isInRange = inRange.get();\n\t\tconst isBelowRange = belowRange.get();\n\t\tconst isAboveRange = aboveRange.get();\n\t\tif (isInRange) return \"none\";\n\t\tif (isBelowRange) return `translate(0px, ${(props.start - 1) * 100}vh)`;\n\t\tif (isAboveRange) return `translate(0px, ${(props.end - 1) * 100}vh)`;\n\t});\n\tconst animations = motionValue<AnimationPlaybackControlsWithThen[]>([]);\n\n\tconst styles = transformValue(() => ({\n\t\tposition: position.get(),\n\t\ttransform: transform.get(),\n\t}));\n\n\tprops.root.style.top = \"0px\";\n\tprops.root.style.right = \"0px\";\n\tprops.root.style.bottom = \"0px\";\n\tprops.root.style.left = \"0px\";\n\tprops.root.style.height = `100dvh`;\n\tprops.root.style.overflowX = \"hidden\";\n\tprops.root.style.maxWidth = \"100%\";\n\tif (window.getComputedStyle(props.root).display === \"inline\") {\n\t\tprops.root.style.display = \"block\";\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => ({ start: props.start, end: props.end, maxPages: parallax.maxPages }),\n\t\t({ start, end, maxPages }) => {\n\t\t\tconst range = [start, end];\n\t\t\tconst normalizedRange = normalizeTuple(range as any, maxPages);\n\t\t\tconst [normStart, normEnd] = normalizedRange;\n\t\t\tconst transformer = mTransform(normalizedRange as any, [0, 1]);\n\n\t\t\tconst unsubscribe = parallax.scrollYProgress.on(\"change\", (value) => {\n\t\t\t\tinRange.set(isInRange({ range: normalizedRange as any, value }));\n\t\t\t\tbelowRange.set(value <= normStart);\n\t\t\t\taboveRange.set(value >= normEnd);\n\t\t\t\tprogress.set(transformer(value));\n\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tunsubscribe();\n\t\t\t};\n\t\t},\n\t);\n\n\tfunction updateStyles() {\n\t\tconst s = styles.get();\n\t\tprops.root.style.position = s.position;\n\t\tprops.root.style.transform = s.transform;\n\t}\n\n\tfunction renderStyles() {\n\t\tframe.render(updateStyles);\n\t}\n\n\tfunction waitForAnimations() {\n\t\tconst a = animations.get();\n\t\tconst controller = new AbortController();\n\t\tabortablePromise(awaitAllAnimations(a), controller.signal).then(() => {\n\t\t\tanimations.set([]);\n\t\t\trenderStyles();\n\t\t});\n\t}\n\n\tconst unsubStyles = styles.on(\"change\", (_) => {\n\t\tif (progress.get() === 1 || progress.get() === 0)\n\t\t\treturn waitForAnimations();\n\t\tanimations.set([]);\n\t\trenderStyles();\n\t});\n\n\tfunction _animate(...args: Parameters<typeof animate>) {\n\t\tconst animation = animate(...args);\n\t\tanimations.set([...animations.get(), animation]);\n\t\treturn animation;\n\t}\n\n\tonCleanup(() => {\n\t\tunsubStyles();\n\t});\n\n\treturn [progress, { animate: _animate }] as const;\n}\n\nconst ParallaxStickyLayerContextState = createContext(\n\tinitializeParallaxStickyLayerContext,\n);\n\nexport const provideParallaxStickyLayerContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): ParallaxStickyLayerContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(ParallaxStickyLayerContextState, props, element);\n};\n\nexport const useParallaxStickyLayerContext = (\n\tcontext: ParallaxStickyLayerContext,\n) => {\n\treturn context;\n};\n\nexport const useParallaxStickyLayer = (\n\telement: HTMLElement & ICustomElement,\n) => {\n\tconst context = consumeContext<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"ParallaxContext not found! Please ensure to wrap your custom element with parallax-container element.\",\n\t\t);\n\t}\n\n\treturn useParallaxStickyLayerContext(context);\n};\n\nexport const useParallaxStickyLayerAt =\n\tcreateRemoteContext<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t);\n\nexport const getParallaxStickyLayerContext = (element: Element) => {\n\tconst context = getContextFromProvider<ParallaxStickyLayerContext>(\n\t\tParallaxStickyLayerContextState,\n\t\telement,\n\t);\n\treturn useParallaxStickyLayerContext(context);\n};\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brytdesigns/web-component-parallax",
3
- "version": "3.3.2",
3
+ "version": "3.4.0",
4
4
  "description": "Headless parallax animation web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",
@@ -19,7 +19,7 @@
19
19
  "author": "Bryt Designs",
20
20
  "license": "ISC",
21
21
  "dependencies": {
22
- "@brytdesigns/web-component-core": "3.3.2",
22
+ "@brytdesigns/web-component-core": "3.4.0",
23
23
  "component-register": "0.8.7",
24
24
  "motion": "^12.43.0",
25
25
  "solid-js": "2.0.0-rc.14"