@brytdesigns/web-component-keen-slider-auto-switch 1.0.8 → 1.0.10

package/dist/esm/index.js

@@ -0,0 +1,131 @@
+import { customShadowlessElement, correctElementType } from '@brytdesigns/web-component-utils';
+import { createMemo, createSignal, createEffect, on, onCleanup, batch } from 'solid-js';
+import { addPlugin } from '@brytdesigns/web-component-keen-slider';
+
+// src/index.ts
+var KeenSliderAutoSwitch = (props, { element }) => {
+  if (!props.target)
+    return console.warn(
+      "keen-slider-auto-switch: Needs a proper target in order to properly extend a keen slider."
+    );
+  const target = createMemo(() => {
+    let targetEl = element;
+    if (props.target) targetEl = document.querySelector(props.target);
+    if (!targetEl)
+      return console.warn(
+        "keen-slider-auto-switch: Could not find the target element. Make sure it exists and is a keen-slider element."
+      );
+    if (targetEl.tagName !== "KEEN-SLIDER")
+      targetEl = targetEl.querySelector("keen-slider");
+    if (!targetEl)
+      return console.warn(
+        "keen-slider-auto-switch: Could not find the target element. Make sure it exists and is a keen-slider element."
+      );
+    return targetEl;
+  });
+  const plugin = createMemo(() => {
+    const duration = props.duration || 2e3;
+    const [_, setTimeoutVal] = createSignal(null);
+    const [sliderRef, setSliderRef] = createSignal(
+      null
+    );
+    const [isPaused, setIsPaused] = createSignal(false);
+    function clearCurrentTimeout() {
+      batch(() => {
+        setIsPaused(true);
+        setTimeoutVal((val) => {
+          if (val) clearTimeout(val);
+          return null;
+        });
+      });
+    }
+    function startNextTimeout(cb) {
+      batch(() => {
+        setIsPaused(false);
+        setTimeoutVal((val) => {
+          if (val) clearTimeout(val);
+          return setTimeout(cb, duration);
+        });
+      });
+    }
+    createEffect(
+      on(
+        () => ({ isPaused: isPaused(), slider: sliderRef() }),
+        ({ isPaused: isPaused2, slider }) => {
+          if (!slider) return;
+          slider.container.dispatchEvent(
+            new CustomEvent("autoswitch:update", {
+              bubbles: true,
+              detail: { isPaused: isPaused2 }
+            })
+          );
+        }
+      )
+    );
+    createEffect(
+      on(sliderRef, (slider) => {
+        if (!slider) return;
+        function nextTimeout() {
+          if (!slider) return;
+          if (slider.options?.disabled) return;
+          return startNextTimeout(() => {
+            if (slider.slides.length <= 1) return;
+            slider.next();
+          });
+        }
+        function handleMouseEnter() {
+          clearCurrentTimeout();
+        }
+        function handleMouseLeave() {
+          nextTimeout();
+        }
+        slider.pauseAutoplay = clearCurrentTimeout;
+        slider.startAutoplay = nextTimeout;
+        slider.container.addEventListener("mouseenter", clearCurrentTimeout);
+        slider.container.addEventListener("mouseleave", nextTimeout);
+        slider.on("dragStarted", clearCurrentTimeout);
+        slider.on("slideChanged", clearCurrentTimeout);
+        slider.on("animationEnded", nextTimeout);
+        slider.on("updated", nextTimeout);
+        nextTimeout();
+        return onCleanup(() => {
+          slider.container.removeEventListener("mouseenter", handleMouseEnter);
+          slider.container.removeEventListener("mouseleave", handleMouseLeave);
+          slider.on("dragStarted", clearCurrentTimeout, true);
+          slider.on("slideChanged", clearCurrentTimeout, true);
+          slider.on("animationEnded", nextTimeout, true);
+          slider.on("updated", nextTimeout, true);
+        });
+      })
+    );
+    return function(slider) {
+      setSliderRef(slider);
+    };
+  });
+  createEffect(() => {
+    const t = target();
+    if (!t) return;
+    const p = plugin();
+    const controller = new AbortController();
+    addPlugin({
+      target: t,
+      plugin: p,
+      controller
+    });
+    return onCleanup(() => {
+      controller.abort();
+    });
+  });
+};
+
+// src/index.ts
+customShadowlessElement(
+  "keen-slider-navigation-dots",
+  {
+    target: "",
+    duration: 2e3
+  },
+  correctElementType(KeenSliderAutoSwitch)
+);
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/keen-slider-auto-switch.ts","../../src/index.ts"],"names":["isPaused"],"mappings":"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","file":"index.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport {\n  createEffect,\n  createSignal,\n  createMemo,\n  on,\n  onCleanup,\n  batch,\n} from \"solid-js\";\nimport {\n  addPlugin,\n  type KeenSliderInstance,\n} from \"@brytdesigns/web-component-keen-slider\";\n\ntype KeenSliderAutoSwitchProps = {\n  target: string;\n  duration: number;\n};\n\nexport const KeenSliderAutoSwitch: CorrectComponentType<\n  KeenSliderAutoSwitchProps\n> = (props, { element }) => {\n  if (!props.target)\n    return console.warn(\n      \"keen-slider-auto-switch: 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        \"keen-slider-auto-switch: 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        \"keen-slider-auto-switch: Could not find the target element. Make sure it exists and is a keen-slider element.\",\n      );\n    return targetEl;\n  });\n\n  const plugin = createMemo(() => {\n    const duration = props.duration || 2000;\n\n    const [_, setTimeoutVal] = createSignal<number | null>(null);\n    const [sliderRef, setSliderRef] = createSignal<KeenSliderInstance | null>(\n      null,\n    );\n    const [isPaused, setIsPaused] = createSignal(false);\n\n    function clearCurrentTimeout() {\n      batch(() => {\n        setIsPaused(true);\n        setTimeoutVal((val) => {\n          if (val) clearTimeout(val);\n          return null;\n        });\n      });\n    }\n\n    function startNextTimeout(cb: any) {\n      batch(() => {\n        setIsPaused(false);\n        setTimeoutVal((val) => {\n          if (val) clearTimeout(val);\n          return setTimeout(cb, duration) as any as number;\n        });\n      });\n    }\n\n    createEffect(\n      on(\n        () => ({ isPaused: isPaused(), slider: sliderRef() }),\n        ({ isPaused, slider }) => {\n          if (!slider) return;\n          slider.container.dispatchEvent(\n            new CustomEvent(\"autoswitch:update\", {\n              bubbles: true,\n              detail: { isPaused },\n            }),\n          );\n        },\n      ),\n    );\n\n    createEffect(\n      on(sliderRef, (slider) => {\n        if (!slider) return;\n\n        function nextTimeout() {\n          if (!slider) return;\n          if (slider.options?.disabled) return;\n          return startNextTimeout(() => {\n            if (slider.slides.length <= 1) return;\n            slider.next();\n          });\n        }\n\n        function handleMouseEnter() {\n          clearCurrentTimeout();\n        }\n\n        function handleMouseLeave() {\n          nextTimeout();\n        }\n\n        (slider as any).pauseAutoplay = clearCurrentTimeout;\n        (slider as any).startAutoplay = nextTimeout;\n\n        slider.container.addEventListener(\"mouseenter\", clearCurrentTimeout);\n        slider.container.addEventListener(\"mouseleave\", nextTimeout);\n\n        slider.on(\"dragStarted\", clearCurrentTimeout);\n        slider.on(\"slideChanged\", clearCurrentTimeout);\n        slider.on(\"animationEnded\", nextTimeout);\n        slider.on(\"updated\", nextTimeout);\n\n        nextTimeout();\n\n        return onCleanup(() => {\n          slider.container.removeEventListener(\"mouseenter\", handleMouseEnter);\n          slider.container.removeEventListener(\"mouseleave\", handleMouseLeave);\n\n          slider.on(\"dragStarted\", clearCurrentTimeout, true);\n          slider.on(\"slideChanged\", clearCurrentTimeout, true);\n          slider.on(\"animationEnded\", nextTimeout, true);\n          slider.on(\"updated\", nextTimeout, true);\n        });\n      }),\n    );\n\n    return function(slider: KeenSliderInstance | null) {\n      setSliderRef(slider);\n    };\n  });\n\n  createEffect(() => {\n    const t = target();\n\n    if (!t) return;\n\n    const p = plugin();\n    const controller = new AbortController();\n\n    addPlugin({\n      target: t,\n      plugin: p,\n      controller,\n    });\n\n    return onCleanup(() => {\n      controller.abort();\n    });\n  });\n};\n","import {\n  customShadowlessElement,\n  correctElementType,\n} from \"@brytdesigns/web-component-utils\";\nimport { KeenSliderAutoSwitch } from \"./components/index.js\";\n\ncustomShadowlessElement(\n  \"keen-slider-navigation-dots\",\n  {\n    target: \"\",\n    duration: 2000,\n  },\n  correctElementType(KeenSliderAutoSwitch)\n);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brytdesigns/web-component-keen-slider-auto-switch",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Keen slider auto switch plugin web component",
   "main": "./dist/main/index.js",
   "module": "./dist/main/index.js",
@@ -22,8 +22,8 @@
     "component-register": "^0.8.7",
     "solid-element": "^1.9.1",
     "solid-js": "^1.9.7",
-    "@brytdesigns/web-component-keen-slider": "1.0.11",
-    "@brytdesigns/web-component-utils": "0.1.13"
+    "@brytdesigns/web-component-keen-slider": "1.0.13",
+    "@brytdesigns/web-component-utils": "0.1.14"
   },
   "devDependencies": {
     "dts-bundle-generator": "^9.5.1",