intent/static/js/intent.js

// 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);
  });
})();