@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/BottomSheet.js

@@ -0,0 +1,472 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_ANIMATION_TYPE, EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import FlexableMixin from '../mixins/FlexableMixin.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import Scrim from './Scrim.js';
+
+const SUPPORTS_SCROLLEND = 'onscrollend' in window;
+
+/* Weak Collection of Events that cane from drag handle */
+const dragHandleEvent = new WeakSet();
+
+CustomElement
+  .extend()
+  .mixin(StateMixin)
+  .set({
+    stateLayer: true,
+  })
+  .html`
+    <div id=container>
+      <div id=icon aria-hidden=true></div>
+    </div>
+  `
+  .recompose(({ refs: { container, state } }) => {
+    container.prepend(state);
+  })
+  .css`
+      :host {
+        --mdw-state__hovered-opacity: 0;
+        --mdw-state__pressed-opacity: 0;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline: 0;
+        align-self: stretch;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        cursor: grab;
+
+        outline:none;
+        pointer-events: auto;
+        user-select: none;
+        touch-action: none;
+
+        color: rgb(var(--mdw-color__on-surface-variant));
+      }
+
+      :host(:active) {
+        cursor: grabbing !important;
+      }
+
+      #container {
+        position: relative;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        min-block-size: 48px;
+        min-inline-size: 48px;
+      }
+
+      #state {
+        border-radius: 50%;
+      }
+
+      #state[pointed] {
+        --mdw-state__focused-opacity: 0;
+      }
+      
+
+      #icon {
+        block-size: 4px;
+        inline-size: 32px;
+
+        background-color: currentColor;
+        border-radius: 8px;
+      }
+    `
+  .events({
+    touchmove(event) {
+      event.preventDefault();
+    },
+  })
+  .autoRegister('mdw-bottom-sheet-handle');
+
+/**
+ * Bottom sheets show secondary content anchored to the bottom of the screen
+ * @see https://m3.material.io/components/bottom-sheets/specs
+ */
+export default CustomElement
+  .extend()
+  .mixin(ThemableMixin)
+  .mixin(FlexableMixin)
+  .mixin(ShapeMixin)
+  .mixin(AriaReflectorMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(ResizeObserverMixin)
+  .observe({
+    /** Overrides default of shape top to be true */
+    shapeTop: {
+      type: 'boolean',
+      empty: true,
+    },
+    /** Whether the bottom sheet displays as a modal and shows a scrim. */
+    modal: 'boolean',
+    /** If true, the sheet is fixed (not translated) and anchors to layout. */
+    fixed: 'boolean',
+    /** Whether the bottom sheet is currently open. */
+    open: 'boolean',
+    /** Whether the bottom sheet is expanded to show full content. */
+    expanded: 'boolean',
+    /** Last measured block size in pixels (used for layout calculations). */
+    _lastComputedBlockSize: {
+      type: 'float',
+      nullable: false,
+    },
+    /** Last measured offsetTop in pixels. */
+    _lastOffsetTop: {
+      type: 'float',
+      nullable: false,
+    },
+    /** Current animation duration (milliseconds). */
+    _animationDuration: {
+      type: 'integer',
+      value: 0,
+    },
+    /** Current animation easing string for transitions. */
+    _animationEasing: {
+      value: 'ease-out',
+    },
+    /** Current CSS translateY value applied to the sheet. */
+    _translateY: { value: '100%' },
+    /** Timestamp of last child scroll event (used to debounce drag). */
+    _lastChildScrollTime: 'float',
+    /** ARIA `valuenow` value used by the drag handle for accessibility. */
+    _ariaValueNow: {
+      type: 'integer',
+    },
+    /** When true, a drag handle is rendered to allow pointer dragging. */
+    dragHandle: 'boolean',
+    /** Event handler: called when the sheet opens. */
+    onopen: EVENT_HANDLER_TYPE,
+    /** Event handler: called when the sheet closes. */
+    onclose: EVENT_HANDLER_TYPE,
+  })
+  .set({
+    _hasCheckedResize: false,
+    /** @type {InstanceType<Scrim>} */
+    _scrim: null,
+    _dragTimestamp: 0,
+    /** @type {number} */
+    _dragDeltaY: null,
+    /** @type {number} */
+    _dragStartY: null,
+  })
+  .observe({
+    hostStyles: {
+      ...ELEMENT_ANIMATION_TYPE,
+      get({
+        open, fixed, _lastComputedBlockSize, _translateY,
+        _animationDuration, _animationEasing,
+      }) {
+        const computedMargin = (fixed) ? `${-1 * _lastComputedBlockSize}px` : 0;
+        return {
+          styles: {
+            marginBottom: computedMargin,
+            transform: fixed ? 'none' : `translateY(${_translateY})`,
+          },
+          timing: {
+            duration: _animationDuration,
+            easing: _animationEasing,
+          },
+        };
+      },
+    },
+  })
+  .html`
+    <mdw-bottom-sheet-handle id=drag-handle mdw-if={dragHandle} tabindex=0
+      role=separator aria-valuemin=-100 aria-valuemax=0 aria-valuenow={_ariaValueNow}></mdw-bottom-sheet-handle>
+    <slot id=slot></slot>
+  `
+  .methods({
+    /**
+     * Ensure a scrim is present when the sheet is modal and open.
+     * @param {boolean} [animate=false] - If true, animate scrim changes.
+     * @return {void}
+     */
+    checkForScrim(animate = false) {
+      let { open, modal, _scrim } = this;
+      if (open && modal) {
+        if (!_scrim) {
+          _scrim = new Scrim();
+          _scrim.addEventListener('click', () => {
+            this.open = false;
+            if (!this.dispatchEvent(new Event('close', { cancelable: true }))) {
+              // Revert if cancelled
+              this.open = true;
+            }
+          });
+          this._scrim = _scrim;
+        }
+        this.before(_scrim);
+        _scrim.hidden = false;
+      } else if (_scrim) {
+        if (!animate) {
+          _scrim.remove();
+        }
+        _scrim.hidden = true;
+      }
+    },
+    /**
+     * Evaluate drag state and settle the sheet (close or snap open).
+     * @return {void}
+     */
+    checkDragFinished() {
+      const { open, _dragStartY, _dragDeltaY, _lastComputedBlockSize, modal, fixed, _lastOffsetTop } = this;
+      if (!open || fixed || _dragStartY == null || _dragDeltaY == null) return;
+      const containerHeight = _lastOffsetTop + _lastComputedBlockSize - 72;
+      const min = (_lastComputedBlockSize > containerHeight)
+        ? _lastComputedBlockSize - containerHeight
+        : 0;
+      // visiblity = (max - position) / range
+      const visibility = (_lastComputedBlockSize - _dragDeltaY) / (_lastComputedBlockSize - min);
+      this._dragStartY = null;
+      if (modal && visibility < 0.5) {
+        // Should close
+        this._animationDuration = 200 * visibility;
+        this._animationEasing = 'ease-out';
+        this._translateY = '100%';
+        this._dragDeltaY = null;
+        this.open = false;
+        this.dispatchEvent(new Event('close', { cancelable: false }));
+      } else {
+        // Should snap back to fully open
+        this._animationDuration = 250 * (0.5 * visibility);
+        this._dragDeltaY = min;
+        this._translateY = `${0}px`;
+        this._animationEasing = 'ease-in';
+        this.expanded = true;
+      }
+    },
+    /**
+     * Pointer active on the drag handle; registers the pointer for dragging.
+     * @param {PointerEvent} event
+     * @return {void}
+     */
+    onDragHandleActive(event) {
+      if (!event.isTrusted) return;
+      if (!event.isPrimary) return;
+      if (event.pointerType === 'touch') return;
+      if (event.buttons !== 1) return;
+      dragHandleEvent.add(event);
+    },
+    /**
+     * Pointer inactive on the drag handle; finalizes potential drag.
+     * @param {PointerEvent} event
+     * @return {void}
+     */
+    onDragHandleInactive(event) {
+      if (!event.isTrusted) return;
+      if (!event.isPrimary) return;
+      if (event.pointerType === 'touch') return;
+      if (event.type !== 'pointerup' && event.buttons !== 1) return;
+      this.checkDragFinished();
+    },
+    /**
+     * Handle pointer or touch move events during dragging.
+     * @param {PointerEvent|TouchEvent} event
+     * @return {void}
+     */
+    onPointerOrTouchMove(event) {
+      /** @type {{clientY:number,pageY:number}} */
+      let source;
+      const isTouch = (event.type === 'touchmove');
+      if (isTouch) {
+        const { touches } = /** @type {TouchEvent} */ (event);
+        if (!touches.length) return;
+        source = touches[0];
+      } else {
+        source = /** @type {PointerEvent} */ (event);
+        // if (!dragHandleEvent.has(event)) return;
+      }
+      const { open, _lastChildScrollTime, _dragStartY, _dragTimestamp, expanded } = this;
+      if (!open || _dragStartY == null) return;
+      if (_lastChildScrollTime && performance.now() - _lastChildScrollTime <= (SUPPORTS_SCROLLEND ? 5000 : 500)) {
+        // Assume still scrolling
+        return;
+      }
+      let { clientY, pageY } = source;
+      clientY ??= pageY - window.scrollY; // Safari
+      const { _lastOffsetTop, _lastComputedBlockSize } = this;
+      const containerHeight = _lastOffsetTop + _lastComputedBlockSize - 72;
+      const min = _lastComputedBlockSize > containerHeight
+        ? _lastComputedBlockSize - containerHeight
+        : 0;
+      const delta = Math.max((clientY - _dragStartY), min);
+      this._dragDeltaY = delta;
+
+      if (isTouch && expanded && performance.now() - _dragTimestamp < 100) {
+        // Store location, but don't animate until sure not scrolling
+        return;
+      }
+      if (expanded && delta !== min) {
+        // Buggy in demos
+        // this.expanded = false;
+      }
+
+      this._animationDuration = 0;
+      this._translateY = `${delta}px`;
+    },
+  })
+  .overrides({
+    /**
+     * Called by ResizeObserverMixin when the element's size changes.
+     * @param {ResizeObserverEntry} entry
+     * @return {void}
+     */
+    onResizeObserved(entry) {
+      this._lastComputedBlockSize = entry.borderBoxSize[0]?.blockSize;
+      this._lastOffsetTop = this.offsetTop;
+    },
+  })
+  .events({
+    '~pointerdown'(event) {
+      if (event.pointerType !== 'touch') {
+        if (event.buttons !== 1) return;
+        // Pointer down isn't from drag-handle. Ignore
+        if (!dragHandleEvent.has(event)) return;
+      }
+      if (!this.open) return;
+      let { clientY, pageY } = event;
+      clientY ??= pageY - window.scrollY; // Safari
+      this._dragStartY = clientY - (this._dragDeltaY ?? 0);
+      this._dragDeltaY = 0;
+      this._dragTimestamp = performance.now();
+    },
+    '~pointermove': 'onPointerOrTouchMove',
+    '~pointerup'(event) {
+      if (event.pointerType === 'touch') return;
+      this.checkDragFinished();
+    },
+    'pointerleave'(event) {
+      if (event.pointerType === 'touch') return;
+      this.checkDragFinished();
+    },
+    '~touchmove': 'onPointerOrTouchMove',
+    touchcancel: 'checkDragFinished',
+    '~touchend': 'checkDragFinished',
+    /** Scroll events do no bubble but can be captured, passively */
+    '*~scroll'() {
+      if (this.fixed) return;
+      this.checkDragFinished();
+      this._lastChildScrollTime = performance.now();
+      // Wiping touch state
+      this._dragStartY = null;
+      this._dragDeltaY = null;
+    },
+    '*scrollend'() {
+      if (this.fixed) return;
+      this._lastChildScrollTime = null;
+    },
+  })
+  .childEvents({
+    dragHandle: {
+      '~pointerdown': 'onDragHandleActive',
+      '~pointermove': 'onDragHandleActive',
+    },
+  })
+  .on({
+    openChanged(previous, open) {
+      // Refresh metrics
+      const _lastOffsetTop = this.offsetTop;
+      this._lastOffsetTop = _lastOffsetTop;
+      // No longer using initial animation timing of 0
+      this._animationDuration = open ? 250 : 200;
+      if (open) {
+        let y = 0;
+        if (!this.fixed) {
+          const { _lastComputedBlockSize } = this;
+          const containerHeight = _lastOffsetTop + _lastComputedBlockSize;
+          if (_lastComputedBlockSize > containerHeight / 2) {
+          // Bottom Sheet is oversized, clamp to 50%
+            y = _lastComputedBlockSize - (containerHeight / 2);
+          }
+        }
+        this._translateY = `${y}px`;
+        this._dragDeltaY = y;
+      } else {
+        this._translateY = '100%';
+        this.expanded = false;
+      }
+      this._animationEasing = open ? 'ease-in' : 'ease-out';
+      this.checkForScrim(true);
+      if (open) {
+        this.focus();
+      }
+    },
+    modalChanged() {
+      this._animationDuration = 0;
+      this.checkForScrim(false);
+    },
+  })
+  .css`
+    :host {
+      --mdw-bg: var(--mdw-color__surface-container-low);
+      --mdw-ink: var(--mdw-color__on-surface);
+      --mdw-shape__size: var(--mdw-shape__extra-large);
+      --mdw-shape__size__bottom-start-size: 0px;
+      --mdw-shape__size__bottom-end-size: 0px;
+      position: sticky;
+      inset-block-end: 0;
+      inset-inline: 0;
+
+      overflow-y: clip;
+
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+
+      box-sizing: border-box;
+      max-inline-size: 640px;
+      margin-inline: auto;
+      padding-block-start: 16px;
+
+      pointer-events: none;
+
+      transform: translateY(100%);
+
+      visibility: hidden;
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+
+      transition: visibility 200ms;
+      
+      will-change: transform, margin-block-end, visibility;
+    }
+
+    :host(:where([open])) {
+      pointer-events: auto;
+
+      visibility: inherit;
+
+      transition: visibility 0s;
+    }
+
+    :host(:where(:not([fixed]))) {
+      position: fixed; 
+
+      max-block-size: calc(100% - 72px);
+      touch-action: none;
+
+      z-index: 24;
+    }
+
+    :host(:where([expanded])) {
+      overflow-y:auto;
+      touch-action: auto;
+    }
+
+    :host(:where([drag-handle])) {
+      padding-block-start: 48px;
+    }
+  `
+  .autoRegister('mdw-bottom-sheet');

package/components/Box.js

@@ -3,35 +3,16 @@ import FlexableMixin from '../mixins/FlexableMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 /**
- * Containers are stateless elements that may have a color and ink.
+ * Boxes are stateless elements that may have a color and ink.
  * They should have simple geometry for rendering and layout.
  */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .mixin(FlexableMixin)
-  .observe({
-    inline: 'boolean',
-    grid: 'boolean',
-    block: {
-      type: 'boolean',
-      empty: true,
-    },
-  })
+  .html`<slot id=slot></slot>`
   .css`
-    :host {
-      display: block;
-    }
-    
-    :host([inline]) {
-      display: inline-block;
-    }
-    
-    :host([flex]:where([inline])) {
-      display: inline-flex;
-    }
-
-    :host([color]) {
+    :host(:where([color])) {
       background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     }
@@ -49,36 +30,17 @@ export default CustomElement
       font: var(--mdw-type__font);
       letter-spacing: var(--mdw-type__letter-spacing);
     }
-    
-    #slot {
-      /* Passthrough from parent */
-      block-size: inherit;
-      inline-size: inherit;
-    }
 
-    :host([grid]) {
-      display: grid;
-      column-gap: 16px; /* Gutters */
-      grid-auto-flow: row;
-      grid-template-columns: repeat(var(--mdw-grid__columns), 1fr);
+    #slot::slotted([flex-0]) {
+      flex: 0;
     }
 
-    #slot[grid]::slotted(*) { grid-column: auto / span calc(var(--mdw-grid__columns)) }
-    #slot[grid]::slotted([col-span="1"]) { grid-column: auto / span 1; }
-    #slot[grid]::slotted([col-span="2"]) { grid-column: auto / span min(2, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="3"]) { grid-column: auto / span min(3, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="4"]) { grid-column: auto / span min(4, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="5"]) { grid-column: auto / span min(5, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="6"]) { grid-column: auto / span min(6, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="7"]) { grid-column: auto / span min(7, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="8"]) { grid-column: auto / span min(8, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="9"]) { grid-column: auto / span min(9, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="10"]) { grid-column: auto / span min(10, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="11"]) { grid-column: auto / span min(11, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="12"]) { grid-column: auto / span min(12, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="50%"]) { grid-column: auto / span max(calc(var(--mdw-grid__columns) / 2), 1); }
-    #slot[grid]::slotted([col-span="25%"]) { grid-column: auto / span max(calc(var(--mdw-grid__columns) / 4), 1); }
+    #slot::slotted([flex-1]) {
+      flex: 1;
+    }
 
+    #slot::slotted([flex-none]) {
+      flex: none;
+    }
   `
-  .html`<slot id=slot type-style={typeStyle} grid={grid}></slot>`
   .autoRegister('mdw-box');