@brytdesigns/web-component-keen-slider-autoplay 1.0.8 → 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-autoplay.js +116 -46
- package/dist/main/components/keen-slider-autoplay.js.map +1 -1
- package/dist/main/index.d.ts +9 -0
- package/dist/main/index.js +12 -12
- package/dist/main/index.js.map +1 -1
- package/package.json +9 -9
- package/dist/esm/index.js +0 -71
- package/dist/esm/index.js.map +0 -1
- package/dist/main/components/index.js.map +0 -1
|
@@ -1,49 +1,119 @@
|
|
|
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
|
-
|
|
1
|
+
import { createGuardedEffect, ensureId } from "@brytdesigns/web-component-core/utils";
|
|
2
|
+
import { delegateEvents, effect, insert, memo, setAttribute, template } from "@solidjs/web";
|
|
3
|
+
import { shouldReduceMotion } from "@brytdesigns/web-component-core/animation";
|
|
4
|
+
import { useKeenSliderAt } from "@brytdesigns/web-component-keen-slider";
|
|
5
|
+
import { createMemo, createSignal, untrack } from "solid-js";
|
|
6
|
+
//#region src/components/keen-slider-autoplay.tsx
|
|
7
|
+
var _tmpl$ = /* @__PURE__ */ template(`<button type=button class=keen-autoplay__toggle>`);
|
|
8
|
+
var Name = "keen-slider-autoplay";
|
|
9
|
+
/**
|
|
10
|
+
* Continuous auto-rotation, with the control WCAG 2.2.2 requires.
|
|
11
|
+
*
|
|
12
|
+
* This is a marquee rather than a discrete autoplay: it re-issues `moveToIdx`
|
|
13
|
+
* on every `animationEnded`, forever, and sets `drag: false` so a pointer
|
|
14
|
+
* cannot interrupt it either. Content that moves automatically for more than
|
|
15
|
+
* five seconds, alongside other content, with no way to pause it is a flat
|
|
16
|
+
* Level A failure — and until now this package rendered no DOM at all, so
|
|
17
|
+
* there was nothing to pause it with.
|
|
18
|
+
*
|
|
19
|
+
* The control is deliberately not suppressible by attribute. An opt-out would
|
|
20
|
+
* just be the old violation behind a flag.
|
|
21
|
+
*/
|
|
22
|
+
var Component = (props, { element }) => {
|
|
23
|
+
const sliderContext = useKeenSliderAt(() => props.target, element);
|
|
24
|
+
const [instance, setInstance] = createSignal(void 0, { ownedWrite: true });
|
|
25
|
+
const [userPaused, setUserPaused] = createSignal(false, { ownedWrite: true });
|
|
26
|
+
const [pointerOver, setPointerOver] = createSignal(false, { ownedWrite: true });
|
|
27
|
+
const [focusWithin, setFocusWithin] = createSignal(false, { ownedWrite: true });
|
|
28
|
+
const reduceMotion = shouldReduceMotion();
|
|
29
|
+
const paused = createMemo(() => reduceMotion || userPaused() || pointerOver() || focusWithin());
|
|
30
|
+
const controls = createMemo(() => {
|
|
31
|
+
const slider = instance();
|
|
32
|
+
return slider ? ensureId(slider.container, "keen-slider") : void 0;
|
|
33
|
+
});
|
|
34
|
+
function advance(slider) {
|
|
35
|
+
const { totalSlides, duration } = untrack(() => ({
|
|
36
|
+
totalSlides: props.totalSlides,
|
|
37
|
+
duration: props.duration
|
|
38
|
+
}));
|
|
39
|
+
slider.moveToIdx(slider.track.details.abs + totalSlides, true, {
|
|
40
|
+
duration,
|
|
41
|
+
easing: (t) => t
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
createGuardedEffect(() => ({
|
|
45
|
+
context: sliderContext(),
|
|
46
|
+
duration: props.duration,
|
|
47
|
+
totalSlides: props.totalSlides
|
|
48
|
+
}), ({ context }) => {
|
|
49
|
+
const [, { addPlugin }] = context;
|
|
50
|
+
return addPlugin((slider) => {
|
|
51
|
+
setInstance(slider);
|
|
52
|
+
slider.update({
|
|
53
|
+
...slider.options,
|
|
54
|
+
drag: false,
|
|
55
|
+
loop: true
|
|
56
|
+
});
|
|
57
|
+
const step = () => {
|
|
58
|
+
if (paused()) return;
|
|
59
|
+
advance(slider);
|
|
60
|
+
};
|
|
61
|
+
slider.on("created", step);
|
|
62
|
+
slider.on("updated", step);
|
|
63
|
+
slider.on("slideChanged", step);
|
|
64
|
+
slider.on("animationEnded", step);
|
|
65
|
+
slider.on("destroyed", () => setInstance(void 0));
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
createGuardedEffect(instance, (slider) => {
|
|
69
|
+
if (!slider) return;
|
|
70
|
+
const container = slider.container;
|
|
71
|
+
const controller = new AbortController();
|
|
72
|
+
const signal = controller.signal;
|
|
73
|
+
container.addEventListener("pointerenter", () => setPointerOver(true), { signal });
|
|
74
|
+
container.addEventListener("pointerleave", () => setPointerOver(false), { signal });
|
|
75
|
+
container.addEventListener("focusin", () => setFocusWithin(true), { signal });
|
|
76
|
+
container.addEventListener("focusout", (event) => {
|
|
77
|
+
const next = event.relatedTarget;
|
|
78
|
+
if (next instanceof Node && container.contains(next)) return;
|
|
79
|
+
setFocusWithin(false);
|
|
80
|
+
}, { signal });
|
|
81
|
+
return () => controller.abort();
|
|
82
|
+
});
|
|
83
|
+
/**
|
|
84
|
+
* Publishes the pause state the same way `keen-slider-auto-switch` does, so
|
|
85
|
+
* the carousel's `aria-live` handling has one code path rather than one per
|
|
86
|
+
* rotation source.
|
|
87
|
+
*/
|
|
88
|
+
createGuardedEffect(() => ({
|
|
89
|
+
isPaused: paused(),
|
|
90
|
+
slider: instance()
|
|
91
|
+
}), ({ isPaused, slider }) => {
|
|
92
|
+
if (!slider) return;
|
|
93
|
+
slider.container.dispatchEvent(new CustomEvent("autoplay:update", {
|
|
94
|
+
bubbles: true,
|
|
95
|
+
detail: { isPaused }
|
|
96
|
+
}));
|
|
97
|
+
if (!isPaused) advance(slider);
|
|
98
|
+
});
|
|
99
|
+
element.replaceChildren(...[]);
|
|
100
|
+
var _el$ = _tmpl$();
|
|
101
|
+
_el$._$$click = () => setUserPaused((value) => !value);
|
|
102
|
+
insert(_el$, (() => {
|
|
103
|
+
var _c$ = memo(() => {
|
|
104
|
+
return !!paused();
|
|
105
|
+
});
|
|
106
|
+
return () => {
|
|
107
|
+
return _c$() ? props.playLabel : props.pauseLabel;
|
|
108
|
+
};
|
|
109
|
+
})());
|
|
110
|
+
effect(() => controls(), (_v$) => {
|
|
111
|
+
setAttribute(_el$, "aria-controls", _v$);
|
|
112
|
+
});
|
|
113
|
+
return _el$;
|
|
45
114
|
};
|
|
46
|
-
|
|
115
|
+
delegateEvents(["click"]);
|
|
116
|
+
//#endregion
|
|
47
117
|
export { Component, Name };
|
|
48
|
-
|
|
118
|
+
|
|
49
119
|
//# sourceMappingURL=keen-slider-autoplay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"keen-slider-autoplay.js","names":["<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"keen-autoplay__toggle\"\n\t\t\taria-controls={controls()}\n\t\t\tonClick={() => setUserPaused((value) => !value)}\n\t\t>\n\t\t\t{paused() ? props.playLabel : props.pauseLabel}\n\t\t</button>"],"sources":["../../../src/components/keen-slider-autoplay.tsx"],"sourcesContent":["import { shouldReduceMotion } from \"@brytdesigns/web-component-core/animation\";\nimport {\n\ttype CorrectComponentType,\n\tcreateGuardedEffect,\n\tensureId,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\ttype KeenSliderInstance,\n\tuseKeenSliderAt,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { createMemo, createSignal, untrack } from \"solid-js\";\n\nexport type Props = {\n\ttarget: string;\n\tduration: number;\n\ttotalSlides: number;\n\t/** Accessible name while rotating — the control pauses it. */\n\tpauseLabel: string;\n\t/** Accessible name while paused — the control resumes it. */\n\tplayLabel: string;\n};\n\nexport const Name = \"keen-slider-autoplay\";\n\n/**\n * Continuous auto-rotation, with the control WCAG 2.2.2 requires.\n *\n * This is a marquee rather than a discrete autoplay: it re-issues `moveToIdx`\n * on every `animationEnded`, forever, and sets `drag: false` so a pointer\n * cannot interrupt it either. Content that moves automatically for more than\n * five seconds, alongside other content, with no way to pause it is a flat\n * Level A failure — and until now this package rendered no DOM at all, so\n * there was nothing to pause it with.\n *\n * The control is deliberately not suppressible by attribute. An opt-out would\n * just be the old violation behind a flag.\n */\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst sliderContext = useKeenSliderAt(() => props.target, element);\n\n\t// Written from inside a keen-slider plugin callback, which runs within an\n\t// effect's apply — an owned scope. This is component-internal state, which\n\t// is what `ownedWrite` is the opt-in for.\n\tconst [instance, setInstance] = createSignal<KeenSliderInstance | undefined>(\n\t\tundefined,\n\t\t{ ownedWrite: true },\n\t);\n\tconst [userPaused, setUserPaused] = createSignal(false, {\n\t\townedWrite: true,\n\t});\n\tconst [pointerOver, setPointerOver] = createSignal(false, {\n\t\townedWrite: true,\n\t});\n\tconst [focusWithin, setFocusWithin] = createSignal(false, {\n\t\townedWrite: true,\n\t});\n\n\t// Read once: a carousel that starts rotating and stops when the preference\n\t// changes mid-session would be stranger than honouring the value at mount.\n\tconst reduceMotion = shouldReduceMotion();\n\n\tconst paused = createMemo(\n\t\t() => reduceMotion || userPaused() || pointerOver() || focusWithin(),\n\t);\n\n\tconst controls = createMemo(() => {\n\t\tconst slider = instance();\n\t\treturn slider ? ensureId(slider.container, \"keen-slider\") : undefined;\n\t});\n\n\tfunction advance(slider: KeenSliderInstance) {\n\t\t// Called from a timer, which is no tracking scope at all. Reading the\n\t\t// props as they stand when the slide advances is the intent — a theme\n\t\t// that changes `duration` mid-run should get the new duration on the\n\t\t// next advance — so the snapshot is declared rather than implied.\n\t\tconst { totalSlides, duration } = untrack(() => ({\n\t\t\ttotalSlides: props.totalSlides,\n\t\t\tduration: props.duration,\n\t\t}));\n\t\tslider.moveToIdx(slider.track.details.abs + totalSlides, true, {\n\t\t\tduration,\n\t\t\teasing: (t: number) => t,\n\t\t});\n\t}\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tcontext: sliderContext(),\n\t\t\tduration: props.duration,\n\t\t\ttotalSlides: props.totalSlides,\n\t\t}),\n\t\t({ context }) => {\n\t\t\tconst [, { addPlugin }] = context;\n\n\t\t\tconst removePlugin = addPlugin((slider) => {\n\t\t\t\tsetInstance(slider);\n\t\t\t\tslider.update({ ...slider.options, drag: false, loop: true });\n\n\t\t\t\t// Every continuation checks the pause state rather than being torn\n\t\t\t\t// down and rebuilt, so pausing and resuming does not rebuild the\n\t\t\t\t// slider — which would drop every other extension's plugin with it.\n\t\t\t\tconst step = () => {\n\t\t\t\t\tif (paused()) return;\n\t\t\t\t\tadvance(slider);\n\t\t\t\t};\n\n\t\t\t\tslider.on(\"created\", step);\n\t\t\t\tslider.on(\"updated\", step);\n\t\t\t\tslider.on(\"slideChanged\", step);\n\t\t\t\tslider.on(\"animationEnded\", step);\n\n\t\t\t\tslider.on(\"destroyed\", () => setInstance(undefined));\n\t\t\t});\n\n\t\t\t// Apply is not a computation; its return value IS the cleanup.\n\t\t\treturn removePlugin;\n\t\t},\n\t);\n\n\t// Hover and focus pause, which WCAG does not require but every sighted or\n\t// keyboard user expects — reading a slide should not race a timer.\n\tcreateGuardedEffect(instance, (slider) => {\n\t\tif (!slider) return;\n\t\tconst container = slider.container;\n\t\tconst controller = new AbortController();\n\t\tconst signal = controller.signal;\n\n\t\tcontainer.addEventListener(\"pointerenter\", () => setPointerOver(true), {\n\t\t\tsignal,\n\t\t});\n\t\tcontainer.addEventListener(\"pointerleave\", () => setPointerOver(false), {\n\t\t\tsignal,\n\t\t});\n\t\tcontainer.addEventListener(\"focusin\", () => setFocusWithin(true), {\n\t\t\tsignal,\n\t\t});\n\t\tcontainer.addEventListener(\n\t\t\t\"focusout\",\n\t\t\t(event: FocusEvent) => {\n\t\t\t\tconst next = event.relatedTarget;\n\t\t\t\tif (next instanceof Node && container.contains(next)) return;\n\t\t\t\tsetFocusWithin(false);\n\t\t\t},\n\t\t\t{ signal },\n\t\t);\n\n\t\treturn () => controller.abort();\n\t});\n\n\t/**\n\t * Publishes the pause state the same way `keen-slider-auto-switch` does, so\n\t * the carousel's `aria-live` handling has one code path rather than one per\n\t * rotation source.\n\t */\n\tcreateGuardedEffect(\n\t\t() => ({ isPaused: paused(), slider: instance() }),\n\t\t({ isPaused, slider }) => {\n\t\t\tif (!slider) return;\n\t\t\tslider.container.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"autoplay: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\t// Resuming has to restart the chain: the last `animationEnded` fired\n\t\t\t// while paused and returned without queueing the next move.\n\t\t\tif (!isPaused) advance(slider);\n\t\t},\n\t);\n\n\telement.replaceChildren(...[]);\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tclass=\"keen-autoplay__toggle\"\n\t\t\taria-controls={controls()}\n\t\t\tonClick={() => setUserPaused((value) => !value)}\n\t\t>\n\t\t\t{paused() ? props.playLabel : props.pauseLabel}\n\t\t</button>\n\t);\n};\n"],"mappings":"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"}
|
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
|
};
|
|
@@ -10,6 +15,10 @@ export type Props = {
|
|
|
10
15
|
target: string;
|
|
11
16
|
duration: number;
|
|
12
17
|
totalSlides: number;
|
|
18
|
+
/** Accessible name while rotating — the control pauses it. */
|
|
19
|
+
pauseLabel: string;
|
|
20
|
+
/** Accessible name while paused — the control resumes it. */
|
|
21
|
+
playLabel: string;
|
|
13
22
|
};
|
|
14
23
|
declare const Name = "keen-slider-autoplay";
|
|
15
24
|
declare const Component: CorrectComponentType<Props>;
|
package/dist/main/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { Component, Name } from "./components/keen-slider-autoplay.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
|
+
totalSlides: 0,
|
|
9
|
+
pauseLabel: "Pause",
|
|
10
|
+
playLabel: "Play"
|
|
11
|
+
}, Component);
|
|
12
|
+
//#endregion
|
|
3
13
|
|
|
4
|
-
customShadowlessElement(
|
|
5
|
-
KeenSliderAutoplay.Name,
|
|
6
|
-
{
|
|
7
|
-
target: "keen-slider",
|
|
8
|
-
duration: 2e3,
|
|
9
|
-
totalSlides: 0
|
|
10
|
-
},
|
|
11
|
-
correctElementType(KeenSliderAutoplay.Component)
|
|
12
|
-
);
|
|
13
|
-
//# sourceMappingURL=index.js.map
|
|
14
14
|
//# 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 { KeenSliderAutoplay } from \"./components/index.js\";\n\nexport type KeenSliderAutoplayProps = KeenSliderAutoplay.Props;\n\ncustomShadowlessElement(\n\tKeenSliderAutoplay.Name,\n\t{\n\t\ttarget: \"keen-slider\",\n\t\tduration: 2000,\n\t\ttotalSlides: 0,\n\t\tpauseLabel: \"Pause\",\n\t\tplayLabel: \"Play\",\n\t},\n\tKeenSliderAutoplay.Component,\n);\n"],"mappings":";;;;AAKA,wBACC,MACA;CACC,QAAQ;CACR,UAAU;CACV,aAAa;CACb,YAAY;CACZ,WAAW;AACZ,GACA,SACD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-keen-slider-autoplay",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Keen slider autoplay 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,18 @@
|
|
|
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",
|
|
24
|
+
"@solidjs/web": "2.0.0-rc.14",
|
|
22
25
|
"component-register": "0.8.7",
|
|
23
|
-
"solid-
|
|
24
|
-
"solid-js": "^1.9.9",
|
|
25
|
-
"@brytdesigns/web-component-core": "1.1.7",
|
|
26
|
-
"@brytdesigns/web-component-keen-slider": "1.2.3"
|
|
26
|
+
"solid-js": "2.0.0-rc.14"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
29
|
+
"@repo/vite-config": "0.0.0",
|
|
30
|
+
"vite": "^8.2.2"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
|
-
"build": "
|
|
33
|
+
"build": "vite build",
|
|
34
34
|
"typecheck": "tsc --noEmit"
|
|
35
35
|
}
|
|
36
36
|
}
|
package/dist/esm/index.js
DELETED
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
|
|
2
|
-
import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
|
|
3
|
-
import { onCleanup } from 'solid-js';
|
|
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-autoplay.ts
|
|
12
|
-
var keen_slider_autoplay_exports = {};
|
|
13
|
-
__export(keen_slider_autoplay_exports, {
|
|
14
|
-
Component: () => Component,
|
|
15
|
-
Name: () => Name
|
|
16
|
-
});
|
|
17
|
-
var Name = "keen-slider-autoplay";
|
|
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
|
-
() => ({
|
|
35
|
-
duration: props.duration,
|
|
36
|
-
totalSlides: props.totalSlides
|
|
37
|
-
}),
|
|
38
|
-
([_, { addPlugin }], { duration, totalSlides }) => {
|
|
39
|
-
const animation = { duration, easing: (t) => t };
|
|
40
|
-
const removePlugin = addPlugin((s) => {
|
|
41
|
-
s.update({ ...s.options, drag: false, loop: true });
|
|
42
|
-
s.on("created", () => {
|
|
43
|
-
s.moveToIdx(totalSlides, true, animation);
|
|
44
|
-
});
|
|
45
|
-
s.on("updated", () => {
|
|
46
|
-
s.moveToIdx(s.track.details.abs + totalSlides, true, animation);
|
|
47
|
-
});
|
|
48
|
-
s.on("slideChanged", () => {
|
|
49
|
-
s.moveToIdx(s.track.details.abs + totalSlides, true, animation);
|
|
50
|
-
});
|
|
51
|
-
s.on("animationEnded", () => {
|
|
52
|
-
s.moveToIdx(s.track.details.abs + totalSlides, true, animation);
|
|
53
|
-
});
|
|
54
|
-
});
|
|
55
|
-
onCleanup(removePlugin);
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
// src/index.ts
|
|
61
|
-
customShadowlessElement(
|
|
62
|
-
keen_slider_autoplay_exports.Name,
|
|
63
|
-
{
|
|
64
|
-
target: "keen-slider",
|
|
65
|
-
duration: 2e3,
|
|
66
|
-
totalSlides: 0
|
|
67
|
-
},
|
|
68
|
-
correctElementType(keen_slider_autoplay_exports.Component)
|
|
69
|
-
);
|
|
70
|
-
//# sourceMappingURL=index.js.map
|
|
71
|
-
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/keen-slider-autoplay.ts","../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,IAAA,4BAAA,GAAA,EAAA;AAAA,QAAA,CAAA,4BAAA,EAAA;AAAA,EAAA,SAAA,EAAA,MAAA,SAAA;AAAA,EAAA,IAAA,EAAA,MAAA;AAAA,CAAA,CAAA;AAWO,IAAM,IAAO,GAAA,sBAAA;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,EAAA,4BAAA;AAAA,IACE,MAAM;AACJ,MAAA,MAAM,WAAW,KAAM,CAAA,MAAA;AACvB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,QAA2B,GAAA,OAAA;AAC/B,QAAA,IAAI,KAAM,CAAA,MAAA,EAAmB,QAAA,GAAA,QAAA,CAAS,cAAc,QAAQ,CAAA;AAC5D,QAAA,IAAI,UAAU,OAAY,KAAA,aAAA;AACxB,UAAW,QAAA,GAAA,QAAA,CAAU,cAAc,aAAa,CAAA;AAClD,QAAO,OAAA,QAAA;AAAA,OACT;AAAA,KACF;AAAA,IACA,OAAO;AAAA,MACL,UAAU,KAAM,CAAA,QAAA;AAAA,MAChB,aAAa,KAAM,CAAA;AAAA,KACrB,CAAA;AAAA,IACA,CAAC,CAAC,CAAA,EAAG,EAAE,SAAA,EAAW,CAAG,EAAA,EAAE,QAAU,EAAA,WAAA,EAAkB,KAAA;AACjD,MAAA,MAAM,YAAY,EAAE,QAAA,EAAU,MAAQ,EAAA,CAAC,MAAc,CAAE,EAAA;AACvD,MAAM,MAAA,YAAA,GAAe,SAAU,CAAA,CAAC,CAAM,KAAA;AACpC,QAAE,CAAA,CAAA,MAAA,CAAO,EAAE,GAAG,CAAA,CAAE,SAAS,IAAM,EAAA,KAAA,EAAO,IAAM,EAAA,IAAA,EAAM,CAAA;AAClD,QAAE,CAAA,CAAA,EAAA,CAAG,WAAW,MAAM;AACpB,UAAE,CAAA,CAAA,SAAA,CAAU,WAAa,EAAA,IAAA,EAAM,SAAS,CAAA;AAAA,SACzC,CAAA;AACD,QAAE,CAAA,CAAA,EAAA,CAAG,WAAW,MAAM;AACpB,UAAA,CAAA,CAAE,UAAU,CAAE,CAAA,KAAA,CAAM,QAAQ,GAAM,GAAA,WAAA,EAAa,MAAM,SAAS,CAAA;AAAA,SAC/D,CAAA;AACD,QAAE,CAAA,CAAA,EAAA,CAAG,gBAAgB,MAAM;AACzB,UAAA,CAAA,CAAE,UAAU,CAAE,CAAA,KAAA,CAAM,QAAQ,GAAM,GAAA,WAAA,EAAa,MAAM,SAAS,CAAA;AAAA,SAC/D,CAAA;AACD,QAAE,CAAA,CAAA,EAAA,CAAG,kBAAkB,MAAM;AAC3B,UAAA,CAAA,CAAE,UAAU,CAAE,CAAA,KAAA,CAAM,QAAQ,GAAM,GAAA,WAAA,EAAa,MAAM,SAAS,CAAA;AAAA,SAC/D,CAAA;AAAA,OACF,CAAA;AACD,MAAA,SAAA,CAAU,YAAY,CAAA;AAAA;AACxB,GACF;AACF,CAAA;;;AC9CA,uBAAA;AAAA,EACE,4BAAmB,CAAA,IAAA;AAAA,EACnB;AAAA,IACE,MAAQ,EAAA,aAAA;AAAA,IACR,QAAU,EAAA,GAAA;AAAA,IACV,WAAa,EAAA;AAAA,GACf;AAAA,EACA,kBAAA,CAAmB,6BAAmB,SAAS;AACjD,CAAA","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { withKeenSliderElementContext } from \"@brytdesigns/web-component-keen-slider\";\r\nimport { onCleanup } from \"solid-js\";\r\n\r\nexport type Props = {\r\n target: string;\r\n duration: number;\r\n totalSlides: number;\r\n};\r\n\r\nexport const Name = \"keen-slider-autoplay\";\r\n\r\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\r\n if (!props.target)\r\n return console.warn(\r\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\r\n );\r\n\r\n withKeenSliderElementContext(\r\n () => {\r\n const selector = props.target;\r\n return () => {\r\n let targetEl: Element | null = element;\r\n if (props.target) targetEl = document.querySelector(selector);\r\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\r\n targetEl = targetEl!.querySelector(\"keen-slider\");\r\n return targetEl!;\r\n };\r\n },\r\n () => ({\r\n duration: props.duration,\r\n totalSlides: props.totalSlides,\r\n }),\r\n ([_, { addPlugin }], { duration, totalSlides }) => {\r\n const animation = { duration, easing: (t: number) => t };\r\n const removePlugin = addPlugin((s) => {\r\n s.update({ ...s.options, drag: false, loop: true });\r\n s.on(\"created\", () => {\r\n s.moveToIdx(totalSlides, true, animation);\r\n });\r\n s.on(\"updated\", () => {\r\n s.moveToIdx(s.track.details.abs + totalSlides, true, animation);\r\n });\r\n s.on(\"slideChanged\", () => {\r\n s.moveToIdx(s.track.details.abs + totalSlides, true, animation);\r\n });\r\n s.on(\"animationEnded\", () => {\r\n s.moveToIdx(s.track.details.abs + totalSlides, true, animation);\r\n });\r\n });\r\n onCleanup(removePlugin);\r\n },\r\n );\r\n};\r\n","import {\r\n customShadowlessElement,\r\n correctElementType,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\nimport { KeenSliderAutoplay } from \"./components/index.js\";\r\n\r\nexport type KeenSliderAutoplayProps = KeenSliderAutoplay.Props;\r\n\r\ncustomShadowlessElement(\r\n KeenSliderAutoplay.Name,\r\n {\r\n target: \"keen-slider\",\r\n duration: 2000,\r\n totalSlides: 0,\r\n },\r\n correctElementType(KeenSliderAutoplay.Component),\r\n);\r\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|