ASCII text
1
(() => {
2
const rippleHosts = document.querySelectorAll('.button, button, input, select');
3
function generateRipple(rippleX, rippleY, rippleDimensions) {
5
const div = document.createElement('div');
6
div.className = 'ripple-pad';
7
div.style.width = `${rippleDimensions}px`;
9
div.style.height = `${rippleDimensions}px`;
10
div.style.left = `${rippleX}px`;
12
div.style.top = `${rippleY}px`;
13
div.style.borderRadius = `${rippleDimensions}px`;
15
return div;
17
}
18
for (const host of rippleHosts) {
20
host.addEventListener('mousedown', (event) => {
21
const rect = host.getBoundingClientRect();
22
const cursorX = event.clientX;
23
const cursorY = event.clientY;
24
const fromTop = cursorY - rect.top;
26
const fromBottom = rect.height - fromTop;
27
const fromLeft = cursorX - rect.left;
28
const fromRight = rect.width - fromLeft;
29
const requiredDimension = Math.ceil(Math.max(fromRight, fromLeft, fromTop, fromBottom));
31
const ripple = generateRipple(fromLeft - requiredDimension, fromTop - requiredDimension, requiredDimension * 2);
32
host.appendChild(ripple);
33
ripple.addEventListener('animationend', ({ animationName }) => {
35
if (animationName === 'RippleEffect') ripple.remove();
36
});
37
});
38
}
39
})()