heatspot 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -4
- package/dist/heatspot-element.js +22 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,6 +8,28 @@
|
|
|
8
8
|
|
|
9
9
|
`heatspot` is an ESM TypeScript library for capturing pointer heat data and rendering an embeddable heatmap web component.
|
|
10
10
|
|
|
11
|
+
## Try the Demo
|
|
12
|
+
|
|
13
|
+
Live demo:
|
|
14
|
+
|
|
15
|
+
- [](https://davidhanson90.github.io/heatspot/)
|
|
16
|
+
|
|
17
|
+
How to try it:
|
|
18
|
+
|
|
19
|
+
1. Open the demo URL.
|
|
20
|
+
2. Move your cursor around the demo area for a few seconds.
|
|
21
|
+
3. Click the toggle icon in the top-left of the component to show the heat overlay.
|
|
22
|
+
4. Continue interacting to see hotspots update in real time.
|
|
23
|
+
|
|
24
|
+
To run the demo locally:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install
|
|
28
|
+
npm start
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Then open the local URL shown in your terminal (Vite default is usually `http://localhost:5173`).
|
|
32
|
+
|
|
11
33
|
## Features
|
|
12
34
|
|
|
13
35
|
- ESM package output with TypeScript declarations
|
|
@@ -59,10 +81,6 @@ Example with hidden toolbar:
|
|
|
59
81
|
</heat-spot>
|
|
60
82
|
```
|
|
61
83
|
|
|
62
|
-
### Example
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
84
|
### 3. Read heatmap data from a `<heat-spot>` element
|
|
67
85
|
|
|
68
86
|
```ts
|
package/dist/heatspot-element.js
CHANGED
|
@@ -40,14 +40,22 @@ export class HeatSpotElement extends LitElement {
|
|
|
40
40
|
color: #ffffff;
|
|
41
41
|
padding: 0;
|
|
42
42
|
line-height: 1;
|
|
43
|
-
font-size: 0.92rem;
|
|
44
|
-
font-weight: 700;
|
|
45
43
|
cursor: pointer;
|
|
46
44
|
z-index: 10001;
|
|
45
|
+
opacity: 0.72;
|
|
46
|
+
transition: opacity 180ms ease;
|
|
47
|
+
display: grid;
|
|
48
|
+
place-items: center;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
.toggle:hover {
|
|
50
|
-
|
|
52
|
+
opacity: 1;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.toggle-icon {
|
|
56
|
+
width: 0.95rem;
|
|
57
|
+
height: 0.95rem;
|
|
58
|
+
fill: currentColor;
|
|
51
59
|
}
|
|
52
60
|
|
|
53
61
|
.overlay {
|
|
@@ -195,7 +203,17 @@ export class HeatSpotElement extends LitElement {
|
|
|
195
203
|
${this.toolbar === "hidden"
|
|
196
204
|
? null
|
|
197
205
|
: html `<button class="toggle" @click=${this.toggleHeatmap} aria-label="Toggle heatmap">
|
|
198
|
-
|
|
206
|
+
<svg
|
|
207
|
+
class="toggle-icon"
|
|
208
|
+
viewBox="0 0 24 24"
|
|
209
|
+
role="img"
|
|
210
|
+
aria-label="Heatmap fire icon"
|
|
211
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
212
|
+
>
|
|
213
|
+
<path
|
|
214
|
+
d="M12 2.5c.4 2.3-.2 3.9-1.3 5.3-1.2 1.5-2.6 2.9-2.6 5.3 0 2.2 1.8 4 3.9 4 .8 0 1.6-.2 2.2-.6-1.1-.4-1.9-1.5-1.9-2.8 0-1.9 1.6-3 2.7-4.4.8-1 .9-2.1.8-3.3 2.3 1.5 4.2 4 4.2 7.1 0 4.2-3.4 7.6-7.6 7.6S4.8 17.3 4.8 13.1c0-4.3 2.5-6.7 4.5-8.7C10.4 3.3 11.2 2.6 12 2.5z"
|
|
215
|
+
/>
|
|
216
|
+
</svg>
|
|
199
217
|
</button>`}
|
|
200
218
|
${this.heatmapVisible ? html `<canvas id="heatmap" class="overlay"></canvas>` : null}
|
|
201
219
|
`;
|