kmaterialize 2.3.3-1.0.2 → 2.3.3-1.0.21

package/components/toolbar/_toolbar.scss

@@ -0,0 +1,324 @@
+@use '../../sass/variables' as *;
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Front/style/scss/partial/_planning_toolbar.scss
+// A rounded "pill" action bar: a full-width flex row split into groups
+// (buttons, a segmented "track" control, an expandable search field) laid
+// out with space-between, sitting inline above the content it controls -
+// not fixed/sticky, just a normal flex row like the source component.
+//
+// :not(.fixed-action-btn) - "toolbar" is already a FAB display mode
+// (.fixed-action-btn.toolbar, see components/button/_buttons.scss); this
+// guards against also painting pill styles onto that unrelated element.
+.toolbar:not(.fixed-action-btn) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 8px;
+  padding: 5px 5px;
+  margin: 0.5rem 0 1rem 0;
+  border-radius: 20px;
+  background-color: var(--md-sys-color-surface-variant);
+
+  // Default overflow behavior: more groups than fit on one line stay on
+  // that one line and become horizontally scrollable, rather than
+  // squeezing/wrapping - a plain, unobtrusive scroll, no visible
+  // scrollbar chrome by default. This is a real native overflow (not a
+  // faked one), so every native way of scrolling it already works with
+  // no extra JS: trackpad/touch swipe, shift+wheel, and middle-click
+  // drag-to-pan (Chrome/Firefox/Edge on Windows) all just work.
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  // Groups (and their contents) keep their natural size instead of being
+  // squashed to fit - that's what makes the row scroll instead of
+  // cramming everything in.
+  > .toolbar-group {
+    flex-shrink: 0;
+  }
+
+  // Opt-in alternative to scrolling: wrap onto as many lines as needed
+  // instead. `overflow-x` reverts to visible since there's nothing left
+  // to scroll horizontally once wrapped, and the row gap matches the
+  // column gap above so wrapped lines aren't crammed together.
+  //
+  // flex-wrap only rearranges its own direct children - a toolbar
+  // usually has just one or two big .toolbar-group children, each
+  // holding many buttons, so the group itself has to be told to wrap
+  // too or nothing visibly changes.
+  &.toolbar-wrap {
+    flex-wrap: wrap;
+    height: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+    row-gap: 8px;
+
+    > .toolbar-group {
+      flex-wrap: wrap;
+      row-gap: 8px;
+      // Undo the scroll-mode flex-shrink: 0 (see above) and let the
+      // group shrink to fit .toolbar's own width - flex-wrap only
+      // triggers once a flex container is actually constrained to less
+      // than its content's natural width; without this the group just
+      // grows past .toolbar's max-width instead of wrapping inside it.
+      flex-shrink: 1;
+      min-width: 0;
+    }
+  }
+}
+
+// A cluster of controls inside the toolbar (buttons, a track, a search
+// field, ...) kept together and spaced from the next group.
+.toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+}
+
+/// Separator
+///////////////////////////////////////////////////////
+///
+
+// A thin vertical divider between groups - for when the gap between
+// .toolbar-group elements isn't enough and you want an explicit "these
+// are unrelated" line. Just drop it between two groups as a sibling.
+.toolbar-separator {
+  align-self: stretch;
+  width: 1px;
+  flex-shrink: 0;
+  margin: 4px 2px;
+  // Not --md-sys-color-outline-variant: it's the exact same color as
+  // --md-sys-color-surface-variant (the toolbar's own background) in the
+  // dark theme, making the separator invisible. on-surface-variant is
+  // guaranteed to contrast against surface-variant by design (that's
+  // what the on-*/* pairing is for) - mixed in low instead of used
+  // solid, for a subtle line rather than a harsh one.
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface-variant) 32%);
+}
+
+/// Freeze (pinned group)
+///////////////////////////////////////////////////////
+///
+
+// Keeps a group in place at the left/right edge of a scrolling toolbar
+// (see Overflow) while the rest scrolls underneath it - e.g. a "refresh"
+// or "close" button that should always stay reachable. Needs its own
+// opaque background to actually cover the content scrolling behind it,
+// a matching end radius so it doesn't show a square corner poking past
+// the pill's own rounded edge, and a small shadow on the scrolling side
+// so it doesn't look like content just abruptly stops.
+.toolbar-freeze-left,
+.toolbar-freeze-right {
+  position: sticky;
+  z-index: 1;
+  flex-shrink: 0;
+  background-color: var(--md-sys-color-surface-variant);
+}
+.toolbar-freeze-left {
+  left: 0;
+  padding-right: 8px;
+  border-radius: 20px 0 0 20px;
+  box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.25);
+}
+.toolbar-freeze-right {
+  right: 0;
+  padding-left: 8px;
+  border-radius: 0 20px 20px 0;
+  box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.25);
+}
+
+/// Track (segmented control)
+///////////////////////////////////////////////////////
+///
+
+// A pill-shaped segmented control - e.g. "Today / Previous / Next" or a
+// "Week / Month / Year" range picker - with a sliding highlight behind
+// whichever item is active.
+.toolbar-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 34px;
+  padding: 3px;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+}
+
+// A track with no background/border of its own - just for spacing a group
+// of items that don't need the pill-within-a-pill look.
+.toolbar-track.toolbar-track-bare {
+  padding: 3px 0;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+// Positioned/sized by Toolbar's JS (offsetLeft/offsetWidth of the active
+// .toolbar-track-item), not by CSS - the transition below is what makes
+// that JS-driven move/resize animate instead of jumping.
+.toolbar-track-indicator {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 0;
+  z-index: 0;
+  width: 0;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-primary);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform .22s cubic-bezier(.2, .7, .3, 1), width .22s cubic-bezier(.2, .7, .3, 1), opacity .14s ease;
+
+  // Only fade in once Toolbar's JS has measured and placed it for the
+  // first time - otherwise it flashes at 0 width in the top-left corner
+  // for a frame before the first real position is set.
+  .toolbar-track.is-armed & {
+    opacity: 1;
+  }
+}
+
+.toolbar-track-item {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 13px;
+  border: 0;
+  border-radius: 999px;
+  background-color: transparent;
+  color: var(--md-sys-color-on-surface-variant);
+  font-size: 12.5px;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .16s ease;
+
+  &:hover {
+    color: var(--md-sys-color-on-surface);
+  }
+  &.is-active {
+    font-weight: 600;
+    color: var(--md-sys-color-on-primary);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+/// Slider
+///////////////////////////////////////////////////////
+///
+
+// A pill container for a range-field, matching .toolbar-track's look -
+// also fixes two things a bare range-field has inside a .toolbar: the
+// native track line is var(--md-sys-color-surface-variant), the exact
+// same color as .toolbar's own background, so it's invisible without a
+// container giving it something else to contrast against; and this also
+// vertically centers any label text/icons placed next to it.
+.toolbar-slider {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 13px;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+
+  .range-field {
+    width: 120px;
+    margin-top: 18px;
+  }
+
+  // Material icons default to 24px, which crowds a 34px-tall pill and
+  // reads a lot heavier than adjacent 13-14px text labels - match the
+  // track item's scale instead.
+  i.material-icons {
+    font-size: 18px;
+  }
+
+  span {
+    line-height: 1;
+    // Measured against the actual track/thumb center: a "-"/"+" glyph's
+    // ink sits a few px below the middle of its own line box in this
+    // font, even though the box itself is perfectly flex-centered - nudge
+    // the glyph up to compensate.
+    position: relative;
+    top: -3px;
+  }
+}
+
+/// Expandable search
+///////////////////////////////////////////////////////
+///
+
+// A search field that starts as just an icon button and expands into a
+// full text input once focused (or once it has a value) - Toolbar's JS
+// toggles the .is-expanded class.
+.toolbar-search {
+  display: inline-flex;
+  align-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 2px;
+  overflow: hidden;
+  border-radius: 999px;
+  background-color: var(--md-sys-color-surface);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  transition: width .2s cubic-bezier(.2, .7, .3, 1);
+
+  &.is-expanded {
+    width: 190px;
+  }
+
+  .toolbar-search-toggle {
+    display: inline-flex;
+    flex: 0 0 28px;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant);
+    cursor: pointer;
+  }
+
+  .toolbar-search-input {
+    width: 0;
+    min-width: 0;
+    height: 28px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface);
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity .12s ease;
+  }
+
+  &.is-expanded .toolbar-search-input {
+    width: 150px;
+    padding-right: 5px;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-track-indicator {
+    transition: opacity .14s ease;
+  }
+}

package/components/toolbar/toolbar.ts

@@ -0,0 +1,152 @@
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+export interface ToolbarOptions extends BaseOptions {}
+
+const _defaults: ToolbarOptions = {};
+
+// @implement /Users/kzarshenas/Sites/RodeoFx/rodeo_toolkit_2/app/Environment/Partials/PlanningToolbar.ts
+// Generic version of that file's track-indicator sliding and expandable
+// search behavior, decoupled from the page-specific filter/state-binding
+// system (UtilityFilter) the source used - here it's just plain DOM state.
+export class Toolbar extends Component<ToolbarOptions> {
+  _tracks: HTMLElement[];
+
+  constructor(el: HTMLElement, options: Partial<ToolbarOptions>) {
+    super(el, options, Toolbar);
+    (this.el as any).M_Toolbar = this;
+
+    this.options = {
+      ...Toolbar.defaults,
+      ...options
+    };
+
+    this._tracks = Array.from(this.el.querySelectorAll<HTMLElement>('.toolbar-track'));
+    this._setupEventHandlers();
+    this._tracks.forEach((track) => this._moveIndicator(track, false));
+
+    // A custom/web font can still be loading at construction time; its
+    // metrics landing after this first measurement would leave the
+    // indicator very slightly offset from the (now differently-sized)
+    // text it's supposed to sit behind. Re-measure once fonts are ready.
+    if (typeof document !== 'undefined' && document.fonts) {
+      document.fonts.ready.then(() => {
+        this._tracks.forEach((track) => this._moveIndicator(track, false));
+      });
+    }
+  }
+
+  static get defaults(): ToolbarOptions {
+    return _defaults;
+  }
+
+  static init(el: HTMLElement, options?: Partial<ToolbarOptions>): Toolbar;
+  static init(els: InitElements<MElement>, options?: Partial<ToolbarOptions>): Toolbar[];
+  static init(
+    els: HTMLElement | InitElements<MElement>,
+    options: Partial<ToolbarOptions> = {}
+  ): Toolbar | Toolbar[] {
+    return super.init(els, options, Toolbar);
+  }
+
+  static getInstance(el: HTMLElement): Toolbar {
+    return (el as any).M_Toolbar;
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    (this.el as any).M_Toolbar = undefined;
+  }
+
+  /**
+   * Re-measure and reposition every track's sliding indicator - call this
+   * after changing which .toolbar-track-item is active from your own code,
+   * or after anything that could have changed the toolbar's layout/width.
+   */
+  updateIndicators() {
+    this._tracks.forEach((track) => this._moveIndicator(track, true));
+  }
+
+  _setupEventHandlers() {
+    this.el.addEventListener('click', this._handleTrackClick);
+    this.el.addEventListener('focusin', this._handleSearchFocusIn);
+    this.el.addEventListener('focusout', this._handleSearchFocusOut);
+    this.el.addEventListener('input', this._handleSearchInput);
+    this.el.addEventListener('keydown', this._handleSearchKeydown);
+    window.addEventListener('resize', this._handleWindowResize);
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('click', this._handleTrackClick);
+    this.el.removeEventListener('focusin', this._handleSearchFocusIn);
+    this.el.removeEventListener('focusout', this._handleSearchFocusOut);
+    this.el.removeEventListener('input', this._handleSearchInput);
+    this.el.removeEventListener('keydown', this._handleSearchKeydown);
+    window.removeEventListener('resize', this._handleWindowResize);
+  }
+
+  _handleTrackClick = (e: MouseEvent) => {
+    const item = (e.target as HTMLElement).closest('.toolbar-track-item') as HTMLElement;
+    if (!item) return;
+    const track = item.closest('.toolbar-track') as HTMLElement;
+    if (!track || !this._tracks.includes(track)) return;
+
+    track.querySelectorAll('.toolbar-track-item.is-active').forEach((el) => el.classList.remove('is-active'));
+    item.classList.add('is-active');
+    this._moveIndicator(track, true);
+  };
+
+  _handleSearchFocusIn = (e: FocusEvent) => {
+    const search = (e.target as HTMLElement).closest('.toolbar-search');
+    if (search) search.classList.add('is-expanded');
+  };
+
+  _handleSearchFocusOut = (e: FocusEvent) => {
+    const search = (e.target as HTMLElement).closest('.toolbar-search');
+    if (!search) return;
+    const input = search.querySelector<HTMLInputElement>('.toolbar-search-input');
+    if (input && input.value === '') search.classList.remove('is-expanded');
+  };
+
+  _handleSearchInput = (e: Event) => {
+    const input = e.target as HTMLInputElement;
+    if (!input.classList.contains('toolbar-search-input')) return;
+    const search = input.closest('.toolbar-search');
+    if (search) search.classList.toggle('is-expanded', input.value !== '' || document.activeElement === input);
+  };
+
+  _handleSearchKeydown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') return;
+    const input = (e.target as HTMLElement).closest('.toolbar-search')?.querySelector<HTMLInputElement>('.toolbar-search-input');
+    if (!input) return;
+    input.value = '';
+    input.blur();
+  };
+
+  _handleWindowResize = () => {
+    this._tracks.forEach((track) => this._moveIndicator(track, false));
+  };
+
+  _moveIndicator(track: HTMLElement, animate: boolean) {
+    const indicator = track.querySelector<HTMLElement>('.toolbar-track-indicator');
+    const active = track.querySelector<HTMLElement>('.toolbar-track-item.is-active');
+    if (!indicator || !active) return;
+
+    if (!animate) indicator.style.transition = 'none';
+    // No "- track.clientLeft" here: offsetLeft is already relative to the
+    // offsetParent's padding edge, same origin as the indicator's own
+    // `left: 0` (an absolutely positioned element's containing block is
+    // its ancestor's padding box) - subtracting the border width again
+    // was double-counting it, nudging the indicator a px too far left.
+    indicator.style.transform = `translateX(${active.offsetLeft}px)`;
+    indicator.style.width = `${active.offsetWidth}px`;
+    track.classList.add('is-armed');
+    if (!animate) {
+      // Force layout so the transition-less move above actually applies
+      // before re-enabling transitions on the next frame.
+      void indicator.offsetWidth;
+      requestAnimationFrame(() => {
+        indicator.style.transition = '';
+      });
+    }
+  }
+}