-
Notifications
You must be signed in to change notification settings - Fork 0
/
RevealHighlight.ts
112 lines (103 loc) · 4.27 KB
/
RevealHighlight.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { html } from 'lit-html';
import { styleMap } from 'lit-html/directives/style-map.js';
import { registerRevealHighlight } from './initialize';
registerRevealHighlight();
export const BasicTemplate = (x) => {
const styles = {
'--reveal-color': `${x.color}`,
'--reveal-opacity': `${x.opacity}`,
'--reveal-border-color': `${x.borderColor}`,
'--reveal-border-width': `${x.borderWidth}px`,
'--reveal-border-fill-radius': `${x.borderFillRadius}`,
'--reveal-border-decoration-type': `${x.borderDecorationType || 'miter'}`,
'--reveal-border-decoration-top-left-radius': `${x.borderDecorationTopLeftRadius}px`,
'--reveal-border-decoration-top-right-radius': `${x.borderDecorationTopRightRadius}px`,
'--reveal-border-decoration-bottom-left-radius': `${x.borderDecorationBottomLeftRadius}px`,
'--reveal-border-decoration-bottom-right-radius': `${x.borderDecorationBottomRightRadius}px`,
'--reveal-border-left-type': `${x.borderLeft ? 'line' : 'none'}`,
'--reveal-border-right-type': `${x.borderRight ? 'line' : 'none'}`,
'--reveal-border-top-type': `${x.borderTop ? 'line' : 'none'}`,
'--reveal-border-bottom-type': `${x.borderBottom ? 'line' : 'none'}`,
'--reveal-hover-light': `${x.hoverLight ? 'true' : 'false'}`,
'--reveal-hover-light-color': `${x.hoverLightColor}`,
'--reveal-hover-light-fill-radius': `${x.hoverLightFillRadius}`,
'--reveal-hover-light-fill-radius-mode': `${x.hoverLightFillRadiusMode || 'relative'} `,
'--reveal-diffuse': `${x.diffuse ? 'true' : 'false'}`,
'--reveal-press-animation': `${x.pressAnimation ? 'true' : 'false'}`,
'--reveal-press-animation-radius-mode': `${x.pressAnimationRadiusMode}`,
'--reveal-press-animation-color': `${x.pressAnimationColor}`,
'--reveal-press-animation-speed': `${x.pressAnimationSpeed}`,
'--reveal-release-animation-accelerate-rate': `${x.releaseAnimationAccelerateRate}`,
}
return html`
<ax-reveal-provider>
<div id="container">
<ax-reveal-bound>
<ax-reveal style=${styleMap(styles)}>❀</ax-reveal>
</ax-reveal-bound>
</div>
</ax-reveal-provider>
<style>
#container {
top: 50%;
left: 50%;
width: 300px;
height: 100px;
transform: translate(-50%, -50%);
position: fixed;
}
#container ax-reveal {
width: 100%;
height: 100%;
color: white;
font-size: 20px;
line-height: 100px;
text-align: center;
}
</style>
`;
};
const arr0 = (x: number): unknown[] => Array(x).fill(0);
export const PressureTestTemplate = (x) => {
return html`
<ax-reveal-provider>
<div id="container">
<ax-reveal-bound>
${arr0(x.rows).map(() => html`
<div class="column">
${arr0(x.columns).map(() => html`<ax-reveal>❀</ax-reveal>`)}
</div>
`)}
</ax-reveal-bound>
</div>
</ax-reveal-provider>
<style>
#container {
top: 50%;
left: 50%;
width: min-content;
height: min-content;
transform: translate(-50%, -50%);
position: fixed;
}
#container .column {
display: flex;
}
#container ax-reveal {
width: 60px;
height: 60px;
margin: 2px;
color: white;
font-size: 24px;
line-height: 60px;
text-align: center;
--reveal-color: #FFFFFF;
--reveal-border-decoration-type: round;
--reveal-border-decoration-top-left-radius: 2px;
--reveal-border-decoration-top-right-radius: 4px;
--reveal-border-decoration-bottom-left-radius: 6px;
--reveal-border-decoration-bottom-right-radius: 8px;
}
</style>
`;
};