@brytdesigns/web-component-keen-slider-scrollbar 1.0.4 → 1.0.6
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/dist/main/utils.js +1 -1
- package/dist/main/utils.js.map +1 -1
- package/dist/styles.css +7 -7
- package/package.json +1 -1
package/dist/main/utils.js
CHANGED
|
@@ -32,7 +32,7 @@ function findClosestBreakpoint(position, breakpoints, container, scrollbar) {
|
|
|
32
32
|
}
|
|
33
33
|
function getMaxSlides(slider) {
|
|
34
34
|
const perView = slider.options?.slides?.perView || 1, perScroll = slider.options?.slides?.perScroll || 1, result = Math.ceil((slider.slides.length - perView) / perScroll) + 1;
|
|
35
|
-
if (perScroll === 1 && perView
|
|
35
|
+
if (perScroll === 1 && perView === 1) return slider.slides.length;
|
|
36
36
|
return result;
|
|
37
37
|
}
|
|
38
38
|
function getRelativeBreakpoint(slider, breakpoints) {
|
package/dist/main/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAIO,MAAM,MAAS,GAAA,CAAA,weAAA;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,EAAM,MAAA,OAAA,GAAW,OAAO,OAAS,EAAA,MAAA,EAAgB,WAAW,CAC1D,EAAA,SAAA,GAAa,OAAO,OAAS,EAAA,MAAA,EAAgB,aAAa,CAC1D,EAAA,MAAA,GAAS,KAAK,IAAM,CAAA,CAAA,MAAA,CAAO,OAAO,MAAS,GAAA,OAAA,IAAW,SAAS,CAAI,GAAA,CAAA;AACrE,EAAA,IAAI,cAAc,CAAK,IAAA,OAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/utils.ts"],"names":[],"mappings":"AAIO,MAAM,MAAS,GAAA,CAAA,weAAA;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,EAAM,MAAA,OAAA,GAAW,OAAO,OAAS,EAAA,MAAA,EAAgB,WAAW,CAC1D,EAAA,SAAA,GAAa,OAAO,OAAS,EAAA,MAAA,EAAgB,aAAa,CAC1D,EAAA,MAAA,GAAS,KAAK,IAAM,CAAA,CAAA,MAAA,CAAO,OAAO,MAAS,GAAA,OAAA,IAAW,SAAS,CAAI,GAAA,CAAA;AACrE,EAAA,IAAI,cAAc,CAAK,IAAA,OAAA,KAAY,CAAG,EAAA,OAAO,OAAO,MAAO,CAAA,MAAA;AAE3D,EAAO,OAAA,MAAA;AACT;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","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 perScroll = (slider.options?.slides as any)?.perScroll || 1,\n 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"]}
|
package/dist/styles.css
CHANGED
|
@@ -27,21 +27,21 @@ keen-slider-scrollbar {
|
|
|
27
27
|
box-sizing: border-box;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
keen-slider-scrollbar
|
|
30
|
+
keen-slider-scrollbar[is-vertical="false"] {
|
|
31
31
|
--keen-slider-scrollbar--width: 100%;
|
|
32
32
|
--keen-slider-scrollbar--height: 5px;
|
|
33
33
|
margin-top: var(--keen-slider-scrollbar--mt);
|
|
34
34
|
margin-bottom: var(--keen-slider-scrollbar--mb);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
keen-slider-scrollbar[is-vertical] {
|
|
37
|
+
keen-slider-scrollbar[is-vertical="true"] {
|
|
38
38
|
--keen-slider-scrollbar--height: 100%;
|
|
39
39
|
--keen-slider-scrollbar--width: 5px;
|
|
40
40
|
margin-left: var(--keen-slider-scrollbar--ml);
|
|
41
41
|
margin-right: var(--keen-slider-scrollbar--mr);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
keen-slider-scrollbar[is-hidden
|
|
44
|
+
keen-slider-scrollbar[is-hidden="true"] {
|
|
45
45
|
--keen-slider-scrollbar--opacity: 0;
|
|
46
46
|
|
|
47
47
|
visibility: hidden;
|
|
@@ -67,7 +67,7 @@ keen-slider-scrollbar .keen-slider-scrollbar__thumb {
|
|
|
67
67
|
z-index: 2;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
keen-slider-scrollbar
|
|
70
|
+
keen-slider-scrollbar[is-vertical="false"] .keen-slider-scrollbar__thumb {
|
|
71
71
|
left: 0;
|
|
72
72
|
top: 50% !important;
|
|
73
73
|
transform: translate3d(0, -50%, 0);
|
|
@@ -80,7 +80,7 @@ keen-slider-scrollbar:not([is-vertical]) .keen-slider-scrollbar__thumb {
|
|
|
80
80
|
height: 100%;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
keen-slider-scrollbar[is-vertical] .keen-slider-scrollbar__thumb {
|
|
83
|
+
keen-slider-scrollbar[is-vertical="true"] .keen-slider-scrollbar__thumb {
|
|
84
84
|
left: 50% !important;
|
|
85
85
|
top: 0;
|
|
86
86
|
transform: translate3d(-50%, 0%, 0);
|
|
@@ -106,7 +106,7 @@ keen-slider-scrollbar .keen-slider-scrollbar__breakpoints {
|
|
|
106
106
|
padding: 0;
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
-
keen-slider-scrollbar
|
|
109
|
+
keen-slider-scrollbar[is-vertical="false"] .keen-slider-scrollbar__breakpoints {
|
|
110
110
|
grid-auto-rows: auto;
|
|
111
111
|
grid-template-columns: repeat(
|
|
112
112
|
var(--keen-slider-scrollbar--total-slides, 1),
|
|
@@ -114,7 +114,7 @@ keen-slider-scrollbar:not([is-vertical]) .keen-slider-scrollbar__breakpoints {
|
|
|
114
114
|
);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
keen-slider-scrollbar[is-vertical] .keen-slider-scrollbar__breakpoints {
|
|
117
|
+
keen-slider-scrollbar[is-vertical="true"] .keen-slider-scrollbar__breakpoints {
|
|
118
118
|
grid-auto-columns: auto;
|
|
119
119
|
grid-template-rows: repeat(
|
|
120
120
|
var(--keen-slider-scrollbar--total-slides, 1),
|