svelty-material
Version:
Svelte Materialify fork with ts support and updated scss.
62 lines (61 loc) • 2.31 kB
JavaScript
const defaults = {
color: 'currentColor',
class: '',
opacity: 0.1,
centered: false,
spreadingDuration: '.4s',
spreadingDelay: '0s',
spreadingTimingFunction: 'linear',
clearingDuration: '1s',
clearingDelay: '0s',
clearingTimingFunction: 'ease-in-out',
};
export function rippleStart(e, options = {}) {
e.stopImmediatePropagation();
const opts = { ...defaults, ...options };
const isTouchEvent = typeof TouchEvent !== 'undefined' && e instanceof TouchEvent ? !!e.touches[0] : false;
const target = isTouchEvent
?
e.touches[0].currentTarget
: e.currentTarget;
const ripple = document.createElement('div');
const rippleStyle = ripple.style;
ripple.className = `material-ripple ${opts.class}`;
rippleStyle.position = 'absolute';
rippleStyle.color = 'inherit';
rippleStyle.borderRadius = '50%';
rippleStyle.pointerEvents = 'none';
const diameter = Math.max(target.clientWidth, target.clientHeight);
rippleStyle.width = rippleStyle.height = `${diameter}px`;
rippleStyle.marginTop = rippleStyle.marginLeft = `-${diameter / 2}px`;
target.appendChild(ripple);
rippleStyle.opacity = opts.opacity;
rippleStyle.transition = `transform ${opts.spreadingDuration} ${opts.spreadingTimingFunction} ${opts.spreadingDelay},opacity ${opts.clearingDuration} ${opts.clearingTimingFunction} ${opts.clearingDelay}`;
rippleStyle.background = opts.color;
const targetRect = target.getBoundingClientRect();
if (opts.centered) {
rippleStyle.top = `${targetRect.height / 2}px`;
rippleStyle.left = `${targetRect.width / 2}px`;
}
else {
const distY = isTouchEvent
? e.touches[0].clientY
: e.clientY;
const distX = isTouchEvent
? e.touches[0].clientX
: e.clientX;
rippleStyle.top = `${distY - targetRect.top}px`;
rippleStyle.left = `${distX - targetRect.left}px`;
}
rippleStyle.transform = `scale(3) translate(0,0)`;
return ripple;
}
export function rippleStop(ripple) {
if (ripple == null)
return;
ripple.addEventListener('transitionend', e => {
if (e.propertyName === 'opacity')
ripple.remove();
});
ripple.style.opacity = '' + 0;
}