@brytdesigns/web-component-keen-slider 1.2.2 → 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/KeenSlider.js +166 -124
- package/dist/main/KeenSlider.js.map +1 -1
- package/dist/main/components/index.js +1 -4
- package/dist/main/components/keen-slider.js +24 -25
- package/dist/main/components/keen-slider.js.map +1 -1
- package/dist/main/hooks/index.js +2 -3
- package/dist/main/hooks/useKeenSlider.js +88 -120
- package/dist/main/hooks/useKeenSlider.js.map +1 -1
- package/dist/main/index.d.ts +10 -5
- package/dist/main/index.js +13 -14
- package/dist/main/index.js.map +1 -1
- package/dist/main/utils.js +4 -14
- package/dist/main/utils.js.map +1 -1
- package/dist/styles.css +35 -31
- package/package.json +7 -8
- package/dist/esm/index.js +0 -307
- package/dist/esm/index.js.map +0 -1
- package/dist/main/components/index.js.map +0 -1
- package/dist/main/hooks/index.js.map +0 -1
package/dist/main/KeenSlider.js
CHANGED
|
@@ -1,129 +1,171 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { constrain } from "./utils.js";
|
|
2
|
+
import _KeenSlider from "keen-slider";
|
|
3
|
+
//#region src/KeenSlider.ts
|
|
4
4
|
function attachMoreDetails(prevSlide) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
return (slider) => {
|
|
6
|
+
if (slider.track.details.rel !== slider.animator.targetIdx) return;
|
|
7
|
+
slider.direction = slider.track.details.rel > prevSlide ? "forward" : "backward";
|
|
8
|
+
prevSlide = slider.track.details.rel;
|
|
9
|
+
};
|
|
10
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
|
-
slider.on("slideChanged", updateSlideAriaAttributes);
|
|
75
|
-
slider.on("created", updateSlideAriaAttributes);
|
|
76
|
-
slider.on("optionsChanged", updateSlideAriaAttributes);
|
|
77
|
-
slider.on("updated", updateSlideAriaAttributes);
|
|
11
|
+
/**
|
|
12
|
+
* APG's carousel pattern: a labelled group whose role description tells
|
|
13
|
+
* assistive tech what it is, with each slide a group of its own.
|
|
14
|
+
*
|
|
15
|
+
* What this replaces was `role="listbox"` with `role="option"` slides, which
|
|
16
|
+
* told a screen-reader user they were inside a form control they could select
|
|
17
|
+
* from. It also made `aria-valuemin/max/now` invalid — a listbox has no value —
|
|
18
|
+
* and left `aria-required-children` permanently unsatisfiable.
|
|
19
|
+
*
|
|
20
|
+
* The slide attributes used to be applied only from `created`, `slideChanged`,
|
|
21
|
+
* `optionsChanged` and `updated`. `created` fires inside `super()`, before the
|
|
22
|
+
* constructor gets here to subscribe, so on a carousel nobody ever interacted
|
|
23
|
+
* with the slides got no ARIA at all — which is exactly why the container
|
|
24
|
+
* advertised owned `option` children it did not have.
|
|
25
|
+
*/
|
|
26
|
+
var attachAriaAttributes = (slider) => {
|
|
27
|
+
const container = slider.container;
|
|
28
|
+
const authoredContainerLabel = container.hasAttribute("aria-label");
|
|
29
|
+
const authoredSlideLabels = /* @__PURE__ */ new WeakSet();
|
|
30
|
+
for (const slide of slider.slides) if (slide.hasAttribute("aria-label")) authoredSlideLabels.add(slide);
|
|
31
|
+
container.setAttribute("role", "group");
|
|
32
|
+
container.setAttribute("aria-roledescription", "carousel");
|
|
33
|
+
if (!authoredContainerLabel) container.setAttribute("aria-label", "Carousel");
|
|
34
|
+
container.setAttribute("aria-atomic", "false");
|
|
35
|
+
if (!container.hasAttribute("tabindex")) container.setAttribute("tabindex", "0");
|
|
36
|
+
for (const attribute of [
|
|
37
|
+
"aria-multiselectable",
|
|
38
|
+
"aria-valuemin",
|
|
39
|
+
"aria-valuemax",
|
|
40
|
+
"aria-valuenow",
|
|
41
|
+
"aria-orientation",
|
|
42
|
+
"aria-busy"
|
|
43
|
+
]) container.removeAttribute(attribute);
|
|
44
|
+
/** The fraction of a slide that is in view, 0 when it is fully outside. */
|
|
45
|
+
function visiblePortion(index) {
|
|
46
|
+
return slider.track?.details?.slides?.[index]?.portion ?? 0;
|
|
47
|
+
}
|
|
48
|
+
function updateTabIndexes(slide, tabindex) {
|
|
49
|
+
const focusable = Array.from(slide.querySelectorAll("input, a, button:not(:disabled), textarea, select, [tabindex]"));
|
|
50
|
+
for (const element of focusable) element.setAttribute("tabindex", tabindex);
|
|
51
|
+
}
|
|
52
|
+
function updateSlideAriaAttributes(slider) {
|
|
53
|
+
const total = slider.slides.length;
|
|
54
|
+
const disabled = Boolean(slider.options?.disabled);
|
|
55
|
+
slider.slides.forEach((slide, index) => {
|
|
56
|
+
slide.setAttribute("role", "group");
|
|
57
|
+
slide.setAttribute("aria-roledescription", "slide");
|
|
58
|
+
if (!authoredSlideLabels.has(slide)) slide.setAttribute("aria-label", `${index + 1} of ${total}`);
|
|
59
|
+
slide.removeAttribute("aria-selected");
|
|
60
|
+
slide.removeAttribute("tabindex");
|
|
61
|
+
const visible = disabled || visiblePortion(index) > 0;
|
|
62
|
+
slide.setAttribute("data-slide-visible", `${visible}`);
|
|
63
|
+
const holdsFocus = document.activeElement !== null && slide.contains(document.activeElement);
|
|
64
|
+
if (!visible && !holdsFocus) slide.setAttribute("aria-hidden", "true");
|
|
65
|
+
else slide.removeAttribute("aria-hidden");
|
|
66
|
+
updateTabIndexes(slide, visible ? "0" : "-1");
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
slider.on("slideChanged", updateSlideAriaAttributes);
|
|
70
|
+
slider.on("created", updateSlideAriaAttributes);
|
|
71
|
+
slider.on("optionsChanged", updateSlideAriaAttributes);
|
|
72
|
+
slider.on("updated", updateSlideAriaAttributes);
|
|
73
|
+
updateSlideAriaAttributes(slider);
|
|
78
74
|
};
|
|
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
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
75
|
+
/**
|
|
76
|
+
* Anything that takes typed input. Arrow keys inside one of these belong to
|
|
77
|
+
* the field, not the carousel — without this guard a search box inside a slide
|
|
78
|
+
* cannot be navigated with the keyboard.
|
|
79
|
+
*/
|
|
80
|
+
var TEXT_ENTRY = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]";
|
|
81
|
+
/**
|
|
82
|
+
* Arrow-key navigation, and the `aria-live` rule for auto-rotation.
|
|
83
|
+
*
|
|
84
|
+
* The container has carried `tabindex="0"` for as long as the ARIA plugin has
|
|
85
|
+
* existed, with nothing listening — so it took a tab stop and did nothing with
|
|
86
|
+
* it, which is worse than not being focusable. This is the handler that makes
|
|
87
|
+
* the tab stop worth having.
|
|
88
|
+
*
|
|
89
|
+
* `aria-live` was previously hardcoded to `polite` on the container (twice).
|
|
90
|
+
* APG is explicit that a live region on an auto-rotating carousel announces
|
|
91
|
+
* slides the user never asked for, so the announcement is tied to the rotation
|
|
92
|
+
* state instead: silent while rotating, polite once paused and the user is
|
|
93
|
+
* driving.
|
|
94
|
+
*/
|
|
95
|
+
var attachKeyboardNavigation = (slider) => {
|
|
96
|
+
const container = slider.container;
|
|
97
|
+
const controller = new AbortController();
|
|
98
|
+
const isVertical = () => Boolean(slider.options?.vertical);
|
|
99
|
+
function handleKeydown(event) {
|
|
100
|
+
if (slider.options?.disabled) return;
|
|
101
|
+
const target = event.target;
|
|
102
|
+
if (target instanceof Element && target.closest(TEXT_ENTRY)) return;
|
|
103
|
+
const back = isVertical() ? "ArrowUp" : "ArrowLeft";
|
|
104
|
+
const forward = isVertical() ? "ArrowDown" : "ArrowRight";
|
|
105
|
+
switch (event.key) {
|
|
106
|
+
case back:
|
|
107
|
+
event.preventDefault();
|
|
108
|
+
slider.prev();
|
|
109
|
+
return;
|
|
110
|
+
case forward:
|
|
111
|
+
event.preventDefault();
|
|
112
|
+
slider.next();
|
|
113
|
+
return;
|
|
114
|
+
case "Home":
|
|
115
|
+
event.preventDefault();
|
|
116
|
+
slider.moveToIdx(0);
|
|
117
|
+
return;
|
|
118
|
+
case "End": {
|
|
119
|
+
event.preventDefault();
|
|
120
|
+
const details = slider.track?.details;
|
|
121
|
+
const last = Number.isFinite(details?.maxIdx) ? details?.maxIdx ?? 0 : slider.slides.length - 1;
|
|
122
|
+
slider.moveToIdx(last);
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* `keen-slider-auto-switch` already dispatches this, and the autoplay
|
|
129
|
+
* package publishes its pause state the same way, so both drive one code
|
|
130
|
+
* path here rather than each teaching the carousel about itself.
|
|
131
|
+
*/
|
|
132
|
+
function handleRotationChange(event) {
|
|
133
|
+
const rotating = event.detail?.isPaused === false;
|
|
134
|
+
container.setAttribute("aria-live", rotating ? "off" : "polite");
|
|
135
|
+
}
|
|
136
|
+
container.addEventListener("keydown", handleKeydown, { signal: controller.signal });
|
|
137
|
+
container.addEventListener("autoswitch:update", handleRotationChange, { signal: controller.signal });
|
|
138
|
+
container.addEventListener("autoplay:update", handleRotationChange, { signal: controller.signal });
|
|
139
|
+
if (!container.hasAttribute("aria-live")) container.setAttribute("aria-live", "polite");
|
|
140
|
+
slider.on("destroyed", () => controller.abort());
|
|
141
|
+
};
|
|
142
|
+
var KeenSlider = class extends _KeenSlider {
|
|
143
|
+
direction = null;
|
|
144
|
+
constructor(element, config, plugins = []) {
|
|
145
|
+
super(element, config, plugins);
|
|
146
|
+
const prevSlide = 0;
|
|
147
|
+
this.direction = null;
|
|
148
|
+
this.on("slideChanged", attachMoreDetails(prevSlide));
|
|
149
|
+
attachAriaAttributes(this);
|
|
150
|
+
attachKeyboardNavigation(this);
|
|
151
|
+
const _next = this.next, _prev = this.prev;
|
|
152
|
+
this.next = function() {
|
|
153
|
+
if (typeof this.options.slides === "number" || typeof this.options.slides === "function") return _next();
|
|
154
|
+
let amount = 1;
|
|
155
|
+
if (this.options?.slides && "perScroll" in this.options.slides === true) amount = this.options?.slides?.perScroll || 1;
|
|
156
|
+
if (!this.options.loop) return this.moveToIdx(constrain(this.track.details.rel + amount, 0, this.track.details.maxIdx));
|
|
157
|
+
return this.moveToIdx(constrain(this.track.details.abs + amount), true);
|
|
158
|
+
};
|
|
159
|
+
this.prev = function() {
|
|
160
|
+
if (typeof this.options.slides === "number" || typeof this.options.slides === "function") return _prev();
|
|
161
|
+
let amount = 1;
|
|
162
|
+
if (this.options?.slides && "perScroll" in this.options.slides === true) amount = this.options?.slides?.perScroll || 1;
|
|
163
|
+
if (!this.options.loop) this.moveToIdx(constrain(this.track.details.rel - amount, 0, this.track.details.maxIdx));
|
|
164
|
+
return this.moveToIdx(constrain(this.track.details.abs - amount), true);
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
//#endregion
|
|
127
169
|
export { KeenSlider as default };
|
|
128
|
-
|
|
170
|
+
|
|
129
171
|
//# sourceMappingURL=KeenSlider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/KeenSlider.ts"],"names":["slider"],"mappings":"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","file":"KeenSlider.js","sourcesContent":["import type { ICustomElement } from \"component-register\";\n\nimport _KeenSlider, {\n type KeenSliderOptions as _KeenSliderOptions,\n type KeenSliderPlugin as _KeenSliderPlugin,\n type KeenSliderInstance as _KeenSliderInstance,\n type KeenSliderHooks as _KeenSliderHooks,\n} from \"keen-slider\";\n\nimport { constrain } from \"./utils\";\n\nexport type KeenSliderHooks = _KeenSliderHooks;\n\nexport type KeenSliderInstance<\n O = {},\n P = {},\n H extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderInstance<O, P, H>;\n\ntype ExtendedSlidesOption = NonNullable<\n _KeenSliderInstance[\"options\"][\"slides\"]\n> & {\n perScroll?: number;\n};\n\ntype ExtendedKeenSliderOptions = Omit<\n _KeenSliderInstance[\"options\"],\n \"slides\"\n> & {\n slides?: ExtendedSlidesOption;\n};\n\nexport type KeenSliderOptions<\n O = {},\n P = {},\n H extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderOptions<O, P, H> & {\n slides: {\n perScroll?: number;\n } & _KeenSliderOptions<O, P, H>[\"slides\"];\n};\n\nexport type KeenSliderPlugin<\n O = {},\n P = {},\n H extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderPlugin<O, P, H>;\n\nfunction attachMoreDetails(prevSlide: number) {\n return function (slider: KeenSliderInstance) {\n if (slider.track.details.rel != slider.animator.targetIdx) return;\n\n (slider as KeenSlider).direction =\n slider.track.details.rel > prevSlide ? \"forward\" : \"backward\";\n\n prevSlide = slider.track.details.rel;\n };\n}\n\nconst attachAriaAttributes: KeenSliderPlugin = (slider) => {\n const maxIdx =\n slider?.track?.details?.maxIdx === Infinity\n ? slider.track.details.length\n : slider?.track?.details?.maxIdx || 0;\n slider.container.setAttribute(\"role\", \"listbox\");\n slider.container.setAttribute(\n \"aria-orientation\",\n slider.options?.vertical ? \"vertical\" : \"horizontal\",\n );\n slider.container.setAttribute(\"aria-multiselectable\", \"false\");\n slider.container.setAttribute(\"aria-label\", \"Slider\");\n slider.container.setAttribute(\"tabindex\", \"0\");\n slider.container.setAttribute(\"aria-live\", \"polite\");\n slider.container.setAttribute(\"aria-atomic\", \"true\");\n slider.container.setAttribute(\"aria-live\", \"polite\");\n slider.container.setAttribute(\"aria-busy\", \"false\");\n slider.container.setAttribute(\"aria-valuemin\", \"0\");\n slider.container.setAttribute(\"aria-valuemax\", `${maxIdx}`);\n slider.container.setAttribute(\n \"aria-valuenow\",\n `${slider?.track?.details?.rel || 0}`,\n );\n\n function getMaxRel(rel: number, perView = 1) {\n return Math.floor(rel + perView - 1);\n }\n\n function slideIsActive(idx: number) {\n const perView = ((slider.options?.slides as any)?.perView as number) || 1,\n rel = slider.track.details.rel,\n maxRel = getMaxRel(rel, perView);\n\n return rel <= idx && idx <= maxRel;\n }\n\n async function updateTabIndexes(slide: HTMLElement, tabindex: string) {\n const focusableElements = Array.from(\n slide.querySelectorAll(\n \"input, a, button:not(:disabled), textarea, select, textarea, [tabindex]\",\n ),\n );\n focusableElements.forEach((element) => {\n element.setAttribute(\"tabindex\", tabindex);\n });\n }\n\n function updateAriaActiveSlide(slide: HTMLElement) {\n slide.setAttribute(\"aria-selected\", \"true\");\n slide.setAttribute(\"aria-hidden\", \"false\");\n slide.setAttribute(\"tabindex\", \"0\");\n updateTabIndexes(slide, \"0\");\n }\n\n function updateAriaInActiveSlide(slide: HTMLElement) {\n slide.setAttribute(\"aria-selected\", \"false\");\n slide.setAttribute(\"aria-hidden\", \"true\");\n slide.setAttribute(\"tabindex\", \"-1\");\n updateTabIndexes(slide, \"-1\");\n }\n\n function updateSlideAriaAttributes(slider: _KeenSliderInstance) {\n if (slider.options?.disabled) {\n slider.slides.forEach((slide, i) => {\n slide.setAttribute(\"role\", \"option\");\n updateAriaActiveSlide(slide);\n });\n return;\n }\n\n slider.slides.forEach((slide, i) => {\n slide.setAttribute(\"role\", \"option\");\n if (slideIsActive(i)) updateAriaActiveSlide(slide);\n else updateAriaInActiveSlide(slide);\n });\n }\n\n slider.on(\"slideChanged\", updateSlideAriaAttributes);\n slider.on(\"created\", updateSlideAriaAttributes);\n slider.on(\"optionsChanged\", updateSlideAriaAttributes);\n slider.on(\"updated\", updateSlideAriaAttributes);\n};\n\nexport default class KeenSlider extends _KeenSlider {\n direction: \"forward\" | \"backward\" | null = null;\n constructor(\n element: ICustomElement & HTMLElement,\n config: KeenSliderOptions,\n plugins: _KeenSliderPlugin[] = [],\n ) {\n super(element, config, plugins);\n let prevSlide = 0;\n\n this.direction = null;\n this.on(\"slideChanged\", attachMoreDetails(prevSlide) as any);\n\n attachAriaAttributes(this);\n\n const _next = this.next,\n _prev = this.prev;\n\n this.next = function () {\n if (\n typeof this.options.slides === \"number\" ||\n typeof this.options.slides === \"function\"\n )\n return _next();\n let amount: number = 1;\n if (this.options?.slides && \"perScroll\" in this.options.slides === true) {\n amount = (this.options?.slides?.perScroll as number) || 1;\n }\n if (!this.options.loop) {\n return this.moveToIdx(\n constrain(\n this.track.details.rel + amount,\n 0,\n this.track.details.maxIdx,\n ),\n );\n }\n return this.moveToIdx(constrain(this.track.details.abs + amount), true);\n };\n\n this.prev = function () {\n if (\n typeof this.options.slides === \"number\" ||\n typeof this.options.slides === \"function\"\n )\n return _prev();\n let amount: number = 1;\n if (this.options?.slides && \"perScroll\" in this.options.slides === true) {\n amount = (this.options?.slides?.perScroll as number) || 1;\n }\n if (!this.options.loop) {\n this.moveToIdx(\n constrain(\n this.track.details.rel - amount,\n 0,\n this.track.details.maxIdx,\n ),\n );\n }\n return this.moveToIdx(constrain(this.track.details.abs - amount), true);\n };\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KeenSlider.js","names":[],"sources":["../../src/KeenSlider.ts"],"sourcesContent":["import type { ICustomElement } from \"component-register\";\n\nimport _KeenSlider, {\n\ttype KeenSliderHooks as _KeenSliderHooks,\n\ttype KeenSliderInstance as _KeenSliderInstance,\n\ttype KeenSliderOptions as _KeenSliderOptions,\n\ttype KeenSliderPlugin as _KeenSliderPlugin,\n} from \"keen-slider\";\n\nimport { constrain } from \"./utils\";\n\nexport type KeenSliderHooks = _KeenSliderHooks;\n\nexport type KeenSliderInstance<\n\tO = {},\n\tP = {},\n\tH extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderInstance<O, P, H>;\n\ntype ExtendedSlidesOption = NonNullable<\n\t_KeenSliderInstance[\"options\"][\"slides\"]\n> & {\n\tperScroll?: number;\n};\n\ntype ExtendedKeenSliderOptions = Omit<\n\t_KeenSliderInstance[\"options\"],\n\t\"slides\"\n> & {\n\tslides?: ExtendedSlidesOption;\n};\n\nexport type KeenSliderOptions<\n\tO = {},\n\tP = {},\n\tH extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderOptions<O, P, H> & {\n\tslides: {\n\t\tperScroll?: number;\n\t} & _KeenSliderOptions<O, P, H>[\"slides\"];\n};\n\nexport type KeenSliderPlugin<\n\tO = {},\n\tP = {},\n\tH extends _KeenSliderHooks = _KeenSliderHooks,\n> = _KeenSliderPlugin<O, P, H>;\n\nfunction attachMoreDetails(prevSlide: number) {\n\treturn (slider: KeenSliderInstance) => {\n\t\tif (slider.track.details.rel !== slider.animator.targetIdx) return;\n\n\t\t(slider as KeenSlider).direction =\n\t\t\tslider.track.details.rel > prevSlide ? \"forward\" : \"backward\";\n\n\t\tprevSlide = slider.track.details.rel;\n\t};\n}\n\n/**\n * APG's carousel pattern: a labelled group whose role description tells\n * assistive tech what it is, with each slide a group of its own.\n *\n * What this replaces was `role=\"listbox\"` with `role=\"option\"` slides, which\n * told a screen-reader user they were inside a form control they could select\n * from. It also made `aria-valuemin/max/now` invalid — a listbox has no value —\n * and left `aria-required-children` permanently unsatisfiable.\n *\n * The slide attributes used to be applied only from `created`, `slideChanged`,\n * `optionsChanged` and `updated`. `created` fires inside `super()`, before the\n * constructor gets here to subscribe, so on a carousel nobody ever interacted\n * with the slides got no ARIA at all — which is exactly why the container\n * advertised owned `option` children it did not have.\n */\nconst attachAriaAttributes: KeenSliderPlugin = (slider) => {\n\tconst container = slider.container;\n\n\t// Anything the markup already said is the author's. Recorded before the\n\t// first write, because after that every label looks authored.\n\tconst authoredContainerLabel = container.hasAttribute(\"aria-label\");\n\tconst authoredSlideLabels = new WeakSet<Element>();\n\tfor (const slide of slider.slides) {\n\t\tif (slide.hasAttribute(\"aria-label\")) authoredSlideLabels.add(slide);\n\t}\n\n\tcontainer.setAttribute(\"role\", \"group\");\n\tcontainer.setAttribute(\"aria-roledescription\", \"carousel\");\n\tif (!authoredContainerLabel) {\n\t\tcontainer.setAttribute(\"aria-label\", \"Carousel\");\n\t}\n\t// `false`, so moving a slide announces that slide rather than re-reading\n\t// the whole carousel. `aria-live` itself belongs to the auto-rotation\n\t// handling, which knows whether announcing is wanted at all.\n\tcontainer.setAttribute(\"aria-atomic\", \"false\");\n\tif (!container.hasAttribute(\"tabindex\")) {\n\t\tcontainer.setAttribute(\"tabindex\", \"0\");\n\t}\n\n\t// These were written by the previous version of this plugin and are not\n\t// valid on `group`. A theme has no reason to have set them itself.\n\tfor (const attribute of [\n\t\t\"aria-multiselectable\",\n\t\t\"aria-valuemin\",\n\t\t\"aria-valuemax\",\n\t\t\"aria-valuenow\",\n\t\t\"aria-orientation\",\n\t\t\"aria-busy\",\n\t]) {\n\t\tcontainer.removeAttribute(attribute);\n\t}\n\n\t/** The fraction of a slide that is in view, 0 when it is fully outside. */\n\tfunction visiblePortion(index: number) {\n\t\treturn slider.track?.details?.slides?.[index]?.portion ?? 0;\n\t}\n\n\tfunction updateTabIndexes(slide: HTMLElement, tabindex: string) {\n\t\tconst focusable = Array.from(\n\t\t\tslide.querySelectorAll(\n\t\t\t\t\"input, a, button:not(:disabled), textarea, select, [tabindex]\",\n\t\t\t),\n\t\t);\n\t\tfor (const element of focusable) {\n\t\t\telement.setAttribute(\"tabindex\", tabindex);\n\t\t}\n\t}\n\n\tfunction updateSlideAriaAttributes(slider: _KeenSliderInstance) {\n\t\tconst total = slider.slides.length;\n\t\tconst disabled = Boolean(slider.options?.disabled);\n\n\t\tslider.slides.forEach((slide, index) => {\n\t\t\tslide.setAttribute(\"role\", \"group\");\n\t\t\tslide.setAttribute(\"aria-roledescription\", \"slide\");\n\t\t\tif (!authoredSlideLabels.has(slide)) {\n\t\t\t\tslide.setAttribute(\"aria-label\", `${index + 1} of ${total}`);\n\t\t\t}\n\t\t\t// Carried over from the listbox model; meaningless on a slide.\n\t\t\tslide.removeAttribute(\"aria-selected\");\n\t\t\t// A slide is a group, not a tab stop. Its contents still are.\n\t\t\tslide.removeAttribute(\"tabindex\");\n\n\t\t\tconst visible = disabled || visiblePortion(index) > 0;\n\n\t\t\t// The styling contract. ARIA is not one: keying CSS off `aria-hidden`\n\t\t\t// is what made removing it a silent breaking change for every theme\n\t\t\t// descended from the skeleton.\n\t\t\tslide.setAttribute(\"data-slide-visible\", `${visible}`);\n\n\t\t\t// `aria-hidden` only where the slide is genuinely out of view, and\n\t\t\t// never over the focused element — hiding focused content strands the\n\t\t\t// user, which is what axe's `aria-hidden-focus` rule is about. The\n\t\t\t// old code hid every inactive slide, so in any multi-slide-per-view\n\t\t\t// carousel it hid slides the user could plainly see.\n\t\t\tconst holdsFocus =\n\t\t\t\tdocument.activeElement !== null &&\n\t\t\t\tslide.contains(document.activeElement);\n\t\t\tif (!visible && !holdsFocus) slide.setAttribute(\"aria-hidden\", \"true\");\n\t\t\telse slide.removeAttribute(\"aria-hidden\");\n\n\t\t\tupdateTabIndexes(slide, visible ? \"0\" : \"-1\");\n\t\t});\n\t}\n\n\tslider.on(\"slideChanged\", updateSlideAriaAttributes);\n\tslider.on(\"created\", updateSlideAriaAttributes);\n\tslider.on(\"optionsChanged\", updateSlideAriaAttributes);\n\tslider.on(\"updated\", updateSlideAriaAttributes);\n\n\t// `created` has already fired by the time this plugin is attached, so the\n\t// subscriptions above would otherwise leave the first render unwritten.\n\tupdateSlideAriaAttributes(slider);\n};\n\n/**\n * Anything that takes typed input. Arrow keys inside one of these belong to\n * the field, not the carousel — without this guard a search box inside a slide\n * cannot be navigated with the keyboard.\n */\nconst TEXT_ENTRY =\n\t'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]';\n\n/**\n * Arrow-key navigation, and the `aria-live` rule for auto-rotation.\n *\n * The container has carried `tabindex=\"0\"` for as long as the ARIA plugin has\n * existed, with nothing listening — so it took a tab stop and did nothing with\n * it, which is worse than not being focusable. This is the handler that makes\n * the tab stop worth having.\n *\n * `aria-live` was previously hardcoded to `polite` on the container (twice).\n * APG is explicit that a live region on an auto-rotating carousel announces\n * slides the user never asked for, so the announcement is tied to the rotation\n * state instead: silent while rotating, polite once paused and the user is\n * driving.\n */\nconst attachKeyboardNavigation: KeenSliderPlugin = (slider) => {\n\tconst container = slider.container;\n\tconst controller = new AbortController();\n\n\tconst isVertical = () => Boolean(slider.options?.vertical);\n\n\tfunction handleKeydown(event: KeyboardEvent) {\n\t\tif (slider.options?.disabled) return;\n\n\t\tconst target = event.target;\n\t\tif (target instanceof Element && target.closest(TEXT_ENTRY)) return;\n\n\t\tconst back = isVertical() ? \"ArrowUp\" : \"ArrowLeft\";\n\t\tconst forward = isVertical() ? \"ArrowDown\" : \"ArrowRight\";\n\n\t\tswitch (event.key) {\n\t\t\tcase back:\n\t\t\t\tevent.preventDefault();\n\t\t\t\tslider.prev();\n\t\t\t\treturn;\n\t\t\tcase forward:\n\t\t\t\tevent.preventDefault();\n\t\t\t\tslider.next();\n\t\t\t\treturn;\n\t\t\tcase \"Home\":\n\t\t\t\tevent.preventDefault();\n\t\t\t\tslider.moveToIdx(0);\n\t\t\t\treturn;\n\t\t\tcase \"End\": {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst details = slider.track?.details;\n\t\t\t\tconst last = Number.isFinite(details?.maxIdx)\n\t\t\t\t\t? (details?.maxIdx ?? 0)\n\t\t\t\t\t: slider.slides.length - 1;\n\t\t\t\tslider.moveToIdx(last);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * `keen-slider-auto-switch` already dispatches this, and the autoplay\n\t * package publishes its pause state the same way, so both drive one code\n\t * path here rather than each teaching the carousel about itself.\n\t */\n\tfunction handleRotationChange(event: Event) {\n\t\tconst detail = (event as CustomEvent<{ isPaused?: boolean }>).detail;\n\t\tconst rotating = detail?.isPaused === false;\n\t\tcontainer.setAttribute(\"aria-live\", rotating ? \"off\" : \"polite\");\n\t}\n\n\tcontainer.addEventListener(\"keydown\", handleKeydown, {\n\t\tsignal: controller.signal,\n\t});\n\tcontainer.addEventListener(\"autoswitch:update\", handleRotationChange, {\n\t\tsignal: controller.signal,\n\t});\n\tcontainer.addEventListener(\"autoplay:update\", handleRotationChange, {\n\t\tsignal: controller.signal,\n\t});\n\n\t// Nothing is auto-rotating until something says so, and a carousel the user\n\t// drives should announce where they have got to.\n\tif (!container.hasAttribute(\"aria-live\")) {\n\t\tcontainer.setAttribute(\"aria-live\", \"polite\");\n\t}\n\n\tslider.on(\"destroyed\", () => controller.abort());\n};\n\nexport default class KeenSlider extends _KeenSlider {\n\tdirection: \"forward\" | \"backward\" | null = null;\n\tconstructor(\n\t\telement: ICustomElement & HTMLElement,\n\t\tconfig: KeenSliderOptions,\n\t\tplugins: _KeenSliderPlugin[] = [],\n\t) {\n\t\tsuper(element, config, plugins);\n\t\tconst prevSlide = 0;\n\n\t\tthis.direction = null;\n\t\tthis.on(\"slideChanged\", attachMoreDetails(prevSlide) as any);\n\n\t\tattachAriaAttributes(this);\n\t\tattachKeyboardNavigation(this);\n\n\t\tconst _next = this.next,\n\t\t\t_prev = this.prev;\n\n\t\tthis.next = function () {\n\t\t\tif (\n\t\t\t\ttypeof this.options.slides === \"number\" ||\n\t\t\t\ttypeof this.options.slides === \"function\"\n\t\t\t)\n\t\t\t\treturn _next();\n\t\t\tlet amount: number = 1;\n\t\t\tif (this.options?.slides && \"perScroll\" in this.options.slides === true) {\n\t\t\t\tamount = (this.options?.slides?.perScroll as number) || 1;\n\t\t\t}\n\t\t\tif (!this.options.loop) {\n\t\t\t\treturn this.moveToIdx(\n\t\t\t\t\tconstrain(\n\t\t\t\t\t\tthis.track.details.rel + amount,\n\t\t\t\t\t\t0,\n\t\t\t\t\t\tthis.track.details.maxIdx,\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn this.moveToIdx(constrain(this.track.details.abs + amount), true);\n\t\t};\n\n\t\tthis.prev = function () {\n\t\t\tif (\n\t\t\t\ttypeof this.options.slides === \"number\" ||\n\t\t\t\ttypeof this.options.slides === \"function\"\n\t\t\t)\n\t\t\t\treturn _prev();\n\t\t\tlet amount: number = 1;\n\t\t\tif (this.options?.slides && \"perScroll\" in this.options.slides === true) {\n\t\t\t\tamount = (this.options?.slides?.perScroll as number) || 1;\n\t\t\t}\n\t\t\tif (!this.options.loop) {\n\t\t\t\tthis.moveToIdx(\n\t\t\t\t\tconstrain(\n\t\t\t\t\t\tthis.track.details.rel - amount,\n\t\t\t\t\t\t0,\n\t\t\t\t\t\tthis.track.details.maxIdx,\n\t\t\t\t\t),\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn this.moveToIdx(constrain(this.track.details.abs - amount), true);\n\t\t};\n\t}\n}\n"],"mappings":"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"}
|
|
@@ -1,28 +1,27 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
Object.assign(element, { addPlugin: methods.addPlugin });
|
|
1
|
+
import "../KeenSlider.js";
|
|
2
|
+
import { provideKeenSliderContext, useKeenSliderContext } from "../hooks/useKeenSlider.js";
|
|
3
|
+
import "../hooks/index.js";
|
|
4
|
+
import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
|
|
5
|
+
import { createRoot } from "solid-js";
|
|
6
|
+
//#region src/components/keen-slider.ts
|
|
7
|
+
var Name = `keen-slider`;
|
|
8
|
+
var Component = (props, { element }) => {
|
|
9
|
+
const context = provideKeenSliderContext(props, element);
|
|
10
|
+
const [slider, methods] = useKeenSliderContext(context);
|
|
11
|
+
Object.assign(element, { subscribe(callback = (_) => null) {
|
|
12
|
+
function listen(slider) {
|
|
13
|
+
const cleanup = callback(slider);
|
|
14
|
+
slider.on("destroyed", typeof cleanup === "function" ? cleanup : () => null);
|
|
15
|
+
}
|
|
16
|
+
return createRoot((dispose) => {
|
|
17
|
+
createGuardedEffect(slider, listen);
|
|
18
|
+
return dispose;
|
|
19
|
+
});
|
|
20
|
+
} });
|
|
21
|
+
Object.assign(element, { slider });
|
|
22
|
+
Object.assign(element, { addPlugin: methods.addPlugin });
|
|
24
23
|
};
|
|
25
|
-
|
|
24
|
+
//#endregion
|
|
26
25
|
export { Component, Name };
|
|
27
|
-
|
|
26
|
+
|
|
28
27
|
//# sourceMappingURL=keen-slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"keen-slider.js","names":[],"sources":["../../../src/components/keen-slider.ts"],"sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\n\nimport { createRoot } from \"solid-js\";\nimport {\n\tprovideKeenSliderContext,\n\tuseKeenSliderContext,\n} from \"../hooks/index.js\";\nimport _KeenSlider, {\n\ttype KeenSliderInstance,\n\ttype KeenSliderOptions,\n} from \"../KeenSlider.js\";\n\nexport type Props = {\n\tconfig?: KeenSliderOptions;\n\tcenterSlides: boolean;\n\trefreshOnChildrenChange: boolean;\n};\n\nexport const Name = `keen-slider`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst context = provideKeenSliderContext(props, element);\n\tconst [slider, methods] = useKeenSliderContext(context);\n\n\tObject.assign(element, {\n\t\t// `observable` is gone in v2; pushing a signal out to an external\n\t\t// subscriber is now an effect inside its own root, so the returned\n\t\t// disposer is the unsubscribe. The public signature is unchanged.\n\t\tsubscribe(callback = (_: KeenSliderInstance) => null) {\n\t\t\tfunction listen(slider: KeenSliderInstance) {\n\t\t\t\tconst cleanup = callback(slider);\n\t\t\t\tslider.on(\n\t\t\t\t\t\"destroyed\",\n\t\t\t\t\ttypeof cleanup === \"function\" ? cleanup : () => null,\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn createRoot((dispose) => {\n\t\t\t\tcreateGuardedEffect(slider, listen);\n\t\t\t\treturn dispose;\n\t\t\t});\n\t\t},\n\t});\n\n\tObject.assign(element, { slider });\n\tObject.assign(element, { addPlugin: methods.addPlugin });\n};\n"],"mappings":";;;;;;AAmBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,UAAU,yBAAyB,OAAO,OAAO;CACvD,MAAM,CAAC,QAAQ,WAAW,qBAAqB,OAAO;CAEtD,OAAO,OAAO,SAAS,EAItB,UAAU,YAAY,MAA0B,MAAM;EACrD,SAAS,OAAO,QAA4B;GAC3C,MAAM,UAAU,SAAS,MAAM;GAC/B,OAAO,GACN,aACA,OAAO,YAAY,aAAa,gBAAgB,IACjD;EACD;EACA,OAAO,YAAY,YAAY;GAC9B,oBAAoB,QAAQ,MAAM;GAClC,OAAO;EACR,CAAC;CACF,EACD,CAAC;CAED,OAAO,OAAO,SAAS,EAAE,OAAO,CAAC;CACjC,OAAO,OAAO,SAAS,EAAE,WAAW,QAAQ,UAAU,CAAC;AACxD"}
|
package/dist/main/hooks/index.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import { addPlugin, getKeenSliderContext, provideKeenSliderContext, useKeenSlider, useKeenSliderAt, useKeenSliderContext } from "./useKeenSlider.js";
|
|
2
|
+
export { addPlugin, getKeenSliderContext, provideKeenSliderContext, useKeenSlider, useKeenSliderAt, useKeenSliderContext };
|