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