@brytdesigns/web-component-keen-slider-auto-switch 2.1.6 → 3.0.0
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/components/index.js +1 -4
- package/dist/main/components/keen-slider-auto-switch.js +109 -120
- package/dist/main/components/keen-slider-auto-switch.js.map +1 -1
- package/dist/main/index.d.ts +5 -0
- package/dist/main/index.js +9 -11
- package/dist/main/index.js.map +1 -1
- package/package.json +8 -9
- package/dist/esm/index.js +0 -144
- package/dist/esm/index.js.map +0 -1
- package/dist/main/components/index.js.map +0 -1
|
@@ -1,123 +1,112 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
-
}
|
|
118
|
-
);
|
|
1
|
+
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
2
|
+
import { useKeenSliderAt } from "@brytdesigns/web-component-keen-slider";
|
|
3
|
+
import { createSignal, untrack } from "solid-js";
|
|
4
|
+
//#region src/components/keen-slider-auto-switch.ts
|
|
5
|
+
var Name = "keen-slider-auto-switch";
|
|
6
|
+
var Component = (props, { element }) => {
|
|
7
|
+
const context = useKeenSliderAt(() => props.target, element);
|
|
8
|
+
/**
|
|
9
|
+
* The slider, as a writable memo over the context's own accessor.
|
|
10
|
+
*
|
|
11
|
+
* `loadingValue` keeps reads settled at `undefined` while the provider is
|
|
12
|
+
* still resolving. Without it a compute that reads a pending async source
|
|
13
|
+
* makes this memo pending too, and every read before the slider attaches
|
|
14
|
+
* throws `NotReadyError` instead of returning `undefined`.
|
|
15
|
+
*
|
|
16
|
+
* The context read comes first on purpose: while the source is pending the
|
|
17
|
+
* compute restarts and unwinds at that read, so anything placed before it
|
|
18
|
+
* would run once per restart.
|
|
19
|
+
*/
|
|
20
|
+
const [slider] = createSignal(() => {
|
|
21
|
+
const ctx = context();
|
|
22
|
+
if (!ctx) return void 0;
|
|
23
|
+
const [sliderRef] = ctx;
|
|
24
|
+
return sliderRef();
|
|
25
|
+
}, { loadingValue: void 0 });
|
|
26
|
+
/**
|
|
27
|
+
* These three, and the two effects below, used to be created *inside* an
|
|
28
|
+
* outer effect's apply phase. Nothing created there is owned: a nested
|
|
29
|
+
* `createEffect` survives the outer effect re-running **and** survives
|
|
30
|
+
* disposal of the root entirely. So each `duration` change or provider
|
|
31
|
+
* re-attach added another full set of slider handlers and another autoplay
|
|
32
|
+
* timer, with the previous set still running and nothing released when the
|
|
33
|
+
* element left the DOM.
|
|
34
|
+
*
|
|
35
|
+
* At component scope they are owned, disposed, and re-run normally.
|
|
36
|
+
*/
|
|
37
|
+
const [_, setTimeoutVal] = createSignal(null, { ownedWrite: true });
|
|
38
|
+
const [isHovering, setIsHovering] = createSignal(false, { ownedWrite: true });
|
|
39
|
+
const [isPaused, setIsPaused] = createSignal(false, { ownedWrite: true });
|
|
40
|
+
function clearCurrentTimeout() {
|
|
41
|
+
setIsPaused(true);
|
|
42
|
+
setTimeoutVal((val) => {
|
|
43
|
+
if (val) clearTimeout(val);
|
|
44
|
+
return null;
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function startNextTimeout(cb, duration) {
|
|
48
|
+
if (untrack(isHovering)) return;
|
|
49
|
+
setIsPaused(false);
|
|
50
|
+
setTimeoutVal((val) => {
|
|
51
|
+
if (val) clearTimeout(val);
|
|
52
|
+
return setTimeout(cb, duration);
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
createGuardedEffect(() => ({
|
|
56
|
+
isPaused: isPaused(),
|
|
57
|
+
slider: slider()
|
|
58
|
+
}), ({ isPaused, slider }) => {
|
|
59
|
+
if (!slider) return;
|
|
60
|
+
slider.container.dispatchEvent(new CustomEvent("autoswitch:update", {
|
|
61
|
+
bubbles: true,
|
|
62
|
+
detail: { isPaused }
|
|
63
|
+
}));
|
|
64
|
+
});
|
|
65
|
+
createGuardedEffect(() => ({
|
|
66
|
+
slider: slider(),
|
|
67
|
+
duration: props.duration
|
|
68
|
+
}), ({ slider, duration }) => {
|
|
69
|
+
if (!slider) return;
|
|
70
|
+
const controller = new AbortController();
|
|
71
|
+
function nextTimeout() {
|
|
72
|
+
if (!slider) return;
|
|
73
|
+
if (slider.options?.disabled) return;
|
|
74
|
+
return startNextTimeout(() => {
|
|
75
|
+
if (slider.slides.length <= 1) return;
|
|
76
|
+
slider.next();
|
|
77
|
+
}, duration);
|
|
78
|
+
}
|
|
79
|
+
slider.pauseAutoplay = clearCurrentTimeout;
|
|
80
|
+
slider.startAutoplay = nextTimeout;
|
|
81
|
+
slider.container.addEventListener("mouseenter", () => {
|
|
82
|
+
setIsHovering(true);
|
|
83
|
+
clearCurrentTimeout();
|
|
84
|
+
}, { signal: controller.signal });
|
|
85
|
+
slider.container.addEventListener("mouseleave", () => {
|
|
86
|
+
setIsHovering(false);
|
|
87
|
+
startNextTimeout(nextTimeout, duration);
|
|
88
|
+
}, { signal: controller.signal });
|
|
89
|
+
slider.on("dragStarted", clearCurrentTimeout);
|
|
90
|
+
slider.on("slideChanged", clearCurrentTimeout);
|
|
91
|
+
slider.on("animationEnded", nextTimeout);
|
|
92
|
+
slider.on("updated", nextTimeout);
|
|
93
|
+
slider.on("destroyed", clearCurrentTimeout, true);
|
|
94
|
+
nextTimeout();
|
|
95
|
+
return () => {
|
|
96
|
+
controller.abort();
|
|
97
|
+
slider.on("dragStarted", clearCurrentTimeout, true);
|
|
98
|
+
slider.on("slideChanged", clearCurrentTimeout, true);
|
|
99
|
+
slider.on("animationEnded", nextTimeout, true);
|
|
100
|
+
slider.on("updated", nextTimeout, true);
|
|
101
|
+
slider.on("destroyed", clearCurrentTimeout, true);
|
|
102
|
+
setTimeoutVal((val) => {
|
|
103
|
+
if (val) clearTimeout(val);
|
|
104
|
+
return null;
|
|
105
|
+
});
|
|
106
|
+
};
|
|
107
|
+
});
|
|
119
108
|
};
|
|
120
|
-
|
|
109
|
+
//#endregion
|
|
121
110
|
export { Component, Name };
|
|
122
|
-
|
|
111
|
+
|
|
123
112
|
//# sourceMappingURL=keen-slider-auto-switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"keen-slider-auto-switch.js","names":[],"sources":["../../../src/components/keen-slider-auto-switch.ts"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport {\n\ttype KeenSliderInstance,\n\tuseKeenSliderAt,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { createSignal, untrack } from \"solid-js\";\n\nexport type Props = {\n\ttarget: string;\n\tduration: number;\n};\n\nexport const Name = \"keen-slider-auto-switch\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst context = useKeenSliderAt(() => props.target, element);\n\n\t/**\n\t * The slider, as a writable memo over the context's own accessor.\n\t *\n\t * `loadingValue` keeps reads settled at `undefined` while the provider is\n\t * still resolving. Without it a compute that reads a pending async source\n\t * makes this memo pending too, and every read before the slider attaches\n\t * throws `NotReadyError` instead of returning `undefined`.\n\t *\n\t * The context read comes first on purpose: while the source is pending the\n\t * compute restarts and unwinds at that read, so anything placed before it\n\t * would run once per restart.\n\t */\n\tconst [slider] = createSignal<KeenSliderInstance | undefined>(\n\t\t() => {\n\t\t\tconst ctx = context();\n\t\t\tif (!ctx) return undefined;\n\t\t\tconst [sliderRef] = ctx;\n\t\t\treturn sliderRef();\n\t\t},\n\t\t{ loadingValue: undefined },\n\t);\n\n\t/**\n\t * These three, and the two effects below, used to be created *inside* an\n\t * outer effect's apply phase. Nothing created there is owned: a nested\n\t * `createEffect` survives the outer effect re-running **and** survives\n\t * disposal of the root entirely. So each `duration` change or provider\n\t * re-attach added another full set of slider handlers and another autoplay\n\t * timer, with the previous set still running and nothing released when the\n\t * element left the DOM.\n\t *\n\t * At component scope they are owned, disposed, and re-run normally.\n\t */\n\tconst [_, setTimeoutVal] = createSignal<number | null>(null, {\n\t\townedWrite: true,\n\t});\n\tconst [isHovering, setIsHovering] = createSignal(false, {\n\t\townedWrite: true,\n\t});\n\tconst [isPaused, setIsPaused] = createSignal(false, {\n\t\townedWrite: true,\n\t});\n\n\tfunction clearCurrentTimeout() {\n\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\tsetIsPaused(true);\n\t\tsetTimeoutVal((val) => {\n\t\t\tif (val) clearTimeout(val);\n\t\t\treturn null;\n\t\t});\n\t}\n\n\tfunction startNextTimeout(cb: () => void, duration: number) {\n\t\tif (untrack(isHovering)) return;\n\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\tsetIsPaused(false);\n\t\tsetTimeoutVal((val) => {\n\t\t\tif (val) clearTimeout(val);\n\t\t\treturn setTimeout(cb, duration) as unknown as number;\n\t\t});\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => ({ isPaused: isPaused(), slider: slider() }),\n\t\t({ isPaused, slider }) => {\n\t\t\tif (!slider) return;\n\t\t\tslider.container.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"autoswitch:update\", {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tdetail: { isPaused },\n\t\t\t\t}),\n\t\t\t);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ slider: slider(), duration: props.duration }),\n\t\t({ slider, duration }) => {\n\t\t\tif (!slider) return;\n\t\t\tconst controller = new AbortController();\n\n\t\t\tfunction nextTimeout() {\n\t\t\t\tif (!slider) return;\n\t\t\t\tif (slider.options?.disabled) return;\n\t\t\t\treturn startNextTimeout(() => {\n\t\t\t\t\tif (slider.slides.length <= 1) return;\n\t\t\t\t\tslider.next();\n\t\t\t\t}, duration);\n\t\t\t}\n\n\t\t\t(slider as unknown as { pauseAutoplay: () => void }).pauseAutoplay =\n\t\t\t\tclearCurrentTimeout;\n\t\t\t(slider as unknown as { startAutoplay: () => void }).startAutoplay =\n\t\t\t\tnextTimeout;\n\n\t\t\tslider.container.addEventListener(\n\t\t\t\t\"mouseenter\",\n\t\t\t\t() => {\n\t\t\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\t\t\tsetIsHovering(true);\n\t\t\t\t\tclearCurrentTimeout();\n\t\t\t\t},\n\t\t\t\t{ signal: controller.signal },\n\t\t\t);\n\t\t\tslider.container.addEventListener(\n\t\t\t\t\"mouseleave\",\n\t\t\t\t() => {\n\t\t\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\t\t\tsetIsHovering(false);\n\t\t\t\t\tstartNextTimeout(nextTimeout, duration);\n\t\t\t\t},\n\t\t\t\t{ signal: controller.signal },\n\t\t\t);\n\n\t\t\tslider.on(\"dragStarted\", clearCurrentTimeout);\n\t\t\tslider.on(\"slideChanged\", clearCurrentTimeout);\n\t\t\tslider.on(\"animationEnded\", nextTimeout);\n\t\t\tslider.on(\"updated\", nextTimeout);\n\t\t\tslider.on(\"destroyed\", clearCurrentTimeout, true);\n\n\t\t\tnextTimeout();\n\n\t\t\treturn () => {\n\t\t\t\tcontroller.abort();\n\n\t\t\t\tslider.on(\"dragStarted\", clearCurrentTimeout, true);\n\t\t\t\tslider.on(\"slideChanged\", clearCurrentTimeout, true);\n\t\t\t\tslider.on(\"animationEnded\", nextTimeout, true);\n\t\t\t\tslider.on(\"updated\", nextTimeout, true);\n\t\t\t\tslider.on(\"destroyed\", clearCurrentTimeout, true);\n\n\t\t\t\t// The pending timer was never cleared on teardown, so a detached\n\t\t\t\t// slider could still be advanced one last time after removal.\n\t\t\t\tsetTimeoutVal((val) => {\n\t\t\t\t\tif (val) clearTimeout(val);\n\t\t\t\t\treturn null;\n\t\t\t\t});\n\t\t\t};\n\t\t},\n\t);\n};\n"],"mappings":";;;;AAaA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,UAAU,sBAAsB,MAAM,QAAQ,OAAO;;;;;;;;;;;;;CAc3D,MAAM,CAAC,UAAU,mBACV;EACL,MAAM,MAAM,QAAQ;EACpB,IAAI,CAAC,KAAK,OAAO,KAAA;EACjB,MAAM,CAAC,aAAa;EACpB,OAAO,UAAU;CAClB,GACA,EAAE,cAAc,KAAA,EAAU,CAC3B;;;;;;;;;;;;CAaA,MAAM,CAAC,GAAG,iBAAiB,aAA4B,MAAM,EAC5D,YAAY,KACb,CAAC;CACD,MAAM,CAAC,YAAY,iBAAiB,aAAa,OAAO,EACvD,YAAY,KACb,CAAC;CACD,MAAM,CAAC,UAAU,eAAe,aAAa,OAAO,EACnD,YAAY,KACb,CAAC;CAED,SAAS,sBAAsB;EAE9B,YAAY,IAAI;EAChB,eAAe,QAAQ;GACtB,IAAI,KAAK,aAAa,GAAG;GACzB,OAAO;EACR,CAAC;CACF;CAEA,SAAS,iBAAiB,IAAgB,UAAkB;EAC3D,IAAI,QAAQ,UAAU,GAAG;EAEzB,YAAY,KAAK;EACjB,eAAe,QAAQ;GACtB,IAAI,KAAK,aAAa,GAAG;GACzB,OAAO,WAAW,IAAI,QAAQ;EAC/B,CAAC;CACF;CAEA,2BACQ;EAAE,UAAU,SAAS;EAAG,QAAQ,OAAO;CAAE,KAC/C,EAAE,UAAU,aAAa;EACzB,IAAI,CAAC,QAAQ;EACb,OAAO,UAAU,cAChB,IAAI,YAAY,qBAAqB;GACpC,SAAS;GACT,QAAQ,EAAE,SAAS;EACpB,CAAC,CACF;CACD,CACD;CAEA,2BACQ;EAAE,QAAQ,OAAO;EAAG,UAAU,MAAM;CAAS,KACnD,EAAE,QAAQ,eAAe;EACzB,IAAI,CAAC,QAAQ;EACb,MAAM,aAAa,IAAI,gBAAgB;EAEvC,SAAS,cAAc;GACtB,IAAI,CAAC,QAAQ;GACb,IAAI,OAAO,SAAS,UAAU;GAC9B,OAAO,uBAAuB;IAC7B,IAAI,OAAO,OAAO,UAAU,GAAG;IAC/B,OAAO,KAAK;GACb,GAAG,QAAQ;EACZ;EAEA,OAAqD,gBACpD;EACD,OAAqD,gBACpD;EAED,OAAO,UAAU,iBAChB,oBACM;GAEL,cAAc,IAAI;GAClB,oBAAoB;EACrB,GACA,EAAE,QAAQ,WAAW,OAAO,CAC7B;EACA,OAAO,UAAU,iBAChB,oBACM;GAEL,cAAc,KAAK;GACnB,iBAAiB,aAAa,QAAQ;EACvC,GACA,EAAE,QAAQ,WAAW,OAAO,CAC7B;EAEA,OAAO,GAAG,eAAe,mBAAmB;EAC5C,OAAO,GAAG,gBAAgB,mBAAmB;EAC7C,OAAO,GAAG,kBAAkB,WAAW;EACvC,OAAO,GAAG,WAAW,WAAW;EAChC,OAAO,GAAG,aAAa,qBAAqB,IAAI;EAEhD,YAAY;EAEZ,aAAa;GACZ,WAAW,MAAM;GAEjB,OAAO,GAAG,eAAe,qBAAqB,IAAI;GAClD,OAAO,GAAG,gBAAgB,qBAAqB,IAAI;GACnD,OAAO,GAAG,kBAAkB,aAAa,IAAI;GAC7C,OAAO,GAAG,WAAW,aAAa,IAAI;GACtC,OAAO,GAAG,aAAa,qBAAqB,IAAI;GAIhD,eAAe,QAAQ;IACtB,IAAI,KAAK,aAAa,GAAG;IACzB,OAAO;GACR,CAAC;EACF;CACD,CACD;AACD"}
|
package/dist/main/index.d.ts
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
import { ICustomElement } from 'component-register';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* `component-register` types `options.element` as a bare `ICustomElement`, but
|
|
7
|
+
* at runtime it is always also an `HTMLElement`. Every component in this repo
|
|
8
|
+
* needs the DOM half.
|
|
9
|
+
*/
|
|
5
10
|
export type CorrectComponentOptions = {
|
|
6
11
|
element: HTMLElement & ICustomElement;
|
|
7
12
|
};
|
package/dist/main/index.js
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { Component, Name } from "./components/keen-slider-auto-switch.js";
|
|
2
|
+
import "./components/index.js";
|
|
3
|
+
import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
|
|
4
|
+
//#region src/index.ts
|
|
5
|
+
customShadowlessElement(Name, {
|
|
6
|
+
target: "keen-slider",
|
|
7
|
+
duration: 2e3
|
|
8
|
+
}, Component);
|
|
9
|
+
//#endregion
|
|
3
10
|
|
|
4
|
-
customShadowlessElement(
|
|
5
|
-
KeenSliderAutoSwitch.Name,
|
|
6
|
-
{
|
|
7
|
-
target: "keen-slider",
|
|
8
|
-
duration: 2e3
|
|
9
|
-
},
|
|
10
|
-
correctElementType(KeenSliderAutoSwitch.Component)
|
|
11
|
-
);
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
13
11
|
//# sourceMappingURL=index.js.map
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderAutoSwitch } from \"./components/index.js\";\n\nexport type KeenSliderAutoSwitchProps = KeenSliderAutoSwitch.Props;\n\ncustomShadowlessElement(\n\tKeenSliderAutoSwitch.Name,\n\t{\n\t\ttarget: \"keen-slider\",\n\t\tduration: 2000,\n\t},\n\tKeenSliderAutoSwitch.Component,\n);\n"],"mappings":";;;;AAKA,wBACC,MACA;CACC,QAAQ;CACR,UAAU;AACX,GACA,SACD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-keen-slider-auto-switch",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Keen slider auto switch plugin web component",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"types": "./dist/main/index.d.ts",
|
|
12
|
-
"
|
|
12
|
+
"default": "./dist/main/index.js"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
@@ -19,18 +19,17 @@
|
|
|
19
19
|
"author": "Bryt Designs",
|
|
20
20
|
"license": "ISC",
|
|
21
21
|
"dependencies": {
|
|
22
|
+
"@brytdesigns/web-component-core": "3.0.0",
|
|
23
|
+
"@brytdesigns/web-component-keen-slider": "3.0.0",
|
|
22
24
|
"component-register": "0.8.7",
|
|
23
|
-
"solid-
|
|
24
|
-
"solid-js": "^1.9.9",
|
|
25
|
-
"@brytdesigns/web-component-keen-slider": "1.2.2",
|
|
26
|
-
"@brytdesigns/web-component-core": "1.1.6"
|
|
25
|
+
"solid-js": "2.0.0-rc.14"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
28
|
+
"@repo/vite-config": "0.0.0",
|
|
29
|
+
"vite": "^8.2.2"
|
|
31
30
|
},
|
|
32
31
|
"scripts": {
|
|
33
|
-
"build": "
|
|
32
|
+
"build": "vite build",
|
|
34
33
|
"typecheck": "tsc --noEmit"
|
|
35
34
|
}
|
|
36
35
|
}
|
package/dist/esm/index.js
DELETED
|
@@ -1,144 +0,0 @@
|
|
|
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
|
-
|
|
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 }) => {
|
|
19
|
-
if (!props.target)
|
|
20
|
-
return console.warn(
|
|
21
|
-
`${Name}: Needs a proper target in order to properly extend a keen slider.`
|
|
22
|
-
);
|
|
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
|
-
});
|
|
47
|
-
});
|
|
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
|
-
});
|
|
57
|
-
});
|
|
58
|
-
}
|
|
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
|
-
}
|
|
131
|
-
);
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
// src/index.ts
|
|
135
|
-
customShadowlessElement(
|
|
136
|
-
keen_slider_auto_switch_exports.Name,
|
|
137
|
-
{
|
|
138
|
-
target: "keen-slider",
|
|
139
|
-
duration: 2e3
|
|
140
|
-
},
|
|
141
|
-
correctElementType(keen_slider_auto_switch_exports.Component)
|
|
142
|
-
);
|
|
143
|
-
//# sourceMappingURL=index.js.map
|
|
144
|
-
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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\nexport type 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\nexport type KeenSliderAutoSwitchProps = KeenSliderAutoSwitch.Props;\n\ncustomShadowlessElement(\n KeenSliderAutoSwitch.Name,\n {\n target: \"keen-slider\",\n duration: 2000,\n },\n correctElementType(KeenSliderAutoSwitch.Component),\n);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|