button-lazy-loader.ts

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {DOCUMENT} from '@angular/common';
import {
  ANIMATION_MODULE_TYPE,
  Inject,
  Injectable,
  NgZone,
  OnDestroy,
  Optional,
} from '@angular/core';
import {
  MAT_RIPPLE_GLOBAL_OPTIONS,
  RippleConfig,
  RippleGlobalOptions,
  RippleRenderer,
  RippleTarget,
} from '../core';
import {Platform} from '@angular/cdk/platform';

/** The options for the MatButtonRippleLoader's event listeners. */
const OPTIONS = {passive: true, capture: true};

/** The attribute attached to a mat-button whose ripple has not yet been initialized. */
const MAT_BUTTON_RIPPLE_UNINITIALIZED = 'mat-button-ripple-uninitialized';

/** The attribute attached to a mat-button whose internals (excluding the ripple) have not yet been initialized. */
const MAT_BUTTON_INTERNALS_UNINITIALIZED = 'mat-button-internals-uninitialized';

@Injectable({providedIn: 'root'})
export class MatButtonLazyLoader implements OnDestroy {
  private _document: Document;

  /** A batch of actions to run. */
  private _actionQueue: Function[] = [];

  /** A timeout for when the action queue will be emptied / ran. */
  private _runActionsTimeout: any | null = null;

  constructor(
    private _platform: Platform,
    private _ngZone: NgZone,
    @Optional() @Inject(DOCUMENT) document: any,
    @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationMode?: string,
    @Optional()
    @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
    private globalRippleOptions?: RippleGlobalOptions,
  ) {
    this._document = document;

    this._ngZone.runOutsideAngular(() => {
      this._document.addEventListener('focus', this.onInteraction, OPTIONS);
      this._document.addEventListener('mouseenter', this.onInteraction, OPTIONS);
    });
  }

  ngOnDestroy() {
    this._ngZone.runOutsideAngular(() => {
      this._document.removeEventListener('focus', this.onInteraction, OPTIONS);
      this._document.removeEventListener('mouseenter', this.onInteraction, OPTIONS);
    });
  }

  /** Handles creating and attaching button internals when a button is initially interacted with. */
  private onInteraction = (event: Event) => {
    if (!(event.target instanceof Element)) {
      return;
    }

    const button = this._closest(event.target);
    if (!button) {
      return;
    }

    button.removeAttribute(MAT_BUTTON_INTERNALS_UNINITIALIZED);
    this._actionQueue.push(() => this._attachButtonInternals(button as HTMLButtonElement));

    // Immediately run all of the queued actions if a focus event occurs.

    if (event.type === 'focus') {
      this._runActions();
    } else if (event.type === 'mouseenter') {
      this._runActionsTimeout = setTimeout(() => this._runActions(), 50);
    }
  };

  /** Runs all of the actions that have been queued up. */
  private _runActions(): void {
    if (this._runActionsTimeout !== null) {
      clearTimeout(this._runActionsTimeout);
      this._runActionsTimeout = null;
    }
    for (const callback of this._actionQueue) {
      callback();
    }
    this._actionQueue = [];
  }

  /**
   * Traverses the element and its parents (heading toward the document root)
   * until it finds a mat-button that has not been initialized.
   */
  private _closest(element: Element): Element | null {
    let el: Element | null = element;
    while (el) {
      if (el.hasAttribute(MAT_BUTTON_INTERNALS_UNINITIALIZED)) {
        return el;
      }
      el = el.parentElement;
    }
    return null;
  }

  private _attachButtonInternals(button: HTMLButtonElement): void {
    button.prepend(this._createSpan(this._getPersistentRippleClassName(button)));

    if (button.hasAttribute(MAT_BUTTON_RIPPLE_UNINITIALIZED)) {
      button.removeAttribute(MAT_BUTTON_RIPPLE_UNINITIALIZED);
      button.append(this._createSpan('mat-mdc-focus-indicator'));
      this._appendRipple(button);
    } else {
      const rippleEl = button.querySelector('.mat-mdc-button-ripple');
      rippleEl!.before(this._createSpan('mat-mdc-focus-indicator'));
    }

    // Move the touch target to the correct location in the button.
    const touchTarget = button.querySelector('.mat-mdc-button-touch-target')!;
    button.appendChild(touchTarget);
  }

  private _appendRipple(button: HTMLButtonElement): void {
    const ripple = this._document.createElement('span');
    ripple.classList.add('mat-mdc-button-ripple');

    const target = new MatButtonRippleTarget(button, this.globalRippleOptions, this.animationMode);
    target.rippleConfig.centered = button.hasAttribute('mat-icon-button');

    const rippleRenderer = new RippleRenderer(target, this._ngZone, ripple, this._platform);
    rippleRenderer.setupTriggerEvents(button);

    button.append(ripple);
  }

  private _createSpan(className: string): HTMLElement {
    const span = this._document.createElement('span');
    span.className = className;
    return span;
  }

  private _getPersistentRippleClassName(button: Element): string {
    const baseClass = 'mat-mdc-button-persistent-ripple';
    if (button.getAttribute('data-mat-button-is-fab') === 'true') {
      return baseClass + ' mdc-fab__ripple';
    }
    if (button.hasAttribute('mat-icon-button')) {
      return baseClass + ' mdc-icon-button__ripple';
    }
    return baseClass + ' mdc-button__ripple';
  }
}

class MatButtonRippleTarget implements RippleTarget {
  public rippleConfig: RippleConfig & RippleGlobalOptions;

  constructor(
    private button: HTMLButtonElement,
    private globalRippleOptions?: RippleGlobalOptions,
    animationMode?: string,
  ) {
    this.setRippleConfig(globalRippleOptions, animationMode);
  }

  private setRippleConfig(globalRippleOptions?: RippleGlobalOptions, animationMode?: string) {
    this.rippleConfig = globalRippleOptions || {};
    if (animationMode === 'NoopAnimations') {
      this.rippleConfig.animation = {enterDuration: 0, exitDuration: 0};
    }
  }

  get rippleDisabled(): boolean {
    return this.button.disabled || !!this.globalRippleOptions?.disabled;
  }
}