ASCII text
1
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt Apache-2.0
2
(() => {
3
const rippleHosts = document.querySelectorAll('.button, button:not(.link-button), input, select, .navbar a, .navrail a');
4
function generateRipple(rippleX, rippleY, rippleDimensions) {
5
const div = document.createElement('div');
6
div.className = 'ripple-pad';
7
div.style.width = `${rippleDimensions}px`;
8
div.style.height = `${rippleDimensions}px`;
9
div.style.left = `${rippleX}px`;
10
div.style.top = `${rippleY}px`;
11
div.style.borderRadius = `${rippleDimensions}px`;
12
return div;
13
}
14
for (const host of rippleHosts) {
15
host.addEventListener('mousedown', (event) => {
16
const rect = host.getBoundingClientRect();
17
const cursorX = event.clientX;
18
const cursorY = event.clientY;
19
const fromTop = cursorY - rect.top;
20
const fromBottom = rect.height - fromTop;
21
const fromLeft = cursorX - rect.left;
22
const fromRight = rect.width - fromLeft;
23
const requiredDimension = Math.ceil(Math.max(fromRight, fromLeft, fromTop, fromBottom));
24
const ripple = generateRipple(fromLeft - requiredDimension, fromTop - requiredDimension, requiredDimension * 2);
25
host.appendChild(ripple);
26
ripple.addEventListener('animationend', ({ animationName }) => {
27
if (animationName === 'RippleEffect') ripple.remove();
28
});
29
});
30
}
31
})()
32
// @license-end
33