/
Button.effects.ts
47 lines (37 loc) · 1.38 KB
/
Button.effects.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import anime from 'animejs';
import { ARWES_CORE_FRAME_BG_CLASSNAME } from '../constants';
import { BUTTON_FRAME_BG_BASE_OPACITY, BUTTON_FRAME_BG_HIGH_OPACITY } from './Button.styles';
import { ArwesTheme } from '../ArwesThemeProvider';
const highlightFrameBgs = (container: HTMLElement, theme: ArwesTheme, palette?: string): void => {
const color = theme.palette[palette as string]?.main || theme.palette.primary.main;
const duration = theme.transitionDuration(0.5);
const bgs: HTMLElement[] = Array.from(container.querySelectorAll(`.${ARWES_CORE_FRAME_BG_CLASSNAME}`));
const overlays: HTMLDivElement[] = bgs.map(bg => {
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.left = '0px';
overlay.style.right = '0px';
overlay.style.top = '0px';
overlay.style.bottom = '0px';
overlay.style.backgroundColor = color;
bg.appendChild(overlay);
return overlay;
});
const onComplete = (): void => {
overlays.forEach(overlay => overlay.remove());
};
anime
.timeline({
targets: bgs,
duration: duration / 2,
easing: 'easeOutSine'
})
.add({
opacity: [BUTTON_FRAME_BG_BASE_OPACITY, BUTTON_FRAME_BG_HIGH_OPACITY]
})
.add({
opacity: [BUTTON_FRAME_BG_HIGH_OPACITY, BUTTON_FRAME_BG_BASE_OPACITY],
complete: onComplete
});
};
export { highlightFrameBgs };