@brytdesigns/web-component-keen-slider-navigation-arrows 1.1.9 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main/components/index.js +1 -4
- package/dist/main/components/keen-slider-navigation-arrows.js +144 -125
- package/dist/main/components/keen-slider-navigation-arrows.js.map +1 -1
- package/dist/main/index.d.ts +9 -1
- package/dist/main/index.js +12 -15
- package/dist/main/index.js.map +1 -1
- package/dist/main/utils.js +27 -28
- package/dist/main/utils.js.map +1 -1
- package/package.json +9 -9
- package/dist/esm/index.js +0 -194
- package/dist/esm/index.js.map +0 -1
- package/dist/main/components/index.js.map +0 -1
|
@@ -1,4 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
export { keenSliderNavigationArrows_js as KeenSliderNavigationArrows };
|
|
3
|
-
//# sourceMappingURL=index.js.map
|
|
4
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
import "./keen-slider-navigation-arrows.js";
|
|
@@ -1,128 +1,147 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
1
|
+
import { addHiddenStyles, addVisibleStyles, hasMoreSlides, isFirstSlide, isLastSlide, updateArrows } from "../utils.js";
|
|
2
|
+
import { createGuardedEffect, ensureId, srOnly } from "@brytdesigns/web-component-core/utils";
|
|
3
|
+
import { Show, createComponent, delegateEvents, effect, insert, readShallow, ref, setAttribute, style, template } from "@solidjs/web";
|
|
4
|
+
import { useKeenSliderAt } from "@brytdesigns/web-component-keen-slider";
|
|
5
|
+
import { createMemo, createSignal, untrack } from "solid-js";
|
|
6
|
+
//#region src/components/keen-slider-navigation-arrows.tsx
|
|
7
|
+
var _tmpl$ = /* @__PURE__ */ template(`<button class="keen-arrow keen-arrow--left"type=button><span>`);
|
|
8
|
+
var _tmpl$2 = /* @__PURE__ */ template(`<button class="keen-arrow keen-arrow--right"type=button><span>`);
|
|
9
|
+
var Name = `keen-slider-navigation-arrows`;
|
|
10
|
+
var Component = (props, { element }) => {
|
|
11
|
+
const debug = untrack(() => props.debug);
|
|
12
|
+
const [slider, setSlider] = createSignal(void 0, { ownedWrite: true });
|
|
13
|
+
const leftArrowTmpl = element.querySelector("template[prev-arrow]");
|
|
14
|
+
const rightArrowTmpl = element.querySelector("template[next-arrow]");
|
|
15
|
+
let leftArrow, rightArrow;
|
|
16
|
+
createGuardedEffect(slider, (slider) => {
|
|
17
|
+
if (!slider) return;
|
|
18
|
+
if (debug) console.log(`${Name}: Slider instantiated`, slider);
|
|
19
|
+
const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);
|
|
20
|
+
function hideAddIfDisabled(slider) {
|
|
21
|
+
if (slider.options?.disabled) return element.setAttribute("data-keen-slider-disabled", "true");
|
|
22
|
+
return element.removeAttribute("data-keen-slider-disabled");
|
|
23
|
+
}
|
|
24
|
+
function handleUpdate(slider) {
|
|
25
|
+
if (debug) console.log(`${Name}: Updating navigation arrows`, element);
|
|
26
|
+
hideAddIfDisabled(slider);
|
|
27
|
+
handleArrowsUpdate(slider);
|
|
28
|
+
if (!hasMoreSlides(slider)) {
|
|
29
|
+
if (debug) console.log(`${Name}: Hiding navigation arrows`, element);
|
|
30
|
+
addHiddenStyles(element);
|
|
31
|
+
} else {
|
|
32
|
+
if (debug) console.log(`${Name}: Showing navigation arrows`, element);
|
|
33
|
+
addVisibleStyles(element);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
slider.on("created", handleUpdate);
|
|
37
|
+
slider.on("slideChanged", handleUpdate);
|
|
38
|
+
slider.on("optionsChanged", handleUpdate);
|
|
39
|
+
slider.on("destroyed", handleUpdate);
|
|
40
|
+
return () => {
|
|
41
|
+
slider.on("created", handleUpdate, true);
|
|
42
|
+
slider.on("slideChanged", handleUpdate, true);
|
|
43
|
+
slider.on("optionsChanged", handleUpdate, true);
|
|
44
|
+
slider.on("destroyed", handleUpdate, true);
|
|
45
|
+
};
|
|
46
|
+
});
|
|
47
|
+
createGuardedEffect(slider, (slider) => {
|
|
48
|
+
if (slider && hasMoreSlides(slider)) return addVisibleStyles(element);
|
|
49
|
+
if (debug) console.log(`${Name}: Slider is undefined, hiding arrows`, element);
|
|
50
|
+
addHiddenStyles(element);
|
|
51
|
+
});
|
|
52
|
+
const sliderContext = useKeenSliderAt(() => props.target, element);
|
|
53
|
+
createGuardedEffect(sliderContext, (context) => {
|
|
54
|
+
const [_, { addPlugin }] = context;
|
|
55
|
+
return addPlugin((instance) => {
|
|
56
|
+
setSlider(instance);
|
|
57
|
+
instance.on("destroyed", () => {
|
|
58
|
+
if (untrack(slider) !== instance) return;
|
|
59
|
+
setSlider(void 0);
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
function handlePrev(event) {
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
const s = slider();
|
|
66
|
+
if (!s) return;
|
|
67
|
+
s.prev();
|
|
68
|
+
}
|
|
69
|
+
function handleNext(event) {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
const s = slider();
|
|
72
|
+
if (!s) return;
|
|
73
|
+
if (isLastSlide(s)) return;
|
|
74
|
+
s.next();
|
|
75
|
+
}
|
|
76
|
+
const controls = createMemo(() => {
|
|
77
|
+
const s = slider();
|
|
78
|
+
return s ? ensureId(s.container, "keen-slider") : void 0;
|
|
79
|
+
});
|
|
80
|
+
element.replaceChildren(...[]);
|
|
81
|
+
return [(() => {
|
|
82
|
+
var _el$ = _tmpl$();
|
|
83
|
+
var _el$2 = _el$.firstChild;
|
|
84
|
+
_el$._$$click = (e) => handlePrev(e);
|
|
85
|
+
ref(() => {
|
|
86
|
+
return (el) => {
|
|
87
|
+
leftArrow = el;
|
|
88
|
+
};
|
|
89
|
+
}, _el$);
|
|
90
|
+
insert(_el$2, () => {
|
|
91
|
+
return props.prevLabel;
|
|
92
|
+
});
|
|
93
|
+
insert(_el$, createComponent(Show, {
|
|
94
|
+
when: leftArrowTmpl,
|
|
95
|
+
get children() {
|
|
96
|
+
return leftArrowTmpl?.content.cloneNode(true);
|
|
97
|
+
}
|
|
98
|
+
}), null);
|
|
99
|
+
effect(() => {
|
|
100
|
+
return {
|
|
101
|
+
e: slider() && isFirstSlide(slider()) ? "true" : "false",
|
|
102
|
+
t: controls(),
|
|
103
|
+
a: readShallow(srOnly)
|
|
104
|
+
};
|
|
105
|
+
}, ({ e, t, a }, _p$) => {
|
|
106
|
+
e !== _p$?.e && setAttribute(_el$, "aria-disabled", e);
|
|
107
|
+
t !== _p$?.t && setAttribute(_el$, "aria-controls", t);
|
|
108
|
+
style(_el$2, a, _p$?.a);
|
|
109
|
+
});
|
|
110
|
+
return _el$;
|
|
111
|
+
})(), (() => {
|
|
112
|
+
var _el$3 = _tmpl$2();
|
|
113
|
+
var _el$4 = _el$3.firstChild;
|
|
114
|
+
_el$3._$$click = (e) => handleNext(e);
|
|
115
|
+
ref(() => {
|
|
116
|
+
return (el) => {
|
|
117
|
+
rightArrow = el;
|
|
118
|
+
};
|
|
119
|
+
}, _el$3);
|
|
120
|
+
insert(_el$4, () => {
|
|
121
|
+
return props.nextLabel;
|
|
122
|
+
});
|
|
123
|
+
insert(_el$3, createComponent(Show, {
|
|
124
|
+
when: rightArrowTmpl,
|
|
125
|
+
get children() {
|
|
126
|
+
return rightArrowTmpl?.content.cloneNode(true);
|
|
127
|
+
}
|
|
128
|
+
}), null);
|
|
129
|
+
effect(() => {
|
|
130
|
+
return {
|
|
131
|
+
e: slider() && isLastSlide(slider()) ? "true" : "false",
|
|
132
|
+
t: controls(),
|
|
133
|
+
a: readShallow(srOnly)
|
|
134
|
+
};
|
|
135
|
+
}, ({ e, t, a }, _p$) => {
|
|
136
|
+
e !== _p$?.e && setAttribute(_el$3, "aria-disabled", e);
|
|
137
|
+
t !== _p$?.t && setAttribute(_el$3, "aria-controls", t);
|
|
138
|
+
style(_el$4, a, _p$?.a);
|
|
139
|
+
});
|
|
140
|
+
return _el$3;
|
|
141
|
+
})()];
|
|
124
142
|
};
|
|
125
|
-
|
|
143
|
+
delegateEvents(["click"]);
|
|
144
|
+
//#endregion
|
|
126
145
|
export { Component, Name };
|
|
127
|
-
|
|
146
|
+
|
|
128
147
|
//# sourceMappingURL=keen-slider-navigation-arrows.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"keen-slider-navigation-arrows.js","names":["ref={(el: HTMLElement) => {\n\t\t\t\t\tleftArrow = el;\n\t\t\t\t}}","<Show when={leftArrowTmpl}>\n\t\t\t\t\t{leftArrowTmpl?.content.cloneNode(true)}\n\t\t\t\t</Show>","when={leftArrowTmpl}","aria-controls={controls()}","style={srOnly}","ref={(el: HTMLElement) => {\n\t\t\t\t\trightArrow = el;\n\t\t\t\t}}","<Show when={rightArrowTmpl}>\n\t\t\t\t\t{rightArrowTmpl?.content.cloneNode(true)}\n\t\t\t\t</Show>","when={rightArrowTmpl}"],"sources":["../../../src/components/keen-slider-navigation-arrows.tsx"],"sourcesContent":["import {\n\ttype CorrectComponentType,\n\tcreateGuardedEffect,\n\tensureId,\n\tsrOnly,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\ttype KeenSliderInstance,\n\tuseKeenSliderAt,\n} from \"@brytdesigns/web-component-keen-slider\";\nimport { Show } from \"@solidjs/web\";\nimport { createMemo, createSignal, onCleanup, untrack } from \"solid-js\";\n\nimport {\n\taddHiddenStyles,\n\taddVisibleStyles,\n\thasMoreSlides,\n\tisFirstSlide,\n\tisLastSlide,\n\tupdateArrows,\n} from \"../utils.js\";\n\nexport type Props = {\n\ttarget: string;\n\t/** Accessible name for the previous control. Translate per storefront. */\n\tprevLabel: string;\n\t/** Accessible name for the next control. */\n\tnextLabel: string;\n\tdebug?: boolean;\n};\n\nexport const Name = `keen-slider-navigation-arrows`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\t// `debug` is a mount-time switch; snapshot it rather than tracking.\n\tconst debug = untrack(() => props.debug);\n\t// Written from inside an owned scope (a keen-slider plugin callback\n\t// running within an effect's apply). v2 forbids that by default; this is\n\t// component-internal state, which is what `ownedWrite` is the opt-in for.\n\tconst [slider, setSlider] = createSignal<KeenSliderInstance | undefined>(\n\t\tundefined,\n\t\t{ ownedWrite: true },\n\t);\n\tconst leftArrowTmpl = element.querySelector<HTMLTemplateElement>(\n\t\t\"template[prev-arrow]\",\n\t);\n\tconst rightArrowTmpl = element.querySelector<HTMLTemplateElement>(\n\t\t\"template[next-arrow]\",\n\t);\n\n\tlet leftArrow: HTMLElement, rightArrow: HTMLElement;\n\n\tcreateGuardedEffect(slider, (slider) => {\n\t\tif (!slider) return;\n\t\tif (debug) console.log(`${Name}: Slider instantiated`, slider);\n\n\t\tconst handleArrowsUpdate = updateArrows(leftArrow, rightArrow);\n\n\t\tfunction hideAddIfDisabled(slider: KeenSliderInstance) {\n\t\t\tif (slider.options?.disabled)\n\t\t\t\treturn element.setAttribute(\"data-keen-slider-disabled\", \"true\");\n\t\t\treturn element.removeAttribute(\"data-keen-slider-disabled\");\n\t\t}\n\n\t\tfunction handleUpdate(slider: KeenSliderInstance) {\n\t\t\tif (debug) console.log(`${Name}: Updating navigation arrows`, element);\n\t\t\thideAddIfDisabled(slider);\n\t\t\thandleArrowsUpdate(slider);\n\t\t\tif (!hasMoreSlides(slider)) {\n\t\t\t\tif (debug) console.log(`${Name}: Hiding navigation arrows`, element);\n\t\t\t\taddHiddenStyles(element);\n\t\t\t} else {\n\t\t\t\tif (debug) console.log(`${Name}: Showing navigation arrows`, element);\n\t\t\t\taddVisibleStyles(element);\n\t\t\t}\n\t\t}\n\n\t\tslider.on(\"created\", handleUpdate);\n\t\tslider.on(\"slideChanged\", handleUpdate);\n\t\tslider.on(\"optionsChanged\", handleUpdate);\n\t\tslider.on(\"destroyed\", handleUpdate);\n\n\t\treturn () => {\n\t\t\tslider.on(\"created\", handleUpdate, true);\n\t\t\tslider.on(\"slideChanged\", handleUpdate, true);\n\t\t\tslider.on(\"optionsChanged\", handleUpdate, true);\n\t\t\tslider.on(\"destroyed\", handleUpdate, true);\n\t\t};\n\t});\n\n\tcreateGuardedEffect(slider, (slider) => {\n\t\tif (slider && hasMoreSlides(slider)) return addVisibleStyles(element);\n\t\tif (debug)\n\t\t\tconsole.log(`${Name}: Slider is undefined, hiding arrows`, element);\n\t\taddHiddenStyles(element);\n\t});\n\n\tconst sliderContext = useKeenSliderAt(() => props.target, element);\n\n\tcreateGuardedEffect(sliderContext, (context) => {\n\t\tconst [_, { addPlugin }] = context;\n\t\tconst removePlugin = addPlugin((instance) => {\n\t\t\tsetSlider(instance);\n\t\t\t// Adding any plugin rebuilds the slider — it is a memo over\n\t\t\t// `plugins()` — and the *new* instance's plugins run before the\n\t\t\t// previous instance's cleanup, so without this guard a later\n\t\t\t// extension's mount fires this for an instance already replaced and\n\t\t\t// wipes state belonging to the live one.\n\t\t\tinstance.on(\"destroyed\", () => {\n\t\t\t\tif (untrack(slider) !== instance) return;\n\t\t\t\tsetSlider(undefined);\n\t\t\t});\n\t\t});\n\n\t\t// The apply phase is not a computation, so `onCleanup` here never\n\t\t// registers. Its return value IS the cleanup.\n\t\treturn removePlugin;\n\t});\n\n\tfunction handlePrev(event: Event) {\n\t\tevent.preventDefault();\n\n\t\tconst s = slider();\n\t\tif (!s) return;\n\n\t\ts.prev();\n\t}\n\n\tfunction handleNext(event: Event) {\n\t\tevent.preventDefault();\n\n\t\tconst s = slider();\n\n\t\tif (!s) return;\n\t\tif (isLastSlide(s)) return;\n\t\ts.next();\n\t}\n\n\t// Names the slider these arrows drive, so a screen reader can tell which\n\t// carousel a control belongs to on a page carrying several.\n\tconst controls = createMemo(() => {\n\t\tconst s = slider();\n\t\treturn s ? ensureId(s.container, \"keen-slider\") : undefined;\n\t});\n\n\telement.replaceChildren(...[]);\n\n\treturn (\n\t\t<>\n\t\t\t<button\n\t\t\t\tclass=\"keen-arrow keen-arrow--left\"\n\t\t\t\t// `aria-disabled`, not `disabled`: a disabled button drops out of the\n\t\t\t\t// tab order, so reaching the last slide silently moved focus to\n\t\t\t\t// <body> for anyone navigating by keyboard.\n\t\t\t\taria-disabled={slider() && isFirstSlide(slider()!) ? \"true\" : \"false\"}\n\t\t\t\taria-controls={controls()}\n\t\t\t\tref={(el: HTMLElement) => {\n\t\t\t\t\tleftArrow = el;\n\t\t\t\t}}\n\t\t\t\tonClick={(e: Event) => handlePrev(e)}\n\t\t\t\ttype=\"button\"\n\t\t\t>\n\t\t\t\t<span style={srOnly}>{props.prevLabel}</span>\n\t\t\t\t<Show when={leftArrowTmpl}>\n\t\t\t\t\t{leftArrowTmpl?.content.cloneNode(true)}\n\t\t\t\t</Show>\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\tclass=\"keen-arrow keen-arrow--right\"\n\t\t\t\tref={(el: HTMLElement) => {\n\t\t\t\t\trightArrow = el;\n\t\t\t\t}}\n\t\t\t\taria-disabled={slider() && isLastSlide(slider()!) ? \"true\" : \"false\"}\n\t\t\t\taria-controls={controls()}\n\t\t\t\tonClick={(e: Event) => handleNext(e)}\n\t\t\t\ttype=\"button\"\n\t\t\t>\n\t\t\t\t<span style={srOnly}>{props.nextLabel}</span>\n\t\t\t\t<Show when={rightArrowTmpl}>\n\t\t\t\t\t{rightArrowTmpl?.content.cloneNode(true)}\n\t\t\t\t</Show>\n\t\t\t</button>\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;;AA+BA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAE7E,MAAM,QAAQ,cAAc,MAAM,KAAK;CAIvC,MAAM,CAAC,QAAQ,aAAa,aAC3B,KAAA,GACA,EAAE,YAAY,KAAK,CACpB;CACA,MAAM,gBAAgB,QAAQ,cAC7B,sBACD;CACA,MAAM,iBAAiB,QAAQ,cAC9B,sBACD;CAEA,IAAI,WAAwB;CAE5B,oBAAoB,SAAS,WAAW;EACvC,IAAI,CAAC,QAAQ;EACb,IAAI,OAAO,QAAQ,IAAI,GAAG,KAAK,wBAAwB,MAAM;EAE7D,MAAM,qBAAqB,aAAa,WAAW,UAAU;EAE7D,SAAS,kBAAkB,QAA4B;GACtD,IAAI,OAAO,SAAS,UACnB,OAAO,QAAQ,aAAa,6BAA6B,MAAM;GAChE,OAAO,QAAQ,gBAAgB,2BAA2B;EAC3D;EAEA,SAAS,aAAa,QAA4B;GACjD,IAAI,OAAO,QAAQ,IAAI,GAAG,KAAK,+BAA+B,OAAO;GACrE,kBAAkB,MAAM;GACxB,mBAAmB,MAAM;GACzB,IAAI,CAAC,cAAc,MAAM,GAAG;IAC3B,IAAI,OAAO,QAAQ,IAAI,GAAG,KAAK,6BAA6B,OAAO;IACnE,gBAAgB,OAAO;GACxB,OAAO;IACN,IAAI,OAAO,QAAQ,IAAI,GAAG,KAAK,8BAA8B,OAAO;IACpE,iBAAiB,OAAO;GACzB;EACD;EAEA,OAAO,GAAG,WAAW,YAAY;EACjC,OAAO,GAAG,gBAAgB,YAAY;EACtC,OAAO,GAAG,kBAAkB,YAAY;EACxC,OAAO,GAAG,aAAa,YAAY;EAEnC,aAAa;GACZ,OAAO,GAAG,WAAW,cAAc,IAAI;GACvC,OAAO,GAAG,gBAAgB,cAAc,IAAI;GAC5C,OAAO,GAAG,kBAAkB,cAAc,IAAI;GAC9C,OAAO,GAAG,aAAa,cAAc,IAAI;EAC1C;CACD,CAAC;CAED,oBAAoB,SAAS,WAAW;EACvC,IAAI,UAAU,cAAc,MAAM,GAAG,OAAO,iBAAiB,OAAO;EACpE,IAAI,OACH,QAAQ,IAAI,GAAG,KAAK,uCAAuC,OAAO;EACnE,gBAAgB,OAAO;CACxB,CAAC;CAED,MAAM,gBAAgB,sBAAsB,MAAM,QAAQ,OAAO;CAEjE,oBAAoB,gBAAgB,YAAY;EAC/C,MAAM,CAAC,GAAG,EAAE,eAAe;EAgB3B,OAfqB,WAAW,aAAa;GAC5C,UAAU,QAAQ;GAMlB,SAAS,GAAG,mBAAmB;IAC9B,IAAI,QAAQ,MAAM,MAAM,UAAU;IAClC,UAAU,KAAA,CAAS;GACpB,CAAC;EACF,CAIO;CACR,CAAC;CAED,SAAS,WAAW,OAAc;EACjC,MAAM,eAAe;EAErB,MAAM,IAAI,OAAO;EACjB,IAAI,CAAC,GAAG;EAER,EAAE,KAAK;CACR;CAEA,SAAS,WAAW,OAAc;EACjC,MAAM,eAAe;EAErB,MAAM,IAAI,OAAO;EAEjB,IAAI,CAAC,GAAG;EACR,IAAI,YAAY,CAAC,GAAG;EACpB,EAAE,KAAK;CACR;CAIA,MAAM,WAAW,iBAAiB;EACjC,MAAM,IAAI,OAAO;EACjB,OAAO,IAAI,SAAS,EAAE,WAAW,aAAa,IAAI,KAAA;CACnD,CAAC;CAED,QAAQ,gBAAgB,GAAG,CAAC,CAAC;CAE7B,OACG,QACD;EAiBQ,IAAA,OAAA,OAAA;EAJP,IAAA,QAAA,KAAA;EAHA,KAAA,YAAU,MAAa,WAAW,CAAC;EAHnC,UAAA;GAAM,QAAA,OAAoB;IACzB,YAAY;GACb;EAAC,GAFDA,IAEC;EAID,OAAA,aAAqB;GAAC,OAAA,MAAM;EAAS,CAAO;EAb7C,OAAA,MAcCC,gBAAAA,MAAAA;GAAMC,MAAM;GAAZ,IAAA,WAAA;IACE,OAAA,eAAe,QAAQ,UAAU,IAAI;GACjC;EAhBP,CAAA,GAAA,IAiBQ;EAZP,aAAA;;IAAe,GAAA,OAAO,KAAK,aAAa,OAAO,CAAE,IAAI,SAAS;IAC9DC,GAAe,SAAS;IAOlBC,GAAAA,YAAO,MAAM;GARkD;EAArE,IAAA,EAAA,GAAA,GAAA,KAAA,QAAA;GAAqE,MAAA,KAAA,KAAA,aAAA,MAAA,iBAAA,CAAA;GACrE,MAAA,KAAA,KAAA,aAAA,MAAA,iBAAA,CAAyB;GAOnB,MAAA,OAAA,GAAA,KAAA,CAAa;EARkD,CAAA;EALtE,OAAA;CAiBQ,EAAA,CAAA,UACR;EAcQ,IAAA,QAAA,QAAA;EAJP,IAAA,QAAA,MAAA;EAHA,MAAA,YAAU,MAAa,WAAW,CAAC;EALnC,UAAA;GAAM,QAAA,OAAoB;IACzB,aAAa;GACd;EAAC,GAFDC,KAEC;EAMD,OAAA,aAAqB;GAAC,OAAA,MAAM;EAAS,CAAO;EAV7C,OAAA,OAWCC,gBAAAA,MAAAA;GAAMC,MAAM;GAAZ,IAAA,WAAA;IACE,OAAA,gBAAgB,QAAQ,UAAU,IAAI;GAClC;EAbP,CAAA,GAAA,IAcQ;EATP,aAAA;;IAAe,GAAA,OAAO,KAAK,YAAY,OAAO,CAAE,IAAI,SAAS;IAC7DJ,GAAe,SAAS;IAIlBC,GAAAA,YAAO,MAAM;GALiD;EAApE,IAAA,EAAA,GAAA,GAAA,KAAA,QAAA;GAAoE,MAAA,KAAA,KAAA,aAAA,OAAA,iBAAA,CAAA;GACpE,MAAA,KAAA,KAAA,aAAA,OAAA,iBAAA,CAAyB;GAInB,MAAA,OAAA,GAAA,KAAA,CAAa;EALiD,CAAA;EALrE,OAAA;CAcQ,EAAA,CAAA,CAhCT;AAmCF"}
|
package/dist/main/index.d.ts
CHANGED
|
@@ -2,13 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
import { ICustomElement } from 'component-register';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* `component-register` types `options.element` as a bare `ICustomElement`, but
|
|
7
|
+
* at runtime it is always also an `HTMLElement`. Every component in this repo
|
|
8
|
+
* needs the DOM half.
|
|
9
|
+
*/
|
|
5
10
|
export type CorrectComponentOptions = {
|
|
6
11
|
element: HTMLElement & ICustomElement;
|
|
7
12
|
};
|
|
8
13
|
export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
|
|
9
14
|
export type Props = {
|
|
10
15
|
target: string;
|
|
11
|
-
|
|
16
|
+
/** Accessible name for the previous control. Translate per storefront. */
|
|
17
|
+
prevLabel: string;
|
|
18
|
+
/** Accessible name for the next control. */
|
|
19
|
+
nextLabel: string;
|
|
12
20
|
debug?: boolean;
|
|
13
21
|
};
|
|
14
22
|
declare const Name = "keen-slider-navigation-arrows";
|
package/dist/main/index.js
CHANGED
|
@@ -1,17 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { initializeClasses } from "./utils.js";
|
|
2
|
+
import { Component, Name } from "./components/keen-slider-navigation-arrows.js";
|
|
3
|
+
import "./components/index.js";
|
|
4
|
+
import { customShadowlessElement } from "@brytdesigns/web-component-core/utils";
|
|
5
|
+
//#region src/index.ts
|
|
6
|
+
customShadowlessElement(Name, {
|
|
7
|
+
target: "",
|
|
8
|
+
prevLabel: "Previous slide",
|
|
9
|
+
nextLabel: "Next slide",
|
|
10
|
+
debug: false
|
|
11
|
+
}, Component, initializeClasses);
|
|
12
|
+
//#endregion
|
|
4
13
|
|
|
5
|
-
customShadowlessElement(
|
|
6
|
-
KeenSliderNavigationArrows.Name,
|
|
7
|
-
{
|
|
8
|
-
class: "",
|
|
9
|
-
target: "",
|
|
10
|
-
debug: false
|
|
11
|
-
},
|
|
12
|
-
correctElementType(KeenSliderNavigationArrows.Component),
|
|
13
|
-
//@ts-ignore
|
|
14
|
-
initializeClasses
|
|
15
|
-
);
|
|
16
|
-
//# sourceMappingURL=index.js.map
|
|
17
14
|
//# sourceMappingURL=index.js.map
|
package/dist/main/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["import { customShadowlessElement } from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\n\nexport type KeenSliderNavigationArrowsProps = KeenSliderNavigationArrows.Props;\n\ncustomShadowlessElement(\n\tKeenSliderNavigationArrows.Name,\n\t{\n\t\t// `class` is deliberately NOT registered. Nothing reads `props.class`,\n\t\t// and registering it makes `class` an observed attribute — so the\n\t\t// `classList.add` in `initializeClasses` round-trips back into a signal\n\t\t// write, inside the component's own owned scope, which Solid 2 forbids.\n\t\ttarget: \"\",\n\t\tprevLabel: \"Previous slide\",\n\t\tnextLabel: \"Next slide\",\n\t\tdebug: false,\n\t},\n\tKeenSliderNavigationArrows.Component,\n\t// `initializeClasses` declares its own Options type rather than core's\n\t// ComponentOptions; pre-existing mismatch, unrelated to the prop change.\n\t//@ts-expect-error\n\tinitializeClasses,\n);\n"],"mappings":";;;;;AAMA,wBACC,MACA;CAKC,QAAQ;CACR,WAAW;CACX,WAAW;CACX,OAAO;AACR,GACA,WAIA,iBACD"}
|
package/dist/main/utils.js
CHANGED
|
@@ -1,43 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/utils.ts
|
|
2
2
|
function hasMoreSlides(slider) {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
if (slider.options?.loop) return slider.slides.length > 1;
|
|
4
|
+
return slider.track.details.maxIdx > 0;
|
|
5
5
|
}
|
|
6
6
|
function updateArrows(leftArrow, rightArrow) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
return (slider) => {
|
|
8
|
+
if (!leftArrow || !rightArrow) return;
|
|
9
|
+
const isFirst = isFirstSlide(slider), isLast = isLastSlide(slider);
|
|
10
|
+
isFirst ? leftArrow.classList.add("keen-arrow--disabled") : leftArrow.classList.remove("keen-arrow--disabled");
|
|
11
|
+
leftArrow.setAttribute("aria-disabled", `${isFirst}`);
|
|
12
|
+
isLast ? rightArrow.classList.add("keen-arrow--disabled") : rightArrow.classList.remove("keen-arrow--disabled");
|
|
13
|
+
rightArrow.setAttribute("aria-disabled", `${isLast}`);
|
|
14
|
+
};
|
|
15
15
|
}
|
|
16
16
|
function isFirstSlide(slider) {
|
|
17
|
-
|
|
17
|
+
return slider.track.details.rel === 0 && !slider.options?.loop;
|
|
18
18
|
}
|
|
19
19
|
function isLastSlide(slider) {
|
|
20
|
-
|
|
20
|
+
return slider.track.details.rel === slider.track.details.maxIdx && !slider.options?.loop;
|
|
21
21
|
}
|
|
22
22
|
function addHiddenStyles(element) {
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
element.style.setProperty("visibility", "hidden", "important");
|
|
24
|
+
element.style.setProperty("opacity", "0", "important");
|
|
25
25
|
}
|
|
26
26
|
function addVisibleStyles(element) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
element.style.display = null;
|
|
28
|
+
element.style.visibility = null;
|
|
29
|
+
element.style.opacity = null;
|
|
30
30
|
}
|
|
31
|
-
function initializeClasses(ComponentType = (props, options) => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
};
|
|
31
|
+
function initializeClasses(ComponentType = (props, options) => {}) {
|
|
32
|
+
return (props, options) => {
|
|
33
|
+
const { element } = options;
|
|
34
|
+
element.classList.add("keen-arrows");
|
|
35
|
+
addHiddenStyles(element);
|
|
36
|
+
return ComponentType(props, options);
|
|
37
|
+
};
|
|
39
38
|
}
|
|
39
|
+
//#endregion
|
|
40
|
+
export { addHiddenStyles, addVisibleStyles, hasMoreSlides, initializeClasses, isFirstSlide, isLastSlide, updateArrows };
|
|
40
41
|
|
|
41
|
-
export { addHiddenStyles, addVisibleStyles, hasMoreSlides, initializeClasses, isFirstSlide, isLastSlide, srOnly, updateArrows };
|
|
42
|
-
//# sourceMappingURL=utils.js.map
|
|
43
42
|
//# sourceMappingURL=utils.js.map
|
package/dist/main/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../src/utils.ts"],"sourcesContent":["import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\n\nexport function hasMoreSlides(slider: KeenSliderInstance) {\n\t// In loop mode, keen-slider sets track.details.maxIdx to Infinity even when\n\t// there is only a single slide, so `maxIdx > 0` falsely reports \"more slides\".\n\tif (slider.options?.loop) return slider.slides.length > 1;\n\treturn slider.track.details.maxIdx > 0;\n}\n\nexport function updateArrows(leftArrow: HTMLElement, rightArrow: HTMLElement) {\n\treturn (slider: KeenSliderInstance) => {\n\t\tif (!leftArrow || !rightArrow) return;\n\t\tconst isFirst = isFirstSlide(slider),\n\t\t\tisLast = isLastSlide(slider);\n\n\t\tisFirst\n\t\t\t? leftArrow.classList.add(\"keen-arrow--disabled\")\n\t\t\t: leftArrow.classList.remove(\"keen-arrow--disabled\");\n\t\tleftArrow.setAttribute(\"aria-disabled\", `${isFirst}`);\n\t\tisLast\n\t\t\t? rightArrow.classList.add(\"keen-arrow--disabled\")\n\t\t\t: rightArrow.classList.remove(\"keen-arrow--disabled\");\n\t\trightArrow.setAttribute(\"aria-disabled\", `${isLast}`);\n\t};\n}\n\nexport function isFirstSlide(slider: KeenSliderInstance) {\n\treturn slider.track.details.rel === 0 && !slider.options?.loop;\n}\n\nexport function isLastSlide(slider: KeenSliderInstance) {\n\treturn (\n\t\tslider.track.details.rel === slider.track.details.maxIdx &&\n\t\t!slider.options?.loop\n\t);\n}\n\nexport function addHiddenStyles(element: HTMLElement) {\n\telement.style.setProperty(\"visibility\", \"hidden\", \"important\");\n\telement.style.setProperty(\"opacity\", \"0\", \"important\");\n}\n\nexport function addVisibleStyles(element: HTMLElement) {\n\t//@ts-expect-error\n\telement.style.display = null;\n\t//@ts-expect-error\n\telement.style.visibility = null;\n\t//@ts-expect-error\n\telement.style.opacity = null;\n}\n\ntype Options = {\n\telement: HTMLElement & ICustomElement;\n};\n\nexport function initializeClasses<Props>(\n\tComponentType = (props: Props, options: Options) => {},\n) {\n\treturn (props: Props, options: Options) => {\n\t\tconst { element } = options;\n\t\telement.classList.add(\"keen-arrows\");\n\t\taddHiddenStyles(element);\n\t\treturn ComponentType(props, options);\n\t};\n}\n"],"mappings":";AAGA,SAAgB,cAAc,QAA4B;CAGzD,IAAI,OAAO,SAAS,MAAM,OAAO,OAAO,OAAO,SAAS;CACxD,OAAO,OAAO,MAAM,QAAQ,SAAS;AACtC;AAEA,SAAgB,aAAa,WAAwB,YAAyB;CAC7E,QAAQ,WAA+B;EACtC,IAAI,CAAC,aAAa,CAAC,YAAY;EAC/B,MAAM,UAAU,aAAa,MAAM,GAClC,SAAS,YAAY,MAAM;EAE5B,UACG,UAAU,UAAU,IAAI,sBAAsB,IAC9C,UAAU,UAAU,OAAO,sBAAsB;EACpD,UAAU,aAAa,iBAAiB,GAAG,SAAS;EACpD,SACG,WAAW,UAAU,IAAI,sBAAsB,IAC/C,WAAW,UAAU,OAAO,sBAAsB;EACrD,WAAW,aAAa,iBAAiB,GAAG,QAAQ;CACrD;AACD;AAEA,SAAgB,aAAa,QAA4B;CACxD,OAAO,OAAO,MAAM,QAAQ,QAAQ,KAAK,CAAC,OAAO,SAAS;AAC3D;AAEA,SAAgB,YAAY,QAA4B;CACvD,OACC,OAAO,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,UAClD,CAAC,OAAO,SAAS;AAEnB;AAEA,SAAgB,gBAAgB,SAAsB;CACrD,QAAQ,MAAM,YAAY,cAAc,UAAU,WAAW;CAC7D,QAAQ,MAAM,YAAY,WAAW,KAAK,WAAW;AACtD;AAEA,SAAgB,iBAAiB,SAAsB;CAEtD,QAAQ,MAAM,UAAU;CAExB,QAAQ,MAAM,aAAa;CAE3B,QAAQ,MAAM,UAAU;AACzB;AAMA,SAAgB,kBACf,iBAAiB,OAAc,YAAqB,CAAC,GACpD;CACD,QAAQ,OAAc,YAAqB;EAC1C,MAAM,EAAE,YAAY;EACpB,QAAQ,UAAU,IAAI,aAAa;EACnC,gBAAgB,OAAO;EACvB,OAAO,cAAc,OAAO,OAAO;CACpC;AACD"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-keen-slider-navigation-arrows",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "Keen slider navigation arrows web component",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
11
|
"types": "./dist/main/index.d.ts",
|
|
12
|
-
"
|
|
12
|
+
"default": "./dist/main/index.js"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
@@ -19,18 +19,18 @@
|
|
|
19
19
|
"author": "Bryt Designs",
|
|
20
20
|
"license": "ISC",
|
|
21
21
|
"dependencies": {
|
|
22
|
+
"@brytdesigns/web-component-core": "3.0.0",
|
|
23
|
+
"@brytdesigns/web-component-keen-slider": "3.0.0",
|
|
24
|
+
"@solidjs/web": "2.0.0-rc.14",
|
|
22
25
|
"component-register": "0.8.7",
|
|
23
|
-
"solid-
|
|
24
|
-
"solid-js": "^1.9.9",
|
|
25
|
-
"@brytdesigns/web-component-core": "1.1.6",
|
|
26
|
-
"@brytdesigns/web-component-keen-slider": "1.2.2"
|
|
26
|
+
"solid-js": "2.0.0-rc.14"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
29
|
+
"@repo/vite-config": "0.0.0",
|
|
30
|
+
"vite": "^8.2.2"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
|
-
"build": "
|
|
33
|
+
"build": "vite build",
|
|
34
34
|
"typecheck": "tsc --noEmit"
|
|
35
35
|
}
|
|
36
36
|
}
|
package/dist/esm/index.js
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-core/utils';
|
|
2
|
-
import html from 'solid-js/html';
|
|
3
|
-
import { createSignal, createEffect, on, onCleanup, Show } from 'solid-js';
|
|
4
|
-
import { withKeenSliderElementContext } from '@brytdesigns/web-component-keen-slider';
|
|
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-navigation-arrows.ts
|
|
13
|
-
var keen_slider_navigation_arrows_exports = {};
|
|
14
|
-
__export(keen_slider_navigation_arrows_exports, {
|
|
15
|
-
Component: () => Component,
|
|
16
|
-
Name: () => Name
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
// src/utils.ts
|
|
20
|
-
var srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;
|
|
21
|
-
function hasMoreSlides(slider) {
|
|
22
|
-
if (slider.options?.loop) return slider.slides.length > 1;
|
|
23
|
-
return slider.track.details.maxIdx > 0;
|
|
24
|
-
}
|
|
25
|
-
function updateArrows(leftArrow, rightArrow) {
|
|
26
|
-
return function(slider) {
|
|
27
|
-
if (!leftArrow || !rightArrow) return;
|
|
28
|
-
const isFirst = isFirstSlide(slider), isLast = isLastSlide(slider);
|
|
29
|
-
isFirst ? leftArrow.classList.add("keen-arrow--disabled") : leftArrow.classList.remove("keen-arrow--disabled");
|
|
30
|
-
isFirst ? leftArrow.setAttribute("disabled", "true") : leftArrow.removeAttribute("disabled");
|
|
31
|
-
isLast ? rightArrow.classList.add("keen-arrow--disabled") : rightArrow.classList.remove("keen-arrow--disabled");
|
|
32
|
-
isLast ? rightArrow.setAttribute("disabled", "true") : rightArrow.removeAttribute("disabled");
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
function isFirstSlide(slider) {
|
|
36
|
-
return slider.track.details.rel === 0 && !slider.options?.loop;
|
|
37
|
-
}
|
|
38
|
-
function isLastSlide(slider) {
|
|
39
|
-
return slider.track.details.rel === slider.track.details.maxIdx && !slider.options?.loop;
|
|
40
|
-
}
|
|
41
|
-
function addHiddenStyles(element) {
|
|
42
|
-
element.style.setProperty("visibility", "hidden", "important");
|
|
43
|
-
element.style.setProperty("opacity", "0", "important");
|
|
44
|
-
}
|
|
45
|
-
function addVisibleStyles(element) {
|
|
46
|
-
element.style.display = null;
|
|
47
|
-
element.style.visibility = null;
|
|
48
|
-
element.style.opacity = null;
|
|
49
|
-
}
|
|
50
|
-
function initializeClasses(ComponentType = (props, options) => {
|
|
51
|
-
}) {
|
|
52
|
-
return (props, options) => {
|
|
53
|
-
const { element } = options;
|
|
54
|
-
element.classList.add("keen-arrows");
|
|
55
|
-
addHiddenStyles(element);
|
|
56
|
-
return ComponentType(props, options);
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// src/components/keen-slider-navigation-arrows.ts
|
|
61
|
-
var Name = `keen-slider-navigation-arrows`;
|
|
62
|
-
var Component = (props, { element }) => {
|
|
63
|
-
if (!props.target)
|
|
64
|
-
return console.warn(
|
|
65
|
-
`${Name}: Needs a proper target in order to properly extend a keen slider.`
|
|
66
|
-
);
|
|
67
|
-
const [slider, setSlider] = createSignal();
|
|
68
|
-
const leftArrowTmpl = element.querySelector(
|
|
69
|
-
"template[prev-arrow]"
|
|
70
|
-
);
|
|
71
|
-
const rightArrowTmpl = element.querySelector(
|
|
72
|
-
"template[next-arrow]"
|
|
73
|
-
);
|
|
74
|
-
let leftArrow, rightArrow;
|
|
75
|
-
createEffect(
|
|
76
|
-
on(slider, (slider2) => {
|
|
77
|
-
if (!slider2) return;
|
|
78
|
-
if (props.debug) console.log(`${Name}: Slider instantiated`, slider2);
|
|
79
|
-
const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);
|
|
80
|
-
function hideAddIfDisabled(slider3) {
|
|
81
|
-
if (slider3.options?.disabled)
|
|
82
|
-
return element.setAttribute("data-keen-slider-disabled", "true");
|
|
83
|
-
return element.removeAttribute("data-keen-slider-disabled");
|
|
84
|
-
}
|
|
85
|
-
function handleUpdate(slider3) {
|
|
86
|
-
if (props.debug)
|
|
87
|
-
console.log(`${Name}: Updating navigation arrows`, element);
|
|
88
|
-
hideAddIfDisabled(slider3);
|
|
89
|
-
handleArrowsUpdate(slider3);
|
|
90
|
-
if (!hasMoreSlides(slider3)) {
|
|
91
|
-
if (props.debug)
|
|
92
|
-
console.log(`${Name}: Hiding navigation arrows`, element);
|
|
93
|
-
addHiddenStyles(element);
|
|
94
|
-
} else {
|
|
95
|
-
if (props.debug)
|
|
96
|
-
console.log(`${Name}: Showing navigation arrows`, element);
|
|
97
|
-
addVisibleStyles(element);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
slider2.on("created", handleUpdate);
|
|
101
|
-
slider2.on("slideChanged", handleUpdate);
|
|
102
|
-
slider2.on("optionsChanged", handleUpdate);
|
|
103
|
-
slider2.on("destroyed", handleUpdate);
|
|
104
|
-
return onCleanup(() => {
|
|
105
|
-
slider2.on("created", handleUpdate, true);
|
|
106
|
-
slider2.on("slideChanged", handleUpdate, true);
|
|
107
|
-
slider2.on("optionsChanged", handleUpdate, true);
|
|
108
|
-
slider2.on("destroyed", handleUpdate, true);
|
|
109
|
-
});
|
|
110
|
-
})
|
|
111
|
-
);
|
|
112
|
-
createEffect(
|
|
113
|
-
on(slider, (slider2) => {
|
|
114
|
-
if (slider2 && hasMoreSlides(slider2)) return addVisibleStyles(element);
|
|
115
|
-
if (props.debug)
|
|
116
|
-
console.log(`${Name}: Slider is undefined, hiding arrows`, element);
|
|
117
|
-
addHiddenStyles(element);
|
|
118
|
-
})
|
|
119
|
-
);
|
|
120
|
-
withKeenSliderElementContext(
|
|
121
|
-
() => {
|
|
122
|
-
const selector = props.target;
|
|
123
|
-
return () => {
|
|
124
|
-
let targetEl = element;
|
|
125
|
-
if (props.target) targetEl = document.querySelector(selector);
|
|
126
|
-
if (targetEl?.tagName !== "KEEN-SLIDER")
|
|
127
|
-
targetEl = targetEl.querySelector("keen-slider");
|
|
128
|
-
return targetEl;
|
|
129
|
-
};
|
|
130
|
-
},
|
|
131
|
-
() => null,
|
|
132
|
-
([_, { addPlugin }]) => {
|
|
133
|
-
const removePlugin = addPlugin((slider2) => {
|
|
134
|
-
setSlider(slider2);
|
|
135
|
-
slider2.on("destroyed", () => setSlider());
|
|
136
|
-
});
|
|
137
|
-
onCleanup(removePlugin);
|
|
138
|
-
}
|
|
139
|
-
);
|
|
140
|
-
function handlePrev(event) {
|
|
141
|
-
event.preventDefault();
|
|
142
|
-
const s = slider();
|
|
143
|
-
if (!s) return;
|
|
144
|
-
s.prev();
|
|
145
|
-
}
|
|
146
|
-
function handleNext(event) {
|
|
147
|
-
event.preventDefault();
|
|
148
|
-
const s = slider();
|
|
149
|
-
if (!s) return;
|
|
150
|
-
s.next();
|
|
151
|
-
}
|
|
152
|
-
element.replaceChildren(...[]);
|
|
153
|
-
return html`
|
|
154
|
-
<button
|
|
155
|
-
class="keen-arrow keen-arrow--left"
|
|
156
|
-
disabled=${() => slider() && isFirstSlide(slider())}
|
|
157
|
-
ref=${(el) => leftArrow = el}
|
|
158
|
-
onClick=${(e) => handlePrev(e)}
|
|
159
|
-
type="button"
|
|
160
|
-
>
|
|
161
|
-
<span style=${srOnly}>Previous slide</span>
|
|
162
|
-
<${Show} when=${() => leftArrowTmpl}>
|
|
163
|
-
${() => leftArrowTmpl?.content.cloneNode(true)}
|
|
164
|
-
<//>
|
|
165
|
-
</button>
|
|
166
|
-
<button
|
|
167
|
-
class="keen-arrow keen-arrow--right"
|
|
168
|
-
ref=${(el) => rightArrow = el}
|
|
169
|
-
disabled=${() => slider() && isLastSlide(slider())}
|
|
170
|
-
onClick=${(e) => handleNext(e)}
|
|
171
|
-
type="button"
|
|
172
|
-
>
|
|
173
|
-
<span style=${srOnly}>Next slide</span>
|
|
174
|
-
<${Show} when=${() => rightArrowTmpl}>
|
|
175
|
-
${() => rightArrowTmpl?.content.cloneNode(true)}
|
|
176
|
-
<//>
|
|
177
|
-
</button>
|
|
178
|
-
`;
|
|
179
|
-
};
|
|
180
|
-
|
|
181
|
-
// src/index.ts
|
|
182
|
-
customShadowlessElement(
|
|
183
|
-
keen_slider_navigation_arrows_exports.Name,
|
|
184
|
-
{
|
|
185
|
-
class: "",
|
|
186
|
-
target: "",
|
|
187
|
-
debug: false
|
|
188
|
-
},
|
|
189
|
-
correctElementType(keen_slider_navigation_arrows_exports.Component),
|
|
190
|
-
//@ts-ignore
|
|
191
|
-
initializeClasses
|
|
192
|
-
);
|
|
193
|
-
//# sourceMappingURL=index.js.map
|
|
194
|
-
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/keen-slider-navigation-arrows.ts","../../src/utils.ts","../../src/index.ts"],"names":["slider"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\n\nimport html from \"solid-js/html\";\nimport { createEffect, createSignal, on, onCleanup, Show } from \"solid-js\";\nimport {\n withKeenSliderElementContext,\n type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\nimport {\n isFirstSlide,\n updateArrows,\n hasMoreSlides,\n addVisibleStyles,\n addHiddenStyles,\n isLastSlide,\n srOnly,\n} from \"../utils.js\";\n\nexport type Props = {\n target: string;\n class: string;\n debug?: boolean;\n};\n\nexport const Name = `keen-slider-navigation-arrows`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n if (!props.target)\n return console.warn(\n `${Name}: Needs a proper target in order to properly extend a keen slider.`,\n );\n\n const [slider, setSlider] = createSignal<KeenSliderInstance>();\n const leftArrowTmpl = element.querySelector<HTMLTemplateElement>(\n \"template[prev-arrow]\",\n );\n const rightArrowTmpl = element.querySelector<HTMLTemplateElement>(\n \"template[next-arrow]\",\n );\n\n let leftArrow: HTMLElement, rightArrow: HTMLElement;\n\n createEffect(\n on(slider, (slider) => {\n if (!slider) return;\n if (props.debug) console.log(`${Name}: Slider instantiated`, slider);\n\n const handleArrowsUpdate = updateArrows(leftArrow, rightArrow);\n\n function hideAddIfDisabled(slider: KeenSliderInstance) {\n if (slider.options?.disabled)\n return element.setAttribute(\"data-keen-slider-disabled\", \"true\");\n return element.removeAttribute(\"data-keen-slider-disabled\");\n }\n\n function handleUpdate(slider: KeenSliderInstance) {\n if (props.debug)\n console.log(`${Name}: Updating navigation arrows`, element);\n hideAddIfDisabled(slider);\n handleArrowsUpdate(slider);\n if (!hasMoreSlides(slider)) {\n if (props.debug)\n console.log(`${Name}: Hiding navigation arrows`, element);\n addHiddenStyles(element);\n } else {\n if (props.debug)\n console.log(`${Name}: Showing navigation arrows`, element);\n addVisibleStyles(element);\n }\n }\n\n slider.on(\"created\", handleUpdate);\n slider.on(\"slideChanged\", handleUpdate);\n slider.on(\"optionsChanged\", handleUpdate);\n slider.on(\"destroyed\", handleUpdate);\n\n return onCleanup(() => {\n slider.on(\"created\", handleUpdate, true);\n slider.on(\"slideChanged\", handleUpdate, true);\n slider.on(\"optionsChanged\", handleUpdate, true);\n slider.on(\"destroyed\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (slider && hasMoreSlides(slider)) return addVisibleStyles(element);\n if (props.debug)\n console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n addHiddenStyles(element);\n }),\n );\n\n withKeenSliderElementContext(\n () => {\n const selector = props.target;\n return () => {\n let targetEl: Element | null = element;\n if (props.target) targetEl = document.querySelector(selector);\n if (targetEl?.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl!.querySelector(\"keen-slider\");\n return targetEl!;\n };\n },\n () => null,\n ([_, { addPlugin }]) => {\n const removePlugin = addPlugin((slider) => {\n setSlider(slider);\n slider.on(\"destroyed\", () => setSlider());\n });\n\n onCleanup(removePlugin);\n },\n );\n\n function handlePrev(event: Event) {\n event.preventDefault();\n\n const s = slider();\n if (!s) return;\n\n s.prev();\n }\n\n function handleNext(event: Event) {\n event.preventDefault();\n\n const s = slider();\n\n if (!s) return;\n s.next();\n }\n\n element.replaceChildren(...[]);\n\n return html`\n <button\n class=\"keen-arrow keen-arrow--left\"\n disabled=${() => slider() && isFirstSlide(slider()!)}\n ref=${(el: HTMLElement) => (leftArrow = el)}\n onClick=${(e: Event) => handlePrev(e)}\n type=\"button\"\n >\n <span style=${srOnly}>Previous slide</span>\n <${Show} when=${() => leftArrowTmpl}>\n ${() => leftArrowTmpl?.content.cloneNode(true)}\n <//>\n </button>\n <button\n class=\"keen-arrow keen-arrow--right\"\n ref=${(el: HTMLElement) => (rightArrow = el)}\n disabled=${() => slider() && isLastSlide(slider()!)}\n onClick=${(e: Event) => handleNext(e)}\n type=\"button\"\n >\n <span style=${srOnly}>Next slide</span>\n <${Show} when=${() => rightArrowTmpl}>\n ${() => rightArrowTmpl?.content.cloneNode(true)}\n <//>\n </button>\n `;\n};\n","import type { KeenSliderInstance } from \"@brytdesigns/web-component-keen-slider\";\nimport type { ICustomElement } from \"component-register\";\n\nexport const srOnly = `border-width:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin-top:-1px !important;margin-bottom:-1px !important;margin-right:-1px !important;margin-left:-1px !important;overflow:hidden !important;padding-top:0 !important;padding-bottom:0 !important;padding-right:0 !important;padding-left:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important;`;\n\nexport function hasMoreSlides(slider: KeenSliderInstance) {\n // In loop mode, keen-slider sets track.details.maxIdx to Infinity even when\n // there is only a single slide, so `maxIdx > 0` falsely reports \"more slides\".\n if (slider.options?.loop) return slider.slides.length > 1;\n return slider.track.details.maxIdx > 0;\n}\n\nexport function updateArrows(leftArrow: HTMLElement, rightArrow: HTMLElement) {\n return function (slider: KeenSliderInstance) {\n if (!leftArrow || !rightArrow) return;\n const isFirst = isFirstSlide(slider),\n isLast = isLastSlide(slider);\n\n isFirst\n ? leftArrow.classList.add(\"keen-arrow--disabled\")\n : leftArrow.classList.remove(\"keen-arrow--disabled\");\n isFirst\n ? leftArrow.setAttribute(\"disabled\", \"true\")\n : leftArrow.removeAttribute(\"disabled\");\n isLast\n ? rightArrow.classList.add(\"keen-arrow--disabled\")\n : rightArrow.classList.remove(\"keen-arrow--disabled\");\n isLast\n ? rightArrow.setAttribute(\"disabled\", \"true\")\n : rightArrow.removeAttribute(\"disabled\");\n };\n}\n\nexport function isFirstSlide(slider: KeenSliderInstance) {\n return slider.track.details.rel === 0 && !slider.options?.loop;\n}\n\nexport function isLastSlide(slider: KeenSliderInstance) {\n return (\n slider.track.details.rel === slider.track.details.maxIdx &&\n !slider.options?.loop\n );\n}\n\nexport function addHiddenStyles(element: HTMLElement) {\n element.style.setProperty(\"visibility\", \"hidden\", \"important\");\n element.style.setProperty(\"opacity\", \"0\", \"important\");\n}\n\nexport function addVisibleStyles(element: HTMLElement) {\n //@ts-ignore\n element.style.display = null;\n //@ts-ignore\n element.style.visibility = null;\n //@ts-ignore\n element.style.opacity = null;\n}\n\ntype Options = {\n element: HTMLElement & ICustomElement;\n};\n\nexport function initializeClasses<Props>(\n ComponentType = (props: Props, options: Options) => {},\n) {\n return (props: Props, options: Options) => {\n const { element } = options;\n element.classList.add(\"keen-arrows\");\n addHiddenStyles(element);\n return ComponentType(props, options);\n };\n}\n","import {\n customShadowlessElement,\n correctElementType,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\n\nexport type KeenSliderNavigationArrowsProps = KeenSliderNavigationArrows.Props;\n\ncustomShadowlessElement(\n KeenSliderNavigationArrows.Name,\n {\n class: \"\",\n target: \"\",\n debug: false,\n },\n correctElementType(KeenSliderNavigationArrows.Component),\n //@ts-ignore\n initializeClasses,\n);\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}
|