Alec Perkins
f6b7374be7
Files: prototype and documentation files on features, with versions. Adding, replacing or removing a file is a feature revision with a change note. Types come from the extension; uploads are capped at 25 MB and stored under opaque paths. Every file URL checks project access, then redirects to a short-lived signed URL on the bucket, or streams with nosniff and a CSP sandbox when no bucket is configured. HTML prototypes run in a sandboxed iframe without same-origin access. Threads: whole-file threads and pins at a point on an image, drawn as an SVG overlay in percentages. Pins are placed with number fields, or by clicking the image with JS. Implementations: name, link and status, plus a per-feature status grid stamped with the feature revision, marked behind when the feature changes, and confirmable without changing the status. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
60 lines
2.3 KiB
JavaScript
60 lines
2.3 KiB
JavaScript
// Keyboard and screen-reader focus after HTMX swaps a thread in place.
|
|
// The server marks the element to land on (a new or edited comment, or the thread itself)
|
|
// with data-autofocus; without this, focus would fall back to the top of the page.
|
|
document.addEventListener("htmx:afterSettle", function () {
|
|
var target = document.querySelector("[data-autofocus]");
|
|
if (!target) return;
|
|
target.removeAttribute("data-autofocus");
|
|
target.focus();
|
|
});
|
|
|
|
// Image pins. The across/down number fields are the real controls and work without this;
|
|
// clicking the image just fills them in and shows where the pin will go.
|
|
(function () {
|
|
var SVG = "http://www.w3.org/2000/svg";
|
|
|
|
function fields() {
|
|
return {
|
|
across: document.getElementById("pin-across"),
|
|
down: document.getElementById("pin-down"),
|
|
};
|
|
}
|
|
|
|
function showPending(board, across, down) {
|
|
var svg = board.querySelector("[data-pins]");
|
|
var pin = svg.querySelector(".pending");
|
|
if (across === "" || down === "") {
|
|
if (pin) pin.remove();
|
|
return;
|
|
}
|
|
if (!pin) {
|
|
pin = document.createElementNS(SVG, "circle");
|
|
pin.setAttribute("class", "pending");
|
|
pin.setAttribute("r", "12");
|
|
svg.appendChild(pin);
|
|
}
|
|
pin.setAttribute("cx", across + "%");
|
|
pin.setAttribute("cy", down + "%");
|
|
}
|
|
|
|
document.addEventListener("click", function (event) {
|
|
var board = event.target.closest(".pinboard.placing");
|
|
if (!board || event.target.closest("a")) return;
|
|
var f = fields();
|
|
if (!f.across || !f.down) return;
|
|
var box = board.querySelector("img").getBoundingClientRect();
|
|
var clamp = function (v) { return Math.min(100, Math.max(0, v)); };
|
|
f.across.value = clamp(((event.clientX - box.left) / box.width) * 100).toFixed(1);
|
|
f.down.value = clamp(((event.clientY - box.top) / box.height) * 100).toFixed(1);
|
|
showPending(board, f.across.value, f.down.value);
|
|
var comment = document.getElementById("file-comment");
|
|
if (comment) comment.focus();
|
|
});
|
|
|
|
document.addEventListener("input", function (event) {
|
|
if (event.target.id !== "pin-across" && event.target.id !== "pin-down") return;
|
|
var board = document.querySelector(".pinboard.placing");
|
|
var f = fields();
|
|
if (board) showPending(board, f.across.value, f.down.value);
|
|
});
|
|
})();
|