@brytdesigns/web-component-keen-slider-scrollbar 1.1.1 → 1.1.2

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.
Files changed (7) hide show
  1. package/dist/esm/index.js +31 -39
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/main/components/keen-slider-scrollbar.js +26 -27
  4. package/dist/main/components/keen-slider-scrollbar.js.map +1 -1
  5. package/dist/main/utils.js +5 -10
  6. package/dist/main/utils.js.map +1 -1
  7. package/package.json +4 -3
package/dist/esm/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
2
2
  import html from 'solid-js/html';
3
- import { createSignal, createMemo, on, createEffect, onCleanup, batch, Show, For } from 'solid-js';
3
+ import { createSignal, createMemo, on, onCleanup, createEffect, batch, Show, For } from 'solid-js';
4
4
  import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
5
5
  import { Draggable } from '@neodrag/vanilla';
6
- import { animate } from 'popmotion';
6
+ import { motionValue, transformValue, animate } from 'motion';
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
9
  var __export = (target, all) => {
@@ -52,17 +52,12 @@ function findClosestBreakpoint(position, breakpoints, container, scrollbar) {
52
52
  return breakpoints[bpIndex];
53
53
  }
54
54
  function getMaxSlides(slider) {
55
- const perView = slider.options?.slides?.perView || 1;
56
- if (perView === "auto") {
57
- const maxIdx = slider?.track?.details?.maxIdx || 1;
58
- const perScroll2 = slider.options?.slides?.perScroll || 1;
59
- const result2 = Math.ceil((slider.slides.length - maxIdx) / perScroll2) + 1;
60
- return result2;
61
- }
55
+ const maxIdx = slider?.track?.details?.maxIdx || 1;
62
56
  const perScroll = slider.options?.slides?.perScroll || 1;
63
- const result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;
64
- if (perScroll === 1 && perView === 1) return slider.slides.length;
65
- return result;
57
+ if (!Number.isFinite(maxIdx)) {
58
+ return Math.ceil(slider.slides.length / perScroll);
59
+ }
60
+ return Math.ceil(maxIdx / perScroll) + 1;
66
61
  }
67
62
  function getRelativeBreakpoint(slider, breakpoints) {
68
63
  const maxSlides = getMaxSlides(slider), perScroll = slider.options?.slides?.perScroll || 1;
@@ -73,8 +68,6 @@ function getRelativeBreakpoint(slider, breakpoints) {
73
68
  );
74
69
  return breakpoints[relativeIdx];
75
70
  }
76
-
77
- // src/components/keen-slider-scrollbar.ts
78
71
  var Name = `keen-slider-scrollbar`;
79
72
  var Component = (props, { element }) => {
80
73
  if (!props.target)
@@ -83,7 +76,12 @@ var Component = (props, { element }) => {
83
76
  );
84
77
  const [slider, setSlider] = createSignal();
85
78
  const [thumb, setThumb] = createSignal(null);
86
- const [position, setPosition] = createSignal({ x: 0, y: 0 });
79
+ const positionX = motionValue(0);
80
+ const positionY = motionValue(0);
81
+ const position = transformValue(() => ({
82
+ x: positionX.get(),
83
+ y: positionY.get()
84
+ }));
87
85
  const [maxIdx, setMaxIdx] = createSignal(
88
86
  slider()?.track?.details?.maxIdx || 0
89
87
  );
@@ -104,12 +102,18 @@ var Component = (props, { element }) => {
104
102
  axis: props.isVertical ? "y" : "x",
105
103
  bounds: "parent",
106
104
  gpuAcceleration: true,
107
- position: position(),
105
+ position: {
106
+ x: positionX.get(),
107
+ y: positionY.get()
108
+ },
108
109
  transform({ offsetX, offsetY }) {
109
110
  if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;
110
111
  return `translate3d(${offsetX}px, -50%, 0)`;
111
112
  },
112
- onDrag: ({ offsetX, offsetY }) => setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),
113
+ onDrag: ({ offsetX, offsetY }) => {
114
+ positionY.set(offsetY);
115
+ positionX.set(offsetX);
116
+ },
113
117
  onDragEnd: (position2) => {
114
118
  if (!breakpointsContainer) return;
115
119
  const s = slider();
@@ -128,13 +132,12 @@ var Component = (props, { element }) => {
128
132
  },
129
133
  ignoreMultitouch: true
130
134
  });
131
- createEffect(
132
- on(position, (position2) => {
133
- instance.updateOptions({
134
- position: position2
135
- });
136
- })
137
- );
135
+ const unsub = position.on("change", (latest) => {
136
+ instance.updateOptions({
137
+ position: latest
138
+ });
139
+ });
140
+ onCleanup(unsub);
138
141
  return instance;
139
142
  })
140
143
  );
@@ -181,7 +184,8 @@ var Component = (props, { element }) => {
181
184
  const t = thumb();
182
185
  if (!t) return;
183
186
  const p = calculateMidpointPositionFromBP(bp, element, t);
184
- setPosition(p);
187
+ positionY.set(p.y);
188
+ positionX.set(p.x);
185
189
  setMaxIdx(slider2.track.details.maxIdx);
186
190
  }
187
191
  s.on("created", handleUpdate);
@@ -271,20 +275,8 @@ var Component = (props, { element }) => {
271
275
  }
272
276
  );
273
277
  function animateScrollbarPosition(p) {
274
- animate({
275
- from: position().x,
276
- to: p.x,
277
- onUpdate(latest) {
278
- return setPosition((p2) => ({ ...p2, x: latest }));
279
- }
280
- });
281
- animate({
282
- from: position().y,
283
- to: p.y,
284
- onUpdate(latest) {
285
- return setPosition((p2) => ({ ...p2, y: latest }));
286
- }
287
- });
278
+ animate(positionX, p.x, { type: "tween" });
279
+ animate(positionY, p.y, { type: "tween" });
288
280
  }
289
281
  function updateSliderPosition(bp, slider2) {
290
282
  const idx = constrain(
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/keen-slider-scrollbar.ts","../../src/utils.ts","../../src/index.ts"],"names":["perScroll","result","maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n withKeenSliderElementContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\n\ntype Props = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n );\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0,\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n const s = slider();\n if (!s) return 0;\n return getMaxSlides(s);\n }),\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: position(),\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) =>\n setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const s = slider();\n if (!s) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb,\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, s);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n createEffect(\n on(position, (position) => {\n instance.updateOptions({\n position,\n });\n }),\n );\n\n return instance;\n }),\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n }),\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n element.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);\n if (!s) return;\n if (!maxSlides) return;\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n setPosition(p);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"created\", handleUpdate);\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"created\", handleUpdate, true);\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children,\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(`${Name}__breakpoint`)) return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider!);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n },\n ),\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n }),\n );\n\n withKeenSliderElementContext(\n () => {\n const selector = props.target;\n return () => {\n let targetEl: Element | null = element;\n if (props.target) targetEl = document.querySelector(selector);\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl!.querySelector(\"keen-slider\");\n return targetEl!;\n };\n },\n () => null,\n ([_, { addPlugin }]) => {\n const removePlugin = addPlugin((slider) => {\n setSlider(slider);\n\n slider.on(\"created\", function (slider) {\n setMaxIdx(slider.track.details.maxIdx);\n });\n\n slider.on(\"destroyed\", () =>\n batch(() => {\n setMaxIdx(0);\n setSlider();\n setThumb(null);\n }),\n );\n });\n\n onCleanup(removePlugin);\n },\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate({\n from: position().x,\n to: p.x,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, x: latest }));\n },\n });\n animate({\n from: position().y,\n to: p.y,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, y: latest }));\n },\n });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx,\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"${Name}__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"${Name}__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"${Name}__breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n","import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\nimport type { DragEventData } from \"@neodrag/vanilla\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n return Math.max(Math.min(value, max), min);\n}\n\nexport function calculateMidpointPositionFromBP(\n bp: Element,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const bpRect = bp.getBoundingClientRect(),\n scrollbarRect = scrollbar.getBoundingClientRect(),\n containerRect = container.getBoundingClientRect(),\n relativeLeft = bpRect.left - containerRect.left,\n minX = 0,\n maxX = containerRect.width - scrollbarRect.width,\n relativeTop = bpRect.top - containerRect.top,\n minY = 0,\n maxY = containerRect.height - scrollbarRect.height,\n x = constrain(\n relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,\n minX,\n maxX,\n ),\n y = constrain(\n relativeTop + bpRect.height / 2 - scrollbarRect.height / 2,\n minY,\n maxY,\n );\n\n return { x, y };\n}\n\nexport function findClosestBreakpoint(\n position: DragEventData,\n breakpoints: HTMLCollection,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const min = 0,\n max = breakpoints.length - 1;\n\n let closestDiff = { x: Infinity, y: Infinity },\n bpIndex = min;\n\n for (let i = min; i <= max; i++) {\n const bp = breakpoints[i];\n if (!bp) continue;\n const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);\n const diffX = Math.abs(midpointP.x - position.offsetX);\n const diffY = Math.abs(midpointP.y - position.offsetY);\n if (diffX <= closestDiff.x && diffY <= closestDiff.y) {\n closestDiff = { x: diffX, y: diffY };\n bpIndex = i;\n }\n }\n\n return breakpoints[bpIndex];\n}\n\nexport function getMaxSlides(slider: KeenSliderInstance) {\n const perView = (slider.options?.slides as any)?.perView || 1;\n if (perView === \"auto\") {\n const maxIdx = slider?.track?.details?.maxIdx || 1;\n const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n const result = Math.ceil((slider.slides.length - maxIdx) / perScroll) + 1;\n return result;\n }\n const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n const result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;\n if (perScroll === 1 && perView === 1) return slider.slides.length;\n\n return result;\n}\n\nexport function getRelativeBreakpoint(\n slider: KeenSliderInstance,\n breakpoints: HTMLCollection,\n) {\n const maxSlides = getMaxSlides(slider),\n perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n const relativeIdx = constrain(\n Math.ceil(slider.track.details.rel / perScroll),\n 0,\n maxSlides - 1,\n );\n\n return breakpoints[relativeIdx];\n}\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderScrollbar } from \"./components/index.js\";\n\ncustomShadowlessElement(\n KeenSliderScrollbar.Name,\n {\n target: \"\",\n isHidden: true,\n isVertical: false,\n },\n correctElementType(KeenSliderScrollbar.Component),\n);\n"]}
1
+ {"version":3,"sources":["../../src/components/keen-slider-scrollbar.ts","../../src/utils.ts","../../src/index.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides"],"mappings":";;;;;;;;;;;;;;AAAA,IAAA,6BAAA,GAAA,EAAA;AAAA,QAAA,CAAA,6BAAA,EAAA;AAAA,EAAA,SAAA,EAAA,MAAA,SAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA;;;ACIO,IAAM,MAAS,GAAA,CAAA,weAAA,CAAA;AAEf,SAAS,SAAU,CAAA,KAAA,EAAe,GAAM,GAAA,CAAA,QAAA,EAAW,MAAM,QAAU,EAAA;AACxE,EAAA,OAAO,KAAK,GAAI,CAAA,IAAA,CAAK,IAAI,KAAO,EAAA,GAAG,GAAG,GAAG,CAAA;AAC3C;AAEO,SAAS,+BAAA,CACd,EACA,EAAA,SAAA,EACA,SACA,EAAA;AACA,EAAA,MAAM,SAAS,EAAG,CAAA,qBAAA,EAChB,EAAA,aAAA,GAAgB,UAAU,qBAAsB,EAAA,EAChD,aAAgB,GAAA,SAAA,CAAU,uBAC1B,EAAA,YAAA,GAAe,MAAO,CAAA,IAAA,GAAO,cAAc,IAC3C,EAAA,IAAA,GAAO,CACP,EAAA,IAAA,GAAO,cAAc,KAAQ,GAAA,aAAA,CAAc,KAC3C,EAAA,WAAA,GAAc,OAAO,GAAM,GAAA,aAAA,CAAc,GACzC,EAAA,IAAA,GAAO,GACP,IAAO,GAAA,aAAA,CAAc,MAAS,GAAA,aAAA,CAAc,QAC5C,CAAI,GAAA,SAAA;AAAA,IACF,YAAe,GAAA,MAAA,CAAO,KAAQ,GAAA,CAAA,GAAI,cAAc,KAAQ,GAAA,CAAA;AAAA,IACxD,IAAA;AAAA,IACA;AAAA,KAEF,CAAI,GAAA,SAAA;AAAA,IACF,WAAc,GAAA,MAAA,CAAO,MAAS,GAAA,CAAA,GAAI,cAAc,MAAS,GAAA,CAAA;AAAA,IACzD,IAAA;AAAA,IACA;AAAA,GACF;AAEF,EAAO,OAAA,EAAE,GAAG,CAAE,EAAA;AAChB;AAEO,SAAS,qBACd,CAAA,QAAA,EACA,WACA,EAAA,SAAA,EACA,SACA,EAAA;AACA,EAAA,MAAM,GAAM,GAAA,CAAA,EACV,GAAM,GAAA,WAAA,CAAY,MAAS,GAAA,CAAA;AAE7B,EAAA,IAAI,cAAc,EAAE,CAAA,EAAG,UAAU,CAAG,EAAA,QAAA,IAClC,OAAU,GAAA,GAAA;AAEZ,EAAA,KAAA,IAAS,CAAI,GAAA,GAAA,EAAK,CAAK,IAAA,GAAA,EAAK,CAAK,EAAA,EAAA;AAC/B,IAAM,MAAA,EAAA,GAAK,YAAY,CAAC,CAAA;AACxB,IAAA,IAAI,CAAC,EAAI,EAAA;AACT,IAAA,MAAM,SAAY,GAAA,+BAAA,CAAgC,EAAI,EAAA,SAAA,EAAW,SAAS,CAAA;AAC1E,IAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,CAAI,SAAU,CAAA,CAAA,GAAI,SAAS,OAAO,CAAA;AACrD,IAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,CAAI,SAAU,CAAA,CAAA,GAAI,SAAS,OAAO,CAAA;AACrD,IAAA,IAAI,KAAS,IAAA,WAAA,CAAY,CAAK,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AACpD,MAAA,WAAA,GAAc,EAAE,CAAA,EAAG,KAAO,EAAA,CAAA,EAAG,KAAM,EAAA;AACnC,MAAU,OAAA,GAAA,CAAA;AAAA;AACZ;AAGF,EAAA,OAAO,YAAY,OAAO,CAAA;AAC5B;AAEO,SAAS,aAAa,MAA4B,EAAA;AACvD,EAAA,MAAM,MAAS,GAAA,MAAA,EAAQ,KAAO,EAAA,OAAA,EAAS,MAAU,IAAA,CAAA;AACjD,EAAA,MAAM,SAAa,GAAA,MAAA,CAAO,OAAS,EAAA,MAAA,EAAgB,SAAa,IAAA,CAAA;AAEhE,EAAA,IAAI,CAAC,MAAA,CAAO,QAAS,CAAA,MAAM,CAAG,EAAA;AAC5B,IAAA,OAAO,IAAK,CAAA,IAAA,CAAK,MAAO,CAAA,MAAA,CAAO,SAAS,SAAS,CAAA;AAAA;AAGnD,EAAA,OAAO,IAAK,CAAA,IAAA,CAAK,MAAS,GAAA,SAAS,CAAI,GAAA,CAAA;AACzC;AAEO,SAAS,qBAAA,CACd,QACA,WACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAY,aAAa,MAAM,CAAA,EACnC,YAAa,MAAO,CAAA,OAAA,EAAS,QAAgB,SAAa,IAAA,CAAA;AAE5D,EAAA,MAAM,WAAc,GAAA,SAAA;AAAA,IAClB,KAAK,IAAK,CAAA,MAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,MAAM,SAAS,CAAA;AAAA,IAC9C,CAAA;AAAA,IACA,SAAY,GAAA;AAAA,GACd;AAEA,EAAA,OAAO,YAAY,WAAW,CAAA;AAChC;ADtDO,IAAM,IAAO,GAAA,CAAA,qBAAA,CAAA;AAEb,IAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,IAAI,CAAC,KAAM,CAAA,MAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb,GAAG,IAAI,CAAA,kEAAA;AAAA,KACT;AAEF,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,YAAiC,EAAA;AAE7D,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAiC,IAAI,CAAA;AAC/D,EAAM,MAAA,SAAA,GAAY,YAAY,CAAC,CAAA;AAC/B,EAAM,MAAA,SAAA,GAAY,YAAY,CAAC,CAAA;AAC/B,EAAM,MAAA,QAAA,GAAW,eAAe,OAAO;AAAA,IACrC,CAAA,EAAG,UAAU,GAAI,EAAA;AAAA,IACjB,CAAA,EAAG,UAAU,GAAI;AAAA,GACjB,CAAA,CAAA;AAEF,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,YAAA;AAAA,IAC1B,MAAO,EAAA,EAAG,KAAO,EAAA,OAAA,EAAS,MAAU,IAAA;AAAA,GACtC;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAa,CAAC,CAAA;AAElD,EAAA,IAAI,oBAA2C,GAAA,IAAA;AAE/C,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAChB,EAAA,CAAG,MAAQ,EAAA,CAACA,OAAW,KAAA;AACrB,MAAI,IAAA,CAACA,SAAe,OAAA,CAAA;AACpB,MAAA,MAAM,IAAI,MAAO,EAAA;AACjB,MAAI,IAAA,CAAC,GAAU,OAAA,CAAA;AACf,MAAA,OAAO,aAAa,CAAC,CAAA;AAAA,KACtB;AAAA,GACH;AAEA,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAChB,EAAA,CAAG,KAAO,EAAA,CAACC,MAAU,KAAA;AACnB,MAAI,IAAA,CAACA,QAAc,OAAA,IAAA;AACnB,MAAM,MAAA,QAAA,GAAW,IAAI,SAAA,CAAUA,MAAO,EAAA;AAAA,QACpC,IAAA,EAAM,KAAM,CAAA,UAAA,GAAa,GAAM,GAAA,GAAA;AAAA,QAC/B,MAAQ,EAAA,QAAA;AAAA,QACR,eAAiB,EAAA,IAAA;AAAA,QACjB,QAAU,EAAA;AAAA,UACR,CAAA,EAAG,UAAU,GAAI,EAAA;AAAA,UACjB,CAAA,EAAG,UAAU,GAAI;AAAA,SACnB;AAAA,QACA,SAAU,CAAA,EAAE,OAAS,EAAA,OAAA,EAAW,EAAA;AAC9B,UAAA,IAAI,KAAM,CAAA,UAAA,EAAmB,OAAA,CAAA,kBAAA,EAAqB,OAAO,CAAA,MAAA,CAAA;AACzD,UAAA,OAAO,eAAe,OAAO,CAAA,YAAA,CAAA;AAAA,SAC/B;AAAA,QACA,MAAQ,EAAA,CAAC,EAAE,OAAA,EAAS,SAAc,KAAA;AAChC,UAAA,SAAA,CAAU,IAAI,OAAO,CAAA;AACrB,UAAA,SAAA,CAAU,IAAI,OAAO,CAAA;AAAA,SACvB;AAAA,QACA,SAAA,EAAW,CAACC,SAAa,KAAA;AACvB,UAAA,IAAI,CAAC,oBAAsB,EAAA;AAC3B,UAAA,MAAM,IAAI,MAAO,EAAA;AACjB,UAAA,IAAI,CAAC,CAAG,EAAA;AACR,UAAA,MAAM,EAAK,GAAA,qBAAA;AAAA,YACTA,SAAAA;AAAA,YACA,oBAAqB,CAAA,QAAA;AAAA,YACrB,OAAA;AAAA,YACAD;AAAA,WACF;AACA,UAAA,IAAI,CAAC,EAAI,EAAA;AACT,UAAA,MAAM,CAAI,GAAA,+BAAA,CAAgC,EAAI,EAAA,OAAA,EAASA,MAAK,CAAA;AAC5D,UAAA,wBAAA,CAAyB,CAAC,CAAA;AAC1B,UAAA,oBAAA,CAAqB,IAAI,CAAC,CAAA;AAC1B,UAAA,aAAA,CAAc,SAAS,EAAG,CAAA,YAAA,CAAa,YAAY,CAAA,IAAK,GAAG,CAAC,CAAA;AAAA,SAC9D;AAAA,QACA,gBAAkB,EAAA;AAAA,OACnB,CAAA;AAED,MAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,EAAG,CAAA,QAAA,EAAU,CAAC,MAAW,KAAA;AAC9C,QAAA,QAAA,CAAS,aAAc,CAAA;AAAA,UACrB,QAAU,EAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAED,MAAA,SAAA,CAAU,KAAK,CAAA;AAEf,MAAO,OAAA,QAAA;AAAA,KACR;AAAA,GACH;AAEA,EAAA,YAAA;AAAA,IACE,EAAA,CAAG,SAAW,EAAA,CAACE,UAAc,KAAA;AAC3B,MAAA,IAAI,CAACA,UAAW,EAAA;AAChB,MAAA,SAAA,CAAU,MAAM;AACd,QAAAA,WAAU,OAAQ,EAAA;AAAA,OACnB,CAAA;AAAA,KACF;AAAA,GACH;AAEA,EAAA,YAAA;AAAA,IACE,EAAA,CAAG,MAAQ,EAAA,CAACC,OAAW,KAAA;AACrB,MAAA,IAAI,CAACA,OAAQ,EAAA;AACb,MAAQ,OAAA,CAAA,YAAA;AAAA,QACN,aAAA;AAAA,QACA,CAAGA,EAAAA,OAAAA,CAAO,OAAS,EAAA,QAAA,IAAY,KAAK,CAAA;AAAA,OACtC;AAEA,MAAA,SAAS,qBAAqBA,OAA4B,EAAA;AACxD,QAAQ,OAAA,CAAA,YAAA;AAAA,UACN,aAAA;AAAA,UACA,CAAGA,EAAAA,OAAAA,CAAO,OAAS,EAAA,QAAA,IAAY,KAAK,CAAA;AAAA,SACtC;AAAA;AAGF,MAAAA,OAAAA,CAAO,EAAG,CAAA,gBAAA,EAAkB,oBAAoB,CAAA;AAEhD,MAAA,OAAO,UAAU,MAAM;AACrB,QAAAA,OAAO,CAAA,EAAA,CAAG,gBAAkB,EAAA,oBAAA,EAAsB,IAAI,CAAA;AAAA,OACvD,CAAA;AAAA,KACF;AAAA,GACH;AAEA,EAAA,YAAA;AAAA,IACE,EAAA,CAAG,SAAW,EAAA,CAACC,UAAc,KAAA;AAC3B,MAAA,MAAM,IAAI,MAAO,EAAA;AACjB,MAAA,OAAA,CAAQ,MAAM,WAAY,CAAA,CAAA,EAAA,EAAK,IAAI,CAAkB,cAAA,CAAA,EAAA,CAAA,EAAGA,UAAS,CAAE,CAAA,CAAA;AACnE,MAAA,IAAI,CAAC,CAAG,EAAA;AACR,MAAA,IAAI,CAACA,UAAW,EAAA;AAEhB,MAAA,SAAS,cAAcD,OAA4B,EAAA;AACjD,QAAUA,SAAAA,CAAAA,OAAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA;AAGvC,MAAA,SAAS,aAAaA,OAA4B,EAAA;AAChD,QAAA,IAAI,CAAC,oBAAsB,EAAA;AAC3B,QAAA,MAAM,EAAK,GAAA,oBAAA,CAAqB,QAAS,CAAA,UAAA,EAAY,CAAA;AACrD,QAAA,IAAI,CAAC,EAAI,EAAA;AACT,QAAA,MAAM,IAAI,KAAM,EAAA;AAChB,QAAA,IAAI,CAAC,CAAG,EAAA;AACR,QAAA,MAAM,CAAI,GAAA,+BAAA,CAAgC,EAAI,EAAA,OAAA,EAAS,CAAC,CAAA;AACxD,QAAU,SAAA,CAAA,GAAA,CAAI,EAAE,CAAC,CAAA;AACjB,QAAU,SAAA,CAAA,GAAA,CAAI,EAAE,CAAC,CAAA;AACjB,QAAUA,SAAAA,CAAAA,OAAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA;AAGvC,MAAE,CAAA,CAAA,EAAA,CAAG,WAAW,YAAY,CAAA;AAC5B,MAAE,CAAA,CAAA,EAAA,CAAG,kBAAkB,aAAa,CAAA;AACpC,MAAE,CAAA,CAAA,EAAA,CAAG,WAAW,YAAY,CAAA;AAE5B,MAAA,OAAO,UAAU,MAAM;AACrB,QAAE,CAAA,CAAA,EAAA,CAAG,SAAW,EAAA,YAAA,EAAc,IAAI,CAAA;AAClC,QAAE,CAAA,CAAA,EAAA,CAAG,gBAAkB,EAAA,aAAA,EAAe,IAAI,CAAA;AAC1C,QAAE,CAAA,CAAA,EAAA,CAAG,SAAW,EAAA,YAAA,EAAc,IAAI,CAAA;AAAA,OACnC,CAAA;AAAA,KACF;AAAA,GACH;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,KAAA,EAAO,OAAS,EAAA,MAAA,EAAQ,QAAS,EAAA,CAAA;AAAA,MAC1C,CAAC,EAAE,KAAA,EAAAH,MAAO,EAAA,MAAA,EAAAG,SAAa,KAAA;AACrB,QAAI,IAAA,CAACH,MAAS,IAAA,CAACG,OAAQ,EAAA;AACvB,QAAA,SAAS,wBAAwBA,OAA4B,EAAA;AAC3D,UAAA,IAAI,CAAC,oBAAsB,EAAA;AAC3B,UAAA,MAAM,EAAK,GAAA,qBAAA;AAAA,YACTA,OAAAA;AAAA,YACA,oBAAqB,CAAA;AAAA,WACvB;AACA,UAAA,IAAI,CAAC,EAAI,EAAA;AACT,UAAA,IAAI,CAACH,MAAO,EAAA;AACZ,UAAA,MAAMC,SAAW,GAAA,+BAAA,CAAgC,EAAI,EAAA,OAAA,EAASD,MAAK,CAAA;AACnE,UAAA,wBAAA,CAAyBC,SAAQ,CAAA;AACjC,UAAA,aAAA,CAAc,SAAS,EAAG,CAAA,YAAA,CAAa,YAAY,CAAA,IAAK,GAAG,CAAC,CAAA;AAAA;AAE9D,QAAAE,OAAAA,CAAO,EAAG,CAAA,cAAA,EAAgB,uBAAuB,CAAA;AAAA;AACnD;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,KAAA,EAAO,OAAS,EAAA,MAAA,EAAQ,QAAS,EAAA,CAAA;AAAA,MAC1C,CAAC,EAAE,KAAA,EAAAH,MAAO,EAAA,MAAA,EAAAG,SAAa,KAAA;AACrB,QAAI,IAAA,CAACH,MAAS,IAAA,CAACG,OAAQ,EAAA;AAEvB,QAAA,SAAS,YAAY,CAAU,EAAA;AAC7B,UAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,UAAA,IAAI,CAAC,EAAI,EAAA;AACT,UAAA,IAAI,CAAC,EAAG,CAAA,SAAA,CAAU,SAAS,CAAG,EAAA,IAAI,cAAc,CAAG,EAAA;AACnD,UAAA,aAAA,CAAc,SAAS,EAAG,CAAA,YAAA,CAAa,YAAY,CAAA,IAAK,GAAG,CAAC,CAAA;AAC5D,UAAA,oBAAA,CAAqB,IAAIA,OAAO,CAAA;AAAA;AAGlC,QAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,WAAW,CAAA;AAE7C,QAAA,OAAO,UAAU,MAAM;AACrB,UAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,WAAW,CAAA;AAAA,SACjD,CAAA;AAAA;AACH;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA,CAAG,MAAQ,EAAA,CAACJ,OAAW,KAAA;AACrB,MAAA,IAAIA,YAAW,CAAG,EAAA,OAAA,CAAQ,aAAa,WAAa,EAAA,CAAA,EAAG,IAAI,CAAE,CAAA,CAAA;AAAA,WAChD,OAAA,CAAA,YAAA,CAAa,WAAa,EAAA,CAAA,EAAG,KAAK,CAAE,CAAA,CAAA;AAAA,KAClD;AAAA,GACH;AAEA,EAAA,4BAAA;AAAA,IACE,MAAM;AACJ,MAAA,MAAM,WAAW,KAAM,CAAA,MAAA;AACvB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,QAA2B,GAAA,OAAA;AAC/B,QAAA,IAAI,KAAM,CAAA,MAAA,EAAmB,QAAA,GAAA,QAAA,CAAS,cAAc,QAAQ,CAAA;AAC5D,QAAA,IAAI,UAAU,OAAY,KAAA,aAAA;AACxB,UAAW,QAAA,GAAA,QAAA,CAAU,cAAc,aAAa,CAAA;AAClD,QAAO,OAAA,QAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,MAAM,IAAA;AAAA,IACN,CAAC,CAAC,CAAA,EAAG,EAAE,SAAA,EAAW,CAAM,KAAA;AACtB,MAAM,MAAA,YAAA,GAAe,SAAU,CAAA,CAACI,OAAW,KAAA;AACzC,QAAA,SAAA,CAAUA,OAAM,CAAA;AAEhB,QAAAA,OAAO,CAAA,EAAA,CAAG,SAAW,EAAA,SAAUA,OAAQ,EAAA;AACrC,UAAUA,SAAAA,CAAAA,OAAAA,CAAO,KAAM,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,SACtC,CAAA;AAED,QAAAA,OAAO,CAAA,EAAA;AAAA,UAAG,WAAA;AAAA,UAAa,MACrB,MAAM,MAAM;AACV,YAAA,SAAA,CAAU,CAAC,CAAA;AACX,YAAU,SAAA,EAAA;AACV,YAAA,QAAA,CAAS,IAAI,CAAA;AAAA,WACd;AAAA,SACH;AAAA,OACD,CAAA;AAED,MAAA,SAAA,CAAU,YAAY,CAAA;AAAA;AACxB,GACF;AAEA,EAAA,SAAS,yBAAyB,CAA6B,EAAA;AAC7D,IAAA,OAAA,CAAQ,WAAW,CAAE,CAAA,CAAA,EAAG,EAAE,IAAA,EAAM,SAAS,CAAA;AACzC,IAAA,OAAA,CAAQ,WAAW,CAAE,CAAA,CAAA,EAAG,EAAE,IAAA,EAAM,SAAS,CAAA;AAAA;AAG3C,EAAS,SAAA,oBAAA,CAAqB,IAAaA,OAA4B,EAAA;AACrE,IAAA,MAAM,GAAM,GAAA,SAAA;AAAA,MACV,QAAA,CAAS,EAAG,CAAA,YAAA,CAAa,YAAY,CAAA,IAAK,GAAG,CACzCA,IAAAA,OAAAA,EAAQ,OAAS,EAAA,MAAA,EAAgB,SAAa,IAAA,CAAA,CAAA;AAAA,MAClD,CAAA;AAAA,MACAA,OAAAA,CAAO,MAAM,OAAQ,CAAA;AAAA,KACvB;AACA,IAAAA,OAAAA,CAAO,UAAU,GAAG,CAAA;AAAA;AAGtB,EAAO,OAAA,IAAA;AAAA,KAAA,EACF,IAAI,CAAA,MAAA,EAAS,MAAM,SAAA,KAAc,CAAC,CAAA;AAAA;AAAA,eAAA,EAExB,IAAI,CAAA;AAAA,YAAA,EACP,CAAC,EAAA,KAAoB,QAAS,CAAA,EAAE,CAAC;AAAA;AAAA;AAAA,eAAA,EAG9B,IAAI,CAAA;AAAA,YACP,EAAA,CAAC,EAAqB,KAAA,oBAAA,GAAuB,EAAG;AAAA;AAAA,SAEnD,EAAA,GAAG,SAAS,MAAM,KAAA,CAAM,WAAW,CAAA,CAAE,IAAK,CAAA,CAAC,CAAC,CAAA;AAAA,UAC3C,EAAA,CAAC,GAAW,GAA0B,KAAA,IAAA;AAAA,uBACzB,EAAA,IAAI,4BAA4B,GAAG,CAAA;AAAA,0CAAA,EAChB,MAAM,CAAA;AAAA,4BACpB,EAAA,MAAM,gBAAgB,GAAG,CAAA;AAAA;AAAA;AAAA,UAG5C,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAKX,CAAA;;;AE/SA,uBAAA;AAAA,EACE,6BAAoB,CAAA,IAAA;AAAA,EACpB;AAAA,IACE,MAAQ,EAAA,EAAA;AAAA,IACR,QAAU,EAAA,IAAA;AAAA,IACV,UAAY,EAAA;AAAA,GACd;AAAA,EACA,kBAAA,CAAmB,8BAAoB,SAAS;AAClD,CAAA","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n withKeenSliderElementContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\nimport { motionValue, transformValue, animate } from \"motion\";\n\ntype Props = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n );\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const positionX = motionValue(0);\n const positionY = motionValue(0);\n const position = transformValue(() => ({\n x: positionX.get(),\n y: positionY.get(),\n }));\n // const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0,\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n const s = slider();\n if (!s) return 0;\n return getMaxSlides(s);\n }),\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: {\n x: positionX.get(),\n y: positionY.get(),\n },\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) => {\n positionY.set(offsetY);\n positionX.set(offsetX);\n },\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const s = slider();\n if (!s) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb,\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, s);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n const unsub = position.on(\"change\", (latest) => {\n instance.updateOptions({\n position: latest,\n });\n });\n\n onCleanup(unsub);\n\n return instance;\n }),\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n }),\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n element.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);\n if (!s) return;\n if (!maxSlides) return;\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n positionY.set(p.y);\n positionX.set(p.x);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"created\", handleUpdate);\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"created\", handleUpdate, true);\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children,\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(`${Name}__breakpoint`)) return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider!);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n },\n ),\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n }),\n );\n\n withKeenSliderElementContext(\n () => {\n const selector = props.target;\n return () => {\n let targetEl: Element | null = element;\n if (props.target) targetEl = document.querySelector(selector);\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl!.querySelector(\"keen-slider\");\n return targetEl!;\n };\n },\n () => null,\n ([_, { addPlugin }]) => {\n const removePlugin = addPlugin((slider) => {\n setSlider(slider);\n\n slider.on(\"created\", function (slider) {\n setMaxIdx(slider.track.details.maxIdx);\n });\n\n slider.on(\"destroyed\", () =>\n batch(() => {\n setMaxIdx(0);\n setSlider();\n setThumb(null);\n }),\n );\n });\n\n onCleanup(removePlugin);\n },\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate(positionX, p.x, { type: \"tween\" });\n animate(positionY, p.y, { type: \"tween\" });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx,\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"${Name}__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"${Name}__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"${Name}__breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n","import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\nimport type { DragEventData } from \"@neodrag/vanilla\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n return Math.max(Math.min(value, max), min);\n}\n\nexport function calculateMidpointPositionFromBP(\n bp: Element,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const bpRect = bp.getBoundingClientRect(),\n scrollbarRect = scrollbar.getBoundingClientRect(),\n containerRect = container.getBoundingClientRect(),\n relativeLeft = bpRect.left - containerRect.left,\n minX = 0,\n maxX = containerRect.width - scrollbarRect.width,\n relativeTop = bpRect.top - containerRect.top,\n minY = 0,\n maxY = containerRect.height - scrollbarRect.height,\n x = constrain(\n relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,\n minX,\n maxX,\n ),\n y = constrain(\n relativeTop + bpRect.height / 2 - scrollbarRect.height / 2,\n minY,\n maxY,\n );\n\n return { x, y };\n}\n\nexport function findClosestBreakpoint(\n position: DragEventData,\n breakpoints: HTMLCollection,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const min = 0,\n max = breakpoints.length - 1;\n\n let closestDiff = { x: Infinity, y: Infinity },\n bpIndex = min;\n\n for (let i = min; i <= max; i++) {\n const bp = breakpoints[i];\n if (!bp) continue;\n const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);\n const diffX = Math.abs(midpointP.x - position.offsetX);\n const diffY = Math.abs(midpointP.y - position.offsetY);\n if (diffX <= closestDiff.x && diffY <= closestDiff.y) {\n closestDiff = { x: diffX, y: diffY };\n bpIndex = i;\n }\n }\n\n return breakpoints[bpIndex];\n}\n\nexport function getMaxSlides(slider: KeenSliderInstance) {\n const maxIdx = slider?.track?.details?.maxIdx || 1;\n const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n if (!Number.isFinite(maxIdx)) {\n return Math.ceil(slider.slides.length / perScroll);\n }\n\n return Math.ceil(maxIdx / perScroll) + 1;\n}\n\nexport function getRelativeBreakpoint(\n slider: KeenSliderInstance,\n breakpoints: HTMLCollection,\n) {\n const maxSlides = getMaxSlides(slider),\n perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n const relativeIdx = constrain(\n Math.ceil(slider.track.details.rel / perScroll),\n 0,\n maxSlides - 1,\n );\n\n return breakpoints[relativeIdx];\n}\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderScrollbar } from \"./components/index.js\";\n\ncustomShadowlessElement(\n KeenSliderScrollbar.Name,\n {\n target: \"\",\n isHidden: true,\n isVertical: false,\n },\n correctElementType(KeenSliderScrollbar.Component),\n);\n"]}
package/dist/main/components/keen-slider-scrollbar.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import html from 'solid-js/html';
2
- import { createSignal, createMemo, on, createEffect, onCleanup, batch, Show, For } from 'solid-js';
2
+ import { createSignal, createMemo, on, onCleanup, createEffect, batch, Show, For } from 'solid-js';
3
3
  import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
4
4
  import { Draggable } from '@neodrag/vanilla';
5
- import { animate } from 'popmotion';
6
5
  import { getMaxSlides, srOnly, findClosestBreakpoint, calculateMidpointPositionFromBP, getRelativeBreakpoint, constrain } from '../utils.js';
6
+ import { motionValue, transformValue, animate } from 'motion';
7
7
 
8
8
  const Name = `keen-slider-scrollbar`;
9
9
  const Component = (props, { element }) => {
@@ -13,7 +13,12 @@ const Component = (props, { element }) => {
13
13
  );
14
14
  const [slider, setSlider] = createSignal();
15
15
  const [thumb, setThumb] = createSignal(null);
16
- const [position, setPosition] = createSignal({ x: 0, y: 0 });
16
+ const positionX = motionValue(0);
17
+ const positionY = motionValue(0);
18
+ const position = transformValue(() => ({
19
+ x: positionX.get(),
20
+ y: positionY.get()
21
+ }));
17
22
  const [maxIdx, setMaxIdx] = createSignal(
18
23
  slider()?.track?.details?.maxIdx || 0
19
24
  );
@@ -34,12 +39,18 @@ const Component = (props, { element }) => {
34
39
  axis: props.isVertical ? "y" : "x",
35
40
  bounds: "parent",
36
41
  gpuAcceleration: true,
37
- position: position(),
42
+ position: {
43
+ x: positionX.get(),
44
+ y: positionY.get()
45
+ },
38
46
  transform({ offsetX, offsetY }) {
39
47
  if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;
40
48
  return `translate3d(${offsetX}px, -50%, 0)`;
41
49
  },
42
- onDrag: ({ offsetX, offsetY }) => setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),
50
+ onDrag: ({ offsetX, offsetY }) => {
51
+ positionY.set(offsetY);
52
+ positionX.set(offsetX);
53
+ },
43
54
  onDragEnd: (position2) => {
44
55
  if (!breakpointsContainer) return;
45
56
  const s = slider();
@@ -58,13 +69,12 @@ const Component = (props, { element }) => {
58
69
  },
59
70
  ignoreMultitouch: true
60
71
  });
61
- createEffect(
62
- on(position, (position2) => {
63
- instance.updateOptions({
64
- position: position2
65
- });
66
- })
67
- );
72
+ const unsub = position.on("change", (latest) => {
73
+ instance.updateOptions({
74
+ position: latest
75
+ });
76
+ });
77
+ onCleanup(unsub);
68
78
  return instance;
69
79
  })
70
80
  );
@@ -111,7 +121,8 @@ const Component = (props, { element }) => {
111
121
  const t = thumb();
112
122
  if (!t) return;
113
123
  const p = calculateMidpointPositionFromBP(bp, element, t);
114
- setPosition(p);
124
+ positionY.set(p.y);
125
+ positionX.set(p.x);
115
126
  setMaxIdx(slider2.track.details.maxIdx);
116
127
  }
117
128
  s.on("created", handleUpdate);
@@ -201,20 +212,8 @@ const Component = (props, { element }) => {
201
212
  }
202
213
  );
203
214
  function animateScrollbarPosition(p) {
204
- animate({
205
- from: position().x,
206
- to: p.x,
207
- onUpdate(latest) {
208
- return setPosition((p2) => ({ ...p2, x: latest }));
209
- }
210
- });
211
- animate({
212
- from: position().y,
213
- to: p.y,
214
- onUpdate(latest) {
215
- return setPosition((p2) => ({ ...p2, y: latest }));
216
- }
217
- });
215
+ animate(positionX, p.x, { type: "tween" });
216
+ animate(positionY, p.y, { type: "tween" });
218
217
  }
219
218
  function updateSliderPosition(bp, slider2) {
220
219
  const idx = constrain(
package/dist/main/components/keen-slider-scrollbar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides","p"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n withKeenSliderElementContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\nimport { animate } from \"popmotion\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\n\ntype Props = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n );\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0,\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n const s = slider();\n if (!s) return 0;\n return getMaxSlides(s);\n }),\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: position(),\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) =>\n setPosition((p) => ({ ...p, x: offsetX, y: offsetY })),\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const s = slider();\n if (!s) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb,\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, s);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n createEffect(\n on(position, (position) => {\n instance.updateOptions({\n position,\n });\n }),\n );\n\n return instance;\n }),\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n }),\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n element.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);\n if (!s) return;\n if (!maxSlides) return;\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n setPosition(p);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"created\", handleUpdate);\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"created\", handleUpdate, true);\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children,\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(`${Name}__breakpoint`)) return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider!);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n },\n ),\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n }),\n );\n\n withKeenSliderElementContext(\n () => {\n const selector = props.target;\n return () => {\n let targetEl: Element | null = element;\n if (props.target) targetEl = document.querySelector(selector);\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl!.querySelector(\"keen-slider\");\n return targetEl!;\n };\n },\n () => null,\n ([_, { addPlugin }]) => {\n const removePlugin = addPlugin((slider) => {\n setSlider(slider);\n\n slider.on(\"created\", function (slider) {\n setMaxIdx(slider.track.details.maxIdx);\n });\n\n slider.on(\"destroyed\", () =>\n batch(() => {\n setMaxIdx(0);\n setSlider();\n setThumb(null);\n }),\n );\n });\n\n onCleanup(removePlugin);\n },\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate({\n from: position().x,\n to: p.x,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, x: latest }));\n },\n });\n animate({\n from: position().y,\n to: p.y,\n onUpdate(latest) {\n return setPosition((p) => ({ ...p, y: latest }));\n },\n });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx,\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"${Name}__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"${Name}__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"${Name}__breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n"]}
1
+ {"version":3,"sources":["../../../src/components/keen-slider-scrollbar.ts"],"names":["maxIdx","thumb","position","draggable","slider","maxSlides"],"mappings":"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","file":"keen-slider-scrollbar.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n Show,\n For,\n type Accessor,\n} from \"solid-js\";\nimport {\n withKeenSliderElementContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Draggable } from \"@neodrag/vanilla\";\n\nimport {\n getRelativeBreakpoint,\n calculateMidpointPositionFromBP,\n findClosestBreakpoint,\n getMaxSlides,\n constrain,\n srOnly,\n} from \"../utils.js\";\nimport { motionValue, transformValue, animate } from \"motion\";\n\ntype Props = {\n target: string;\n isHidden: boolean;\n isVertical: boolean;\n};\n\nexport const Name = `keen-slider-scrollbar`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n );\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n\n const [thumb, setThumb] = createSignal<HTMLElement | null>(null);\n const positionX = motionValue(0);\n const positionY = motionValue(0);\n const position = transformValue(() => ({\n x: positionX.get(),\n y: positionY.get(),\n }));\n // const [position, setPosition] = createSignal({ x: 0, y: 0 });\n const [maxIdx, setMaxIdx] = createSignal(\n slider()?.track?.details?.maxIdx || 0,\n );\n const [currentIdx, setCurrentIdx] = createSignal(0);\n\n let breakpointsContainer: HTMLElement | null = null;\n\n const maxSlides = createMemo(\n on(maxIdx, (maxIdx) => {\n if (!maxIdx) return 0;\n const s = slider();\n if (!s) return 0;\n return getMaxSlides(s);\n }),\n );\n\n const draggable = createMemo(\n on(thumb, (thumb) => {\n if (!thumb) return null;\n const instance = new Draggable(thumb, {\n axis: props.isVertical ? \"y\" : \"x\",\n bounds: \"parent\",\n gpuAcceleration: true,\n position: {\n x: positionX.get(),\n y: positionY.get(),\n },\n transform({ offsetX, offsetY }) {\n if (props.isVertical) return `translate3d(-50%, ${offsetY}px, 0)`;\n return `translate3d(${offsetX}px, -50%, 0)`;\n },\n onDrag: ({ offsetX, offsetY }) => {\n positionY.set(offsetY);\n positionX.set(offsetX);\n },\n onDragEnd: (position) => {\n if (!breakpointsContainer) return;\n const s = slider();\n if (!s) return;\n const bp = findClosestBreakpoint(\n position,\n breakpointsContainer.children,\n element,\n thumb,\n );\n if (!bp) return;\n const p = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(p);\n updateSliderPosition(bp, s);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n },\n ignoreMultitouch: true,\n });\n\n const unsub = position.on(\"change\", (latest) => {\n instance.updateOptions({\n position: latest,\n });\n });\n\n onCleanup(unsub);\n\n return instance;\n }),\n );\n\n createEffect(\n on(draggable, (draggable) => {\n if (!draggable) return;\n onCleanup(() => {\n draggable.destroy();\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n\n function handleDetailsChanged(slider: KeenSliderInstance) {\n element.setAttribute(\n \"is-vertical\",\n `${slider.options?.vertical || false}`,\n );\n }\n\n slider.on(\"detailsChanged\", handleDetailsChanged);\n\n return onCleanup(() => {\n slider.on(\"detailsChanged\", handleDetailsChanged, true);\n });\n }),\n );\n\n createEffect(\n on(maxSlides, (maxSlides) => {\n const s = slider();\n element.style.setProperty(`--${Name}--total-slides`, `${maxSlides}`);\n if (!s) return;\n if (!maxSlides) return;\n\n function updateDetails(slider: KeenSliderInstance) {\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = breakpointsContainer.children[currentIdx()];\n if (!bp) return;\n const t = thumb();\n if (!t) return;\n const p = calculateMidpointPositionFromBP(bp, element, t);\n positionY.set(p.y);\n positionX.set(p.x);\n setMaxIdx(slider.track.details.maxIdx);\n }\n\n s.on(\"created\", handleUpdate);\n s.on(\"detailsChanged\", updateDetails);\n s.on(\"updated\", handleUpdate);\n\n return onCleanup(() => {\n s.on(\"created\", handleUpdate, true);\n s.on(\"detailsChanged\", updateDetails, true);\n s.on(\"updated\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n function updateScrollbarPosition(slider: KeenSliderInstance) {\n if (!breakpointsContainer) return;\n const bp = getRelativeBreakpoint(\n slider,\n breakpointsContainer.children,\n );\n if (!bp) return;\n if (!thumb) return;\n const position = calculateMidpointPositionFromBP(bp, element, thumb);\n animateScrollbarPosition(position);\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n }\n slider.on(\"slideChanged\", updateScrollbarPosition);\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ thumb: thumb(), slider: slider() }),\n ({ thumb, slider }) => {\n if (!thumb || !slider) return;\n\n function handleClick(e: Event) {\n const bp = e.target as HTMLElement | null;\n if (!bp) return;\n if (!bp.classList.contains(`${Name}__breakpoint`)) return;\n setCurrentIdx(parseInt(bp.getAttribute(\"data-index\") || \"0\"));\n updateSliderPosition(bp, slider!);\n }\n\n element.addEventListener(\"click\", handleClick);\n\n return onCleanup(() => {\n element.removeEventListener(\"click\", handleClick);\n });\n },\n ),\n );\n\n createEffect(\n on(maxIdx, (maxIdx) => {\n if (maxIdx === 0) element.setAttribute(\"is-hidden\", `${true}`);\n else element.setAttribute(\"is-hidden\", `${false}`);\n }),\n );\n\n withKeenSliderElementContext(\n () => {\n const selector = props.target;\n return () => {\n let targetEl: Element | null = element;\n if (props.target) targetEl = document.querySelector(selector);\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl!.querySelector(\"keen-slider\");\n return targetEl!;\n };\n },\n () => null,\n ([_, { addPlugin }]) => {\n const removePlugin = addPlugin((slider) => {\n setSlider(slider);\n\n slider.on(\"created\", function (slider) {\n setMaxIdx(slider.track.details.maxIdx);\n });\n\n slider.on(\"destroyed\", () =>\n batch(() => {\n setMaxIdx(0);\n setSlider();\n setThumb(null);\n }),\n );\n });\n\n onCleanup(removePlugin);\n },\n );\n\n function animateScrollbarPosition(p: { x: number; y: number }) {\n animate(positionX, p.x, { type: \"tween\" });\n animate(positionY, p.y, { type: \"tween\" });\n }\n\n function updateSliderPosition(bp: Element, slider: KeenSliderInstance) {\n const idx = constrain(\n parseInt(bp.getAttribute(\"data-index\") || \"0\") *\n ((slider?.options?.slides as any)?.perScroll || 1),\n 0,\n slider.track.details.maxIdx,\n );\n slider.moveToIdx(idx);\n }\n\n return html`\n <${Show} when=${() => maxSlides() > 1}>\n <div\n class=\"${Name}__thumb\"\n ref=${(el: HTMLElement) => setThumb(el)}\n ></div>\n <ul\n class=\"${Name}__breakpoints\"\n ref=${(el: HTMLElement) => (breakpointsContainer = el)}\n >\n <${For} each=${() => Array(maxSlides()).fill(0)}>\n ${(_: number, idx: Accessor<number>) => html`\n <li class=\"${Name}__breakpoint\" data-index=${idx}>\n <button type=\"button\" style=${srOnly}>\n <span style=${srOnly}> Breakpoint ${idx} </span>\n </button>\n </li>\n `}\n <//>\n </ul>\n <//>\n `;\n};\n"]}
package/dist/main/utils.js CHANGED
@@ -31,17 +31,12 @@ function findClosestBreakpoint(position, breakpoints, container, scrollbar) {
31
31
  return breakpoints[bpIndex];
32
32
  }
33
33
  function getMaxSlides(slider) {
34
- const perView = slider.options?.slides?.perView || 1;
35
- if (perView === "auto") {
36
- const maxIdx = slider?.track?.details?.maxIdx || 1;
37
- const perScroll2 = slider.options?.slides?.perScroll || 1;
38
- const result2 = Math.ceil((slider.slides.length - maxIdx) / perScroll2) + 1;
39
- return result2;
40
- }
34
+ const maxIdx = slider?.track?.details?.maxIdx || 1;
41
35
  const perScroll = slider.options?.slides?.perScroll || 1;
42
- const result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;
43
- if (perScroll === 1 && perView === 1) return slider.slides.length;
44
- return result;
36
+ if (!Number.isFinite(maxIdx)) {
37
+ return Math.ceil(slider.slides.length / perScroll);
38
+ }
39
+ return Math.ceil(maxIdx / perScroll) + 1;
45
40
  }
46
41
  function getRelativeBreakpoint(slider, breakpoints) {
47
42
  const maxSlides = getMaxSlides(slider), perScroll = slider.options?.slides?.perScroll || 1;
package/dist/main/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils.ts"],"names":["perScroll","result"],"mappings":"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","file":"utils.js","sourcesContent":["import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\nimport type { DragEventData } from \"@neodrag/vanilla\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n return Math.max(Math.min(value, max), min);\n}\n\nexport function calculateMidpointPositionFromBP(\n bp: Element,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const bpRect = bp.getBoundingClientRect(),\n scrollbarRect = scrollbar.getBoundingClientRect(),\n containerRect = container.getBoundingClientRect(),\n relativeLeft = bpRect.left - containerRect.left,\n minX = 0,\n maxX = containerRect.width - scrollbarRect.width,\n relativeTop = bpRect.top - containerRect.top,\n minY = 0,\n maxY = containerRect.height - scrollbarRect.height,\n x = constrain(\n relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,\n minX,\n maxX,\n ),\n y = constrain(\n relativeTop + bpRect.height / 2 - scrollbarRect.height / 2,\n minY,\n maxY,\n );\n\n return { x, y };\n}\n\nexport function findClosestBreakpoint(\n position: DragEventData,\n breakpoints: HTMLCollection,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const min = 0,\n max = breakpoints.length - 1;\n\n let closestDiff = { x: Infinity, y: Infinity },\n bpIndex = min;\n\n for (let i = min; i <= max; i++) {\n const bp = breakpoints[i];\n if (!bp) continue;\n const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);\n const diffX = Math.abs(midpointP.x - position.offsetX);\n const diffY = Math.abs(midpointP.y - position.offsetY);\n if (diffX <= closestDiff.x && diffY <= closestDiff.y) {\n closestDiff = { x: diffX, y: diffY };\n bpIndex = i;\n }\n }\n\n return breakpoints[bpIndex];\n}\n\nexport function getMaxSlides(slider: KeenSliderInstance) {\n const perView = (slider.options?.slides as any)?.perView || 1;\n if (perView === \"auto\") {\n const maxIdx = slider?.track?.details?.maxIdx || 1;\n const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n const result = Math.ceil((slider.slides.length - maxIdx) / perScroll) + 1;\n return result;\n }\n const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n const result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;\n if (perScroll === 1 && perView === 1) return slider.slides.length;\n\n return result;\n}\n\nexport function getRelativeBreakpoint(\n slider: KeenSliderInstance,\n breakpoints: HTMLCollection,\n) {\n const maxSlides = getMaxSlides(slider),\n perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n const relativeIdx = constrain(\n Math.ceil(slider.track.details.rel / perScroll),\n 0,\n maxSlides - 1,\n );\n\n return breakpoints[relativeIdx];\n}\n"]}
1
+ {"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"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","file":"utils.js","sourcesContent":["import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\nimport type { DragEventData } from \"@neodrag/vanilla\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n return Math.max(Math.min(value, max), min);\n}\n\nexport function calculateMidpointPositionFromBP(\n bp: Element,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const bpRect = bp.getBoundingClientRect(),\n scrollbarRect = scrollbar.getBoundingClientRect(),\n containerRect = container.getBoundingClientRect(),\n relativeLeft = bpRect.left - containerRect.left,\n minX = 0,\n maxX = containerRect.width - scrollbarRect.width,\n relativeTop = bpRect.top - containerRect.top,\n minY = 0,\n maxY = containerRect.height - scrollbarRect.height,\n x = constrain(\n relativeLeft + bpRect.width / 2 - scrollbarRect.width / 2,\n minX,\n maxX,\n ),\n y = constrain(\n relativeTop + bpRect.height / 2 - scrollbarRect.height / 2,\n minY,\n maxY,\n );\n\n return { x, y };\n}\n\nexport function findClosestBreakpoint(\n position: DragEventData,\n breakpoints: HTMLCollection,\n container: HTMLElement,\n scrollbar: HTMLElement,\n) {\n const min = 0,\n max = breakpoints.length - 1;\n\n let closestDiff = { x: Infinity, y: Infinity },\n bpIndex = min;\n\n for (let i = min; i <= max; i++) {\n const bp = breakpoints[i];\n if (!bp) continue;\n const midpointP = calculateMidpointPositionFromBP(bp, container, scrollbar);\n const diffX = Math.abs(midpointP.x - position.offsetX);\n const diffY = Math.abs(midpointP.y - position.offsetY);\n if (diffX <= closestDiff.x && diffY <= closestDiff.y) {\n closestDiff = { x: diffX, y: diffY };\n bpIndex = i;\n }\n }\n\n return breakpoints[bpIndex];\n}\n\nexport function getMaxSlides(slider: KeenSliderInstance) {\n const maxIdx = slider?.track?.details?.maxIdx || 1;\n const perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n if (!Number.isFinite(maxIdx)) {\n return Math.ceil(slider.slides.length / perScroll);\n }\n\n return Math.ceil(maxIdx / perScroll) + 1;\n}\n\nexport function getRelativeBreakpoint(\n slider: KeenSliderInstance,\n breakpoints: HTMLCollection,\n) {\n const maxSlides = getMaxSlides(slider),\n perScroll = (slider.options?.slides as any)?.perScroll || 1;\n\n const relativeIdx = constrain(\n Math.ceil(slider.track.details.rel / perScroll),\n 0,\n maxSlides - 1,\n );\n\n return breakpoints[relativeIdx];\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brytdesigns/web-component-keen-slider-scrollbar",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "description": "Keen slider scrollbar web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",
@@ -22,11 +22,12 @@
22
22
  "dependencies": {
23
23
  "@neodrag/vanilla": "^2.3.0",
24
24
  "component-register": "^0.8.7",
25
+ "motion": "^12.18.1",
25
26
  "popmotion": "^11.0.5",
26
27
  "solid-element": "^1.9.1",
27
28
  "solid-js": "^1.9.7",
28
- "@brytdesigns/web-component-keen-slider": "1.1.0",
29
- "@brytdesigns/web-component-core": "1.1.2"
29
+ "@brytdesigns/web-component-core": "1.1.2",
30
+ "@brytdesigns/web-component-keen-slider": "1.1.0"
30
31
  },
31
32
  "devDependencies": {
32
33
  "dts-bundle-generator": "^9.5.1",