createRipple(x, y) {
    if (this.disabled) {
      return;
    }

    // Remove pre-existing ripples
    const otherRippleEls = this.button.querySelectorAll('.ripple-effect');
    otherRippleEls.forEach((rippleEl) => {
      rippleEl.remove();
    });

    // Make/Place a new ripple
    const rippleEl = document.createElement('span');
    const btnOffsets = this.getRippleOffsets(x, y);
    rippleEl.classList.add('ripple-effect');
    rippleEl.setAttribute('aria-hidden', 'true');
    rippleEl.setAttribute('focusable', 'false');

    this.button.prepend(rippleEl);
    rippleEl.style.left = `${btnOffsets.x}px`;
    rippleEl.style.top = `${btnOffsets.y}px`;
    rippleEl.classList.add('animating');

    // After a short time, remove the ripple effect
    if (this.rippleTimeout) {
      this.rippleTimeout.destroy(true);
    }

    this.rippleTimeout = renderLoop.register(new IdsRenderLoopItem({
      duration: 1200,
      timeoutCallback() {
        rippleEl.remove();
      }
    }));
  }
/**
   * Generates a "ripple" effect on a specified location inside the button's boundaries.
   * The coordinates defined are actual page coordinates, using the top/left of the page as [0,0],
   * which allows this to connect easily to mouse/touch events.
   * @private
   * @param {number} x the X coordinate
   * @param {number} y the Y coordinate
   * @returns {void}
   */
Generates a "ripple" effect on a specified location inside the button's boundaries.
The coordinates defined are actual page coordinates, using the top/left of the page as [0,0],
which allows this to connect easily to mouse/touch events.
@private
@param {number} x the X coordinate
@param {number} y the Y coordinate
@returns {void}
Generates a " ripple " effect on a specified location inside the button ' s boundaries . The coordinates defined are actual page coordinates using the top / left of the page as [ 0 0 ] which allows this to connect easily to mouse / touch events . @private @param { number } x the X coordinate @param { number } y the Y coordinate @returns { void }
createRipple(x, y) {
    if (this.disabled) {
      return;
    }
    const otherRippleEls = this.button.querySelectorAll('.ripple-effect');
    otherRippleEls.forEach((rippleEl) => {
      rippleEl.remove();
    });
    const rippleEl = document.createElement('span');
    const btnOffsets = this.getRippleOffsets(x, y);
    rippleEl.classList.add('ripple-effect');
    rippleEl.setAttribute('aria-hidden', 'true');
    rippleEl.setAttribute('focusable', 'false');
    this.button.prepend(rippleEl);
    rippleEl.style.left = `${btnOffsets.x}px`;
    rippleEl.style.top = `${btnOffsets.y}px`;
    rippleEl.classList.add('animating');
    if (this.rippleTimeout) {
      this.rippleTimeout.destroy(true);
    }
    this.rippleTimeout = renderLoop.register(new IdsRenderLoopItem({
      duration: 1200,
      timeoutCallback() {
        rippleEl.remove();
      }
    }));
  }
createRipple ( x , y ) { if ( this . disabled ) { return ; } const otherRippleEls = this . button . querySelectorAll ( '.ripple-effect' ) ; otherRippleEls . forEach ( ( rippleEl ) => { rippleEl . remove ( ) ; } ) ; const rippleEl = document . createElement ( 'span' ) ; const btnOffsets = this . getRippleOffsets ( x , y ) ; rippleEl . classList . add ( 'ripple-effect' ) ; rippleEl . setAttribute ( 'aria-hidden' , 'true' ) ; rippleEl . setAttribute ( 'focusable' , 'false' ) ; this . button . prepend ( rippleEl ) ; rippleEl . style . left = ` ${ btnOffsets . x } ` ; rippleEl . style . top = ` ${ btnOffsets . y } ` ; rippleEl . classList . add ( 'animating' ) ; if ( this . rippleTimeout ) { this . rippleTimeout . destroy ( true ) ; } this . rippleTimeout = renderLoop . register ( new IdsRenderLoopItem ( { duration : 1200 , timeoutCallback ( ) { rippleEl . remove ( ) ; } } ) ) ; }
Generates a "ripple" effect on a specified location inside the button's boundaries.
Generates a " ripple " effect on a specified location inside the button ' s boundaries .
// Remove pre-existing ripples // Make/Place a new ripple // After a short time, remove the ripple effect