igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
70 lines • 2.37 kB
JavaScript
import { LitElement, html } from 'lit';
import { registerComponent } from '../common/definitions/register.js';
import { styles } from './ripple.material.css.js';
const rippleFrames = [
{ opacity: 0.5, transform: 'scale(.3)' },
{ opacity: 0, transform: 'scale(2)' },
];
const rippleAnimation = {
duration: 600,
fill: 'forwards',
easing: 'linear',
};
let rippleElement;
function getRippleElement() {
if (!rippleElement) {
rippleElement = document.createElement('span');
}
return rippleElement.cloneNode();
}
class IgcRippleComponent extends LitElement {
static register() {
registerComponent(IgcRippleComponent);
}
constructor() {
super();
this.handler = ({ clientX, clientY }) => {
const element = getRippleElement();
const { radius, top, left } = this.getDimensions(clientX, clientY);
const styles = {
position: 'absolute',
display: 'block',
pointerEvents: 'none',
transformOrigin: 'center',
transform: 'translate3d(0, 0, 0) scale(0)',
willChange: 'opacity, transform',
margin: '0 !important',
border: 'none !important',
width: `${radius}px`,
height: `${radius}px`,
borderRadius: '50%',
top: `${top}px`,
left: `${left}px`,
background: 'var(--color, var(--ig-gray-800))',
};
Object.assign(element.style, styles);
this.renderRoot.appendChild(element);
element
.animate(rippleFrames, rippleAnimation)
.finished.then(() => element.remove());
};
this.addEventListener('pointerdown', this.handler);
}
getDimensions(x, y) {
const rect = this.getBoundingClientRect();
const radius = Math.max(rect.width, rect.height);
const halfRadius = radius / 2;
return {
radius,
top: Math.round(y - rect.top - halfRadius),
left: Math.round(x - rect.left - halfRadius),
};
}
render() {
return html ``;
}
}
IgcRippleComponent.tagName = 'igc-ripple';
IgcRippleComponent.styles = styles;
export default IgcRippleComponent;
//# sourceMappingURL=ripple.js.map