@brytdesigns/web-component-keen-slider-auto-switch 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
|
|
2
|
-
import {
|
|
2
|
+
import { addPlugin } from '@brytdesigns/web-component-keen-slider';
|
|
3
3
|
|
|
4
4
|
const KeenSliderAutoSwitch = (props, { element }) => {
|
|
5
5
|
if (!props.target)
|
|
6
6
|
return console.warn(
|
|
7
7
|
"keen-slider-auto-switch: Needs a proper target in order to properly extend a keen slider."
|
|
8
8
|
);
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
targetEl
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
9
|
+
const target = createMemo(() => {
|
|
10
|
+
let targetEl = element;
|
|
11
|
+
if (props.target) targetEl = document.querySelector(props.target);
|
|
12
|
+
if (!targetEl)
|
|
13
|
+
return console.warn(
|
|
14
|
+
"keen-slider-auto-switch: Could not find the target element. Make sure it exists and is a keen-slider element."
|
|
15
|
+
);
|
|
16
|
+
if (targetEl.tagName !== "KEEN-SLIDER")
|
|
17
|
+
targetEl = targetEl.querySelector("keen-slider");
|
|
18
|
+
if (!targetEl)
|
|
19
|
+
return console.warn(
|
|
20
|
+
"keen-slider-auto-switch: Could not find the target element. Make sure it exists and is a keen-slider element."
|
|
21
|
+
);
|
|
22
|
+
return targetEl;
|
|
23
|
+
});
|
|
22
24
|
const plugin = createMemo(() => {
|
|
23
25
|
const duration = props.duration || 2e3;
|
|
24
|
-
const [
|
|
26
|
+
const [_, setTimeoutVal] = createSignal(null);
|
|
25
27
|
const [sliderRef, setSliderRef] = createSignal(
|
|
26
28
|
null
|
|
27
29
|
);
|
|
@@ -99,10 +101,17 @@ const KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
99
101
|
};
|
|
100
102
|
});
|
|
101
103
|
createEffect(() => {
|
|
104
|
+
const t = target();
|
|
105
|
+
if (!t) return;
|
|
102
106
|
const p = plugin();
|
|
103
|
-
const
|
|
107
|
+
const controller = new AbortController();
|
|
108
|
+
addPlugin({
|
|
109
|
+
target: t,
|
|
110
|
+
plugin: p,
|
|
111
|
+
controller
|
|
112
|
+
});
|
|
104
113
|
return onCleanup(() => {
|
|
105
|
-
|
|
114
|
+
controller.abort();
|
|
106
115
|
});
|
|
107
116
|
});
|
|
108
117
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["isPaused"],"mappings":"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","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 KeenSliderAutoSwitchProps = {\n target: string;\n duration: number;\n};\n\nexport const KeenSliderAutoSwitch: CorrectComponentType<\n KeenSliderAutoSwitchProps\n> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n \"keen-slider-auto-switch: 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 \"keen-slider-auto-switch: 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 \"keen-slider-auto-switch: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n );\n return targetEl;\n });\n\n const plugin = createMemo(() => {\n const duration = props.duration || 2000;\n\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [sliderRef, setSliderRef] = createSignal<KeenSliderInstance | null>(\n null,\n );\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) {\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(sliderRef, (slider) => {\n if (!slider) return;\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 });\n }\n\n function handleMouseEnter() {\n clearCurrentTimeout();\n }\n\n function handleMouseLeave() {\n nextTimeout();\n }\n\n (slider as any).pauseAutoplay = clearCurrentTimeout;\n (slider as any).startAutoplay = nextTimeout;\n\n slider.container.addEventListener(\"mouseenter\", clearCurrentTimeout);\n slider.container.addEventListener(\"mouseleave\", nextTimeout);\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 slider.container.removeEventListener(\"mouseenter\", handleMouseEnter);\n slider.container.removeEventListener(\"mouseleave\", handleMouseLeave);\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 return function(slider: KeenSliderInstance | null) {\n setSliderRef(slider);\n };\n });\n\n createEffect(() => {\n const t = target();\n\n if (!t) return;\n\n const p = plugin();\n const controller = new AbortController();\n\n addPlugin({\n target: t,\n plugin: p,\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": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
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,8 +22,8 @@
|
|
|
22
22
|
"component-register": "^0.8.7",
|
|
23
23
|
"solid-element": "^1.9.1",
|
|
24
24
|
"solid-js": "^1.9.6",
|
|
25
|
-
"@brytdesigns/web-component-keen-slider": "1.0.
|
|
26
|
-
"@brytdesigns/web-component-utils": "0.1.
|
|
25
|
+
"@brytdesigns/web-component-keen-slider": "1.0.8",
|
|
26
|
+
"@brytdesigns/web-component-utils": "0.1.10"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"dts-bundle-generator": "^9.5.1",
|