@base-ripple/core 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./lib/attach-base-ripple.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}

package/dist/index.js

@@ -1,179 +1 @@
-const f = /* @__PURE__ */ new Set();
-let m = !1;
-function S() {
-  m || (m = !0, addEventListener("blur", c), addEventListener("pagehide", c), addEventListener("beforeunload", c), addEventListener("pointerup", h, { passive: !0 }), addEventListener("pointercancel", h, { passive: !0 }), document.addEventListener("visibilitychange", B));
-}
-function N() {
-  !m || f.size > 0 || (m = !1, removeEventListener("blur", c), removeEventListener("pagehide", c), removeEventListener("beforeunload", c), removeEventListener("pointerup", h), removeEventListener("pointercancel", h), document.removeEventListener("visibilitychange", B));
-}
-function c() {
-  for (const e of f)
-    e.fadeAll();
-}
-function h(e) {
-  for (const i of f)
-    i.fadeFromPointer(e);
-}
-function B() {
-  document.visibilityState === "hidden" && c();
-}
-function _(e, {
-  origin: i = "pointer",
-  sizeOffset: s = 0,
-  attributes: n
-} = {}) {
-  const a = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), b = i === "pointer";
-  let v = !1, u = O();
-  const g = (t, r, l) => ({
-    from: {
-      size: 0,
-      x: r,
-      y: l
-    },
-    to: {
-      size: (b ? Q(
-        t.width,
-        t.height,
-        r,
-        l
-      ) : K(
-        t.width,
-        t.height
-      )) + s,
-      x: b ? r : t.width / 2,
-      y: b ? l : t.height / 2
-    }
-  }), x = (t) => {
-    if (t.defaultPrevented || I(e) || u) return;
-    const r = e.getBoundingClientRect(), l = g(
-      r,
-      t.clientX - r.x,
-      t.clientY - r.y
-    ), p = D({
-      rippleKeyframes: l,
-      removeHandler: R,
-      attributes: n
-    });
-    a.add(p), o.set(t.pointerId, p), e.appendChild(p);
-  }, w = (t) => {
-    if (t.defaultPrevented || I(e) || u || t.repeat || d.has(t.code) || !F(t.code) || q(t.target)) return;
-    const r = e.getBoundingClientRect(), l = g(
-      r,
-      r.width / 2,
-      r.height / 2
-    ), p = D({
-      rippleKeyframes: l,
-      removeHandler: R,
-      attributes: n
-    });
-    a.add(p), d.set(t.code, p), e.appendChild(p);
-  }, y = (t) => {
-    t.style.opacity = "0";
-  }, E = (t) => {
-    const r = o.get(t.pointerId);
-    r && (y(r), o.delete(t.pointerId));
-  }, z = (t) => {
-    const r = d.get(t.code);
-    r && (y(r), d.delete(t.code));
-  }, L = () => {
-    for (const t of o.values()) y(t);
-    o.clear();
-    for (const t of d.values()) y(t);
-    d.clear();
-  }, R = (t) => {
-    a.delete(t);
-    for (const [r, l] of o)
-      if (l === t) {
-        o.delete(r);
-        break;
-      }
-    for (const [r, l] of d)
-      if (l === t) {
-        d.delete(r);
-        break;
-      }
-    t.remove();
-  }, P = () => {
-    for (const t of a)
-      t.remove();
-    a.clear(), o.clear(), d.clear();
-  }, M = () => {
-    v || (e.addEventListener("pointerdown", x, {
-      passive: !0
-    }), v = !0);
-  }, k = () => {
-    v && (e.removeEventListener("pointerdown", x), v = !1);
-  }, G = T((t) => {
-    u !== t && (u = t, u ? (k(), P()) : M());
-  }), A = (t) => {
-    F(t.code) && z(t);
-  };
-  u || M(), e.addEventListener("keyup", A), e.addEventListener("keydown", w), e.addEventListener("contextmenu", L), e.addEventListener("pointerleave", E, {
-    passive: !0
-  }), S();
-  const C = {
-    fadeAll: L,
-    fadeFromPointer: E
-  };
-  return f.add(C), () => {
-    G(), k(), e.removeEventListener("keyup", A), e.removeEventListener("keydown", w), e.removeEventListener("contextmenu", L), e.removeEventListener("pointerleave", E), f.delete(C), N(), P();
-  };
-}
-const H = "(prefers-reduced-motion: reduce)";
-function O() {
-  return typeof matchMedia != "function" ? !1 : matchMedia(H).matches;
-}
-function T(e) {
-  if (typeof matchMedia != "function") return () => {
-  };
-  const i = matchMedia(H), s = (n) => e(n.matches);
-  return typeof i.addEventListener == "function" ? (i.addEventListener("change", s), () => i.removeEventListener("change", s)) : typeof i.addListener == "function" ? (i.addListener(s), () => i.removeListener(s)) : () => {
-  };
-}
-function D({
-  rippleKeyframes: e,
-  removeHandler: i,
-  attributes: s
-}) {
-  const n = document.createElement("span");
-  if (n.setAttribute("aria-hidden", "true"), n.className = "base-ripple", n.style.width = e.to.size + "px", n.style.height = e.to.size + "px", n.style.setProperty(
-    "--base-ripple-keyframes-from-x",
-    e.from.x + "px"
-  ), n.style.setProperty(
-    "--base-ripple-keyframes-from-y",
-    e.from.y + "px"
-  ), n.style.setProperty(
-    "--base-ripple-keyframes-to-x",
-    e.to.x + "px"
-  ), n.style.setProperty(
-    "--base-ripple-keyframes-to-y",
-    e.to.y + "px"
-  ), s)
-    for (const [o, d] of Object.entries(s))
-      n.setAttribute(o, d);
-  const a = (o) => {
-    o.propertyName === "opacity" && (i(n), n.removeEventListener("transitionend", a));
-  };
-  return n.addEventListener("transitionend", a), n;
-}
-function I(e) {
-  const i = e.getAttribute("aria-disabled");
-  return i !== null ? i.toLowerCase() === "true" : "disabled" in e && !!e.disabled;
-}
-function F(e) {
-  return e === "Space" || e === "Enter" || e === "NumpadEnter";
-}
-const U = 'input:not([type]),input[type="text"],input[type="search"],input[type="url"],input[type="tel"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="month"],input[type="week"],textarea,[contenteditable]';
-function q(e) {
-  return e instanceof Element ? !!e.closest(U) : !1;
-}
-function K(e, i) {
-  return Math.sqrt(e * e + i * i);
-}
-function Q(e, i, s, n) {
-  const a = Math.max(s, e - s), o = Math.max(n, i - n);
-  return 2 * Math.sqrt(a * a + o * o);
-}
-export {
-  _ as attachBaseRipple
-};
+export * from "./lib/attach-base-ripple.js";

package/dist/lib/attach-base-ripple.d.ts

@@ -0,0 +1,9 @@
+export type AttachBaseRippleOptions = {
+    origin?: "pointer" | "center";
+    sizeOffset?: number;
+    attributes?: Record<string, string>;
+};
+type Dispose = () => void;
+export declare function attachBaseRipple(container: HTMLElement, { origin, sizeOffset, attributes, }?: AttachBaseRippleOptions): Dispose;
+export {};
+//# sourceMappingURL=attach-base-ripple.d.ts.map

package/dist/lib/attach-base-ripple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attach-base-ripple.d.ts","sourceRoot":"","sources":["../../src/lib/attach-base-ripple.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC,CAAC;AAeF,KAAK,OAAO,GAAG,MAAM,IAAI,CAAC;AA4D1B,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,WAAW,EACtB,EACE,MAAkB,EAClB,UAAc,EACd,UAAU,GACX,GAAE,uBAA4B,GAC9B,OAAO,CAmMT"}

package/dist/lib/attach-base-ripple.js

@@ -0,0 +1,300 @@
+// region TYPES
+// endregion TYPES
+// region GLOBALS
+const globalHandlers = new Set();
+let globalsInstalled = false;
+function installGlobalListeners() {
+    if (globalsInstalled)
+        return;
+    globalsInstalled = true;
+    addEventListener("blur", onGlobalFadeAll);
+    addEventListener("pagehide", onGlobalFadeAll);
+    addEventListener("beforeunload", onGlobalFadeAll);
+    addEventListener("pointerup", onGlobalFadeFromPointer, { passive: true });
+    addEventListener("pointercancel", onGlobalFadeFromPointer, { passive: true });
+    document.addEventListener("visibilitychange", onGlobalVisibilityChange);
+}
+function uninstallGlobalListenersIfIdle() {
+    if (!globalsInstalled || globalHandlers.size > 0)
+        return;
+    globalsInstalled = false;
+    removeEventListener("blur", onGlobalFadeAll);
+    removeEventListener("pagehide", onGlobalFadeAll);
+    removeEventListener("beforeunload", onGlobalFadeAll);
+    removeEventListener("pointerup", onGlobalFadeFromPointer);
+    removeEventListener("pointercancel", onGlobalFadeFromPointer);
+    document.removeEventListener("visibilitychange", onGlobalVisibilityChange);
+}
+function onGlobalFadeAll() {
+    for (const handler of globalHandlers) {
+        handler.fadeAll();
+    }
+}
+function onGlobalFadeFromPointer(event) {
+    for (const handler of globalHandlers) {
+        handler.fadeFromPointer(event);
+    }
+}
+function onGlobalVisibilityChange() {
+    if (document.visibilityState === "hidden") {
+        onGlobalFadeAll();
+    }
+}
+// endregion GLOBALS
+// region MAIN
+export function attachBaseRipple(container, { origin = "pointer", sizeOffset = 0, attributes, } = {}) {
+    const ripples = new Set();
+    const activePointerRipples = new Map();
+    const activeKeyRipples = new Map();
+    const isPointerOrigin = origin === "pointer";
+    let pointerDownInstalled = false;
+    let reducedMotion = prefersReducedMotion();
+    const createRippleKeyframes = (containerRect, fromX, fromY) => ({
+        from: {
+            size: 0,
+            x: fromX,
+            y: fromY,
+        },
+        to: {
+            size: (isPointerOrigin
+                ? rectBoundingCircleDiameterFromPoint(containerRect.width, containerRect.height, fromX, fromY)
+                : rectBoundingCircleDiameter(containerRect.width, containerRect.height)) + sizeOffset,
+            x: isPointerOrigin ? fromX : containerRect.width / 2,
+            y: isPointerOrigin ? fromY : containerRect.height / 2,
+        },
+    });
+    const createPointerRipple = (event) => {
+        if (event.defaultPrevented)
+            return;
+        if (isDisabled(container))
+            return;
+        if (reducedMotion)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const rippleKeyframes = createRippleKeyframes(containerRect, event.clientX - containerRect.x, event.clientY - containerRect.y);
+        const ripple = createRipple({
+            rippleKeyframes,
+            removeHandler: removeRipple,
+            attributes,
+        });
+        ripples.add(ripple);
+        activePointerRipples.set(event.pointerId, ripple);
+        container.appendChild(ripple);
+    };
+    const createKeyRipple = (event) => {
+        if (event.defaultPrevented)
+            return;
+        if (isDisabled(container))
+            return;
+        if (reducedMotion)
+            return;
+        if (event.repeat)
+            return;
+        if (activeKeyRipples.has(event.code))
+            return;
+        if (!isActivationKey(event.code))
+            return;
+        if (isEditableTarget(event.target))
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const rippleKeyframes = createRippleKeyframes(containerRect, containerRect.width / 2, containerRect.height / 2);
+        const ripple = createRipple({
+            rippleKeyframes,
+            removeHandler: removeRipple,
+            attributes,
+        });
+        ripples.add(ripple);
+        activeKeyRipples.set(event.code, ripple);
+        container.appendChild(ripple);
+    };
+    const fadeRipple = (ripple) => {
+        ripple.style.opacity = "0";
+    };
+    const fadeActivePointerRipple = (event) => {
+        const rippleToFade = activePointerRipples.get(event.pointerId);
+        if (!rippleToFade)
+            return;
+        fadeRipple(rippleToFade);
+        activePointerRipples.delete(event.pointerId);
+    };
+    const fadeActiveKeyRipple = (event) => {
+        const rippleToFade = activeKeyRipples.get(event.code);
+        if (!rippleToFade)
+            return;
+        fadeRipple(rippleToFade);
+        activeKeyRipples.delete(event.code);
+    };
+    const fadeAllActiveRipples = () => {
+        for (const ripple of activePointerRipples.values())
+            fadeRipple(ripple);
+        activePointerRipples.clear();
+        for (const ripple of activeKeyRipples.values())
+            fadeRipple(ripple);
+        activeKeyRipples.clear();
+    };
+    const removeRipple = (ripple) => {
+        ripples.delete(ripple);
+        for (const [pointerId, activeRipple] of activePointerRipples) {
+            if (activeRipple === ripple) {
+                activePointerRipples.delete(pointerId);
+                break;
+            }
+        }
+        for (const [code, activeRipple] of activeKeyRipples) {
+            if (activeRipple === ripple) {
+                activeKeyRipples.delete(code);
+                break;
+            }
+        }
+        ripple.remove();
+    };
+    const removeAllRipples = () => {
+        for (const ripple of ripples) {
+            ripple.remove();
+        }
+        ripples.clear();
+        activePointerRipples.clear();
+        activeKeyRipples.clear();
+    };
+    const addPointerDownListener = () => {
+        if (pointerDownInstalled)
+            return;
+        container.addEventListener("pointerdown", createPointerRipple, {
+            passive: true,
+        });
+        pointerDownInstalled = true;
+    };
+    const removePointerDownListener = () => {
+        if (!pointerDownInstalled)
+            return;
+        container.removeEventListener("pointerdown", createPointerRipple);
+        pointerDownInstalled = false;
+    };
+    const unsubscribeReducedMotion = observeReducedMotion((nextReducedMotion) => {
+        if (reducedMotion === nextReducedMotion)
+            return;
+        reducedMotion = nextReducedMotion;
+        if (reducedMotion) {
+            removePointerDownListener();
+            removeAllRipples();
+        }
+        else {
+            addPointerDownListener();
+        }
+    });
+    const keyUpHandler = (event) => {
+        if (!isActivationKey(event.code))
+            return;
+        fadeActiveKeyRipple(event);
+    };
+    if (!reducedMotion)
+        addPointerDownListener();
+    container.addEventListener("keyup", keyUpHandler);
+    container.addEventListener("keydown", createKeyRipple);
+    container.addEventListener("contextmenu", fadeAllActiveRipples);
+    container.addEventListener("pointerleave", fadeActivePointerRipple, {
+        passive: true,
+    });
+    installGlobalListeners();
+    const globalHandler = {
+        fadeAll: fadeAllActiveRipples,
+        fadeFromPointer: fadeActivePointerRipple,
+    };
+    globalHandlers.add(globalHandler);
+    return () => {
+        unsubscribeReducedMotion();
+        removePointerDownListener();
+        container.removeEventListener("keyup", keyUpHandler);
+        container.removeEventListener("keydown", createKeyRipple);
+        container.removeEventListener("contextmenu", fadeAllActiveRipples);
+        container.removeEventListener("pointerleave", fadeActivePointerRipple);
+        globalHandlers.delete(globalHandler);
+        uninstallGlobalListenersIfIdle();
+        removeAllRipples();
+    };
+}
+// endregion MAIN
+// region REDUCED MOTION
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+    if (typeof matchMedia !== "function")
+        return false;
+    return matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function observeReducedMotion(onChange) {
+    if (typeof matchMedia !== "function")
+        return () => { };
+    const mediaQueryList = matchMedia(REDUCED_MOTION_QUERY);
+    const handler = (event) => onChange(event.matches);
+    if (typeof mediaQueryList.addEventListener === "function") {
+        mediaQueryList.addEventListener("change", handler);
+        return () => mediaQueryList.removeEventListener("change", handler);
+    }
+    if (typeof mediaQueryList.addListener === "function") {
+        mediaQueryList.addListener(handler);
+        return () => mediaQueryList.removeListener(handler);
+    }
+    return () => { };
+}
+// endregion REDUCED MOTION
+// region OTHER UTILITIES
+function createRipple({ rippleKeyframes, removeHandler, attributes, }) {
+    const ripple = document.createElement("span");
+    ripple.setAttribute("aria-hidden", "true");
+    ripple.className = "base-ripple";
+    ripple.style.width = rippleKeyframes.to.size + "px";
+    ripple.style.height = rippleKeyframes.to.size + "px";
+    ripple.style.setProperty("--base-ripple-keyframes-from-x", rippleKeyframes.from.x + "px");
+    ripple.style.setProperty("--base-ripple-keyframes-from-y", rippleKeyframes.from.y + "px");
+    ripple.style.setProperty("--base-ripple-keyframes-to-x", rippleKeyframes.to.x + "px");
+    ripple.style.setProperty("--base-ripple-keyframes-to-y", rippleKeyframes.to.y + "px");
+    if (attributes)
+        for (const [key, value] of Object.entries(attributes))
+            ripple.setAttribute(key, value);
+    const transitionEndHandler = (event) => {
+        if (event.propertyName !== "opacity")
+            return;
+        removeHandler(ripple);
+        ripple.removeEventListener("transitionend", transitionEndHandler);
+    };
+    ripple.addEventListener("transitionend", transitionEndHandler);
+    return ripple;
+}
+function isDisabled(element) {
+    const ariaDisabled = element.getAttribute("aria-disabled");
+    if (ariaDisabled !== null)
+        return ariaDisabled.toLowerCase() === "true";
+    return ("disabled" in element && Boolean(element.disabled));
+}
+function isActivationKey(code) {
+    return code === "Space" || code === "Enter" || code === "NumpadEnter";
+}
+const editableSelector = "input:not([type])," +
+    'input[type="text"],' +
+    'input[type="search"],' +
+    'input[type="url"],' +
+    'input[type="tel"],' +
+    'input[type="email"],' +
+    'input[type="password"],' +
+    'input[type="number"],' +
+    'input[type="date"],' +
+    'input[type="time"],' +
+    'input[type="datetime-local"],' +
+    'input[type="month"],' +
+    'input[type="week"],' +
+    "textarea," +
+    "[contenteditable]";
+function isEditableTarget(target) {
+    if (!(target instanceof Element))
+        return false;
+    return Boolean(target.closest(editableSelector));
+}
+function rectBoundingCircleDiameter(width, height) {
+    return Math.sqrt(width * width + height * height);
+}
+function rectBoundingCircleDiameterFromPoint(width, height, x, y) {
+    const dx = Math.max(x, width - x);
+    const dy = Math.max(y, height - y);
+    return 2 * Math.sqrt(dx * dx + dy * dy);
+}
+// endregion OTHER UTILITIES

package/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@base-ripple/core",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "homepage": "https://base-ripple.vercel.app/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/circulo-ai/base-ripple"
+  },
+  "keywords": [
+    "ripple",
+    "ripple-effect",
+    "interaction",
+    "feedback",
+    "ui",
+    "css",
+    "dom",
+    "accessibility",
+    "typescript",
+    "vanilla-js"
+  ],
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -25,9 +42,6 @@
     "dist",
     "!**/*.tsbuildinfo"
   ],
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
   "nx": {
     "tags": [
       "scope:core"