@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/components/TopAppBar.js

@@ -1,77 +1,34 @@
 import CustomElement from '../core/CustomElement.js';
 import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
 import AriaToolbarMixin from '../mixins/AriaToolbarMixin.js';
-import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
-import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
+import SemiStickyMixin from '../mixins/SemiStickyMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
 import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
-  .mixin(SurfaceMixin) // TopAppBars are non-shaped surfaces
+  .mixin(SurfaceMixin)
+  .mixin(ShapeMixin)
   .mixin(AriaToolbarMixin)
-  .mixin(ScrollListenerMixin)
-  .mixin(ResizeObserverMixin)
-  .extend()
+  .mixin(SemiStickyMixin)
   .set({
     elevated: true,
   })
   .observe({
+    _raised: 'boolean',
+    _headlineOpacity: { type: 'float', default: 0 },
     headline: 'string',
-    _raised: 'boolean', // Change to raw value instead of computed
-    hideOnScroll: 'boolean',
     size: { value: /** @type {'small'|'medium'|'large'|null} */ (null) },
-    _cssPosition: {
-      /** @type {'sticky'|'relative'} */
-      empty: 'relative',
-    },
-    _visibleStart: { type: 'float', default: 0 },
-    _translateY: { type: 'float', empty: 0 },
-    _duration: { type: 'float', empty: 0 },
-    _easing: { empty: 'ease-in' },
-    _headlineOpacity: { type: 'float', default: 0 },
-    /** Convert to observable */
+    /** Convert native to observable */
     ariaLabel: 'string',
     color: { empty: 'surface' },
   })
+  .overrides({
+    _getSemiStickyElement() { return this.refs.surface; },
+  })
   .observe({
-    _scrollDirection: {
-      /**
-       * @param {'up'|'down'} oldValue
-       * @param {'up'|'down'} newValue
-       */
-      changedCallback(oldValue, newValue) {
-        if (newValue === 'down') {
-          if (this._cssPosition !== 'sticky') return;
-          // Was sticky, switch to relative and let appbar scroll away
-          this._cssPosition = 'relative';
-          this._translateY = this.scrollListenerPositionY;
-          return;
-        }
-        if (this._visibleStart < 1) return;
-        // Align appbar.bottom with scroll position (top of screen)
-        this._translateY = this.scrollListenerPositionY - this.refs.surface.scrollHeight;
-      },
-    },
-    _surfaceStyle: {
-      ...ELEMENT_STYLER_TYPE,
-      get({ hideOnScroll, _cssPosition, _translateY, _duration, _easing }) {
-        if (!hideOnScroll) {
-          return null;
-        }
-        return {
-          target: 'surface',
-          styles: {
-            position: _cssPosition,
-            transform: `translateY(${_translateY}px)`,
-          },
-          timing: {
-            duration: _duration,
-            easing: _easing,
-          },
-        };
-      },
-    },
     _headlineStyle: {
       ...ELEMENT_STYLER_TYPE,
       get({ size, _headlineOpacity }) {
@@ -88,81 +45,49 @@ export default CustomElement
       },
     },
   })
-  .html/* html */`
+  .html`
     <slot id=leading name=leading on-slotchange={refreshTabIndexes}></slot>
     <div id=headline ink={ink} color={color} type-style={typeStyle} on-slotchange={refreshTabIndexes}>
       {headline}
       <slot id=headline-slot></slot>
     </div>
     <slot id=trailing name=trailing on-slotchange={refreshTabIndexes}></slot>
-    <div _if=${({ size }) => size === 'medium' || size === 'large'} id=companion aria-hidden=true size={size}>
-      <div _if={showSurfaceTint} id=companion-tint raised={_raised} class=surface-tint color={color}></div>
+    <div mdw-if=${({ size }) => size === 'medium' || size === 'large'} id=companion aria-hidden=true size={size} color={color} raised={_raised}>
       <slot id=companion-slot name=companion size={size}>{headline}</span>
     </div>
   `
   .on({
     composed({ inline }) {
-      const { surface, leading, headline, trailing } = this.refs;
-      surface.append(leading, headline, trailing);
+      const { surface, shape, leading, headline, trailing } = this.refs;
+      shape.append(leading, headline, trailing);
+      surface.append(shape);
       surface.setAttribute('size', '{size}');
-      surface.setAttribute('hide-on-scroll', '{hideOnScroll}');
       surface.setAttribute('role', 'toolbar');
       surface.setAttribute('aria-label', '{ariaLabel}');
       surface.setAttribute(
         'aria-labelledby',
         inline(({ ariaLabel }) => (ariaLabel ? null : 'headline')),
       );
+      surface.setAttribute('raised', '{_raised}');
+      shape.setAttribute('raised', '{_raised}');
     },
-    scrollListenerPositionYChanged(oldValue, newValue) {
-      this._raised = (newValue > 0);
+    _scrollListenerPositionYChanged(oldValue, newValue) {
+      this._raised = (newValue > this._semiStickyOffsetY);
       if (this.size === 'medium' || this.size === 'large') {
         const max = this.refs.companion.scrollHeight;
         const min = (0.5 * max);
         this._headlineOpacity = Math.max(0, Math.min(1, (newValue - min) / (max - min)));
       }
-
-      if (!this.hideOnScroll) return;
-
-      this._duration = 0;
-      if (newValue <= 0) {
-      // Set at rest (top of parent, but allow overscroll)
-        this._cssPosition = 'relative';
-        this._translateY = 0;
-        this._visibleStart = 0;
-      } else if (newValue < this._translateY) {
-      // Align appbar.top with scroll position (top of screen)
-        this._cssPosition = 'sticky';
-        this._translateY = 0;
-        this._visibleStart = 0;
-      } else if (this._cssPosition !== 'sticky') {
-        this._visibleStart = (newValue - this._translateY) / this.refs.surface.scrollHeight;
-      }
-
-      this._scrollDirection = newValue > oldValue ? 'down' : 'up';
     },
-  })
-  .methods({
-    onScrollIdle() {
-      const _visibleStart = this._visibleStart;
+    _scrollListenerLastIdleChanged() {
       if (this._headlineOpacity > 0) {
         // Fill in opacity on idle
         this._headlineOpacity = 1;
       }
-      if (_visibleStart <= 0) return;
-      if (_visibleStart >= 1) return;
-      if (this.scrollListenerPositionY < (this.refs.surface.scrollHeight)) return;
-      if (_visibleStart <= 0.5) {
-        // Reveal all
-        this._duration = 250;
-        this._easing = 'ease-in';
-        this._cssPosition = 'relative';
-        this._translateY = this.scrollListenerPositionY;
+    },
+    _semiStickyTranslateYChanged(oldValue, newValue) {
+      if (newValue === 0) {
         this._headlineOpacity = 1;
-      } else {
-        this._duration = 200;
-        this._easing = 'ease-out';
-        this._cssPosition = 'relative';
-        this._translateY = this.scrollListenerPositionY - this.refs.surface.scrollHeight;
       }
     },
   })
@@ -178,31 +103,12 @@ export default CustomElement
       },
     },
   })
-  .on({
-    connected() {
-      const { surface } = this.refs;
-      if (surface.offsetParent) {
-        this.startScrollListener(surface.offsetParent ?? window);
-      } else {
-        const resizeObserver = new ResizeObserver(() => {
-          this.startScrollListener(surface.offsetParent ?? window);
-          resizeObserver.disconnect();
-        });
-        resizeObserver.observe(surface);
-      }
-    },
-    disconnected() {
-      this.clearScrollListener();
-    },
-  })
   .css`
     /* https://m3.material.io/components/bottom-app-bar/specs */
 
     :host {
       --mdw-bg: var(--mdw-color__surface);
       --mdw-ink: var(--mdw-color__on-surface);
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
       display: contents;
 
       z-index:2;
@@ -210,7 +116,30 @@ export default CustomElement
 
     #surface {
       position: sticky;
-      inset-block-start: 0;
+      inset-block-end: auto;
+
+      grid-area: app-bar;
+
+      margin: inherit; /** Pass through */
+
+      padding: inherit; /** Pass through */
+
+      filter: none; /* Never receive shadow */
+
+      transform: translateY(0);
+
+      z-index: 5;
+
+      background-color: rgb(var(--mdw-bg));
+
+      transition: grid-template-columns 100ms, background-color 100ms;
+
+      will-change: transform;
+    }
+
+    #shape{
+      position: initial;
+      inset: initial;
 
       display: grid;
 
@@ -223,8 +152,8 @@ export default CustomElement
       overflow-y: visible;
 
       box-sizing: border-box;
-      inline-size: 100%;
-      max-inline-size: 100%;
+      max-inline-size: calc(var(--mdw-content__max-width, 100%) + (2 * var(--mdw-content__padding, 16px) -  4px));
+      margin-inline: auto;
 
       /* 16px from icon */
       /* inset = (button.width / 2) - (icon.width / 2) */
@@ -232,26 +161,15 @@ export default CustomElement
       /* paddingInlineStart = 16px - ((48px / 2) - (24px / 2)) */
       /* paddingInlineEnd = 16px - ((48px / 2) - (30px / 2)) */
 
-      padding-inline: 4px;
+      padding-inline: calc(var(--mdw-content__padding, 16px) - 8px);
 
       pointer-events: auto;
 
-      filter: none; /* Never receive shadow */
+      z-index: initial;
 
-      z-index: 5;
-      /* inset-inline: 0; */
+      background-color: transparent;
 
-      background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
-
-      transition: grid-template-columns 100ms;
-
-    }
-
-    #surface-tint {
-      position: 0;
-
-      z-index: 1;
     }
 
     #leading {
@@ -318,10 +236,10 @@ export default CustomElement
       /* stylelint-disable-next-line declaration-property-value-disallowed-list */
       margin-block-start: calc(28px - var(--mdw-typescale__headline-small__line-height));
       padding-block-end: 20px;
-
       padding-inline: 16px;
 
       background-color: rgb(var(--mdw-bg));
+
       box-shadow: none;
 
       font: var(--mdw-typescale__headline-small__font);
@@ -385,16 +303,6 @@ export default CustomElement
       }
     }
 
-    #surface[hide-on-scroll] {
-      position: relative;
-
-      inset-block-start: 0;
-
-      transform: translateY(0);
-
-      will-change: transform, position;
-    }
-
     #surface[size="small"] {
       gap: 4px;
       grid-template-columns: auto 1fr auto;
@@ -406,5 +314,15 @@ export default CustomElement
       will-change: opacity;
     }
 
+    #surface:where([color="none"], [color="transparent"]),
+    #companion:where([color="none"], [color="transparent"]) {
+      background-color: transparent;
+    }
+
+    #surface[raised]:where([color="surface"],[color="none"],[color="transparent"]),
+    #companion[raised]:where([color="surface"],[color="none"],[color="transparent"]) {
+      background-color: rgb(var(--mdw-color__surface-container));
+    }
+
   `
   .autoRegister('mdw-top-app-bar');