@fluid-topics/ft-ripple 0.1.16 → 0.2.0

package/build/ft-ripple.js

@@ -5,10 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html, } from "lit";
-import { property, query } from "lit/decorators.js";
-import { Ripple } from "@material/mwc-ripple";
-import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 export const FtRippleCssVariables = {
     color: FtCssVariable.extend("--ft-ripple-color", designSystemVariables.colorContent),
     primaryColor: FtCssVariable.extend("--ft-ripple-primary-color", FtCssVariable.extend("--ft-ripple-color", designSystemVariables.colorPrimary)),
@@ -17,9 +16,8 @@ export const FtRippleCssVariables = {
     opacityContentOnSurfaceHover: FtCssVariable.external(designSystemVariables.opacityContentOnSurfaceHover, "Design system"),
     opacityContentOnSurfaceFocused: FtCssVariable.external(designSystemVariables.opacityContentOnSurfaceFocused, "Design system"),
     opacityContentOnSurfaceSelected: FtCssVariable.external(designSystemVariables.opacityContentOnSurfaceSelected, "Design system"),
-    opacityContentOnSurfaceDragged: FtCssVariable.external(designSystemVariables.opacityContentOnSurfaceDragged, "Design system"),
 };
-let FtRipple = class FtRipple extends FtLitElement {
+export class FtRipple extends FtLitElement {
     constructor() {
         super(...arguments);
         this.primary = false;
@@ -28,100 +26,283 @@ let FtRipple = class FtRipple extends FtLitElement {
         this.activated = false;
         this.selected = false;
         this.disabled = false;
-    }
-    //language=css
-    getStyles() {
-        return css `
-            :host {
-                display: contents;
-
-                --mdc-ripple-color: ${FtRippleCssVariables.color};
-                --mdc-ripple-press-opacity: ${FtRippleCssVariables.opacityContentOnSurfacePressed};
-                --mdc-ripple-hover-opacity: ${FtRippleCssVariables.opacityContentOnSurfaceHover};
-                --mdc-ripple-focus-opacity: ${FtRippleCssVariables.opacityContentOnSurfaceFocused};
-                --mdc-ripple-selected-opacity: ${FtRippleCssVariables.opacityContentOnSurfaceSelected};
-                --mdc-ripple-activated-opacity: ${FtRippleCssVariables.opacityContentOnSurfaceDragged};
+        this.hovered = false;
+        this.focused = false;
+        this.pressed = false;
+        this.rippling = false;
+        this.rippleSize = 0;
+        this.originX = 0;
+        this.originY = 0;
+        this.resizeObserver = new ResizeObserver(() => this.setRippleSize());
+        this.onTransitionStart = (e) => {
+            if (e.propertyName === "transform") {
+                this.rippling = this.pressed;
             }
-
-            mwc-ripple.ft-ripple--secondary {
-                --mdc-ripple-color: ${FtRippleCssVariables.secondaryColor};
-            }
-
-            mwc-ripple.ft-ripple--primary {
-                --mdc-ripple-color: ${FtRippleCssVariables.primaryColor};
+        };
+        this.onTransitionEnd = (e) => {
+            if (e.propertyName === "transform") {
+                this.rippling = false;
             }
-        `;
+        };
+        this.moveRipple = (e) => {
+            var _a, _b;
+            let { x, y } = this.getCoordinates(e);
+            let rect = (_b = (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : { x: 0, y: 0, width: 0, height: 0 };
+            this.originX = Math.round(x != null ? x - rect.x : rect.width / 2);
+            this.originY = Math.round(y != null ? y - rect.y : rect.height / 2);
+        };
+        this.startPress = (e) => {
+            this.moveRipple(e);
+            this.pressed = !this.isIgnored(e);
+        };
+        this.endPress = () => {
+            this.pressed = false;
+        };
+        this.startHover = (e) => {
+            this.hovered = !this.isIgnored(e);
+        };
+        this.endHover = () => {
+            this.hovered = false;
+        };
+        this.startFocus = (e) => {
+            this.focused = !this.isIgnored(e);
+        };
+        this.endFocus = () => {
+            this.focused = false;
+        };
     }
-    getTemplate() {
+    render() {
+        let classes = {
+            "ft-ripple": true,
+            "ft-ripple--primary": this.primary,
+            "ft-ripple--secondary": this.secondary,
+            "ft-ripple--unbounded": this.unbounded,
+            "ft-ripple--selected": (this.selected || this.activated) && !this.disabled,
+            "ft-ripple--pressed": (this.pressed || this.rippling) && !this.disabled,
+            "ft-ripple--hovered": this.hovered && !this.disabled,
+            "ft-ripple--focused": this.focused && !this.disabled,
+        };
         return html `
-            <mwc-ripple
-                    class="${this.primary ? "ft-ripple--primary" : this.secondary ? "ft-ripple--secondary" : ""}"
-                    ?unbounded=${this.unbounded}
-                    ?activated=${this.activated}
-                    ?selected=${this.selected}
-                    ?disabled=${this.disabled}
-            ></mwc-ripple>
+            <style>
+                .ft-ripple .ft-ripple--effect,
+                .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+                    width: ${this.rippleSize}px;
+                    height: ${this.rippleSize}px;
+                }
+
+                .ft-ripple .ft-ripple--effect {
+                    left: ${this.originX}px;
+                    top: ${this.originY}px;
+                }
+            </style>
+            <div class="${classMap(classes)}">
+                <div class="ft-ripple--background"></div>
+                <div class="ft-ripple--effect"></div>
+            </div>
         `;
     }
+    contentAvailableCallback(props) {
+        super.contentAvailableCallback(props);
+        if (this.ripple) {
+            this.resizeObserver.observe(this.ripple);
+        }
+        if (this.rippleEffect && this.rippleEffect.ontransitionstart !== this.onTransitionStart) {
+            this.rippleEffect.ontransitionstart = this.onTransitionStart;
+            this.rippleEffect.ontransitionend = this.onTransitionEnd;
+        }
+    }
     updated(props) {
         super.updated(props);
         if (props.has("disabled") && this.disabled) {
             this.endRipple();
         }
+        if (props.has("unbounded")) {
+            this.setRippleSize();
+        }
     }
     endRipple() {
-        var _a, _b, _c;
-        (_a = this.rippleHandlers) === null || _a === void 0 ? void 0 : _a.endHover();
-        (_b = this.rippleHandlers) === null || _b === void 0 ? void 0 : _b.endFocus();
-        (_c = this.rippleHandlers) === null || _c === void 0 ? void 0 : _c.endPress();
+        this.endHover();
+        this.endFocus();
+        this.endPress();
+        this.rippling = false;
+    }
+    setRippleSize() {
+        if (this.ripple) {
+            const rect = this.ripple.getBoundingClientRect();
+            this.rippleSize = (this.unbounded ? 1 : 1.7) * Math.max(rect.width, rect.height);
+        }
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        const parent = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.host.parentNode;
+        const parent = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.host.parentElement;
         if (parent) {
-            const rh = new RippleHandlers(async () => this.mwcRipple);
-            const startPress = (...endEvents) => {
-                return (startEvent) => {
-                    endEvents.forEach(endEvent => window.addEventListener(endEvent, rh.endPress, { once: true }));
-                    rh.startPress(startEvent);
-                };
+            this.setupFor(parent);
+        }
+        this.setRippleSize();
+    }
+    setupFor(target) {
+        if (this.target === target) {
+            return;
+        }
+        this.onDisconnect && this.onDisconnect();
+        this.target = target;
+        target.setAttribute("data-is-ft-ripple-target", "true");
+        const startPress = (...endEvents) => {
+            return (startEvent) => {
+                endEvents.forEach(endEvent => window.addEventListener(endEvent, this.endPress, { once: true }));
+                this.startPress(startEvent);
             };
-            const mouseDownHandler = startPress("mouseup");
-            const touchStartHandler = startPress("touchend", "touchcancel");
-            const keyDownHandler = (e) => {
-                if (["Enter", " "].includes(e.key)) {
-                    startPress("keyup")();
+        };
+        const mouseDownHandler = startPress("mouseup", "contextmenu");
+        const touchStartHandler = startPress("touchend", "touchcancel");
+        const keyDownHandler = (e) => {
+            if (["Enter", " "].includes(e.key)) {
+                startPress("keyup")(e);
+            }
+        };
+        target.addEventListener("mouseover", this.startHover);
+        target.addEventListener("mousemove", this.moveRipple);
+        target.addEventListener("mouseleave", this.endHover);
+        target.addEventListener("mousedown", mouseDownHandler);
+        target.addEventListener("touchstart", touchStartHandler);
+        target.addEventListener("touchmove", this.moveRipple);
+        target.addEventListener("keydown", keyDownHandler);
+        target.addEventListener("focus", this.startFocus);
+        target.addEventListener("blur", this.endFocus);
+        target.addEventListener("focusin", this.startFocus);
+        target.addEventListener("focusout", this.endFocus);
+        this.onDisconnect = () => {
+            target.removeAttribute("data-is-ft-ripple-target");
+            target.removeEventListener("mouseover", this.startHover);
+            target.removeEventListener("mousemove", this.moveRipple);
+            target.removeEventListener("mouseleave", this.endHover);
+            target.removeEventListener("mousedown", mouseDownHandler);
+            target.removeEventListener("touchstart", touchStartHandler);
+            target.removeEventListener("touchmove", this.moveRipple);
+            target.removeEventListener("keydown", keyDownHandler);
+            target.removeEventListener("focus", this.startFocus);
+            target.removeEventListener("blur", this.endFocus);
+            target.removeEventListener("focusin", this.startFocus);
+            target.removeEventListener("focusout", this.endFocus);
+            this.onDisconnect = undefined;
+        };
+    }
+    getCoordinates(e) {
+        const mouseEvent = e;
+        const touchEvent = e;
+        let x, y;
+        if (mouseEvent.x != null) {
+            ({ x, y } = mouseEvent);
+        }
+        else if (touchEvent.touches != null) {
+            x = touchEvent.touches[0].clientX;
+            y = touchEvent.touches[0].clientY;
+        }
+        return { x, y };
+    }
+    isIgnored(e) {
+        if (this.disabled) {
+            return true;
+        }
+        if (e != null) {
+            for (let t of e.composedPath()) {
+                if (t === this.target) {
+                    break;
                 }
-            };
-            parent.addEventListener("mouseenter", rh.startHover);
-            parent.addEventListener("mouseleave", rh.endHover);
-            parent.addEventListener("mousedown", mouseDownHandler);
-            parent.addEventListener("touchstart", touchStartHandler);
-            parent.addEventListener("keydown", keyDownHandler);
-            parent.addEventListener("focus", rh.startFocus);
-            parent.addEventListener("blur", rh.endFocus);
-            this.onDisconnect = () => {
-                parent.removeEventListener("mouseenter", rh.startHover);
-                parent.removeEventListener("mouseleave", rh.endHover);
-                parent.removeEventListener("mousedown", mouseDownHandler);
-                parent.removeEventListener("touchstart", touchStartHandler);
-                parent.removeEventListener("keydown", keyDownHandler);
-                parent.removeEventListener("focus", rh.startFocus);
-                parent.removeEventListener("blur", rh.endFocus);
-            };
-            this.rippleHandlers = rh;
+                const anotherRippleExists = "hasAttribute" in t && t.hasAttribute("data-is-ft-ripple-target");
+                if (anotherRippleExists) {
+                    return true;
+                }
+            }
         }
+        return false;
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.onDisconnect && this.onDisconnect();
+        this.resizeObserver.disconnect();
         this.endRipple();
     }
-};
-FtRipple.elementDefinitions = {
-    "mwc-ripple": Ripple,
-};
+}
+FtRipple.elementDefinitions = {};
+//language=css
+FtRipple.styles = css `
+        :host {
+            display: contents;
+        }
+
+        .ft-ripple {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .ft-ripple:not(.ft-ripple--unbounded) {
+            overflow: hidden;
+        }
+
+        .ft-ripple .ft-ripple--background,
+        .ft-ripple .ft-ripple--effect {
+            position: absolute;
+            opacity: 0;
+            background-color: ${FtRippleCssVariables.color};
+        }
+
+        .ft-ripple.ft-ripple--secondary .ft-ripple--background,
+        .ft-ripple.ft-ripple--secondary .ft-ripple--effect {
+            background-color: ${FtRippleCssVariables.secondaryColor};
+        }
+
+        .ft-ripple.ft-ripple--primary .ft-ripple--background,
+        .ft-ripple.ft-ripple--primary .ft-ripple--effect {
+            background-color: ${FtRippleCssVariables.primaryColor};
+        }
+
+        .ft-ripple .ft-ripple--background {
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        .ft-ripple .ft-ripple--effect,
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            border-radius: 50%;
+        }
+
+        .ft-ripple .ft-ripple--effect {
+            transform: translate(-50%, -50%) scale(0.15);
+            transition: transform 300ms ease, opacity 75ms linear;
+        }
+
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            left: 50%;
+            top: 50%;
+        }
+
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            transform: translate(-50%, -50%);
+        }
+
+        .ft-ripple.ft-ripple--hovered .ft-ripple--background {
+            opacity: ${FtRippleCssVariables.opacityContentOnSurfaceHover};
+        }
+
+        .ft-ripple.ft-ripple--selected .ft-ripple--background {
+            opacity: ${FtRippleCssVariables.opacityContentOnSurfaceSelected};
+        }
+
+        .ft-ripple.ft-ripple--focused .ft-ripple--background {
+            opacity: ${FtRippleCssVariables.opacityContentOnSurfaceFocused};
+        }
+
+        .ft-ripple.ft-ripple--pressed .ft-ripple--effect {
+            opacity: ${FtRippleCssVariables.opacityContentOnSurfacePressed};
+            transform: translate(-50%, -50%) scale(1);
+        }
+    `;
 __decorate([
     property({ type: Boolean })
 ], FtRipple.prototype, "primary", void 0);
@@ -141,10 +322,30 @@ __decorate([
     property({ type: Boolean })
 ], FtRipple.prototype, "disabled", void 0);
 __decorate([
-    query("mwc-ripple")
-], FtRipple.prototype, "mwcRipple", void 0);
-FtRipple = __decorate([
-    customElement("ft-ripple")
-], FtRipple);
-export { FtRipple };
+    state()
+], FtRipple.prototype, "hovered", void 0);
+__decorate([
+    state()
+], FtRipple.prototype, "focused", void 0);
+__decorate([
+    state()
+], FtRipple.prototype, "pressed", void 0);
+__decorate([
+    state()
+], FtRipple.prototype, "rippling", void 0);
+__decorate([
+    state()
+], FtRipple.prototype, "rippleSize", void 0);
+__decorate([
+    state()
+], FtRipple.prototype, "originX", void 0);
+__decorate([
+    state()
+], FtRipple.prototype, "originY", void 0);
+__decorate([
+    query(".ft-ripple")
+], FtRipple.prototype, "ripple", void 0);
+__decorate([
+    query(".ft-ripple--effect")
+], FtRipple.prototype, "rippleEffect", void 0);
 //# sourceMappingURL=ft-ripple.js.map