@brytdesigns/web-component-keen-slider-auto-switch 2.0.2 → 2.1.1

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 +108 -104
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/main/components/keen-slider-auto-switch.js +107 -103
  4. package/dist/main/components/keen-slider-auto-switch.js.map +1 -1
  5. package/dist/main/index.js +1 -1
  6. package/dist/main/index.js.map +1 -1
  7. package/package.json +4 -4
package/dist/esm/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
2
- import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
3
- import { addPlugin } from '@brytdesigns/web-component-keen-slider';
1
+ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
2
+ import { createSignal, createEffect, on, batch, onCleanup, untrack } from 'solid-js';
3
+ import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
4
4
 
5
5
  var __defProp = Object.defineProperty;
6
6
  var __export = (target, all) => {
@@ -20,111 +20,115 @@ var Component = (props, { element }) => {
20
20
  return console.warn(
21
21
  `${Name}: Needs a proper target in order to properly extend a keen slider.`
22
22
  );
23
- const target = createMemo(() => {
24
- let targetEl = element;
25
- if (props.target) targetEl = document.querySelector(props.target);
26
- if (!targetEl)
27
- return console.warn(
28
- `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
29
- );
30
- if (targetEl.tagName !== "KEEN-SLIDER")
31
- targetEl = targetEl.querySelector("keen-slider");
32
- if (!targetEl)
33
- return console.warn(
34
- `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
35
- );
36
- return targetEl;
37
- });
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;
49
- });
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);
58
- });
59
- });
60
- }
61
- createEffect(
62
- on(
63
- () => ({ isPaused: isPaused(), slider: sliderRef() }),
64
- ({ isPaused: isPaused2, slider }) => {
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();
81
- function nextTimeout() {
82
- if (!slider) return;
83
- if (slider.options?.disabled) return;
84
- return startNextTimeout(() => {
85
- if (slider.slides.length <= 1) return;
86
- slider.next();
87
- }, duration);
88
- }
89
- slider.pauseAutoplay = clearCurrentTimeout;
90
- slider.startAutoplay = nextTimeout;
91
- slider.container.addEventListener("mouseenter", clearCurrentTimeout, {
92
- signal: controller.signal
23
+ withKeenSliderElementContext(
24
+ () => {
25
+ const selector = props.target;
26
+ return () => {
27
+ let targetEl = element;
28
+ if (props.target) targetEl = document.querySelector(selector);
29
+ if (targetEl?.tagName !== "KEEN-SLIDER")
30
+ targetEl = targetEl.querySelector("keen-slider");
31
+ return targetEl;
32
+ };
33
+ },
34
+ () => props.duration,
35
+ (context, duration) => {
36
+ const [sliderRef] = context;
37
+ const [_, setTimeoutVal] = createSignal(null);
38
+ const [isHovering, setIsHovering] = createSignal(false);
39
+ const [isPaused, setIsPaused] = createSignal(false);
40
+ function clearCurrentTimeout() {
41
+ batch(() => {
42
+ setIsPaused(true);
43
+ setTimeoutVal((val) => {
44
+ if (val) clearTimeout(val);
45
+ return null;
46
+ });
93
47
  });
94
- slider.container.addEventListener("mouseleave", nextTimeout, {
95
- signal: controller.signal
96
- });
97
- slider.on("dragStarted", clearCurrentTimeout);
98
- slider.on("slideChanged", clearCurrentTimeout);
99
- slider.on("animationEnded", nextTimeout);
100
- slider.on("updated", nextTimeout);
101
- nextTimeout();
102
- return onCleanup(() => {
103
- controller.abort();
104
- slider.on("dragStarted", clearCurrentTimeout, true);
105
- slider.on("slideChanged", clearCurrentTimeout, true);
106
- slider.on("animationEnded", nextTimeout, true);
107
- slider.on("updated", nextTimeout, true);
48
+ }
49
+ function startNextTimeout(cb, duration2) {
50
+ if (untrack(isHovering)) return;
51
+ batch(() => {
52
+ setIsPaused(false);
53
+ setTimeoutVal((val) => {
54
+ if (val) clearTimeout(val);
55
+ return setTimeout(cb, duration2);
56
+ });
108
57
  });
109
58
  }
110
- )
59
+ createEffect(
60
+ on(
61
+ () => ({ isPaused: isPaused(), slider: sliderRef() }),
62
+ ({ isPaused: isPaused2, slider }) => {
63
+ if (!slider) return;
64
+ slider.container.dispatchEvent(
65
+ new CustomEvent("autoswitch:update", {
66
+ bubbles: true,
67
+ detail: { isPaused: isPaused2 }
68
+ })
69
+ );
70
+ }
71
+ )
72
+ );
73
+ createEffect(
74
+ on(
75
+ () => ({ slider: sliderRef() }),
76
+ ({ slider }) => {
77
+ if (!slider) return;
78
+ const controller = new AbortController();
79
+ function nextTimeout() {
80
+ if (!slider) return;
81
+ if (slider.options?.disabled) return;
82
+ return startNextTimeout(() => {
83
+ if (slider.slides.length <= 1) return;
84
+ slider.next();
85
+ }, duration);
86
+ }
87
+ slider.pauseAutoplay = clearCurrentTimeout;
88
+ slider.startAutoplay = nextTimeout;
89
+ slider.container.addEventListener(
90
+ "mouseenter",
91
+ () => {
92
+ batch(() => {
93
+ setIsHovering(true);
94
+ clearCurrentTimeout();
95
+ });
96
+ },
97
+ {
98
+ signal: controller.signal
99
+ }
100
+ );
101
+ slider.container.addEventListener(
102
+ "mouseleave",
103
+ () => {
104
+ batch(() => {
105
+ setIsHovering(false);
106
+ startNextTimeout(nextTimeout, duration);
107
+ });
108
+ },
109
+ {
110
+ signal: controller.signal
111
+ }
112
+ );
113
+ slider.on("dragStarted", clearCurrentTimeout);
114
+ slider.on("slideChanged", clearCurrentTimeout);
115
+ slider.on("animationEnded", nextTimeout);
116
+ slider.on("updated", nextTimeout);
117
+ slider.on("destroyed", clearCurrentTimeout, true);
118
+ nextTimeout();
119
+ return onCleanup(() => {
120
+ controller.abort();
121
+ slider.on("dragStarted", clearCurrentTimeout, true);
122
+ slider.on("slideChanged", clearCurrentTimeout, true);
123
+ slider.on("animationEnded", nextTimeout, true);
124
+ slider.on("updated", nextTimeout, true);
125
+ slider.on("destroyed", clearCurrentTimeout, true);
126
+ });
127
+ }
128
+ )
129
+ );
130
+ }
111
131
  );
112
- createEffect(() => {
113
- const t = target();
114
- if (!t) return;
115
- const plugin = (slider) => {
116
- setSliderRef(slider);
117
- };
118
- const controller = new AbortController();
119
- addPlugin({
120
- target: t,
121
- plugin,
122
- controller
123
- });
124
- return onCleanup(() => {
125
- controller.abort();
126
- });
127
- });
128
132
  };
129
133
 
130
134
  // src/index.ts
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":"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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
+ {"version":3,"sources":["../../src/components/keen-slider-auto-switch.ts","../../src/index.ts"],"names":["duration","isPaused"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n createEffect,\n createSignal,\n on,\n onCleanup,\n batch,\n untrack,\n} from \"solid-js\";\nimport { withKeenSliderElementContext } 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 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 () => props.duration,\n (context, duration) => {\n const [sliderRef] = context;\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [isHovering, setIsHovering] = createSignal(false);\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 if (untrack(isHovering)) return;\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() }),\n ({ slider }) => {\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(\n \"mouseenter\",\n () => {\n batch(() => {\n setIsHovering(true);\n clearCurrentTimeout();\n });\n },\n {\n signal: controller.signal,\n },\n );\n slider.container.addEventListener(\n \"mouseleave\",\n () => {\n batch(() => {\n setIsHovering(false);\n startNextTimeout(nextTimeout, duration);\n });\n },\n {\n signal: controller.signal,\n },\n );\n\n slider.on(\"dragStarted\", clearCurrentTimeout);\n slider.on(\"slideChanged\", clearCurrentTimeout);\n slider.on(\"animationEnded\", nextTimeout);\n slider.on(\"updated\", nextTimeout);\n slider.on(\"destroyed\", clearCurrentTimeout, true);\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 slider.on(\"destroyed\", clearCurrentTimeout, true);\n });\n },\n ),\n );\n },\n );\n};\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/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/dist/main/components/keen-slider-auto-switch.js CHANGED
@@ -1,5 +1,5 @@
1
- import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
2
- import { addPlugin } from '@brytdesigns/web-component-keen-slider';
1
+ import { createSignal, createEffect, on, batch, onCleanup, untrack } from 'solid-js';
2
+ import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
3
3
 
4
4
  const Name = "keen-slider-auto-switch";
5
5
  const Component = (props, { element }) => {
@@ -7,111 +7,115 @@ const Component = (props, { element }) => {
7
7
  return console.warn(
8
8
  `${Name}: Needs a proper target in order to properly extend a keen slider.`
9
9
  );
10
- const target = createMemo(() => {
11
- let targetEl = element;
12
- if (props.target) targetEl = document.querySelector(props.target);
13
- if (!targetEl)
14
- return console.warn(
15
- `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
16
- );
17
- if (targetEl.tagName !== "KEEN-SLIDER")
18
- targetEl = targetEl.querySelector("keen-slider");
19
- if (!targetEl)
20
- return console.warn(
21
- `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`
22
- );
23
- return targetEl;
24
- });
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;
36
- });
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);
45
- });
46
- });
47
- }
48
- createEffect(
49
- on(
50
- () => ({ isPaused: isPaused(), slider: sliderRef() }),
51
- ({ isPaused: isPaused2, slider }) => {
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();
68
- function nextTimeout() {
69
- if (!slider) return;
70
- if (slider.options?.disabled) return;
71
- return startNextTimeout(() => {
72
- if (slider.slides.length <= 1) return;
73
- slider.next();
74
- }, duration);
75
- }
76
- slider.pauseAutoplay = clearCurrentTimeout;
77
- slider.startAutoplay = nextTimeout;
78
- slider.container.addEventListener("mouseenter", clearCurrentTimeout, {
79
- signal: controller.signal
10
+ withKeenSliderElementContext(
11
+ () => {
12
+ const selector = props.target;
13
+ return () => {
14
+ let targetEl = element;
15
+ if (props.target) targetEl = document.querySelector(selector);
16
+ if (targetEl?.tagName !== "KEEN-SLIDER")
17
+ targetEl = targetEl.querySelector("keen-slider");
18
+ return targetEl;
19
+ };
20
+ },
21
+ () => props.duration,
22
+ (context, duration) => {
23
+ const [sliderRef] = context;
24
+ const [_, setTimeoutVal] = createSignal(null);
25
+ const [isHovering, setIsHovering] = createSignal(false);
26
+ const [isPaused, setIsPaused] = createSignal(false);
27
+ function clearCurrentTimeout() {
28
+ batch(() => {
29
+ setIsPaused(true);
30
+ setTimeoutVal((val) => {
31
+ if (val) clearTimeout(val);
32
+ return null;
33
+ });
80
34
  });
81
- slider.container.addEventListener("mouseleave", nextTimeout, {
82
- signal: controller.signal
83
- });
84
- slider.on("dragStarted", clearCurrentTimeout);
85
- slider.on("slideChanged", clearCurrentTimeout);
86
- slider.on("animationEnded", nextTimeout);
87
- slider.on("updated", nextTimeout);
88
- nextTimeout();
89
- return onCleanup(() => {
90
- controller.abort();
91
- slider.on("dragStarted", clearCurrentTimeout, true);
92
- slider.on("slideChanged", clearCurrentTimeout, true);
93
- slider.on("animationEnded", nextTimeout, true);
94
- slider.on("updated", nextTimeout, true);
35
+ }
36
+ function startNextTimeout(cb, duration2) {
37
+ if (untrack(isHovering)) return;
38
+ batch(() => {
39
+ setIsPaused(false);
40
+ setTimeoutVal((val) => {
41
+ if (val) clearTimeout(val);
42
+ return setTimeout(cb, duration2);
43
+ });
95
44
  });
96
45
  }
97
- )
46
+ createEffect(
47
+ on(
48
+ () => ({ isPaused: isPaused(), slider: sliderRef() }),
49
+ ({ isPaused: isPaused2, slider }) => {
50
+ if (!slider) return;
51
+ slider.container.dispatchEvent(
52
+ new CustomEvent("autoswitch:update", {
53
+ bubbles: true,
54
+ detail: { isPaused: isPaused2 }
55
+ })
56
+ );
57
+ }
58
+ )
59
+ );
60
+ createEffect(
61
+ on(
62
+ () => ({ slider: sliderRef() }),
63
+ ({ slider }) => {
64
+ if (!slider) return;
65
+ const controller = new AbortController();
66
+ function nextTimeout() {
67
+ if (!slider) return;
68
+ if (slider.options?.disabled) return;
69
+ return startNextTimeout(() => {
70
+ if (slider.slides.length <= 1) return;
71
+ slider.next();
72
+ }, duration);
73
+ }
74
+ slider.pauseAutoplay = clearCurrentTimeout;
75
+ slider.startAutoplay = nextTimeout;
76
+ slider.container.addEventListener(
77
+ "mouseenter",
78
+ () => {
79
+ batch(() => {
80
+ setIsHovering(true);
81
+ clearCurrentTimeout();
82
+ });
83
+ },
84
+ {
85
+ signal: controller.signal
86
+ }
87
+ );
88
+ slider.container.addEventListener(
89
+ "mouseleave",
90
+ () => {
91
+ batch(() => {
92
+ setIsHovering(false);
93
+ startNextTimeout(nextTimeout, duration);
94
+ });
95
+ },
96
+ {
97
+ signal: controller.signal
98
+ }
99
+ );
100
+ slider.on("dragStarted", clearCurrentTimeout);
101
+ slider.on("slideChanged", clearCurrentTimeout);
102
+ slider.on("animationEnded", nextTimeout);
103
+ slider.on("updated", nextTimeout);
104
+ slider.on("destroyed", clearCurrentTimeout, true);
105
+ nextTimeout();
106
+ return onCleanup(() => {
107
+ controller.abort();
108
+ slider.on("dragStarted", clearCurrentTimeout, true);
109
+ slider.on("slideChanged", clearCurrentTimeout, true);
110
+ slider.on("animationEnded", nextTimeout, true);
111
+ slider.on("updated", nextTimeout, true);
112
+ slider.on("destroyed", clearCurrentTimeout, true);
113
+ });
114
+ }
115
+ )
116
+ );
117
+ }
98
118
  );
99
- createEffect(() => {
100
- const t = target();
101
- if (!t) return;
102
- const plugin = (slider) => {
103
- setSliderRef(slider);
104
- };
105
- const controller = new AbortController();
106
- addPlugin({
107
- target: t,
108
- plugin,
109
- controller
110
- });
111
- return onCleanup(() => {
112
- controller.abort();
113
- });
114
- });
115
119
  };
116
120
 
117
121
  export { Component, Name };
package/dist/main/components/keen-slider-auto-switch.js.map CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../../../src/components/keen-slider-auto-switch.ts"],"names":["duration","isPaused"],"mappings":"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","file":"keen-slider-auto-switch.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport {\n createEffect,\n createSignal,\n on,\n onCleanup,\n batch,\n untrack,\n} from \"solid-js\";\nimport { withKeenSliderElementContext } 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 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 () => props.duration,\n (context, duration) => {\n const [sliderRef] = context;\n const [_, setTimeoutVal] = createSignal<number | null>(null);\n const [isHovering, setIsHovering] = createSignal(false);\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 if (untrack(isHovering)) return;\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() }),\n ({ slider }) => {\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(\n \"mouseenter\",\n () => {\n batch(() => {\n setIsHovering(true);\n clearCurrentTimeout();\n });\n },\n {\n signal: controller.signal,\n },\n );\n slider.container.addEventListener(\n \"mouseleave\",\n () => {\n batch(() => {\n setIsHovering(false);\n startNextTimeout(nextTimeout, duration);\n });\n },\n {\n signal: controller.signal,\n },\n );\n\n slider.on(\"dragStarted\", clearCurrentTimeout);\n slider.on(\"slideChanged\", clearCurrentTimeout);\n slider.on(\"animationEnded\", nextTimeout);\n slider.on(\"updated\", nextTimeout);\n slider.on(\"destroyed\", clearCurrentTimeout, true);\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 slider.on(\"destroyed\", clearCurrentTimeout, true);\n });\n },\n ),\n );\n },\n );\n};\n"]}
package/dist/main/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
1
+ import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
2
2
  import { KeenSliderAutoSwitch } from './components/index.js';
3
3
 
4
4
  customShadowlessElement(
package/dist/main/index.js.map CHANGED
@@ -1 +1 @@
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"]}
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-core/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.2",
3
+ "version": "2.1.1",
4
4
  "description": "Keen slider auto switch plugin web component",
5
5
  "main": "./dist/main/index.js",
6
6
  "module": "./dist/main/index.js",
@@ -21,9 +21,9 @@
21
21
  "dependencies": {
22
22
  "component-register": "^0.8.7",
23
23
  "solid-element": "^1.9.1",
24
- "solid-js": "^1.9.7",
25
- "@brytdesigns/web-component-keen-slider": "1.0.14",
26
- "@brytdesigns/web-component-utils": "0.1.14"
24
+ "solid-js": "^1.9.9",
25
+ "@brytdesigns/web-component-core": "1.1.3",
26
+ "@brytdesigns/web-component-keen-slider": "1.1.1"
27
27
  },
28
28
  "devDependencies": {
29
29
  "dts-bundle-generator": "^9.5.1",