kmaterialize 2.3.3-1.0.11 → 2.3.3-1.0.12

package/components/toolbar/_toolbar.scss

@@ -0,0 +1,176 @@
+@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 8px;
+  margin: $element-top-margin 0 $element-bottom-margin 0;
+  border-radius: 27px;
+  background-color: var(--md-sys-color-surface-variant);
+}
+
+// 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;
+}
+
+/// 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;
+  }
+}
+
+/// 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,137 @@
+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));
+  }
+
+  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';
+    indicator.style.transform = `translateX(${active.offsetLeft - track.clientLeft}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 = '';
+      });
+    }
+  }
+}