@brytdesigns/web-component-keen-slider-navigation-arrows 1.0.20 → 1.0.22
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
|
@@ -125,7 +125,7 @@ var Component = (props, { element }) => {
|
|
|
125
125
|
);
|
|
126
126
|
createEffect(
|
|
127
127
|
on(slider, (slider2) => {
|
|
128
|
-
if (slider2) return addVisibleStyles(element);
|
|
128
|
+
if (slider2 && hasMoreSlides(slider2)) return addVisibleStyles(element);
|
|
129
129
|
if (props.debug)
|
|
130
130
|
console.log(`${Name}: Slider is undefined, hiding arrows`, element);
|
|
131
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(\"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
|
+
{"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 && 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 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, addVisibleStyles, addHiddenStyles, isFirstSlide, srOnly, isLastSlide
|
|
4
|
+
import { updateArrows, hasMoreSlides, addVisibleStyles, addHiddenStyles, isFirstSlide, srOnly, isLastSlide } from '../utils.js';
|
|
5
5
|
|
|
6
6
|
const Name = `keen-slider-navigation-arrows`;
|
|
7
7
|
const Component = (props, { element }) => {
|
|
@@ -71,7 +71,7 @@ const Component = (props, { element }) => {
|
|
|
71
71
|
);
|
|
72
72
|
createEffect(
|
|
73
73
|
on(slider, (slider2) => {
|
|
74
|
-
if (slider2) return addVisibleStyles(element);
|
|
74
|
+
if (slider2 && hasMoreSlides(slider2)) return addVisibleStyles(element);
|
|
75
75
|
if (props.debug)
|
|
76
76
|
console.log(`${Name}: Slider is undefined, hiding arrows`, element);
|
|
77
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(\"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"]}
|
|
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 && 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 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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/web-component-keen-slider-navigation-arrows",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.22",
|
|
4
4
|
"description": "Keen slider navigation arrows web component",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"component-register": "^0.8.7",
|
|
23
23
|
"solid-element": "^1.9.1",
|
|
24
24
|
"solid-js": "^1.9.7",
|
|
25
|
-
"@brytdesigns/web-component-keen-slider": "1.0.
|
|
25
|
+
"@brytdesigns/web-component-keen-slider": "1.0.14",
|
|
26
26
|
"@brytdesigns/web-component-utils": "0.1.14"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|