-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhotspot.js
More file actions
135 lines (114 loc) · 7.18 KB
/
hotspot.js
File metadata and controls
135 lines (114 loc) · 7.18 KB
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
exports.hotspot = function hotspot() {
return `
<style>
code.language-tsx {
position: relative;
}
ol.hotspot-legend {
counter-reset:li;
margin: 1rem 1rem 2rem 1rem;
padding-left:0;
}
ol.hotspot-legend > li {
position: relative;
padding: 0.5 1rem;
list-style: none;
}
ol.hotspot-legend > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
display: inline-block;
text-align: center;
line-height: 0.95rem;
width: 1rem;
height: 1rem;
border-radius: 100%;
color: white;
background-color: black;
font-size: 0.7rem;
margin-top: -0.5rem;
}
ol.hotspot-legend > li code {
margin-left: 0.5rem;
}
.hotspot-number {
position: absolute;
display: inline-block;
text-align: center;
line-height: 0.95rem;
width: 1rem;
height: 1rem;
border-radius: 100%;
color: white;
background-color: black;
font-size: 0.7rem;
margin-top: -0.5rem;
}
.token.hotspot {
outline: dashed 1px gray;
padding: 0 0.125rem;
border-radius: 0.125rem;
cursor: pointer;
}
.token.hotspot:hover,
.token.hotspot:focus {
outline-color: black;
}
.token:focus:after,
.token:hover:after {
position: absolute;
margin-top: 1rem;
display: inline-block;
height: 1.5rem;
border: solid 1px black;
background-color: white;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
box-shadow: silver 0 0 1rem;
}
.token.variable.Counter:focus:after,
.token.variable.Counter:hover:after {
content: 'counter.tsx/Counter';
}
.token.count:focus:after,
.token.count:hover:after {
content: 'counter.tsx/Counter/count';
}
.token.function.useState:focus:after,
.token.function.useState:hover:after {
content: 'counter.tsx/Counter/useState()@1';
}
.token.function.useEffect:focus:after,
.token.function.useEffect:hover:after {
content: 'counter.tsx/Counter/useEffect()@1';
}
.token.variable.interval:focus:after,
.token.variable.interval:hover:after {
content: 'counter.tsx/Counter/useEffect()@1/interval';
}
</style>
<p>Click or tap on any part of this code to see a code selector that targets it.</p>
<pre class="language-tsx" tabindex="0"><code class="language-tsx"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token hotspot variable Counter" tabindex="0">Counter</span><b class="hotspot-number">1</b><span class="token operator">:</span> <span class="token function-variable function">VFC</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span><span class="token hotspot variable count" tabindex="0">count</span><b class="hotspot-number">2</b><span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token hotspot function useState" tabindex="0">useState</span><b class="hotspot-number">3</b><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>overLimit<span class="token punctuation">,</span> setOverLimit<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token hotspot function useEffect" tabindex="0">useEffect</span><b class="hotspot-number">4</b><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token hotspot variable interval" tabindex="0">interval</span><b class="hotspot-number">5</b> <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">setCount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">></span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">setOverLimit</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1_000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<ol class="hotspot-legend">
<li><code>counter.tsx/Counter</code></li>
<li><code>counter.tsx/Counter/count</code></li>
<li><code>counter.tsx/Counter/useState()@1</code></li>
<li><code>counter.tsx/Counter/useEffect()@1</code></li>
<li><code>counter.tsx/Counter/useEffect()@1/interval</code></li>
</ol>
`;
};