ion-ripple-effect.entry.js 5.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /*!
  2. * (C) Ionic http://ionicframework.com - MIT License
  3. */
  4. import { r as registerInstance, d as readTask, w as writeTask, h, f as getElement, e as Host } from './index-527b9e34.js';
  5. import { b as getIonMode } from './ionic-global-b26f573e.js';
  6. import './index-cfd9c1f2.js';
  7. const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
  8. const IonRippleEffectStyle0 = rippleEffectCss;
  9. const RippleEffect = class {
  10. constructor(hostRef) {
  11. registerInstance(this, hostRef);
  12. this.type = 'bounded';
  13. }
  14. /**
  15. * Adds the ripple effect to the parent element.
  16. *
  17. * @param x The horizontal coordinate of where the ripple should start.
  18. * @param y The vertical coordinate of where the ripple should start.
  19. */
  20. async addRipple(x, y) {
  21. return new Promise((resolve) => {
  22. readTask(() => {
  23. const rect = this.el.getBoundingClientRect();
  24. const width = rect.width;
  25. const height = rect.height;
  26. const hypotenuse = Math.sqrt(width * width + height * height);
  27. const maxDim = Math.max(height, width);
  28. const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
  29. const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
  30. const finalScale = maxRadius / initialSize;
  31. let posX = x - rect.left;
  32. let posY = y - rect.top;
  33. if (this.unbounded) {
  34. posX = width * 0.5;
  35. posY = height * 0.5;
  36. }
  37. const styleX = posX - initialSize * 0.5;
  38. const styleY = posY - initialSize * 0.5;
  39. const moveX = width * 0.5 - posX;
  40. const moveY = height * 0.5 - posY;
  41. writeTask(() => {
  42. const div = document.createElement('div');
  43. div.classList.add('ripple-effect');
  44. const style = div.style;
  45. style.top = styleY + 'px';
  46. style.left = styleX + 'px';
  47. style.width = style.height = initialSize + 'px';
  48. style.setProperty('--final-scale', `${finalScale}`);
  49. style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
  50. const container = this.el.shadowRoot || this.el;
  51. container.appendChild(div);
  52. setTimeout(() => {
  53. resolve(() => {
  54. removeRipple(div);
  55. });
  56. }, 225 + 100);
  57. });
  58. });
  59. });
  60. }
  61. get unbounded() {
  62. return this.type === 'unbounded';
  63. }
  64. render() {
  65. const mode = getIonMode(this);
  66. return (h(Host, { key: '40c7f73e7f5f67e29f83e1236a61c6e1c9943c42', role: "presentation", class: {
  67. [mode]: true,
  68. unbounded: this.unbounded,
  69. } }));
  70. }
  71. get el() { return getElement(this); }
  72. };
  73. const removeRipple = (ripple) => {
  74. ripple.classList.add('fade-out');
  75. setTimeout(() => {
  76. ripple.remove();
  77. }, 200);
  78. };
  79. const PADDING = 10;
  80. const INITIAL_ORIGIN_SCALE = 0.5;
  81. RippleEffect.style = IonRippleEffectStyle0;
  82. export { RippleEffect as ion_ripple_effect };