@brytdesigns/web-component-keen-slider-auto-switch 2.0.1 → 2.0.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.
package/dist/esm/index.js
CHANGED
|
@@ -77,6 +77,7 @@ var Component = (props, { element }) => {
|
|
|
77
77
|
() => ({ slider: sliderRef(), duration: props.duration }),
|
|
78
78
|
({ slider, duration }) => {
|
|
79
79
|
if (!slider) return;
|
|
80
|
+
const controller = new AbortController();
|
|
80
81
|
function nextTimeout() {
|
|
81
82
|
if (!slider) return;
|
|
82
83
|
if (slider.options?.disabled) return;
|
|
@@ -85,24 +86,21 @@ var Component = (props, { element }) => {
|
|
|
85
86
|
slider.next();
|
|
86
87
|
}, duration);
|
|
87
88
|
}
|
|
88
|
-
function handleMouseEnter() {
|
|
89
|
-
clearCurrentTimeout();
|
|
90
|
-
}
|
|
91
|
-
function handleMouseLeave() {
|
|
92
|
-
nextTimeout();
|
|
93
|
-
}
|
|
94
89
|
slider.pauseAutoplay = clearCurrentTimeout;
|
|
95
90
|
slider.startAutoplay = nextTimeout;
|
|
96
|
-
slider.container.addEventListener("mouseenter", clearCurrentTimeout
|
|
97
|
-
|
|
91
|
+
slider.container.addEventListener("mouseenter", clearCurrentTimeout, {
|
|
92
|
+
signal: controller.signal
|
|
93
|
+
});
|
|
94
|
+
slider.container.addEventListener("mouseleave", nextTimeout, {
|
|
95
|
+
signal: controller.signal
|
|
96
|
+
});
|
|
98
97
|
slider.on("dragStarted", clearCurrentTimeout);
|
|
99
98
|
slider.on("slideChanged", clearCurrentTimeout);
|
|
100
99
|
slider.on("animationEnded", nextTimeout);
|
|
101
100
|
slider.on("updated", nextTimeout);
|
|
102
101
|
nextTimeout();
|
|
103
102
|
return onCleanup(() => {
|
|
104
|
-
|
|
105
|
-
slider.container.removeEventListener("mouseleave", handleMouseLeave);
|
|
103
|
+
controller.abort();
|
|
106
104
|
slider.on("dragStarted", clearCurrentTimeout, true);
|
|
107
105
|
slider.on("slideChanged", clearCurrentTimeout, true);
|
|
108
106
|
slider.on("animationEnded", nextTimeout, true);
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/keen-slider-auto-switch.ts","../../src/index.ts"],"names":["isPaused"],"mappings":";;;;;;;;;;;AAAA,IAAA,+BAAA,GAAA,EAAA;AAAA,QAAA,CAAA,+BAAA,EAAA;AAAA,EAAA,SAAA,EAAA,MAAA,SAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA;AAoBO,IAAM,IAAO,GAAA,yBAAA;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,EAAM,MAAA,MAAA,GAAS,WAAW,MAAM;AAC9B,IAAA,IAAI,QAA+B,GAAA,OAAA;AACnC,IAAA,IAAI,MAAM,MAAQ,EAAA,QAAA,GAAW,QAAS,CAAA,aAAA,CAAc,MAAM,MAAM,CAAA;AAChE,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sFAAA;AAAA,OACT;AACF,IAAA,IAAI,SAAS,OAAY,KAAA,aAAA;AACvB,MAAW,QAAA,GAAA,QAAA,CAAS,cAAc,aAAa,CAAA;AACjD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sFAAA;AAAA,OACT;AACF,IAAO,OAAA,QAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,YAAA;AAAA,IAChC;AAAA,GACF;AACA,EAAA,MAAM,CAAC,CAAA,EAAG,aAAa,CAAA,GAAI,aAA4B,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAa,KAAK,CAAA;AAElD,EAAA,SAAS,mBAAsB,GAAA;AAC7B,IAAA,KAAA,CAAM,MAAM;AACV,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,aAAA,CAAc,CAAC,GAAQ,KAAA;AACrB,QAAI,IAAA,GAAA,eAAkB,GAAG,CAAA;AACzB,QAAO,OAAA,IAAA;AAAA,OACR,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAS,SAAA,gBAAA,CAAiB,IAAS,QAAkB,EAAA;AACnD,IAAA,KAAA,CAAM,MAAM;AACV,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,aAAA,CAAc,CAAC,GAAQ,KAAA;AACrB,QAAI,IAAA,GAAA,eAAkB,GAAG,CAAA;AACzB,QAAO,OAAA,UAAA,CAAW,IAAI,QAAQ,CAAA;AAAA,OAC/B,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,QAAA,EAAU,UAAY,EAAA,MAAA,EAAQ,WAAY,EAAA,CAAA;AAAA,MACnD,CAAC,EAAE,QAAAA,EAAAA,SAAAA,EAAU,QAAa,KAAA;AACxB,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAA,MAAA,CAAO,SAAU,CAAA,aAAA;AAAA,UACf,IAAI,YAAY,mBAAqB,EAAA;AAAA,YACnC,OAAS,EAAA,IAAA;AAAA,YACT,MAAA,EAAQ,EAAE,QAAA,EAAAA,SAAS;AAAA,WACpB;AAAA,SACH;AAAA;AACF;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,MAAA,EAAQ,WAAa,EAAA,QAAA,EAAU,MAAM,QAAS,EAAA,CAAA;AAAA,MACvD,CAAC,EAAE,MAAQ,EAAA,QAAA,EAAe,KAAA;AACxB,QAAA,IAAI,CAAC,MAAQ,EAAA;
|
|
1
|
+
{"version":3,"sources":["../../src/components/keen-slider-auto-switch.ts","../../src/index.ts"],"names":["isPaused"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n} from \"solid-js\";\nimport {\n addPlugin,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\ntype Props = {\n target: string;\n duration: number;\n};\n\nexport const Name = \"keen-slider-auto-switch\";\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n return targetEl;\n });\n\n const [sliderRef, setSliderRef] = createSignal<KeenSliderInstance | null>(\n null,\n );\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [isPaused, setIsPaused] = createSignal(false);\n\n function clearCurrentTimeout() {\n batch(() => {\n setIsPaused(true);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return null;\n });\n });\n }\n\n function startNextTimeout(cb: any, duration: number) {\n batch(() => {\n setIsPaused(false);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return setTimeout(cb, duration) as any as number;\n });\n });\n }\n\n createEffect(\n on(\n () => ({ isPaused: isPaused(), slider: sliderRef() }),\n ({ isPaused, slider }) => {\n if (!slider) return;\n slider.container.dispatchEvent(\n new CustomEvent(\"autoswitch:update\", {\n bubbles: true,\n detail: { isPaused },\n }),\n );\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ slider: sliderRef(), duration: props.duration }),\n ({ slider, duration }) => {\n if (!slider) return;\n const controller = new AbortController();\n\n function nextTimeout() {\n if (!slider) return;\n if (slider.options?.disabled) return;\n return startNextTimeout(() => {\n if (slider.slides.length <= 1) return;\n slider.next();\n }, duration);\n }\n\n (slider as any).pauseAutoplay = clearCurrentTimeout;\n (slider as any).startAutoplay = nextTimeout;\n\n slider.container.addEventListener(\"mouseenter\", clearCurrentTimeout, {\n signal: controller.signal,\n });\n slider.container.addEventListener(\"mouseleave\", nextTimeout, {\n signal: controller.signal,\n });\n\n slider.on(\"dragStarted\", clearCurrentTimeout);\n slider.on(\"slideChanged\", clearCurrentTimeout);\n slider.on(\"animationEnded\", nextTimeout);\n slider.on(\"updated\", nextTimeout);\n\n nextTimeout();\n\n return onCleanup(() => {\n controller.abort();\n\n slider.on(\"dragStarted\", clearCurrentTimeout, true);\n slider.on(\"slideChanged\", clearCurrentTimeout, true);\n slider.on(\"animationEnded\", nextTimeout, true);\n slider.on(\"updated\", nextTimeout, true);\n });\n },\n ),\n );\n\n createEffect(() => {\n const t = target();\n\n if (!t) return;\n\n const plugin = (slider: KeenSliderInstance | null) => {\n setSliderRef(slider);\n };\n\n const controller = new AbortController();\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n};\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderAutoSwitch } from \"./components/index.js\";\n\ncustomShadowlessElement(\n KeenSliderAutoSwitch.Name,\n {\n target: \"keen-slider\",\n duration: 2000,\n },\n correctElementType(KeenSliderAutoSwitch.Component),\n);\n"]}
|
|
@@ -64,6 +64,7 @@ const Component = (props, { element }) => {
|
|
|
64
64
|
() => ({ slider: sliderRef(), duration: props.duration }),
|
|
65
65
|
({ slider, duration }) => {
|
|
66
66
|
if (!slider) return;
|
|
67
|
+
const controller = new AbortController();
|
|
67
68
|
function nextTimeout() {
|
|
68
69
|
if (!slider) return;
|
|
69
70
|
if (slider.options?.disabled) return;
|
|
@@ -72,24 +73,21 @@ const Component = (props, { element }) => {
|
|
|
72
73
|
slider.next();
|
|
73
74
|
}, duration);
|
|
74
75
|
}
|
|
75
|
-
function handleMouseEnter() {
|
|
76
|
-
clearCurrentTimeout();
|
|
77
|
-
}
|
|
78
|
-
function handleMouseLeave() {
|
|
79
|
-
nextTimeout();
|
|
80
|
-
}
|
|
81
76
|
slider.pauseAutoplay = clearCurrentTimeout;
|
|
82
77
|
slider.startAutoplay = nextTimeout;
|
|
83
|
-
slider.container.addEventListener("mouseenter", clearCurrentTimeout
|
|
84
|
-
|
|
78
|
+
slider.container.addEventListener("mouseenter", clearCurrentTimeout, {
|
|
79
|
+
signal: controller.signal
|
|
80
|
+
});
|
|
81
|
+
slider.container.addEventListener("mouseleave", nextTimeout, {
|
|
82
|
+
signal: controller.signal
|
|
83
|
+
});
|
|
85
84
|
slider.on("dragStarted", clearCurrentTimeout);
|
|
86
85
|
slider.on("slideChanged", clearCurrentTimeout);
|
|
87
86
|
slider.on("animationEnded", nextTimeout);
|
|
88
87
|
slider.on("updated", nextTimeout);
|
|
89
88
|
nextTimeout();
|
|
90
89
|
return onCleanup(() => {
|
|
91
|
-
|
|
92
|
-
slider.container.removeEventListener("mouseleave", handleMouseLeave);
|
|
90
|
+
controller.abort();
|
|
93
91
|
slider.on("dragStarted", clearCurrentTimeout, true);
|
|
94
92
|
slider.on("slideChanged", clearCurrentTimeout, true);
|
|
95
93
|
slider.on("animationEnded", nextTimeout, true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["isPaused"],"mappings":";;;AAoBO,MAAM,IAAO,GAAA;AAEb,MAAM,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,EAAM,MAAA,MAAA,GAAS,WAAW,MAAM;AAC9B,IAAA,IAAI,QAA+B,GAAA,OAAA;AACnC,IAAA,IAAI,MAAM,MAAQ,EAAA,QAAA,GAAW,QAAS,CAAA,aAAA,CAAc,MAAM,MAAM,CAAA;AAChE,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sFAAA;AAAA,OACT;AACF,IAAA,IAAI,SAAS,OAAY,KAAA,aAAA;AACvB,MAAW,QAAA,GAAA,QAAA,CAAS,cAAc,aAAa,CAAA;AACjD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sFAAA;AAAA,OACT;AACF,IAAO,OAAA,QAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,YAAA;AAAA,IAChC;AAAA,GACF;AACA,EAAA,MAAM,CAAC,CAAA,EAAG,aAAa,CAAA,GAAI,aAA4B,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAa,KAAK,CAAA;AAElD,EAAA,SAAS,mBAAsB,GAAA;AAC7B,IAAA,KAAA,CAAM,MAAM;AACV,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,aAAA,CAAc,CAAC,GAAQ,KAAA;AACrB,QAAI,IAAA,GAAA,eAAkB,GAAG,CAAA;AACzB,QAAO,OAAA,IAAA;AAAA,OACR,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAS,SAAA,gBAAA,CAAiB,IAAS,QAAkB,EAAA;AACnD,IAAA,KAAA,CAAM,MAAM;AACV,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,aAAA,CAAc,CAAC,GAAQ,KAAA;AACrB,QAAI,IAAA,GAAA,eAAkB,GAAG,CAAA;AACzB,QAAO,OAAA,UAAA,CAAW,IAAI,QAAQ,CAAA;AAAA,OAC/B,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,QAAA,EAAU,UAAY,EAAA,MAAA,EAAQ,WAAY,EAAA,CAAA;AAAA,MACnD,CAAC,EAAE,QAAAA,EAAAA,SAAAA,EAAU,QAAa,KAAA;AACxB,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAA,MAAA,CAAO,SAAU,CAAA,aAAA;AAAA,UACf,IAAI,YAAY,mBAAqB,EAAA;AAAA,YACnC,OAAS,EAAA,IAAA;AAAA,YACT,MAAA,EAAQ,EAAE,QAAA,EAAAA,SAAS;AAAA,WACpB;AAAA,SACH;AAAA;AACF;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,MAAA,EAAQ,WAAa,EAAA,QAAA,EAAU,MAAM,QAAS,EAAA,CAAA;AAAA,MACvD,CAAC,EAAE,MAAQ,EAAA,QAAA,EAAe,KAAA;AACxB,QAAA,IAAI,CAAC,MAAQ,EAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["isPaused"],"mappings":";;;AAoBO,MAAM,IAAO,GAAA;AAEb,MAAM,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,EAAM,MAAA,MAAA,GAAS,WAAW,MAAM;AAC9B,IAAA,IAAI,QAA+B,GAAA,OAAA;AACnC,IAAA,IAAI,MAAM,MAAQ,EAAA,QAAA,GAAW,QAAS,CAAA,aAAA,CAAc,MAAM,MAAM,CAAA;AAChE,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sFAAA;AAAA,OACT;AACF,IAAA,IAAI,SAAS,OAAY,KAAA,aAAA;AACvB,MAAW,QAAA,GAAA,QAAA,CAAS,cAAc,aAAa,CAAA;AACjD,IAAA,IAAI,CAAC,QAAA;AACH,MAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,QACb,GAAG,IAAI,CAAA,sFAAA;AAAA,OACT;AACF,IAAO,OAAA,QAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,YAAA;AAAA,IAChC;AAAA,GACF;AACA,EAAA,MAAM,CAAC,CAAA,EAAG,aAAa,CAAA,GAAI,aAA4B,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,aAAa,KAAK,CAAA;AAElD,EAAA,SAAS,mBAAsB,GAAA;AAC7B,IAAA,KAAA,CAAM,MAAM;AACV,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,aAAA,CAAc,CAAC,GAAQ,KAAA;AACrB,QAAI,IAAA,GAAA,eAAkB,GAAG,CAAA;AACzB,QAAO,OAAA,IAAA;AAAA,OACR,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAS,SAAA,gBAAA,CAAiB,IAAS,QAAkB,EAAA;AACnD,IAAA,KAAA,CAAM,MAAM;AACV,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,aAAA,CAAc,CAAC,GAAQ,KAAA;AACrB,QAAI,IAAA,GAAA,eAAkB,GAAG,CAAA;AACzB,QAAO,OAAA,UAAA,CAAW,IAAI,QAAQ,CAAA;AAAA,OAC/B,CAAA;AAAA,KACF,CAAA;AAAA;AAGH,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,QAAA,EAAU,UAAY,EAAA,MAAA,EAAQ,WAAY,EAAA,CAAA;AAAA,MACnD,CAAC,EAAE,QAAAA,EAAAA,SAAAA,EAAU,QAAa,KAAA;AACxB,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAA,MAAA,CAAO,SAAU,CAAA,aAAA;AAAA,UACf,IAAI,YAAY,mBAAqB,EAAA;AAAA,YACnC,OAAS,EAAA,IAAA;AAAA,YACT,MAAA,EAAQ,EAAE,QAAA,EAAAA,SAAS;AAAA,WACpB;AAAA,SACH;AAAA;AACF;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,OAAO,EAAE,MAAA,EAAQ,WAAa,EAAA,QAAA,EAAU,MAAM,QAAS,EAAA,CAAA;AAAA,MACvD,CAAC,EAAE,MAAQ,EAAA,QAAA,EAAe,KAAA;AACxB,QAAA,IAAI,CAAC,MAAQ,EAAA;AACb,QAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AAEvC,QAAA,SAAS,WAAc,GAAA;AACrB,UAAA,IAAI,CAAC,MAAQ,EAAA;AACb,UAAI,IAAA,MAAA,CAAO,SAAS,QAAU,EAAA;AAC9B,UAAA,OAAO,iBAAiB,MAAM;AAC5B,YAAI,IAAA,MAAA,CAAO,MAAO,CAAA,MAAA,IAAU,CAAG,EAAA;AAC/B,YAAA,MAAA,CAAO,IAAK,EAAA;AAAA,aACX,QAAQ,CAAA;AAAA;AAGb,QAAC,OAAe,aAAgB,GAAA,mBAAA;AAChC,QAAC,OAAe,aAAgB,GAAA,WAAA;AAEhC,QAAO,MAAA,CAAA,SAAA,CAAU,gBAAiB,CAAA,YAAA,EAAc,mBAAqB,EAAA;AAAA,UACnE,QAAQ,UAAW,CAAA;AAAA,SACpB,CAAA;AACD,QAAO,MAAA,CAAA,SAAA,CAAU,gBAAiB,CAAA,YAAA,EAAc,WAAa,EAAA;AAAA,UAC3D,QAAQ,UAAW,CAAA;AAAA,SACpB,CAAA;AAED,QAAO,MAAA,CAAA,EAAA,CAAG,eAAe,mBAAmB,CAAA;AAC5C,QAAO,MAAA,CAAA,EAAA,CAAG,gBAAgB,mBAAmB,CAAA;AAC7C,QAAO,MAAA,CAAA,EAAA,CAAG,kBAAkB,WAAW,CAAA;AACvC,QAAO,MAAA,CAAA,EAAA,CAAG,WAAW,WAAW,CAAA;AAEhC,QAAY,WAAA,EAAA;AAEZ,QAAA,OAAO,UAAU,MAAM;AACrB,UAAA,UAAA,CAAW,KAAM,EAAA;AAEjB,UAAO,MAAA,CAAA,EAAA,CAAG,aAAe,EAAA,mBAAA,EAAqB,IAAI,CAAA;AAClD,UAAO,MAAA,CAAA,EAAA,CAAG,cAAgB,EAAA,mBAAA,EAAqB,IAAI,CAAA;AACnD,UAAO,MAAA,CAAA,EAAA,CAAG,gBAAkB,EAAA,WAAA,EAAa,IAAI,CAAA;AAC7C,UAAO,MAAA,CAAA,EAAA,CAAG,SAAW,EAAA,WAAA,EAAa,IAAI,CAAA;AAAA,SACvC,CAAA;AAAA;AACH;AACF,GACF;AAEA,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,MAAM,IAAI,MAAO,EAAA;AAEjB,IAAA,IAAI,CAAC,CAAG,EAAA;AAER,IAAM,MAAA,MAAA,GAAS,CAAC,MAAsC,KAAA;AACpD,MAAA,YAAA,CAAa,MAAM,CAAA;AAAA,KACrB;AAEA,IAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AAEvC,IAAU,SAAA,CAAA;AAAA,MACR,MAAQ,EAAA,CAAA;AAAA,MACR,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,OAAO,UAAU,MAAM;AACrB,MAAA,UAAA,CAAW,KAAM,EAAA;AAAA,KAClB,CAAA;AAAA,GACF,CAAA;AACH","file":"keen-slider-auto-switch.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport {\n createEffect,\n createSignal,\n createMemo,\n on,\n onCleanup,\n batch,\n} from \"solid-js\";\nimport {\n addPlugin,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\ntype Props = {\n target: string;\n duration: number;\n};\n\nexport const Name = \"keen-slider-auto-switch\";\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n return targetEl;\n });\n\n const [sliderRef, setSliderRef] = createSignal<KeenSliderInstance | null>(\n null,\n );\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [isPaused, setIsPaused] = createSignal(false);\n\n function clearCurrentTimeout() {\n batch(() => {\n setIsPaused(true);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return null;\n });\n });\n }\n\n function startNextTimeout(cb: any, duration: number) {\n batch(() => {\n setIsPaused(false);\n setTimeoutVal((val) => {\n if (val) clearTimeout(val);\n return setTimeout(cb, duration) as any as number;\n });\n });\n }\n\n createEffect(\n on(\n () => ({ isPaused: isPaused(), slider: sliderRef() }),\n ({ isPaused, slider }) => {\n if (!slider) return;\n slider.container.dispatchEvent(\n new CustomEvent(\"autoswitch:update\", {\n bubbles: true,\n detail: { isPaused },\n }),\n );\n },\n ),\n );\n\n createEffect(\n on(\n () => ({ slider: sliderRef(), duration: props.duration }),\n ({ slider, duration }) => {\n if (!slider) return;\n const controller = new AbortController();\n\n function nextTimeout() {\n if (!slider) return;\n if (slider.options?.disabled) return;\n return startNextTimeout(() => {\n if (slider.slides.length <= 1) return;\n slider.next();\n }, duration);\n }\n\n (slider as any).pauseAutoplay = clearCurrentTimeout;\n (slider as any).startAutoplay = nextTimeout;\n\n slider.container.addEventListener(\"mouseenter\", clearCurrentTimeout, {\n signal: controller.signal,\n });\n slider.container.addEventListener(\"mouseleave\", nextTimeout, {\n signal: controller.signal,\n });\n\n slider.on(\"dragStarted\", clearCurrentTimeout);\n slider.on(\"slideChanged\", clearCurrentTimeout);\n slider.on(\"animationEnded\", nextTimeout);\n slider.on(\"updated\", nextTimeout);\n\n nextTimeout();\n\n return onCleanup(() => {\n controller.abort();\n\n slider.on(\"dragStarted\", clearCurrentTimeout, true);\n slider.on(\"slideChanged\", clearCurrentTimeout, true);\n slider.on(\"animationEnded\", nextTimeout, true);\n slider.on(\"updated\", nextTimeout, true);\n });\n },\n ),\n );\n\n createEffect(() => {\n const t = target();\n\n if (!t) return;\n\n const plugin = (slider: KeenSliderInstance | null) => {\n setSliderRef(slider);\n };\n\n const controller = new AbortController();\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n controller.abort();\n });\n });\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-keen-slider-auto-switch",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Keen slider auto switch plugin web component",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"component-register": "^0.8.7",
|
|
23
23
|
"solid-element": "^1.9.1",
|
|
24
24
|
"solid-js": "^1.9.7",
|
|
25
|
-
"@brytdesigns/web-component-keen-slider": "1.0.
|
|
25
|
+
"@brytdesigns/web-component-keen-slider": "1.0.14",
|
|
26
26
|
"@brytdesigns/web-component-utils": "0.1.14"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|