@brytdesigns/web-component-keen-slider 3.3.3 → 3.4.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import KeenSlider from "../KeenSlider.js";
|
|
2
|
-
import { createGuardedEffect, createRemoteContext, getContextFromProvider, invokeOnLoaded } from "@brytdesigns/web-component-core/utils";
|
|
2
|
+
import { consumeContext, createGuardedEffect, createRemoteContext, getContextFromProvider, invokeOnLoaded } from "@brytdesigns/web-component-core/utils";
|
|
3
3
|
import { createMemo, createSignal, merge, omit, onCleanup } from "solid-js";
|
|
4
|
-
import {
|
|
4
|
+
import { createContext, provide } from "component-register";
|
|
5
5
|
//#region src/hooks/useKeenSlider.ts
|
|
6
6
|
function initializeKeenSliderContext(props) {
|
|
7
7
|
const publicProps = omit(props, "root", "centerSlides", "refreshOnChildrenChange", "slideLabel");
|
|
@@ -25,11 +25,14 @@ function initializeKeenSliderContext(props) {
|
|
|
25
25
|
}
|
|
26
26
|
onCleanup(() => {
|
|
27
27
|
slider.destroy();
|
|
28
|
-
props.root.setAttribute("data-initialized", "false");
|
|
29
28
|
if (m) m.disconnect();
|
|
30
29
|
});
|
|
31
30
|
return slider;
|
|
32
31
|
});
|
|
32
|
+
createGuardedEffect(slider, () => {
|
|
33
|
+
props.root.setAttribute("data-initialized", "true");
|
|
34
|
+
return () => props.root.setAttribute("data-initialized", "false");
|
|
35
|
+
});
|
|
33
36
|
function addPlugin(plugin) {
|
|
34
37
|
let index = -1;
|
|
35
38
|
setPlugins((plugins) => {
|
|
@@ -59,10 +62,6 @@ function initializeKeenSliderContext(props) {
|
|
|
59
62
|
if (!centerSlides) return;
|
|
60
63
|
return addPlugin(centeredPlugin);
|
|
61
64
|
});
|
|
62
|
-
createGuardedEffect(plugins, (plugins) => {
|
|
63
|
-
if (plugins.length === 0) return;
|
|
64
|
-
console.log(`Registered a new plugin on element.\n`, `Total slider plugins: ${plugins.length}`);
|
|
65
|
-
});
|
|
66
65
|
return [slider, { addPlugin }];
|
|
67
66
|
}
|
|
68
67
|
var KeenSliderContextState = createContext(initializeKeenSliderContext);
|
|
@@ -74,7 +73,7 @@ var useKeenSliderContext = (context) => {
|
|
|
74
73
|
return context;
|
|
75
74
|
};
|
|
76
75
|
var useKeenSlider = (element) => {
|
|
77
|
-
const context =
|
|
76
|
+
const context = consumeContext(KeenSliderContextState, element);
|
|
78
77
|
if (!context) throw new Error("KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.");
|
|
79
78
|
return useKeenSliderContext(context);
|
|
80
79
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeenSlider.js","names":[],"sources":["../../../src/hooks/useKeenSlider.ts"],"sourcesContent":["import {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n\tinvokeOnLoaded,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\
|
|
1
|
+
{"version":3,"file":"useKeenSlider.js","names":[],"sources":["../../../src/hooks/useKeenSlider.ts"],"sourcesContent":["import {\n\tconsumeContext,\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n\tinvokeOnLoaded,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport { createMemo, createSignal, merge, omit, onCleanup } from \"solid-js\";\n\nimport KeenSlider, {\n\ttype KeenSliderInstance,\n\ttype KeenSliderOptions,\n\ttype KeenSliderPlugin,\n} from \"../KeenSlider\";\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tconfig?: KeenSliderOptions;\n\tcenterSlides?: boolean;\n\trefreshOnChildrenChange?: boolean;\n\tslideLabel?: string;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype KeenSliderContext = ReturnType<typeof initializeKeenSliderContext>;\n\nfunction initializeKeenSliderContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; picked keys are read straight off `props`.\n\tconst publicProps = omit(\n\t\tprops,\n\t\t\"root\",\n\t\t\"centerSlides\",\n\t\t\"refreshOnChildrenChange\",\n\t\t\"slideLabel\",\n\t);\n\n\tconst [plugins, setPlugins] = createSignal<KeenSliderPlugin[]>([]);\n\tconst [forceSliderRebuild, setForceSliderRebuild] = createSignal(false);\n\n\tconst mutObserver = createMemo(() => {\n\t\tif (props.refreshOnChildrenChange)\n\t\t\treturn new MutationObserver((mutations) => {\n\t\t\t\tmutations.forEach((_) => {\n\t\t\t\t\tsetForceSliderRebuild((v) => !v);\n\t\t\t\t});\n\t\t\t});\n\t\treturn null;\n\t});\n\n\tconst slider = createMemo(() => {\n\t\t// Marked before the build, not after: the stylesheet's pre-init `gap`\n\t\t// applies until this is set, and keen-slider measures the slides as it\n\t\t// is constructed. Measured with the gap, an \"auto\" slider sizes\n\t\t// shrinkable slides too small. The effect below owns every later write.\n\t\tprops.root.setAttribute(\"data-initialized\", \"true\");\n\t\t// Read here, so it is tracked: the template is captured when the\n\t\t// slider is built, so a new one rebuilds it, the same as a new\n\t\t// `config` does.\n\t\tconst slider = new KeenSlider(\n\t\t\tprops.root,\n\t\t\tpublicProps.config || ({} as any),\n\t\t\tplugins(),\n\t\t\t{ slideLabel: props.slideLabel },\n\t\t);\n\t\tconst m = mutObserver();\n\n\t\tif (m) {\n\t\t\tm.observe(slider.container, { childList: true });\n\t\t\tforceSliderRebuild();\n\t\t}\n\n\t\tonCleanup(() => {\n\t\t\tslider.destroy();\n\t\t\tif (m) m.disconnect();\n\t\t});\n\n\t\treturn slider;\n\t});\n\n\t// \"false\" is written from an effect, never from the memo's `onCleanup`. A\n\t// rebuild computes the new slider before the old one's `onCleanup` runs, so\n\t// a \"false\" written there landed after the new slider's \"true\" and left a\n\t// live slider marked as torn down. An effect's cleanup runs before its next\n\t// apply, so the order holds, and disposal still ends on \"false\".\n\tcreateGuardedEffect(slider, () => {\n\t\tprops.root.setAttribute(\"data-initialized\", \"true\");\n\t\treturn () => props.root.setAttribute(\"data-initialized\", \"false\");\n\t});\n\n\tfunction addPlugin(plugin: KeenSliderPlugin) {\n\t\tlet index = -1;\n\n\t\tsetPlugins((plugins) => {\n\t\t\tindex = plugins.length;\n\t\t\treturn [...plugins, plugin];\n\t\t});\n\n\t\treturn () => {\n\t\t\tsetPlugins((plugins) => {\n\t\t\t\treturn [...plugins.slice(0, index), ...plugins.slice(index + 1)];\n\t\t\t});\n\t\t};\n\t}\n\n\tconst centeredPlugin: KeenSliderPlugin = (slider) => {\n\t\tfunction centerSlides(slider: KeenSliderInstance) {\n\t\t\tif (slider.track.details.maxIdx > 0) {\n\t\t\t\t//@ts-expect-error\n\t\t\t\tslider.container.style.justifyContent = null;\n\t\t\t\t//@ts-expect-error\n\t\t\t\tslider.container.style.transform = null;\n\t\t\t} else {\n\t\t\t\tslider.container.style.cssText = `\n justify-content: center;\n transform: translateX(-${(slider.options.slides as any)?.spacing || 16}px)\n `;\n\t\t\t}\n\t\t}\n\n\t\tslider.on(\"created\", centerSlides);\n\t\tslider.on(\"optionsChanged\", centerSlides);\n\t};\n\n\tcreateGuardedEffect(\n\t\t() => props.centerSlides,\n\t\t(centerSlides) => {\n\t\t\tif (!centerSlides) return;\n\t\t\tconst remove = addPlugin(centeredPlugin);\n\t\t\treturn remove;\n\t\t},\n\t);\n\n\treturn [slider, { addPlugin }] as const;\n}\n\nconst KeenSliderContextState = createContext(initializeKeenSliderContext);\n\nexport const provideKeenSliderContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): KeenSliderContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(KeenSliderContextState, props, element);\n};\n\nexport const useKeenSliderContext = (context: KeenSliderContext) => {\n\treturn context;\n};\n\nexport const useKeenSlider = (element: HTMLElement & ICustomElement) => {\n\tconst context = consumeContext<KeenSliderContext>(\n\t\tKeenSliderContextState,\n\t\telement,\n\t);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"KeenSliderContext not found! Please ensure to wrap your custom element with keen-slider element.\",\n\t\t);\n\t}\n\n\treturn useKeenSliderContext(context);\n};\n\nexport const getKeenSliderContext = (element: Element) => {\n\tconst context = getContextFromProvider<KeenSliderContext>(\n\t\tKeenSliderContextState,\n\t\telement,\n\t);\n\treturn useKeenSliderContext(context);\n};\n\ntype AddPluginOptions = {\n\ttarget: void | HTMLElement;\n\tplugin: KeenSliderPlugin;\n\tcontroller?: AbortController;\n};\n\nexport function addPlugin({ target, plugin, controller }: AddPluginOptions) {\n\tif (!target) return;\n\n\tinvokeOnLoaded(\n\t\t() => {\n\t\t\tconst [_, { addPlugin }] = getKeenSliderContext(target);\n\t\t\tconst removePlugin = addPlugin(plugin);\n\t\t\tcontroller?.signal?.addEventListener(\"abort\", removePlugin);\n\t\t},\n\t\t{\n\t\t\tsignal: controller?.signal,\n\t\t},\n\t);\n}\n\nexport const useKeenSliderAt = createRemoteContext<KeenSliderContext>(\n\tKeenSliderContextState,\n\t{\n\t\t// A target may name the slider itself or an ancestor of it. Stated once\n\t\t// here instead of the identical ten-line thunk that was copy-pasted into\n\t\t// all six extension packages.\n\t\tresolve: (target, host) => {\n\t\t\tconst el = target ? document.querySelector(target) : host;\n\t\t\tif (!el) return null;\n\t\t\treturn el.tagName === \"KEEN-SLIDER\"\n\t\t\t\t? el\n\t\t\t\t: el.querySelector(\"keen-slider\");\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
|
+
"version": "3.4.0",
|
|
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.
|
|
23
|
+
"@brytdesigns/web-component-core": "3.4.0",
|
|
24
24
|
"component-register": "0.8.7",
|
|
25
25
|
"keen-slider": "^6.8.6",
|
|
26
26
|
"solid-js": "2.0.0-rc.14"
|
package/dist/esm/index.js
DELETED
|
@@ -1,307 +0,0 @@
|
|
|
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
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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"]}
|