eminuxandCursor
70fccc493e
Cattura periodica client-side (con consenso), storage ActiveStorage e overlay allineato all’immagine. Co-authored-by: Cursor <cursoragent@cursor.com>
106 lines
3.2 KiB
JavaScript
106 lines
3.2 KiB
JavaScript
/*! Admin heatmap overlay on captured page screenshot. */
|
|
(function () {
|
|
function colorFor(t) {
|
|
if (t < 0.33) {
|
|
var k = t / 0.33;
|
|
return [67 + (255 - 67) * k, 160 + (235 - 160) * k, 71 * (1 - k)];
|
|
}
|
|
if (t < 0.66) {
|
|
var k2 = (t - 0.33) / 0.33;
|
|
return [255, 235 - (235 - 152) * k2, 0];
|
|
}
|
|
var k3 = (t - 0.66) / 0.34;
|
|
return [255, 152 * (1 - k3), 0];
|
|
}
|
|
|
|
function fit() {
|
|
var canvas = document.getElementById("admin-heatmap");
|
|
var stage = document.getElementById("admin-heatmap-stage");
|
|
var scaler = document.getElementById("admin-heatmap-scaler");
|
|
var shot = document.getElementById("admin-heatmap-shot");
|
|
if (!canvas || !stage) return;
|
|
|
|
var designW = 1200;
|
|
var designH = 900;
|
|
if (scaler) {
|
|
designW = parseInt(scaler.getAttribute("data-design-width"), 10) || designW;
|
|
designH = parseInt(scaler.getAttribute("data-design-height"), 10) || designH;
|
|
}
|
|
if (shot && shot.naturalWidth > 0) {
|
|
designW = shot.naturalWidth;
|
|
designH = shot.naturalHeight;
|
|
}
|
|
|
|
if (scaler) {
|
|
scaler.style.width = designW + "px";
|
|
scaler.style.height = designH + "px";
|
|
var stageW = Math.max(stage.clientWidth, 320);
|
|
var scale = Math.min(1, stageW / designW);
|
|
scaler.style.transform = "scale(" + scale + ")";
|
|
stage.style.height = Math.max(420, Math.round(designH * scale)) + "px";
|
|
} else {
|
|
designW = Math.max(stage.clientWidth, 320);
|
|
designH = Math.max(stage.clientHeight, 480);
|
|
}
|
|
|
|
var grid = parseInt(canvas.getAttribute("data-grid"), 10) || 40;
|
|
var max = parseInt(canvas.getAttribute("data-max"), 10) || 1;
|
|
var cells = [];
|
|
try {
|
|
cells = JSON.parse(canvas.getAttribute("data-cells") || "[]");
|
|
} catch (e) {
|
|
cells = [];
|
|
}
|
|
|
|
canvas.width = designW;
|
|
canvas.height = designH;
|
|
canvas.style.width = designW + "px";
|
|
canvas.style.height = designH + "px";
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, designW, designH);
|
|
|
|
var cellW = designW / grid;
|
|
var cellH = designH / grid;
|
|
var radius = Math.max(cellW, cellH) * 2.2;
|
|
|
|
cells.forEach(function (cell) {
|
|
var intensity = Math.min(1, cell.c / max);
|
|
if (intensity <= 0) return;
|
|
var cx = (cell.x + 0.5) * cellW;
|
|
var cy = (cell.y + 0.5) * cellH;
|
|
var rgb = colorFor(intensity);
|
|
var alpha = 0.28 + intensity * 0.55;
|
|
var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
|
|
grd.addColorStop(
|
|
0,
|
|
"rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + "," + alpha + ")"
|
|
);
|
|
grd.addColorStop(
|
|
1,
|
|
"rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + ",0)"
|
|
);
|
|
ctx.fillStyle = grd;
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
});
|
|
}
|
|
|
|
function boot() {
|
|
var shot = document.getElementById("admin-heatmap-shot");
|
|
fit();
|
|
if (shot) {
|
|
if (shot.complete && shot.naturalWidth > 0) fit();
|
|
else shot.addEventListener("load", fit);
|
|
}
|
|
window.addEventListener("resize", fit);
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", boot);
|
|
} else {
|
|
boot();
|
|
}
|
|
})();
|