docs/cjs/ion-button_14.cjs.entry.js
/**
   * Adds the ripple effect to the parent element.
   *
   * @param x The horizontal coordinate of where the ripple should start.
   * @param y The vertical coordinate of where the ripple should start.
   */
Adds the ripple effect to the parent element.
@param x The horizontal coordinate of where the ripple should start.
@param y The vertical coordinate of where the ripple should start.
Adds the ripple effect to the parent element . @param x The horizontal coordinate of where the ripple should start . @param y The vertical coordinate of where the ripple should start .
async addRipple(x, y) {
    return new Promise(resolve => {
      index.readTask(() => {
        const rect = this.el.getBoundingClientRect();
        const width = rect.width;
        const height = rect.height;
        const hypotenuse = Math.sqrt(width * width + height * height);
        const maxDim = Math.max(height, width);
        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
        const finalScale = maxRadius / initialSize;
        let posX = x - rect.left;
        let posY = y - rect.top;
        if (this.unbounded) {
          posX = width * 0.5;
          posY = height * 0.5;
        }
        const styleX = posX - initialSize * 0.5;
        const styleY = posY - initialSize * 0.5;
        const moveX = width * 0.5 - posX;
        const moveY = height * 0.5 - posY;
        index.writeTask(() => {
          const div = document.createElement('div');
          div.classList.add('ripple-effect');
          const style = div.style;
          style.top = styleY + 'px';
          style.left = styleX + 'px';
          style.width = style.height = initialSize + 'px';
          style.setProperty('--final-scale', `${finalScale}`);
          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
          const container = this.el.shadowRoot || this.el;
          container.appendChild(div);
          setTimeout(() => {
            resolve(() => {
              removeRipple(div);
            });
          }, 225 + 100);
        });
      });
    });
  }
async addRipple ( x , y ) { return new Promise ( resolve => { index . readTask ( ( ) => { const rect = this . el . getBoundingClientRect ( ) ; const width = rect . width ; const height = rect . height ; const hypotenuse = Math . sqrt ( width * width + height * height ) ; const maxDim = Math . max ( height , width ) ; const maxRadius = this . unbounded ? maxDim : hypotenuse + PADDING ; const initialSize = Math . floor ( maxDim * INITIAL_ORIGIN_SCALE ) ; const finalScale = maxRadius / initialSize ; let posX = x - rect . left ; let posY = y - rect . top ; if ( this . unbounded ) { posX = width * 0.5 ; posY = height * 0.5 ; } const styleX = posX - initialSize * 0.5 ; const styleY = posY - initialSize * 0.5 ; const moveX = width * 0.5 - posX ; const moveY = height * 0.5 - posY ; index . writeTask ( ( ) => { const div = document . createElement ( 'div' ) ; div . classList . add ( 'ripple-effect' ) ; const style = div . style ; style . top = styleY + 'px' ; style . left = styleX + 'px' ; style . width = style . height = initialSize + 'px' ; style . setProperty ( '--final-scale' , ` ${ finalScale } ` ) ; style . setProperty ( '--translate-end' , ` ${ moveX } ${ moveY } ` ) ; const container = this . el . shadowRoot || this . el ; container . appendChild ( div ) ; setTimeout ( ( ) => { resolve ( ( ) => { removeRipple ( div ) ; } ) ; } , 225 + 100 ) ; } ) ; } ) ; } ) ; }
Adds the ripple effect to the parent element.
Adds the ripple effect to the parent element .