@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/mixins/RTLObserverMixin.js

@@ -8,7 +8,6 @@ let rtlObserver;
  */
 export default function RTLObserverMixin(Base) {
   return Base
-    .extend()
     .observe({
       pageIsRTL: {
         type: 'boolean',

package/mixins/ResizeObserverMixin.js

@@ -10,9 +10,11 @@ const resizeObserver = new ResizeObserver((entries) => {
  */
 export default function ResizeObserverMixin(Base) {
   return Base
-    .extend()
-    .set({
-      observeResizeOnConnected: true,
+    .observe({
+      _resizeObserverEnabled: {
+        type: 'boolean',
+        value: true,
+      },
     })
     .methods({
       /** @param {ResizeObserverEntry} entry */
@@ -20,7 +22,9 @@ export default function ResizeObserverMixin(Base) {
         // Virtual function
       },
       observeResize() {
-        resizeObserver.observe(this);
+        resizeObserver.observe(this, {
+          box: 'border-box',
+        });
       },
       unobserveResize() {
         resizeObserver.unobserve(this);
@@ -28,11 +32,18 @@ export default function ResizeObserverMixin(Base) {
     })
     .on({
       connected() {
-        if (!this.observeResizeOnConnected) return;
+        if (!this._resizeObserverEnabled) return;
         this.observeResize();
       },
       disconnected() {
         this.unobserveResize();
       },
+      _resizeObserverEnabledChanged(previous, enabled) {
+        if (enabled) {
+          this.observeResize();
+        } else {
+          this.unobserveResize();
+        }
+      },
     });
 }

package/mixins/RippleMixin.js

@@ -7,7 +7,6 @@ import Ripple from '../components/Ripple.js';
  */
 export default function RippleMixin(Base) {
   return Base
-    .extend()
     .set({
       /** @type {WeakRef<InstanceType<Ripple>>} */
       _lastRippleWeakRef: null,
@@ -42,7 +41,7 @@ export default function RippleMixin(Base) {
           // Reset before next event loop;
           this._rippleAdded = false;
         });
-        rippleContainer.appendChild(ripple);
+        rippleContainer.append(ripple);
         if (hold) {
           ripple.holdRipple = true;
         }
@@ -51,8 +50,8 @@ export default function RippleMixin(Base) {
         return ripple;
       },
     })
-    .html/* html */`
-      <div id=ripple-container _if={!disabledState} aria-hidden=true></div>
+    .html`
+      <div id=ripple-container mdw-if={!disabledState} aria-hidden=true></div>
     `
     .events({
       '~pointerdown'(event) {
@@ -68,8 +67,8 @@ export default function RippleMixin(Base) {
         if (lastRipple) {
           lastRipple.holdRipple = false;
         }
-        console.debug('ripple from pointerdown');
-        this.addRipple(x, y);
+        // Ripple from pointerdown
+        this.addRipple(x, y, true);
       },
       '~click'(e) {
         if (this._rippleAdded) {
@@ -78,17 +77,17 @@ export default function RippleMixin(Base) {
         }
         if (e.pointerType || e.detail) return;
         if (this.disabledState) return;
-        if (this._pressed) return;
+        if (this.pressedState || this._keyReleased) return;
         const lastRipple = this._lastRipple;
         if (lastRipple) {
           lastRipple.holdRipple = false;
         }
-        console.debug('ripple from programmatic click');
+        // Ripple from programmatic click
         this.addRipple();
       },
     })
     .on({
-      _pressedChanged(oldValue, pressed) {
+      pressedStateChanged(oldValue, pressed) {
         const ripple = this._lastRipple;
         if (!pressed) {
           if (ripple) {
@@ -101,7 +100,7 @@ export default function RippleMixin(Base) {
             // Sometimes pointer events may be out of order
             return;
           }
-          console.debug('ripple from press state');
+          // Ripple from pressed state
           this.addRipple(null, null, true);
           return;
         }
@@ -121,6 +120,8 @@ export default function RippleMixin(Base) {
         overflow: hidden;
       
         pointer-events: none;
+
+        border-radius: inherit;
       }
     `;
 }

package/mixins/ScrollListenerMixin.js

@@ -5,10 +5,12 @@ const IDLE_TIMEOUT_MS = 500;
  */
 export default function ScrollListenerMixin(Base) {
   return Base
-    .extend()
     .observe({
-      scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
-      scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+      _scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
+      _scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+      _scrollListenerLastIdle: { type: 'float', empty: 0 },
+      _scrollListenerLastScroll: { type: 'float', empty: 0 },
+      _scrollListenerLastResize: { type: 'float', empty: 0 },
     })
     .set({
       /** @type {WeakRef<EventTarget>} */
@@ -20,32 +22,36 @@ export default function ScrollListenerMixin(Base) {
       _scrollDebounce: null,
     })
     .methods({
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onScrollIdle() {},
+      _scrollListenerOnScrollIdle() {
+        this._scrollListenerLastIdle = performance.now();
+      },
 
       /** @param {Event} event */
-      onScrollerScroll(event) {
-        this.scrollListenerPositionY = (event.currentTarget === window)
+      _scrollListenerOnScrollerScroll(event) {
+        this._scrollListenerPositionY = (event.currentTarget === window)
           ? window.scrollY
           : /** @type {HTMLElement} */ (event.currentTarget).scrollTop;
 
-        this.scrollListenerPositionX = (event.currentTarget === window)
+        this._scrollListenerPositionX = (event.currentTarget === window)
           ? window.scrollX
           : /** @type {HTMLElement} */ (event.currentTarget).scrollLeft;
 
+        this._scrollListenerLastScroll = performance.now();
         clearTimeout(this._scrollDebounce);
-        this._scrollDebounce = setTimeout(() => this.onScrollIdle(), IDLE_TIMEOUT_MS);
+        this._scrollDebounce = setTimeout(() => this._scrollListenerOnScrollIdle(), IDLE_TIMEOUT_MS);
       },
 
       /** @param {Event} event */
-      onScrollerResize(event) {},
+      _scrollListenerOnScrollerResize(event) {
+        this._scrollListenerLastResize = performance.now();
+      },
 
       /**
        * @param {EventTarget} [scroller]
        * @return {boolean}
        */
       startScrollListener(scroller) {
-        scroller ??= this.offsetParent;
+        scroller ??= window;
         if (!scroller) return false;
 
         if (scroller === document.body) {
@@ -54,42 +60,45 @@ export default function ScrollListenerMixin(Base) {
         }
 
         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;
+        this._scrollerScrollListener = this._scrollListenerOnScrollerScroll.bind(this);
+        this._scrollerResizeListener = this._scrollListenerOnScrollerResize.bind(this);
+        scroller.addEventListener('scroll', this._scrollerScrollListener, { passive: true });
+        scroller.addEventListener('resize', this._scrollerResizeListener, { passive: true });
+        this._scrollListenerPositionX = 0;
+        this._scrollListenerPositionY = 0;
         return true;
       },
+    })
+    .define({
+      /** @return {Window|HTMLElement} */
+      _scrollListenerScroller() {
+        return this._scroller.deref();
+      },
+    })
+    .define({
 
-      getScrollingElementScrollHeight() {
-        const element = this.getScroller();
-        if (element === window) {
+      _scrollListenerScrollerScrollHeight() {
+        const scroller = this._scrollListenerScroller;
+        if (scroller === window) {
           return document.documentElement.scrollHeight;
         }
-        // @ts-expect-error Skip Element cast
-        return element.scrollHeight;
+        return scroller.scrollHeight;
       },
-
-      getScrollingElementClientHeight() {
-        const element = this.getScroller();
-        if (element === window) {
+      _scrollListenerScrollerClientHeight() {
+        const scroller = this._scrollListenerScroller;
+        if (scroller === window) {
           return window.innerHeight;
         }
         // @ts-expect-error Skip Element cast
-        return element.clientHeight;
-      },
-
-      getScroller() {
-        return this._scroller.deref();
+        return scroller.clientHeight;
       },
-
+    })
+    .methods({
       /**
        * @param {EventTarget} [scroller]
        * @return {boolean}
        */
-      clearScrollListener(scroller) {
+      _scrollListenerClear(scroller) {
         scroller ??= this._scroller?.deref();
         if (!scroller) return false;
         if (!this._scrollerScrollListener) return false;

package/mixins/SemiStickyMixin.js

@@ -0,0 +1,97 @@
+import { ELEMENT_ANIMATION_TYPE } from '../core/customTypes.js';
+
+import ScrollListenerMixin from './ScrollListenerMixin.js';
+
+/**
+ * Hides sticky element when scrolling down
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function SemiStickyMixin(Base) {
+  return Base
+    .mixin(ScrollListenerMixin)
+    .observe({
+      _semiStickyHeight: { type: 'float', empty: 0 },
+      _semiStickyOffsetY: { type: 'float', empty: 0 },
+      _semiStickyTranslateY: { type: 'float', empty: 0 },
+      _semiStickyDuration: { type: 'float', empty: 0 },
+      _semiStickyEasing: { empty: 'ease-in' },
+      _semiStickyMeasured: 'boolean',
+      stickyAlways: 'boolean',
+      /** Stick to offsetParent instead of window */
+      stickyParent: 'boolean',
+    })
+    .methods({
+      _refreshSemiStickyMetrics() {
+        const styles = window.getComputedStyle(this);
+        this._semiStickyHeight = this.offsetHeight
+          + Number.parseFloat(styles.marginTop) + Number.parseFloat(styles.marginBottom);
+        this._semiStickyOffsetY = Number.parseFloat(styles.marginTop);
+        this._semiStickyMeasured = true;
+      },
+    })
+    .observe({
+      _semiStickyStyleStyle: {
+        ...ELEMENT_ANIMATION_TYPE,
+        get({
+          _semiStickyMeasured, _semiStickyTranslateY, _semiStickyDuration, _semiStickyEasing,
+        }) {
+          if (!_semiStickyMeasured) return null;
+          return {
+            styles: {
+              transform: `translateY(${_semiStickyTranslateY}px)`,
+            },
+            timing: {
+              duration: _semiStickyDuration,
+              easing: _semiStickyEasing,
+            },
+          };
+        },
+      },
+    })
+    .on({
+      _scrollListenerPositionYChanged(oldValue, newValue) {
+        const delta = newValue - oldValue;
+        if (!this._semiStickyMeasured) {
+          this._refreshSemiStickyMetrics();
+        }
+        this._semiStickyDuration = 0;
+        // 0 if disabled or if has not scroll passed height
+        // Valid range = -100% < x < 0
+        this._semiStickyTranslateY = (this.stickyAlways || newValue < this._semiStickyOffsetY)
+          ? 0
+          : Math.min(Math.max(-this._semiStickyHeight, this._semiStickyTranslateY - delta), 0);
+      },
+      _scrollListenerLastIdleChanged() {
+        if (this.stickyAlways) return;
+        this._refreshSemiStickyMetrics();
+        const offsetTop = this.offsetTop;
+        const offset = this._scrollListenerPositionY - offsetTop;
+        const delta = offset - this._semiStickyTranslateY;
+        const visibility = delta / this._semiStickyHeight;
+
+        if (visibility <= 0) return;
+        if (visibility >= 1) return;
+        if (visibility <= 0.5 || offsetTop < this._semiStickyHeight) {
+          // Reveal all
+          this._semiStickyDuration = 250;
+          this._semiStickyEasing = 'ease-in';
+          this._semiStickyTranslateY = 0;
+          // this._semiStickyHeadlineOpacity = 1;
+        } else {
+          this._semiStickyDuration = 200;
+          this._semiStickyEasing = 'ease-out';
+          // Don't hide past origin
+          this._semiStickyTranslateY = Math.max(
+            this._semiStickyOffsetY - this._scrollListenerPositionY,
+            -this._semiStickyHeight,
+          );
+        }
+      },
+      connected() {
+        this.startScrollListener(this.stickyParent ? this.offsetParent : window);
+      },
+      disconnected() {
+        this._scrollListenerClear();
+      },
+    });
+}

package/mixins/ShapeMaskedMixin.js

@@ -0,0 +1,117 @@
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function ShapeMaskedMixin(Base) {
+  return Base
+    .observe({
+      shapeTop: 'boolean',
+      shapeBottom: 'boolean',
+      shapeStart: 'boolean',
+      shapeEnd: 'boolean',
+      shapeStyle: 'string',
+    })
+    .css`
+    :host {
+      --mdw-shape__size: 0px;
+      --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__mask: none;
+
+      /** By default, fallback to border-radius */
+      --mdw-shape__rounded: 1;
+      --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
+
+      --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__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)));
+
+      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));
+    }
+
+    :host([shape-style="none"]) {
+      --mdw-shape__size: 0px;
+    }
+    
+    :host([shape-style="extra-small"]) {
+      --mdw-shape__size: var(--mdw-shape__extra-small);
+    }
+    
+    :host([shape-style="small"]) {
+      --mdw-shape__size: var(--mdw-shape__small);
+    }
+    
+    :host([shape-style="medium"]) {
+      --mdw-shape__size: var(--mdw-shape__medium);
+    }
+    
+    :host([shape-style="large"]) {
+      --mdw-shape__size: var(--mdw-shape__large);
+    }
+    
+    :host([shape-style="extra-large"]) {
+      --mdw-shape__size: var(--mdw-shape__extra-large);
+    }
+    
+    :host([shape-style="full"]) {
+      --mdw-shape__size: var(--mdw-shape__full);
+    }
+    
+    :host([shape-style="inherit"]) {
+      --mdw-shape__size: inherit;
+    }
+    
+    :host([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%);
+    }
+    
+    :host([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%);
+    }
+    
+    :host([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%);
+    }
+    
+    :host([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) {
+      :host {
+        /* Inherit all the way up to :root */
+        --mdw-shape__rounded: inherit;
+      }
+    }
+
+    @supports(-webkit-mask-box-image: none) {
+      :host {
+        -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;
+        transition-property: -webkit-mask-box-image-width;
+        will-change: -webkit-mask-box-image;
+      }
+    }
+  `;
+}