@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/mixins/RippleMixin.js

@@ -0,0 +1,115 @@
+import Ripple from '../components/Ripple.js';
+
+/** @typedef {import('../components/Ripple.js').default} Ripple */
+
+import styles from './RippleMixin.css' assert { type: 'css' };
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default>} Base
+ */
+export default function RippleMixin(Base) {
+  return Base
+    .extend()
+    .css(styles)
+    .set({
+      /** @type {WeakRef<InstanceType<Ripple>>} */
+      _lastRippleWeakRef: null,
+      /** Flag set if ripple was added this event loop. */
+      _rippleAdded: false,
+    })
+    .define({
+      _lastRipple: {
+        get() {
+          const element = this._lastRippleWeakRef?.deref();
+          if (element?.isConnected) return element;
+          return null;
+        },
+        set(ripple) {
+          this._lastRippleWeakRef = ripple ? new WeakRef(ripple) : null;
+        },
+      },
+    })
+    .methods({
+      /**
+       * @param {number} [x]
+       * @param {number} [y]
+       * @param {boolean} [hold]
+       * @return {InstanceType<Ripple>}
+       */
+      addRipple(x, y, hold) {
+        const { rippleContainer } = this.refs;
+        if (!rippleContainer.isConnected) return null; // Detached?
+        const ripple = new Ripple();
+        this._rippleAdded = true;
+        queueMicrotask(() => {
+          // Reset before next event loop;
+          this._rippleAdded = false;
+        });
+        rippleContainer.appendChild(ripple);
+        if (hold) {
+          ripple.holdRipple = true;
+        }
+        ripple.updatePosition(x, y);
+        this._lastRipple = ripple;
+        return ripple;
+      },
+    })
+    .html/* html */`
+      <div id=ripple-container _if={!disabledState} aria-hidden=true></div>
+    `
+    .events({
+      '~pointerdown'(event) {
+        if (event.button) return;
+        if (this.disabledState) return;
+
+        const { rippleContainer } = this.refs;
+        if (!rippleContainer.isConnected) return; // Detached?
+        const rect = rippleContainer.getBoundingClientRect();
+        const x = event.pageX - rect.left - window.pageXOffset;
+        const y = event.pageY - rect.top - window.pageYOffset;
+        const lastRipple = this._lastRipple;
+        if (lastRipple) {
+          lastRipple.holdRipple = false;
+        }
+        console.debug('ripple from pointerdown');
+        this.addRipple(x, y);
+      },
+      '~click'(e) {
+        if (this._rippleAdded) {
+          // Avoid double event
+          return;
+        }
+        if (e.pointerType || e.detail) return;
+        if (this.disabledState) return;
+        if (this._pressed) return;
+        const lastRipple = this._lastRipple;
+        if (lastRipple) {
+          lastRipple.holdRipple = false;
+        }
+        console.debug('ripple from programmatic click');
+        this.addRipple();
+      },
+    })
+    .on({
+      _pressedChanged(oldValue, pressed) {
+        const ripple = this._lastRipple;
+        if (!pressed) {
+          if (ripple) {
+            ripple.holdRipple = false;
+          }
+          return;
+        }
+        if (!ripple || ripple.hadRippleReleased) {
+          if (this._lastInteraction !== 'key') {
+            // Sometimes pointer events may be out of order
+            return;
+          }
+          console.debug('ripple from press state');
+          this.addRipple(null, null, true);
+          return;
+        }
+        if (ripple.hadRippleHeld) return;
+        ripple.holdRipple = true;
+      },
+    });
+}

package/mixins/ScrollListenerMixin.js

@@ -0,0 +1,100 @@
+const IDLE_TIMEOUT_MS = 500;
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function ScrollListenerMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
+      scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+    })
+    .set({
+      /** @type {WeakRef<EventTarget>} */
+      _scroller: null,
+      /** @type {EventListener} */
+      _scrollerScrollListener: null,
+      /** @type {EventListener} */
+      _scrollerResizeListener: null,
+      _scrollDebounce: null,
+    })
+    .methods({
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onScrollIdle() {},
+
+      /** @param {Event} event */
+      onScrollerScroll(event) {
+        this.scrollListenerPositionY = (event.currentTarget === window)
+          ? window.scrollY
+          : /** @type {HTMLElement} */ (event.currentTarget).scrollTop;
+
+        this.scrollListenerPositionX = (event.currentTarget === window)
+          ? window.scrollX
+          : /** @type {HTMLElement} */ (event.currentTarget).scrollLeft;
+
+        clearTimeout(this._scrollDebounce);
+        this._scrollDebounce = setTimeout(() => this.onScrollIdle(), IDLE_TIMEOUT_MS);
+      },
+
+      /** @param {Event} event */
+      onScrollerResize(event) {},
+
+      /**
+       * @param {EventTarget} [scroller]
+       * @return {boolean}
+       */
+      startScrollListener(scroller) {
+        scroller ??= this.offsetParent;
+        if (!scroller) return false;
+
+        if (scroller === document.body) {
+          // console.log('scroller is body, attaching to window');
+          scroller = window;
+        }
+
+        this._scroller = new WeakRef(scroller);
+        this._scrollerScrollListener = this.onScrollerScroll.bind(this);
+        this._scrollerResizeListener = this.onScrollerResize.bind(this);
+        scroller.addEventListener('scroll', this._scrollerScrollListener);
+        scroller.addEventListener('resize', this._scrollerResizeListener);
+        this.scrollListenerPositionX = 0;
+        this.scrollListenerPositionY = 0;
+        return true;
+      },
+
+      getScrollingElementScrollHeight() {
+        const element = this.getScroller();
+        if (element === window) {
+          return document.documentElement.scrollHeight;
+        }
+        // @ts-expect-error Skip Element cast
+        return element.scrollHeight;
+      },
+
+      getScrollingElementClientHeight() {
+        const element = this.getScroller();
+        if (element === window) {
+          return window.innerHeight;
+        }
+        // @ts-expect-error Skip Element cast
+        return element.clientHeight;
+      },
+
+      getScroller() {
+        return this._scroller.deref();
+      },
+
+      /**
+       * @param {EventTarget} [scroller]
+       * @return {boolean}
+       */
+      clearScrollListener(scroller) {
+        scroller ??= this._scroller?.deref();
+        if (!scroller) return false;
+        if (!this._scrollerScrollListener) return false;
+        scroller.removeEventListener('scroll', this._scrollerScrollListener);
+        return true;
+      },
+    });
+}

package/mixins/ShapeMixin.css

@@ -0,0 +1,135 @@
+:host {
+  --mdw-shape__size: 0px;
+  --mdw-shape__bg: transparent;
+  z-index: 0;
+}
+
+/** Without CSS Mixins, we have to use external attributes to tag hosts **/
+.shape {
+  --mdw-surface__will-change: none;
+  --mdw-shape__size__top-start-size: var(--mdw-shape__size);
+  --mdw-shape__size__top-end-size: var(--mdw-shape__size);
+  --mdw-shape__size__bottom-start-size: var(--mdw-shape__size);
+  --mdw-shape__size__bottom-end-size: var(--mdw-shape__size);
+
+  /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
+  --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
+  --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
+  --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
+  --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
+  --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
+  --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
+
+  --mdw-shape__rounded: 1;
+  --mdw-shape__mask-border-source: none;
+  --mdw-shape__mask: none;
+  --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
+
+  position: absolute;
+  inset: 0;
+
+  overflow: hidden;
+
+  z-index: -1;
+
+  background-color: var(--mdw-shape__bg, transparent);
+
+  border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
+  border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
+  border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
+  border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
+
+  transition-delay: 1ms;
+  transition-duration: 200ms;
+  transition-property: background-color, color;
+  will-change: background-color, color;
+
+}
+
+.shape[outlined] {
+  background-color: transparent;
+}
+
+.shape[color] {
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-ink));
+}
+
+.shape:is([color="none"], [color="transparent"]) {
+  background-color: transparent;
+}
+
+.shape[shape-style="none"] {
+  --mdw-shape__size: 0px;
+}
+
+.shape[shape-style="extra-small"] {
+  --mdw-shape__size: var(--mdw-shape__extra-small);
+}
+
+.shape[shape-style="small"] {
+  --mdw-shape__size: var(--mdw-shape__small);
+}
+
+.shape[shape-style="medium"] {
+  --mdw-shape__size: var(--mdw-shape__medium);
+}
+
+.shape[shape-style="large"] {
+  --mdw-shape__size: var(--mdw-shape__large);
+}
+
+.shape[shape-style="extra-large"] {
+  --mdw-shape__size: var(--mdw-shape__extra-large);
+}
+
+.shape[shape-style="full"] {
+  --mdw-shape__size: var(--mdw-shape__full);
+}
+
+.shape[shape-style="inherit"] {
+  --mdw-shape__size: inherit;
+}
+
+.shape[shape-top] {
+  --mdw-shape__size__bottom-start-size: 0px;
+  --mdw-shape__size__bottom-end-size: 0px;
+  --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
+
+}
+
+.shape[shape-bottom] {
+  --mdw-shape__size__top-start-size: 0px;
+  --mdw-shape__size__top-end-size: 0px;
+  --mdw-shape__mask: linear-gradient(black 50%, transparent 50%);
+}
+
+.shape[shape-start] {
+  --mdw-shape__size__top-end-size: 0px;
+  --mdw-shape__size__bottom-end-size: 0px;
+  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), black 50%, transparent 50%);
+}
+
+.shape[shape-end] {
+  --mdw-shape__size__top-start-size: 0px;
+  --mdw-shape__size__bottom-start-size: 0px;
+  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
+}
+
+@supports(-webkit-mask-box-image: none) {
+  .shape {
+    --mdw-shape__rounded: inherit;
+    --mdw-shape__mask-border-source: inherit;
+
+    -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
+      8 fill /
+      var(--mdw-shape__size)
+      stretch;
+
+    -webkit-mask: var(--mdw-shape__mask);
+
+    transition-duration: 200ms, 200ms, 200ms;
+    transition-property: background-color, color, -webkit-mask-box-image-width;
+    will-change: background-color, color, -webkit-mask-box-image;
+  }
+}

package/mixins/ShapeMixin.js

@@ -0,0 +1,31 @@
+import outlineStyles from '../components/Outline.css' assert { type: 'css' };
+
+import styles from './ShapeMixin.css' assert { type: 'css' };
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
+ */
+export default function ShapeMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      shapeTop: 'boolean',
+      shapeBottom: 'boolean',
+      shapeStart: 'boolean',
+      shapeEnd: 'boolean',
+      shapeStyle: 'string',
+      outlined: 'boolean',
+    })
+    .css(
+      outlineStyles,
+      styles,
+    )
+    .html/* html */`
+      <div id=shape part=shape class=shape elevated={elevated} shape-top={shapeTop} shape-bottom={shapeBottom} shape-start={shapeStart} shape-end={shapeEnd} shape-style={shapeStyle} color={color} outlined={outlined} disabled={disabledState}>
+        <div id=outline _if={outlined} class=outline disabled={disabledState} focused={focusedState} pressed={pressedState} hovered={hoveredState}>
+          <div id=outline-left class="outline-section outline-left"></div>
+          <div id=outline-right class="outline-section outline-right"></div>
+        </div>
+      </div>
+    `;
+}

package/mixins/StateMixin.css

@@ -0,0 +1,82 @@
+/* https://m3.material.io/foundations/interaction-states */
+
+:host {
+  --mdw-state__hovered-opacity: 0.08;
+  --mdw-state__focused-opacity: 0.12;
+  --mdw-state__pressed-opacity: 0.12;
+  --mdw-state__dragged-opacity: 0.12;
+  position: relative;
+
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Remove Firefox inner */
+:host(::-moz-focus-inner) {
+  border: 0;
+}
+
+#state {
+  position: absolute;
+  inset: 0;
+
+  pointer-events: none;
+
+  opacity: calc(
+      var(--mdw-state__hovered-opacity) +
+      var(--mdw-state__focused-opacity) +
+      var(--mdw-state__pressed-opacity) +
+      var(--mdw-state__dragged-opacity)
+    );
+  /* opacity handled by theme engine */
+  background-color: currentColor;
+  border-radius: inherit;
+
+  transition-delay: 0ms;
+  transition-duration: 000ms;
+  transition-property: opacity, color, background-color;
+  will-change: opacity;
+}
+
+#state[touched] {
+  --mdw-state__hovered-opacity: 0;
+  --mdw-state__focused-opacity: 0;
+}
+
+/* Remove Hover State */
+#state:is(
+:not([hovered]),
+[disabled]:not([state-disabled~="hover"]),
+[state-off~="hover"]) {
+  --mdw-state__hovered-opacity: 0;
+}
+
+/* Remove Focus State */
+#state:is(
+:not([focused]),
+[disabled]:not([state-disabled~="focus"]),
+[state-off~="focus"]) {
+  --mdw-state__focused-opacity: 0;
+}
+
+/* Remove Pressed State */
+
+#state:is(
+:not([pressed]),
+[disabled]:not([state-disabled~="pressed"]),
+[state-off~="pressed"]) {
+  --mdw-state__pressed-opacity: 0;
+}
+
+/* Remove Dragged State */
+:host(:not([aria-dragged="true"])) #state,
+#state:is(
+  [disabled]:not([state-disabled~="dragged"]),
+  [state-off~="dragged"]) {
+  --mdw-state__dragged-opacity: 0;
+}
+
+/* Disabled */
+#state[disabled]:not([state-disabled]) {
+  display: none;
+}

package/mixins/StateMixin.js

@@ -0,0 +1,114 @@
+import styles from './StateMixin.css' assert { type: 'css' };
+
+// Globals
+
+let lastInteractionWasTouch = window?.matchMedia?.('(any-pointer: coarse)').matches;
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function StateMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      disabled: 'boolean',
+      _lastInteraction: {
+        /** @type {'mouse'|'touch'|'key'|'pen'|null} */
+        value: null,
+      },
+      _hovered: 'boolean',
+      _focused: 'boolean',
+      _pressed: 'boolean',
+      stateLayer: 'boolean',
+    })
+    .observe({
+      disabledState({ disabled }) { return disabled; },
+      hoveredState({ _hovered }) { return _hovered; },
+      focusedState({ _focused }) { return _focused; },
+      pressedState({ _pressed }) { return _pressed; },
+      touchedState({ _lastInteraction }) {
+        return _lastInteraction === 'touch';
+      },
+    })
+    .define({
+      stateTargetElement() { return this; },
+    })
+    .css(styles)
+    .html/* html */`
+      <div id=state _if={stateLayer}
+        disabled={disabledState}
+        focused={focusedState}
+        hovered={hoveredState}
+        pressed={pressedState}
+        interaction={_lastInteraction}
+        touched=${({ _lastInteraction }) => _lastInteraction === 'touch'}
+        aria-hidden=true></div>
+    `
+    .events({
+      pointerenter(event) {
+        if (!event.isPrimary) return;
+        this._pressed = this.stateTargetElement.matches(':active');
+        if (event.pointerType === 'touch') return;
+        this._hovered = true;
+        // Firefox lags a frame before reporting :hover
+        // requestAnimationFrame(() => {
+        //  this._hovered = this.stateTargetElement.matches(':hover');
+        // });
+      },
+      '~pointerdown'(event) {
+        if (!event.isPrimary) return;
+        this._lastInteraction = /** @type {'touch'|'mouse'|'pen'} */ (event.pointerType);
+        this._pressed = true;
+      },
+      '~pointerup'(event) {
+        if (!event.isPrimary) return;
+        this._lastInteraction = /** @type {'touch'|'mouse'|'pen'} */ (event.pointerType);
+        this._pressed = false;
+      },
+      pointercancel(e) {
+        if (!e.isPrimary) return;
+        this._pressed = this.stateTargetElement.matches(':active');
+      },
+      pointerleave(event) {
+        if (!event.isPrimary) return;
+        this._pressed = false;
+        this._hovered = false;
+      },
+      '~keydown'(e) {
+        this._lastInteraction = 'key';
+        if (e.repeat) return;
+        // console.debug('keydown', this.stateTargetElement.matches(':active'));
+        requestAnimationFrame(() => {
+          this._pressed = this.stateTargetElement.matches(':active');
+          // console.debug('pressed? after one keydown frame', this._pressed);
+        });
+      },
+      '~keyup'() {
+        this._lastInteraction = 'key';
+        // console.debug('keyup', this.stateTargetElement.matches(':active'));
+        requestAnimationFrame(() => {
+          this._pressed = this.stateTargetElement.matches(':active');
+          // console.debug('pressed? after one keyUP frame?', this._pressed);
+        });
+      },
+      blur() {
+        this._focused = false;
+        if (!this._lastInteraction) return;
+        lastInteractionWasTouch = (this._lastInteraction === 'touch');
+        // this._lastInteraction = null;
+      },
+      focus() {
+        this._focused = true;
+        // Element was focused without a mouse or touch event (keyboard or programmatic)
+        if (!this._lastInteraction && lastInteractionWasTouch) {
+          // Replicate touch behavior
+          this._lastInteraction = 'touch';
+        }
+      },
+    })
+    .on({
+      disconnected() {
+        this._lastInteraction = null;
+      },
+    });
+}