@brytdesigns/web-component-keen-slider-navigation-arrows 1.0.19 → 1.0.20
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
CHANGED
|
@@ -114,20 +114,18 @@ var Component = (props, { element }) => {
|
|
|
114
114
|
slider2.on("created", handleUpdate);
|
|
115
115
|
slider2.on("slideChanged", handleUpdate);
|
|
116
116
|
slider2.on("optionsChanged", handleUpdate);
|
|
117
|
-
slider2.on("detailsChanged", handleUpdate);
|
|
118
117
|
slider2.on("destroyed", handleUpdate);
|
|
119
118
|
return onCleanup(() => {
|
|
120
119
|
slider2.on("created", handleUpdate, true);
|
|
121
120
|
slider2.on("slideChanged", handleUpdate, true);
|
|
122
121
|
slider2.on("optionsChanged", handleUpdate, true);
|
|
123
|
-
slider2.on("detailsChanged", handleUpdate, true);
|
|
124
122
|
slider2.on("destroyed", handleUpdate, true);
|
|
125
123
|
});
|
|
126
124
|
})
|
|
127
125
|
);
|
|
128
126
|
createEffect(
|
|
129
127
|
on(slider, (slider2) => {
|
|
130
|
-
if (slider2) return;
|
|
128
|
+
if (slider2) return addVisibleStyles(element);
|
|
131
129
|
if (props.debug)
|
|
132
130
|
console.log(`${Name}: Slider is undefined, hiding arrows`, element);
|
|
133
131
|
addHiddenStyles(element);
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createMemo,\n createSignal,\n on,\n onCleanup,\n Show,\n} from \"solid-js\";\nimport {\n addPlugin,\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n\n return targetEl;\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(\"detailsChanged\", 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(\"detailsChanged\", handleUpdate, true);\n slider.on(\"destroyed\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (slider) return;\n if (props.debug)\n console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n addHiddenStyles(element);\n }),\n );\n\n createEffect(() => {\n const t = target();\n if (!t) return;\n if (props.debug)\n console.log(`${Name}: Target found, adding plugin`, t, element);\n\n const controller = new AbortController();\n\n function plugin(slider: KeenSliderInstance) {\n if (props.debug)\n console.log(\n `${Name}: Keen slider navigation arrows plugin added`,\n slider,\n element,\n );\n setSlider(slider);\n }\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n if (props.debug)\n console.log(`${Name}: Something changed, cleaning up`, element);\n controller.abort();\n setSlider(undefined);\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 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 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-utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\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
|
+
{"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-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createMemo,\n createSignal,\n on,\n onCleanup,\n Show,\n} from \"solid-js\";\nimport {\n addPlugin,\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n\n return targetEl;\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) return addVisibleStyles(element);\n if (props.debug)\n console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n addHiddenStyles(element);\n }),\n );\n\n createEffect(() => {\n const t = target();\n if (!t) return;\n if (props.debug)\n console.log(`${Name}: Target found, adding plugin`, t, element);\n\n const controller = new AbortController();\n\n function plugin(slider: KeenSliderInstance) {\n if (props.debug)\n console.log(\n `${Name}: Keen slider navigation arrows plugin added`,\n slider,\n element,\n );\n setSlider(slider);\n }\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n if (props.debug)\n console.log(`${Name}: Something changed, cleaning up`, element);\n controller.abort();\n setSlider(undefined);\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 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 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-utils\";\nimport { KeenSliderNavigationArrows } from \"./components/index.js\";\nimport { initializeClasses } from \"./utils.js\";\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,7 +1,7 @@
|
|
|
1
1
|
import html from 'solid-js/html';
|
|
2
2
|
import { createMemo, createSignal, createEffect, on, onCleanup, Show } from 'solid-js';
|
|
3
3
|
import { addPlugin } from '@brytdesigns/web-component-keen-slider';
|
|
4
|
-
import { updateArrows, addHiddenStyles, isFirstSlide, srOnly, isLastSlide, hasMoreSlides
|
|
4
|
+
import { updateArrows, addVisibleStyles, addHiddenStyles, isFirstSlide, srOnly, isLastSlide, hasMoreSlides } from '../utils.js';
|
|
5
5
|
|
|
6
6
|
const Name = `keen-slider-navigation-arrows`;
|
|
7
7
|
const Component = (props, { element }) => {
|
|
@@ -60,20 +60,18 @@ const Component = (props, { element }) => {
|
|
|
60
60
|
slider2.on("created", handleUpdate);
|
|
61
61
|
slider2.on("slideChanged", handleUpdate);
|
|
62
62
|
slider2.on("optionsChanged", handleUpdate);
|
|
63
|
-
slider2.on("detailsChanged", handleUpdate);
|
|
64
63
|
slider2.on("destroyed", handleUpdate);
|
|
65
64
|
return onCleanup(() => {
|
|
66
65
|
slider2.on("created", handleUpdate, true);
|
|
67
66
|
slider2.on("slideChanged", handleUpdate, true);
|
|
68
67
|
slider2.on("optionsChanged", handleUpdate, true);
|
|
69
|
-
slider2.on("detailsChanged", handleUpdate, true);
|
|
70
68
|
slider2.on("destroyed", handleUpdate, true);
|
|
71
69
|
});
|
|
72
70
|
})
|
|
73
71
|
);
|
|
74
72
|
createEffect(
|
|
75
73
|
on(slider, (slider2) => {
|
|
76
|
-
if (slider2) return;
|
|
74
|
+
if (slider2) return addVisibleStyles(element);
|
|
77
75
|
if (props.debug)
|
|
78
76
|
console.log(`${Name}: Slider is undefined, hiding arrows`, element);
|
|
79
77
|
addHiddenStyles(element);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/keen-slider-navigation-arrows.ts"],"names":["slider"],"mappings":"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","file":"keen-slider-navigation-arrows.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createMemo,\n createSignal,\n on,\n onCleanup,\n Show,\n} from \"solid-js\";\nimport {\n addPlugin,\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n\n return targetEl;\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(\"detailsChanged\", 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(\"detailsChanged\", handleUpdate, true);\n slider.on(\"destroyed\", handleUpdate, true);\n });\n }),\n );\n\n createEffect(\n on(slider, (slider) => {\n if (slider) return;\n if (props.debug)\n console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n addHiddenStyles(element);\n }),\n );\n\n createEffect(() => {\n const t = target();\n if (!t) return;\n if (props.debug)\n console.log(`${Name}: Target found, adding plugin`, t, element);\n\n const controller = new AbortController();\n\n function plugin(slider: KeenSliderInstance) {\n if (props.debug)\n console.log(\n `${Name}: Keen slider navigation arrows plugin added`,\n slider,\n element,\n );\n setSlider(slider);\n }\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n if (props.debug)\n console.log(`${Name}: Something changed, cleaning up`, element);\n controller.abort();\n setSlider(undefined);\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 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"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/keen-slider-navigation-arrows.ts"],"names":["slider"],"mappings":"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","file":"keen-slider-navigation-arrows.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport html from \"solid-js/html\";\nimport {\n createEffect,\n createMemo,\n createSignal,\n on,\n onCleanup,\n Show,\n} from \"solid-js\";\nimport {\n addPlugin,\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 target = createMemo(() => {\n let targetEl: HTMLElement | null = element;\n if (props.target) targetEl = document.querySelector(props.target);\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n if (targetEl.tagName !== \"KEEN-SLIDER\")\n targetEl = targetEl.querySelector(\"keen-slider\");\n if (!targetEl)\n return console.warn(\n `${Name}: Could not find the target element. Make sure it exists and is a keen-slider element.`,\n );\n\n return targetEl;\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) return addVisibleStyles(element);\n if (props.debug)\n console.log(`${Name}: Slider is undefined, hiding arrows`, element);\n addHiddenStyles(element);\n }),\n );\n\n createEffect(() => {\n const t = target();\n if (!t) return;\n if (props.debug)\n console.log(`${Name}: Target found, adding plugin`, t, element);\n\n const controller = new AbortController();\n\n function plugin(slider: KeenSliderInstance) {\n if (props.debug)\n console.log(\n `${Name}: Keen slider navigation arrows plugin added`,\n slider,\n element,\n );\n setSlider(slider);\n }\n\n addPlugin({\n target: t,\n plugin,\n controller,\n });\n\n return onCleanup(() => {\n if (props.debug)\n console.log(`${Name}: Something changed, cleaning up`, element);\n controller.abort();\n setSlider(undefined);\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 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"]}
|
package/package.json
CHANGED