@brytdesigns/web-component-keen-slider-auto-switch 2.0.0 → 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 +75 -66
- package/dist/esm/index.js.map +1 -1
- package/dist/main/components/index.js +2 -1
- package/dist/main/components/keen-slider-auto-switch.js +61 -63
- package/dist/main/components/keen-slider-auto-switch.js.map +1 -1
- package/dist/main/index.js +3 -3
- package/dist/main/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -2,114 +2,123 @@ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-co
|
|
|
2
2
|
import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
|
|
3
3
|
import { addPlugin } from '@brytdesigns/web-component-keen-slider';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/components/keen-slider-auto-switch.ts
|
|
12
|
+
var keen_slider_auto_switch_exports = {};
|
|
13
|
+
__export(keen_slider_auto_switch_exports, {
|
|
14
|
+
Component: () => Component,
|
|
15
|
+
Name: () => Name
|
|
16
|
+
});
|
|
17
|
+
var Name = "keen-slider-auto-switch";
|
|
18
|
+
var Component = (props, { element }) => {
|
|
7
19
|
if (!props.target)
|
|
8
20
|
return console.warn(
|
|
9
|
-
|
|
21
|
+
`${Name}: Needs a proper target in order to properly extend a keen slider.`
|
|
10
22
|
);
|
|
11
23
|
const target = createMemo(() => {
|
|
12
24
|
let targetEl = element;
|
|
13
25
|
if (props.target) targetEl = document.querySelector(props.target);
|
|
14
26
|
if (!targetEl)
|
|
15
27
|
return console.warn(
|
|
16
|
-
|
|
28
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
17
29
|
);
|
|
18
30
|
if (targetEl.tagName !== "KEEN-SLIDER")
|
|
19
31
|
targetEl = targetEl.querySelector("keen-slider");
|
|
20
32
|
if (!targetEl)
|
|
21
33
|
return console.warn(
|
|
22
|
-
|
|
34
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
23
35
|
);
|
|
24
36
|
return targetEl;
|
|
25
37
|
});
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (val) clearTimeout(val);
|
|
38
|
-
return null;
|
|
39
|
-
});
|
|
38
|
+
const [sliderRef, setSliderRef] = createSignal(
|
|
39
|
+
null
|
|
40
|
+
);
|
|
41
|
+
const [_, setTimeoutVal] = createSignal(null);
|
|
42
|
+
const [isPaused, setIsPaused] = createSignal(false);
|
|
43
|
+
function clearCurrentTimeout() {
|
|
44
|
+
batch(() => {
|
|
45
|
+
setIsPaused(true);
|
|
46
|
+
setTimeoutVal((val) => {
|
|
47
|
+
if (val) clearTimeout(val);
|
|
48
|
+
return null;
|
|
40
49
|
});
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function startNextTimeout(cb, duration) {
|
|
53
|
+
batch(() => {
|
|
54
|
+
setIsPaused(false);
|
|
55
|
+
setTimeoutVal((val) => {
|
|
56
|
+
if (val) clearTimeout(val);
|
|
57
|
+
return setTimeout(cb, duration);
|
|
49
58
|
});
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
slider.container.dispatchEvent(
|
|
57
|
-
new CustomEvent("autoswitch:update", {
|
|
58
|
-
bubbles: true,
|
|
59
|
-
detail: { isPaused: isPaused2 }
|
|
60
|
-
})
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
)
|
|
64
|
-
);
|
|
65
|
-
createEffect(
|
|
66
|
-
on(sliderRef, (slider) => {
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
createEffect(
|
|
62
|
+
on(
|
|
63
|
+
() => ({ isPaused: isPaused(), slider: sliderRef() }),
|
|
64
|
+
({ isPaused: isPaused2, slider }) => {
|
|
67
65
|
if (!slider) return;
|
|
66
|
+
slider.container.dispatchEvent(
|
|
67
|
+
new CustomEvent("autoswitch:update", {
|
|
68
|
+
bubbles: true,
|
|
69
|
+
detail: { isPaused: isPaused2 }
|
|
70
|
+
})
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
);
|
|
75
|
+
createEffect(
|
|
76
|
+
on(
|
|
77
|
+
() => ({ slider: sliderRef(), duration: props.duration }),
|
|
78
|
+
({ slider, duration }) => {
|
|
79
|
+
if (!slider) return;
|
|
80
|
+
const controller = new AbortController();
|
|
68
81
|
function nextTimeout() {
|
|
69
82
|
if (!slider) return;
|
|
70
83
|
if (slider.options?.disabled) return;
|
|
71
84
|
return startNextTimeout(() => {
|
|
72
85
|
if (slider.slides.length <= 1) return;
|
|
73
86
|
slider.next();
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
function handleMouseEnter() {
|
|
77
|
-
clearCurrentTimeout();
|
|
78
|
-
}
|
|
79
|
-
function handleMouseLeave() {
|
|
80
|
-
nextTimeout();
|
|
87
|
+
}, duration);
|
|
81
88
|
}
|
|
82
89
|
slider.pauseAutoplay = clearCurrentTimeout;
|
|
83
90
|
slider.startAutoplay = nextTimeout;
|
|
84
|
-
slider.container.addEventListener("mouseenter", clearCurrentTimeout
|
|
85
|
-
|
|
91
|
+
slider.container.addEventListener("mouseenter", clearCurrentTimeout, {
|
|
92
|
+
signal: controller.signal
|
|
93
|
+
});
|
|
94
|
+
slider.container.addEventListener("mouseleave", nextTimeout, {
|
|
95
|
+
signal: controller.signal
|
|
96
|
+
});
|
|
86
97
|
slider.on("dragStarted", clearCurrentTimeout);
|
|
87
98
|
slider.on("slideChanged", clearCurrentTimeout);
|
|
88
99
|
slider.on("animationEnded", nextTimeout);
|
|
89
100
|
slider.on("updated", nextTimeout);
|
|
90
101
|
nextTimeout();
|
|
91
102
|
return onCleanup(() => {
|
|
92
|
-
|
|
93
|
-
slider.container.removeEventListener("mouseleave", handleMouseLeave);
|
|
103
|
+
controller.abort();
|
|
94
104
|
slider.on("dragStarted", clearCurrentTimeout, true);
|
|
95
105
|
slider.on("slideChanged", clearCurrentTimeout, true);
|
|
96
106
|
slider.on("animationEnded", nextTimeout, true);
|
|
97
107
|
slider.on("updated", nextTimeout, true);
|
|
98
108
|
});
|
|
99
|
-
}
|
|
100
|
-
)
|
|
101
|
-
|
|
102
|
-
setSliderRef(slider);
|
|
103
|
-
};
|
|
104
|
-
});
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
);
|
|
105
112
|
createEffect(() => {
|
|
106
113
|
const t = target();
|
|
107
114
|
if (!t) return;
|
|
108
|
-
const
|
|
115
|
+
const plugin = (slider) => {
|
|
116
|
+
setSliderRef(slider);
|
|
117
|
+
};
|
|
109
118
|
const controller = new AbortController();
|
|
110
119
|
addPlugin({
|
|
111
120
|
target: t,
|
|
112
|
-
plugin
|
|
121
|
+
plugin,
|
|
113
122
|
controller
|
|
114
123
|
});
|
|
115
124
|
return onCleanup(() => {
|
|
@@ -120,12 +129,12 @@ var KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
120
129
|
|
|
121
130
|
// src/index.ts
|
|
122
131
|
customShadowlessElement(
|
|
123
|
-
|
|
132
|
+
keen_slider_auto_switch_exports.Name,
|
|
124
133
|
{
|
|
125
|
-
target: "",
|
|
134
|
+
target: "keen-slider",
|
|
126
135
|
duration: 2e3
|
|
127
136
|
},
|
|
128
|
-
correctElementType(
|
|
137
|
+
correctElementType(keen_slider_auto_switch_exports.Component)
|
|
129
138
|
);
|
|
130
139
|
//# sourceMappingURL=index.js.map
|
|
131
140
|
//# sourceMappingURL=index.js.map
|
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":"
|
|
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"]}
|
|
@@ -1,113 +1,111 @@
|
|
|
1
1
|
import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
|
|
2
2
|
import { addPlugin } from '@brytdesigns/web-component-keen-slider';
|
|
3
3
|
|
|
4
|
-
const
|
|
4
|
+
const Name = "keen-slider-auto-switch";
|
|
5
|
+
const Component = (props, { element }) => {
|
|
5
6
|
if (!props.target)
|
|
6
7
|
return console.warn(
|
|
7
|
-
|
|
8
|
+
`${Name}: Needs a proper target in order to properly extend a keen slider.`
|
|
8
9
|
);
|
|
9
10
|
const target = createMemo(() => {
|
|
10
11
|
let targetEl = element;
|
|
11
12
|
if (props.target) targetEl = document.querySelector(props.target);
|
|
12
13
|
if (!targetEl)
|
|
13
14
|
return console.warn(
|
|
14
|
-
|
|
15
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
15
16
|
);
|
|
16
17
|
if (targetEl.tagName !== "KEEN-SLIDER")
|
|
17
18
|
targetEl = targetEl.querySelector("keen-slider");
|
|
18
19
|
if (!targetEl)
|
|
19
20
|
return console.warn(
|
|
20
|
-
|
|
21
|
+
`${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
|
|
21
22
|
);
|
|
22
23
|
return targetEl;
|
|
23
24
|
});
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
if (val) clearTimeout(val);
|
|
36
|
-
return null;
|
|
37
|
-
});
|
|
25
|
+
const [sliderRef, setSliderRef] = createSignal(
|
|
26
|
+
null
|
|
27
|
+
);
|
|
28
|
+
const [_, setTimeoutVal] = createSignal(null);
|
|
29
|
+
const [isPaused, setIsPaused] = createSignal(false);
|
|
30
|
+
function clearCurrentTimeout() {
|
|
31
|
+
batch(() => {
|
|
32
|
+
setIsPaused(true);
|
|
33
|
+
setTimeoutVal((val) => {
|
|
34
|
+
if (val) clearTimeout(val);
|
|
35
|
+
return null;
|
|
38
36
|
});
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
function startNextTimeout(cb, duration) {
|
|
40
|
+
batch(() => {
|
|
41
|
+
setIsPaused(false);
|
|
42
|
+
setTimeoutVal((val) => {
|
|
43
|
+
if (val) clearTimeout(val);
|
|
44
|
+
return setTimeout(cb, duration);
|
|
47
45
|
});
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
slider.container.dispatchEvent(
|
|
55
|
-
new CustomEvent("autoswitch:update", {
|
|
56
|
-
bubbles: true,
|
|
57
|
-
detail: { isPaused: isPaused2 }
|
|
58
|
-
})
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
)
|
|
62
|
-
);
|
|
63
|
-
createEffect(
|
|
64
|
-
on(sliderRef, (slider) => {
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
createEffect(
|
|
49
|
+
on(
|
|
50
|
+
() => ({ isPaused: isPaused(), slider: sliderRef() }),
|
|
51
|
+
({ isPaused: isPaused2, slider }) => {
|
|
65
52
|
if (!slider) return;
|
|
53
|
+
slider.container.dispatchEvent(
|
|
54
|
+
new CustomEvent("autoswitch:update", {
|
|
55
|
+
bubbles: true,
|
|
56
|
+
detail: { isPaused: isPaused2 }
|
|
57
|
+
})
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
)
|
|
61
|
+
);
|
|
62
|
+
createEffect(
|
|
63
|
+
on(
|
|
64
|
+
() => ({ slider: sliderRef(), duration: props.duration }),
|
|
65
|
+
({ slider, duration }) => {
|
|
66
|
+
if (!slider) return;
|
|
67
|
+
const controller = new AbortController();
|
|
66
68
|
function nextTimeout() {
|
|
67
69
|
if (!slider) return;
|
|
68
70
|
if (slider.options?.disabled) return;
|
|
69
71
|
return startNextTimeout(() => {
|
|
70
72
|
if (slider.slides.length <= 1) return;
|
|
71
73
|
slider.next();
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
function handleMouseEnter() {
|
|
75
|
-
clearCurrentTimeout();
|
|
76
|
-
}
|
|
77
|
-
function handleMouseLeave() {
|
|
78
|
-
nextTimeout();
|
|
74
|
+
}, duration);
|
|
79
75
|
}
|
|
80
76
|
slider.pauseAutoplay = clearCurrentTimeout;
|
|
81
77
|
slider.startAutoplay = nextTimeout;
|
|
82
|
-
slider.container.addEventListener("mouseenter", clearCurrentTimeout
|
|
83
|
-
|
|
78
|
+
slider.container.addEventListener("mouseenter", clearCurrentTimeout, {
|
|
79
|
+
signal: controller.signal
|
|
80
|
+
});
|
|
81
|
+
slider.container.addEventListener("mouseleave", nextTimeout, {
|
|
82
|
+
signal: controller.signal
|
|
83
|
+
});
|
|
84
84
|
slider.on("dragStarted", clearCurrentTimeout);
|
|
85
85
|
slider.on("slideChanged", clearCurrentTimeout);
|
|
86
86
|
slider.on("animationEnded", nextTimeout);
|
|
87
87
|
slider.on("updated", nextTimeout);
|
|
88
88
|
nextTimeout();
|
|
89
89
|
return onCleanup(() => {
|
|
90
|
-
|
|
91
|
-
slider.container.removeEventListener("mouseleave", handleMouseLeave);
|
|
90
|
+
controller.abort();
|
|
92
91
|
slider.on("dragStarted", clearCurrentTimeout, true);
|
|
93
92
|
slider.on("slideChanged", clearCurrentTimeout, true);
|
|
94
93
|
slider.on("animationEnded", nextTimeout, true);
|
|
95
94
|
slider.on("updated", nextTimeout, true);
|
|
96
95
|
});
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
|
|
100
|
-
setSliderRef(slider);
|
|
101
|
-
};
|
|
102
|
-
});
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
);
|
|
103
99
|
createEffect(() => {
|
|
104
100
|
const t = target();
|
|
105
101
|
if (!t) return;
|
|
106
|
-
const
|
|
102
|
+
const plugin = (slider) => {
|
|
103
|
+
setSliderRef(slider);
|
|
104
|
+
};
|
|
107
105
|
const controller = new AbortController();
|
|
108
106
|
addPlugin({
|
|
109
107
|
target: t,
|
|
110
|
-
plugin
|
|
108
|
+
plugin,
|
|
111
109
|
controller
|
|
112
110
|
});
|
|
113
111
|
return onCleanup(() => {
|
|
@@ -116,6 +114,6 @@ const KeenSliderAutoSwitch = (props, { element }) => {
|
|
|
116
114
|
});
|
|
117
115
|
};
|
|
118
116
|
|
|
119
|
-
export {
|
|
117
|
+
export { Component, Name };
|
|
120
118
|
//# sourceMappingURL=keen-slider-auto-switch.js.map
|
|
121
119
|
//# sourceMappingURL=keen-slider-auto-switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["isPaused"],"mappings":";;;AAoBO,MAAM,
|
|
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 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/dist/main/index.js
CHANGED
|
@@ -2,12 +2,12 @@ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-co
|
|
|
2
2
|
import { KeenSliderAutoSwitch } from './components/index.js';
|
|
3
3
|
|
|
4
4
|
customShadowlessElement(
|
|
5
|
-
|
|
5
|
+
KeenSliderAutoSwitch.Name,
|
|
6
6
|
{
|
|
7
|
-
target: "",
|
|
7
|
+
target: "keen-slider",
|
|
8
8
|
duration: 2e3
|
|
9
9
|
},
|
|
10
|
-
correctElementType(KeenSliderAutoSwitch)
|
|
10
|
+
correctElementType(KeenSliderAutoSwitch.Component)
|
|
11
11
|
);
|
|
12
12
|
//# sourceMappingURL=index.js.map
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"names":[],"mappings":";;;AAMA,uBAAA;AAAA,EACE,oBAAqB,CAAA,IAAA;AAAA,EACrB;AAAA,IACE,MAAQ,EAAA,aAAA;AAAA,IACR,QAAU,EAAA;AAAA,GACZ;AAAA,EACA,kBAAA,CAAmB,qBAAqB,SAAS;AACnD,CAAA","file":"index.js","sourcesContent":["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"]}
|
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": {
|