@brytdesigns/web-component-keen-slider 3.3.1 → 3.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +307 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/main/KeenSlider.js +40 -4
- package/dist/main/KeenSlider.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import { createWithElementContext, customShadowlessElement, correctElementType, getContextFromProvider, invokeOnLoaded } from '@brytdesigns/web-component-core/utils';
|
|
2
|
+
import { splitProps, createSignal, createMemo, onCleanup, createEffect, on, observable, mergeProps } from 'solid-js';
|
|
3
|
+
import _KeenSlider from 'keen-slider';
|
|
4
|
+
import { createContext, consume, provide } from 'component-register';
|
|
5
|
+
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// src/components/keen-slider.ts
|
|
13
|
+
var keen_slider_exports = {};
|
|
14
|
+
__export(keen_slider_exports, {
|
|
15
|
+
Component: () => Component,
|
|
16
|
+
Name: () => Name
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// src/utils.ts
|
|
20
|
+
function constrain(value, min = -Infinity, max = Infinity) {
|
|
21
|
+
return Math.min(Math.max(value, min), max);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// src/KeenSlider.ts
|
|
25
|
+
function attachMoreDetails(prevSlide) {
|
|
26
|
+
return function(slider) {
|
|
27
|
+
if (slider.track.details.rel != slider.animator.targetIdx) return;
|
|
28
|
+
slider.direction = slider.track.details.rel > prevSlide ? "forward" : "backward";
|
|
29
|
+
prevSlide = slider.track.details.rel;
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
var attachAriaAttributes = (slider) => {
|
|
33
|
+
const maxIdx = slider?.track?.details?.maxIdx === Infinity ? slider.track.details.length : slider?.track?.details?.maxIdx || 0;
|
|
34
|
+
slider.container.setAttribute("role", "listbox");
|
|
35
|
+
slider.container.setAttribute(
|
|
36
|
+
"aria-orientation",
|
|
37
|
+
slider.options?.vertical ? "vertical" : "horizontal"
|
|
38
|
+
);
|
|
39
|
+
slider.container.setAttribute("aria-multiselectable", "false");
|
|
40
|
+
slider.container.setAttribute("aria-label", "Slider");
|
|
41
|
+
slider.container.setAttribute("tabindex", "0");
|
|
42
|
+
slider.container.setAttribute("aria-live", "polite");
|
|
43
|
+
slider.container.setAttribute("aria-atomic", "true");
|
|
44
|
+
slider.container.setAttribute("aria-live", "polite");
|
|
45
|
+
slider.container.setAttribute("aria-busy", "false");
|
|
46
|
+
slider.container.setAttribute("aria-valuemin", "0");
|
|
47
|
+
slider.container.setAttribute("aria-valuemax", `${maxIdx}`);
|
|
48
|
+
slider.container.setAttribute(
|
|
49
|
+
"aria-valuenow",
|
|
50
|
+
`${slider?.track?.details?.rel || 0}`
|
|
51
|
+
);
|
|
52
|
+
function getMaxRel(rel, perView = 1) {
|
|
53
|
+
return Math.floor(rel + perView - 1);
|
|
54
|
+
}
|
|
55
|
+
function slideIsActive(idx) {
|
|
56
|
+
const perView = slider.options?.slides?.perView || 1, rel = slider.track.details.rel, maxRel = getMaxRel(rel, perView);
|
|
57
|
+
return rel <= idx && idx <= maxRel;
|
|
58
|
+
}
|
|
59
|
+
async function updateTabIndexes(slide, tabindex) {
|
|
60
|
+
const focusableElements = Array.from(
|
|
61
|
+
slide.querySelectorAll(
|
|
62
|
+
"input, a, button:not(:disabled), textarea, select, textarea, [tabindex]"
|
|
63
|
+
)
|
|
64
|
+
);
|
|
65
|
+
focusableElements.forEach((element) => {
|
|
66
|
+
element.setAttribute("tabindex", tabindex);
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
function updateAriaActiveSlide(slide) {
|
|
70
|
+
slide.setAttribute("aria-selected", "true");
|
|
71
|
+
slide.setAttribute("aria-hidden", "false");
|
|
72
|
+
slide.setAttribute("tabindex", "0");
|
|
73
|
+
updateTabIndexes(slide, "0");
|
|
74
|
+
}
|
|
75
|
+
function updateAriaInActiveSlide(slide) {
|
|
76
|
+
slide.setAttribute("aria-selected", "false");
|
|
77
|
+
slide.setAttribute("aria-hidden", "true");
|
|
78
|
+
slide.setAttribute("tabindex", "-1");
|
|
79
|
+
updateTabIndexes(slide, "-1");
|
|
80
|
+
}
|
|
81
|
+
function updateSlideAriaAttributes(slider2) {
|
|
82
|
+
if (slider2.options?.disabled) {
|
|
83
|
+
slider2.slides.forEach((slide, i) => {
|
|
84
|
+
slide.setAttribute("role", "option");
|
|
85
|
+
updateAriaActiveSlide(slide);
|
|
86
|
+
});
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
slider2.slides.forEach((slide, i) => {
|
|
90
|
+
slide.setAttribute("role", "option");
|
|
91
|
+
if (slideIsActive(i)) updateAriaActiveSlide(slide);
|
|
92
|
+
else updateAriaInActiveSlide(slide);
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
slider.on("slideChanged", updateSlideAriaAttributes);
|
|
96
|
+
slider.on("created", updateSlideAriaAttributes);
|
|
97
|
+
slider.on("optionsChanged", updateSlideAriaAttributes);
|
|
98
|
+
slider.on("updated", updateSlideAriaAttributes);
|
|
99
|
+
};
|
|
100
|
+
var KeenSlider = class extends _KeenSlider {
|
|
101
|
+
direction = null;
|
|
102
|
+
constructor(element, config, plugins = []) {
|
|
103
|
+
super(element, config, plugins);
|
|
104
|
+
let prevSlide = 0;
|
|
105
|
+
this.direction = null;
|
|
106
|
+
this.on("slideChanged", attachMoreDetails(prevSlide));
|
|
107
|
+
attachAriaAttributes(this);
|
|
108
|
+
const _next = this.next, _prev = this.prev;
|
|
109
|
+
this.next = function() {
|
|
110
|
+
if (typeof this.options.slides === "number" || typeof this.options.slides === "function")
|
|
111
|
+
return _next();
|
|
112
|
+
let amount = 1;
|
|
113
|
+
if (this.options?.slides && "perScroll" in this.options.slides === true) {
|
|
114
|
+
amount = this.options?.slides?.perScroll || 1;
|
|
115
|
+
}
|
|
116
|
+
if (!this.options.loop) {
|
|
117
|
+
return this.moveToIdx(
|
|
118
|
+
constrain(
|
|
119
|
+
this.track.details.rel + amount,
|
|
120
|
+
0,
|
|
121
|
+
this.track.details.maxIdx
|
|
122
|
+
)
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
return this.moveToIdx(constrain(this.track.details.abs + amount), true);
|
|
126
|
+
};
|
|
127
|
+
this.prev = function() {
|
|
128
|
+
if (typeof this.options.slides === "number" || typeof this.options.slides === "function")
|
|
129
|
+
return _prev();
|
|
130
|
+
let amount = 1;
|
|
131
|
+
if (this.options?.slides && "perScroll" in this.options.slides === true) {
|
|
132
|
+
amount = this.options?.slides?.perScroll || 1;
|
|
133
|
+
}
|
|
134
|
+
if (!this.options.loop) {
|
|
135
|
+
this.moveToIdx(
|
|
136
|
+
constrain(
|
|
137
|
+
this.track.details.rel - amount,
|
|
138
|
+
0,
|
|
139
|
+
this.track.details.maxIdx
|
|
140
|
+
)
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
return this.moveToIdx(constrain(this.track.details.abs - amount), true);
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
function initializeKeenSliderContext(props) {
|
|
148
|
+
const [privateProps, publicProps] = splitProps(props, [
|
|
149
|
+
"root",
|
|
150
|
+
"centerSlides",
|
|
151
|
+
"refreshOnChildrenChange"
|
|
152
|
+
]);
|
|
153
|
+
const [plugins, setPlugins] = createSignal([]);
|
|
154
|
+
const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);
|
|
155
|
+
const mutObserver = createMemo(() => {
|
|
156
|
+
if (props.refreshOnChildrenChange)
|
|
157
|
+
return new MutationObserver(function(mutations) {
|
|
158
|
+
mutations.forEach(function(_) {
|
|
159
|
+
setForceSliderRebuild((v) => !v);
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
return null;
|
|
163
|
+
});
|
|
164
|
+
const slider = createMemo(() => {
|
|
165
|
+
privateProps.root.setAttribute("data-initialized", "true");
|
|
166
|
+
const slider2 = new KeenSlider(
|
|
167
|
+
privateProps.root,
|
|
168
|
+
publicProps.config || {},
|
|
169
|
+
plugins()
|
|
170
|
+
);
|
|
171
|
+
const m = mutObserver();
|
|
172
|
+
if (m) {
|
|
173
|
+
m.observe(slider2.container, { childList: true });
|
|
174
|
+
forceSliderRebuild();
|
|
175
|
+
}
|
|
176
|
+
onCleanup(() => {
|
|
177
|
+
slider2.destroy();
|
|
178
|
+
privateProps.root.setAttribute("data-initialized", "false");
|
|
179
|
+
if (m) m.disconnect();
|
|
180
|
+
});
|
|
181
|
+
return slider2;
|
|
182
|
+
});
|
|
183
|
+
function addPlugin2(plugin) {
|
|
184
|
+
let index = -1;
|
|
185
|
+
setPlugins((plugins2) => {
|
|
186
|
+
index = plugins2.length;
|
|
187
|
+
return [...plugins2, plugin];
|
|
188
|
+
});
|
|
189
|
+
return function() {
|
|
190
|
+
setPlugins((plugins2) => {
|
|
191
|
+
return [...plugins2.slice(0, index), ...plugins2.slice(index + 1)];
|
|
192
|
+
});
|
|
193
|
+
};
|
|
194
|
+
}
|
|
195
|
+
const centeredPlugin = (slider2) => {
|
|
196
|
+
function centerSlides(slider3) {
|
|
197
|
+
if (slider3.track.details.maxIdx > 0) {
|
|
198
|
+
slider3.container.style.justifyContent = null;
|
|
199
|
+
slider3.container.style.transform = null;
|
|
200
|
+
} else {
|
|
201
|
+
slider3.container.style.cssText = `
|
|
202
|
+
justify-content: center;
|
|
203
|
+
transform: translateX(-${slider3.options.slides?.spacing || 16}px)
|
|
204
|
+
`;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
slider2.on("created", centerSlides);
|
|
208
|
+
slider2.on("optionsChanged", centerSlides);
|
|
209
|
+
};
|
|
210
|
+
createEffect(
|
|
211
|
+
on(
|
|
212
|
+
() => props.centerSlides,
|
|
213
|
+
(centerSlides) => {
|
|
214
|
+
if (!centerSlides) return;
|
|
215
|
+
const remove = addPlugin2(centeredPlugin);
|
|
216
|
+
return onCleanup(remove);
|
|
217
|
+
}
|
|
218
|
+
)
|
|
219
|
+
);
|
|
220
|
+
createEffect(
|
|
221
|
+
on(plugins, (plugins2) => {
|
|
222
|
+
if (plugins2.length === 0) return;
|
|
223
|
+
console.log(
|
|
224
|
+
`Registered a new plugin on element.
|
|
225
|
+
`,
|
|
226
|
+
`Total slider plugins: ${plugins2.length}`
|
|
227
|
+
);
|
|
228
|
+
})
|
|
229
|
+
);
|
|
230
|
+
return [slider, { addPlugin: addPlugin2 }];
|
|
231
|
+
}
|
|
232
|
+
var KeenSliderContextState = createContext(initializeKeenSliderContext);
|
|
233
|
+
var provideKeenSliderContext = (initialState, element) => {
|
|
234
|
+
const props = mergeProps(initialState, { root: element });
|
|
235
|
+
return provide(KeenSliderContextState, props, element);
|
|
236
|
+
};
|
|
237
|
+
var useKeenSliderContext = (context) => {
|
|
238
|
+
return context;
|
|
239
|
+
};
|
|
240
|
+
var useKeenSlider = (element) => {
|
|
241
|
+
const context = consume(KeenSliderContextState, element);
|
|
242
|
+
if (!context) {
|
|
243
|
+
throw console.error(
|
|
244
|
+
"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element."
|
|
245
|
+
);
|
|
246
|
+
}
|
|
247
|
+
return useKeenSliderContext(context);
|
|
248
|
+
};
|
|
249
|
+
var getKeenSliderContext = (element) => {
|
|
250
|
+
const context = getContextFromProvider(
|
|
251
|
+
KeenSliderContextState,
|
|
252
|
+
element
|
|
253
|
+
);
|
|
254
|
+
return useKeenSliderContext(context);
|
|
255
|
+
};
|
|
256
|
+
function addPlugin({ target, plugin, controller }) {
|
|
257
|
+
if (!target) return;
|
|
258
|
+
invokeOnLoaded(
|
|
259
|
+
() => {
|
|
260
|
+
const [_, { addPlugin: addPlugin2 }] = getKeenSliderContext(target);
|
|
261
|
+
const removePlugin = addPlugin2(plugin);
|
|
262
|
+
controller?.signal?.addEventListener("abort", removePlugin);
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
signal: controller?.signal
|
|
266
|
+
}
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
var withKeenSliderElementContext = createWithElementContext(KeenSliderContextState);
|
|
270
|
+
|
|
271
|
+
// src/components/keen-slider.ts
|
|
272
|
+
var Name = `keen-slider`;
|
|
273
|
+
var Component = (props, { element }) => {
|
|
274
|
+
const context = provideKeenSliderContext(props, element);
|
|
275
|
+
const [slider, methods] = useKeenSliderContext(context);
|
|
276
|
+
const observer = observable(slider);
|
|
277
|
+
Object.assign(element, {
|
|
278
|
+
subscribe(callback = (_) => null) {
|
|
279
|
+
function listen(slider2) {
|
|
280
|
+
const cleanup = callback(slider2);
|
|
281
|
+
slider2.on(
|
|
282
|
+
"destroyed",
|
|
283
|
+
typeof cleanup === "function" ? cleanup : () => null
|
|
284
|
+
);
|
|
285
|
+
}
|
|
286
|
+
return observer.subscribe(listen).unsubscribe;
|
|
287
|
+
}
|
|
288
|
+
});
|
|
289
|
+
Object.assign(element, { slider });
|
|
290
|
+
Object.assign(element, { addPlugin: methods.addPlugin });
|
|
291
|
+
};
|
|
292
|
+
|
|
293
|
+
// src/index.ts
|
|
294
|
+
customShadowlessElement(
|
|
295
|
+
keen_slider_exports.Name,
|
|
296
|
+
{
|
|
297
|
+
// @ts-ignore
|
|
298
|
+
config: {},
|
|
299
|
+
centerSlides: false,
|
|
300
|
+
refreshOnChildrenChange: false
|
|
301
|
+
},
|
|
302
|
+
correctElementType(keen_slider_exports.Component)
|
|
303
|
+
);
|
|
304
|
+
|
|
305
|
+
export { addPlugin, getKeenSliderContext, useKeenSlider, withKeenSliderElementContext };
|
|
306
|
+
//# sourceMappingURL=index.js.map
|
|
307
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/keen-slider.ts","../../src/utils.ts","../../src/KeenSlider.ts","../../src/hooks/useKeenSlider.ts","../../src/index.ts"],"names":["slider","addPlugin","plugins"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport { observable } from \"solid-js\";\nimport _KeenSlider, {\n type KeenSliderInstance,\n type KeenSliderOptions,\n} from \"../KeenSlider.js\";\n\nimport {\n provideKeenSliderContext,\n useKeenSliderContext,\n} from \"../hooks/index.js\";\n\nexport type Props = {\n config?: KeenSliderOptions;\n centerSlides: boolean;\n refreshOnChildrenChange: boolean;\n};\n\nexport const Name = `keen-slider`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n const context = provideKeenSliderContext(props, element);\n const [slider, methods] = useKeenSliderContext(context);\n\n const observer = observable(slider);\n\n Object.assign(element, {\n subscribe(callback = (_: KeenSliderInstance) => null) {\n function listen(slider: KeenSliderInstance) {\n const cleanup = callback(slider);\n slider.on(\n \"destroyed\",\n typeof cleanup === \"function\" ? cleanup : () => null,\n );\n }\n return observer.subscribe(listen).unsubscribe;\n },\n });\n\n Object.assign(element, { slider });\n Object.assign(element, { addPlugin: methods.addPlugin });\n};\n","import type { ICustomElement } from \"component-register\";\n\nexport function constrain(value: number, min = -Infinity, max = Infinity) {\n return Math.min(Math.max(value, min), max);\n}\n\ntype Options = {\n element: HTMLElement & ICustomElement;\n};\n\nexport function initializeSliderClasses<Props>(\n ComponentType = (props: Props, options: Options) => {}\n) {\n return (props: Props, options: Options) => {\n const { element } = options;\n element.classList.add(\"keen-slider\");\n Array.from(element.children).forEach((child) =>\n child.classList.add(\"keen-slider__slide\")\n );\n return ComponentType(props, options);\n };\n}\n","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","import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport {\n createEffect,\n mergeProps,\n createSignal,\n createMemo,\n onCleanup,\n on,\n splitProps,\n} from \"solid-js\";\nimport {\n createWithElementContext,\n getContextFromProvider,\n invokeOnLoaded,\n} from \"@brytdesigns/web-component-core/utils\";\n\nimport KeenSlider, {\n type KeenSliderInstance,\n type KeenSliderOptions,\n type KeenSliderPlugin,\n} from \"../KeenSlider\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n config?: KeenSliderOptions;\n centerSlides?: boolean;\n refreshOnChildrenChange?: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype KeenSliderContext = ReturnType<typeof initializeKeenSliderContext>;\n\nfunction initializeKeenSliderContext(props: CreateContextOptions) {\n const [privateProps, publicProps] = splitProps(props, [\n \"root\",\n \"centerSlides\",\n \"refreshOnChildrenChange\",\n ]);\n\n const [plugins, setPlugins] = createSignal<KeenSliderPlugin[]>([]);\n const [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);\n\n const mutObserver = createMemo(() => {\n if (props.refreshOnChildrenChange)\n return new MutationObserver(function (mutations) {\n mutations.forEach(function (_) {\n setForceSliderRebuild((v) => !v);\n });\n });\n return null;\n });\n\n const slider = createMemo(() => {\n privateProps.root.setAttribute(\"data-initialized\", \"true\");\n const slider = new KeenSlider(\n privateProps.root,\n publicProps.config || ({} as any),\n plugins(),\n );\n const m = mutObserver();\n\n if (m) {\n m.observe(slider.container, { childList: true });\n forceSliderRebuild();\n }\n\n onCleanup(() => {\n slider.destroy();\n privateProps.root.setAttribute(\"data-initialized\", \"false\");\n if (m) m.disconnect();\n });\n\n return slider;\n });\n\n function addPlugin(plugin: KeenSliderPlugin) {\n let index = -1;\n\n setPlugins((plugins) => {\n index = plugins.length;\n return [...plugins, plugin];\n });\n\n return function () {\n setPlugins((plugins) => {\n return [...plugins.slice(0, index), ...plugins.slice(index + 1)];\n });\n };\n }\n\n const centeredPlugin: KeenSliderPlugin = (slider) => {\n function centerSlides(slider: KeenSliderInstance) {\n if (slider.track.details.maxIdx > 0) {\n //@ts-ignore\n slider.container.style.justifyContent = null;\n //@ts-ignore\n slider.container.style.transform = null;\n } else {\n slider.container.style.cssText = `\n justify-content: center;\n transform: translateX(-${(slider.options.slides as any)?.spacing || 16}px)\n `;\n }\n }\n\n slider.on(\"created\", centerSlides);\n slider.on(\"optionsChanged\", centerSlides);\n };\n\n createEffect(\n on(\n () => props.centerSlides,\n (centerSlides) => {\n if (!centerSlides) return;\n const remove = addPlugin(centeredPlugin);\n return onCleanup(remove);\n },\n ),\n );\n\n createEffect(\n on(plugins, (plugins) => {\n if (plugins.length === 0) return;\n console.log(\n `Registered a new plugin on element.\\n`,\n `Total slider plugins: ${plugins.length}`,\n );\n }),\n );\n\n return [slider, { addPlugin }] as const;\n}\n\nconst KeenSliderContextState = createContext(initializeKeenSliderContext);\n\nexport const provideKeenSliderContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): KeenSliderContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(KeenSliderContextState, props, element);\n};\n\nexport const useKeenSliderContext = (context: KeenSliderContext) => {\n return context;\n};\n\nexport const useKeenSlider = (element: HTMLElement & ICustomElement) => {\n const context: KeenSliderContext = consume(KeenSliderContextState, element);\n\n if (!context) {\n throw console.error(\n \"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.\",\n );\n }\n\n return useKeenSliderContext(context);\n};\n\nexport const getKeenSliderContext = (element: Element) => {\n const context = getContextFromProvider<KeenSliderContext>(\n KeenSliderContextState,\n element,\n );\n return useKeenSliderContext(context);\n};\n\ntype AddPluginOptions = {\n target: void | HTMLElement;\n plugin: KeenSliderPlugin;\n controller?: AbortController;\n};\n\nexport function addPlugin({ target, plugin, controller }: AddPluginOptions) {\n if (!target) return;\n\n invokeOnLoaded(\n () => {\n const [_, { addPlugin }] = getKeenSliderContext(target);\n const removePlugin = addPlugin(plugin);\n controller?.signal?.addEventListener(\"abort\", removePlugin);\n },\n {\n signal: controller?.signal,\n },\n );\n}\n\nexport const withKeenSliderElementContext = createWithElementContext<\n typeof KeenSliderContextState,\n KeenSliderContext\n>(KeenSliderContextState);\n","import {\n\tcustomShadowlessElement,\n\tcorrectElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSlider } from \"./components/index.js\";\n\nexport type {\n\tKeenSliderInstance,\n\tKeenSliderOptions,\n\tKeenSliderPlugin,\n} from \"./KeenSlider.js\";\n\nexport type KeenSliderProps = KeenSlider.Props;\n\nexport {\n\tuseKeenSlider,\n\taddPlugin,\n\tgetKeenSliderContext,\n\twithKeenSliderElementContext,\n} from \"./hooks/index.js\";\n\ncustomShadowlessElement(\n\tKeenSlider.Name,\n\t{\n\t\t// @ts-ignore\n\t\tconfig: {},\n\t\tcenterSlides: false,\n\t\trefreshOnChildrenChange: false,\n\t},\n\tcorrectElementType(KeenSlider.Component),\n);\n"]}
|
package/dist/main/KeenSlider.js
CHANGED
|
@@ -1,6 +1,34 @@
|
|
|
1
1
|
import { constrain, formatSlideLabel } from "./utils.js";
|
|
2
2
|
import _KeenSlider from "keen-slider";
|
|
3
3
|
//#region src/KeenSlider.ts
|
|
4
|
+
/**
|
|
5
|
+
* The slides that belong to `container`: every `.keen-slider__slide` in it,
|
|
6
|
+
* except those inside another carousel nested in one of its slides.
|
|
7
|
+
*
|
|
8
|
+
* keen-slider's own default is the bare class, which matches the whole
|
|
9
|
+
* subtree — so a carousel nested inside a slide, a product card's gallery in a
|
|
10
|
+
* row of cards, had its slides claimed by the carousel around it as well. The
|
|
11
|
+
* outer one then laid out, labelled and hid slides that were not its own.
|
|
12
|
+
*
|
|
13
|
+
* Not `:scope > .keen-slider__slide`, which fixes nesting by also dropping
|
|
14
|
+
* any slide that is not a direct child. A single carousel finds exactly the
|
|
15
|
+
* slides it always has.
|
|
16
|
+
*
|
|
17
|
+
* Matched on the container's own tag, so it holds for whatever name the
|
|
18
|
+
* element was registered under. A slide's own tag is not checked: a carousel
|
|
19
|
+
* that is itself a slide belongs to the carousel around it.
|
|
20
|
+
*/
|
|
21
|
+
function ownSlides(container) {
|
|
22
|
+
const host = container.localName;
|
|
23
|
+
return Array.from(container.querySelectorAll(".keen-slider__slide")).filter((slide) => slide.parentElement?.closest(host) === container);
|
|
24
|
+
}
|
|
25
|
+
/** `options`, with `ownSlides` as the selector unless it names one. */
|
|
26
|
+
function withOwnSlides(options) {
|
|
27
|
+
return options.selector === void 0 ? {
|
|
28
|
+
...options,
|
|
29
|
+
selector: ownSlides
|
|
30
|
+
} : options;
|
|
31
|
+
}
|
|
4
32
|
function attachMoreDetails(prevSlide) {
|
|
5
33
|
return (slider) => {
|
|
6
34
|
if (slider.track.details.rel !== slider.animator.targetIdx) return;
|
|
@@ -63,9 +91,12 @@ var attachAriaAttributes = (slider, slideLabel) => {
|
|
|
63
91
|
function visiblePortion(index) {
|
|
64
92
|
return slider.track?.details?.slides?.[index]?.portion ?? 0;
|
|
65
93
|
}
|
|
66
|
-
function updateTabIndexes(slide
|
|
94
|
+
function updateTabIndexes(slide) {
|
|
67
95
|
const focusable = Array.from(slide.querySelectorAll("input, a, button:not(:disabled), textarea, select, [tabindex]"));
|
|
68
|
-
for (const element of focusable)
|
|
96
|
+
for (const element of focusable) {
|
|
97
|
+
const hidden = element.closest("[data-slide-visible=\"false\"]") !== null;
|
|
98
|
+
element.setAttribute("tabindex", hidden ? "-1" : "0");
|
|
99
|
+
}
|
|
69
100
|
}
|
|
70
101
|
function updateSlideAriaAttributes(slider) {
|
|
71
102
|
const total = slider.slides.length;
|
|
@@ -85,10 +116,11 @@ var attachAriaAttributes = (slider, slideLabel) => {
|
|
|
85
116
|
const holdsFocus = document.activeElement !== null && slide.contains(document.activeElement);
|
|
86
117
|
if (!visible && !holdsFocus) slide.setAttribute("aria-hidden", "true");
|
|
87
118
|
else slide.removeAttribute("aria-hidden");
|
|
88
|
-
updateTabIndexes(slide
|
|
119
|
+
updateTabIndexes(slide);
|
|
89
120
|
});
|
|
90
121
|
}
|
|
91
122
|
slider.on("slideChanged", updateSlideAriaAttributes);
|
|
123
|
+
slider.on("animationEnded", updateSlideAriaAttributes);
|
|
92
124
|
slider.on("created", updateSlideAriaAttributes);
|
|
93
125
|
slider.on("optionsChanged", updateSlideAriaAttributes);
|
|
94
126
|
slider.on("updated", updateSlideAriaAttributes);
|
|
@@ -118,9 +150,11 @@ var attachKeyboardNavigation = (slider) => {
|
|
|
118
150
|
const container = slider.container;
|
|
119
151
|
const controller = new AbortController();
|
|
120
152
|
const isVertical = () => Boolean(slider.options?.vertical);
|
|
153
|
+
const listening = `${container.localName}:not([data-keen-slider-disabled])`;
|
|
121
154
|
function handleKeydown(event) {
|
|
122
155
|
if (slider.options?.disabled) return;
|
|
123
156
|
const target = event.target;
|
|
157
|
+
if (target instanceof Element && target.closest(listening) !== container) return;
|
|
124
158
|
if (target instanceof Element && target.closest(TEXT_ENTRY)) return;
|
|
125
159
|
const back = isVertical() ? "ArrowUp" : "ArrowLeft";
|
|
126
160
|
const forward = isVertical() ? "ArrowDown" : "ArrowRight";
|
|
@@ -164,8 +198,10 @@ var attachKeyboardNavigation = (slider) => {
|
|
|
164
198
|
var KeenSlider = class extends _KeenSlider {
|
|
165
199
|
direction = null;
|
|
166
200
|
constructor(element, config, plugins = [], accessibility = {}) {
|
|
167
|
-
super(element, config, plugins);
|
|
201
|
+
super(element, withOwnSlides(config), plugins);
|
|
168
202
|
const prevSlide = 0;
|
|
203
|
+
const _update = this.update;
|
|
204
|
+
this.update = (options, idx) => _update(options && withOwnSlides(options), idx);
|
|
169
205
|
this.direction = null;
|
|
170
206
|
this.on("slideChanged", attachMoreDetails(prevSlide));
|
|
171
207
|
attachAriaAttributes(this, accessibility.slideLabel);
|
|
@@ -1 +1 @@
|
|
|
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, formatSlideLabel } 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 * The `aria-label` this package last wrote on each slide.\n *\n * Module-level because the slider is rebuilt - by every `addPlugin`, by\n * `refresh-on-children-change`, and by a new `config` or `slide-label` - and\n * each rebuild is a fresh plugin with no memory of the last. Without this, a\n * rebuilt slider saw the labels its predecessor had written, took every one\n * for an authored label, and never touched them again: a changed template was\n * ignored, and a slide count that changed left \"1 of 3\" on a carousel of four.\n */\nconst writtenSlideLabels = new WeakMap<Element, string>();\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 *\n * `slideLabel` is the `slide-label` template. Each slide's `aria-label` was\n * hard-coded English, so a theme on any other locale could only translate it\n * by authoring a label on every slide by hand.\n */\nconst attachAriaAttributes = (\n\tslider: KeenSliderInstance,\n\tslideLabel: string | undefined,\n) => {\n\tconst container = slider.container;\n\n\t// Anything the markup already said is the author's. Recorded before the\n\t// first write, and checked against what an earlier instance wrote, because\n\t// otherwise every label this package wrote looks authored.\n\tconst authoredContainerLabel = container.hasAttribute(\"aria-label\");\n\tconst authoredSlideLabels = new WeakSet<Element>();\n\tfor (const slide of slider.slides) {\n\t\tconst label = slide.getAttribute(\"aria-label\");\n\t\tif (label !== null && label !== writtenSlideLabels.get(slide)) {\n\t\t\tauthoredSlideLabels.add(slide);\n\t\t}\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\tconst label = formatSlideLabel(slideLabel, index + 1, total);\n\t\t\t\tslide.setAttribute(\"aria-label\", label);\n\t\t\t\twrittenSlideLabels.set(slide, label);\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 type KeenSliderAccessibilityOptions = {\n\t/** Template for each slide's `aria-label`: `{n}` and `{total}`. */\n\tslideLabel?: string;\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\taccessibility: KeenSliderAccessibilityOptions = {},\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, accessibility.slideLabel);\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
|
+
{"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, formatSlideLabel } 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\n/**\n * The slides that belong to `container`: every `.keen-slider__slide` in it,\n * except those inside another carousel nested in one of its slides.\n *\n * keen-slider's own default is the bare class, which matches the whole\n * subtree — so a carousel nested inside a slide, a product card's gallery in a\n * row of cards, had its slides claimed by the carousel around it as well. The\n * outer one then laid out, labelled and hid slides that were not its own.\n *\n * Not `:scope > .keen-slider__slide`, which fixes nesting by also dropping\n * any slide that is not a direct child. A single carousel finds exactly the\n * slides it always has.\n *\n * Matched on the container's own tag, so it holds for whatever name the\n * element was registered under. A slide's own tag is not checked: a carousel\n * that is itself a slide belongs to the carousel around it.\n */\nfunction ownSlides(container: HTMLElement) {\n\tconst host = container.localName;\n\treturn Array.from(\n\t\tcontainer.querySelectorAll<HTMLElement>(\".keen-slider__slide\"),\n\t).filter((slide) => slide.parentElement?.closest(host) === container);\n}\n\n/** `options`, with `ownSlides` as the selector unless it names one. */\nfunction withOwnSlides<O extends { selector?: unknown }>(options: O): O {\n\treturn options.selector === undefined\n\t\t? { ...options, selector: ownSlides }\n\t\t: options;\n}\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 * The `aria-label` this package last wrote on each slide.\n *\n * Module-level because the slider is rebuilt - by every `addPlugin`, by\n * `refresh-on-children-change`, and by a new `config` or `slide-label` - and\n * each rebuild is a fresh plugin with no memory of the last. Without this, a\n * rebuilt slider saw the labels its predecessor had written, took every one\n * for an authored label, and never touched them again: a changed template was\n * ignored, and a slide count that changed left \"1 of 3\" on a carousel of four.\n */\nconst writtenSlideLabels = new WeakMap<Element, string>();\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 *\n * `slideLabel` is the `slide-label` template. Each slide's `aria-label` was\n * hard-coded English, so a theme on any other locale could only translate it\n * by authoring a label on every slide by hand.\n */\nconst attachAriaAttributes = (\n\tslider: KeenSliderInstance,\n\tslideLabel: string | undefined,\n) => {\n\tconst container = slider.container;\n\n\t// Anything the markup already said is the author's. Recorded before the\n\t// first write, and checked against what an earlier instance wrote, because\n\t// otherwise every label this package wrote looks authored.\n\tconst authoredContainerLabel = container.hasAttribute(\"aria-label\");\n\tconst authoredSlideLabels = new WeakSet<Element>();\n\tfor (const slide of slider.slides) {\n\t\tconst label = slide.getAttribute(\"aria-label\");\n\t\tif (label !== null && label !== writtenSlideLabels.get(slide)) {\n\t\t\tauthoredSlideLabels.add(slide);\n\t\t}\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) {\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\t// In view only if every slide around it is. Asking only this slide\n\t\t\t// made the contents of a nested carousel's hidden slides tabbable\n\t\t\t// whenever this one was in view, under that carousel's `aria-hidden`.\n\t\t\tconst hidden = element.closest('[data-slide-visible=\"false\"]') !== null;\n\t\t\telement.setAttribute(\"tabindex\", hidden ? \"-1\" : \"0\");\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\tconst label = formatSlideLabel(slideLabel, index + 1, total);\n\t\t\t\tslide.setAttribute(\"aria-label\", label);\n\t\t\t\twrittenSlideLabels.set(slide, label);\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);\n\t\t});\n\t}\n\n\tslider.on(\"slideChanged\", updateSlideAriaAttributes);\n\t// `slideChanged` fires halfway through a move, while the slide being left\n\t// is still partly in view. With nothing after it, that slide stayed\n\t// visible, unhidden and tabbable until the next move. Every move ends\n\t// here, drags and free-mode momentum included.\n\tslider.on(\"animationEnded\", 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\t// A key belongs to the innermost carousel around it. A keydown inside a\n\t// nested carousel bubbles through every carousel containing it, so without\n\t// this one press paged all of them. A disabled carousel is not listening,\n\t// so its keys go to the one around it, as they did before.\n\tconst listening = `${container.localName}:not([data-keen-slider-disabled])`;\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(listening) !== container)\n\t\t\treturn;\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 type KeenSliderAccessibilityOptions = {\n\t/** Template for each slide's `aria-label`: `{n}` and `{total}`. */\n\tslideLabel?: string;\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\taccessibility: KeenSliderAccessibilityOptions = {},\n\t) {\n\t\tsuper(element, withOwnSlides(config), plugins);\n\t\tconst prevSlide = 0;\n\n\t\t// New options replace the old ones over keen-slider's own defaults, so\n\t\t// the default selector has to be applied here as well.\n\t\tconst _update = this.update;\n\t\tthis.update = (options, idx) =>\n\t\t\t_update(options && withOwnSlides(options), idx);\n\n\t\tthis.direction = null;\n\t\tthis.on(\"slideChanged\", attachMoreDetails(prevSlide) as any);\n\n\t\tattachAriaAttributes(this, accessibility.slideLabel);\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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-keen-slider",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.3",
|
|
4
4
|
"description": "Keen slider web component",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"author": "Bryt Designs",
|
|
21
21
|
"license": "ISC",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@brytdesigns/web-component-core": "3.3.
|
|
23
|
+
"@brytdesigns/web-component-core": "3.3.3",
|
|
24
24
|
"component-register": "0.8.7",
|
|
25
25
|
"keen-slider": "^6.8.6",
|
|
26
26
|
"solid-js": "2.0.0-rc.14"
|