By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 ripples.js

View raw Download
text/plain • 1.38 kiB
ASCII text
        
            
1
(() => {
2
const rippleHosts = document.querySelectorAll('.button, button, input, select');
3
4
function generateRipple(rippleX, rippleY, rippleDimensions) {
5
const div = document.createElement('div');
6
div.className = 'ripple-pad';
7
8
div.style.width = `${rippleDimensions}px`;
9
div.style.height = `${rippleDimensions}px`;
10
11
div.style.left = `${rippleX}px`;
12
div.style.top = `${rippleY}px`;
13
14
div.style.borderRadius = `${rippleDimensions}px`;
15
16
return div;
17
}
18
19
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
25
const fromTop = cursorY - rect.top;
26
const fromBottom = rect.height - fromTop;
27
const fromLeft = cursorX - rect.left;
28
const fromRight = rect.width - fromLeft;
29
30
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
34
ripple.addEventListener('animationend', ({ animationName }) => {
35
if (animationName === 'RippleEffect') ripple.remove();
36
});
37
});
38
}
39
})()