@panphora/clayjs 1.16.0 → 1.18.0

package/src/plugins/menu/people.js

@@ -0,0 +1,279 @@
+// Who's here: a menu item and, on a page that opts in with `<html clay-menu-roster>`, a
+// roster beside the capsule. Either opens the people panel, which lists the people on
+// this page and lets you change the name your edits are signed with when this browser
+// chose it. The roster comes from the presence store; nothing here is ever saved.
+import { initialsOf, personColor } from "../../lib/person-face.js";
+
+const CROSS =
+  '<svg viewBox="0 0 256 256" aria-hidden="true" focusable="false"><path d="M205.66 194.34a8 8 0 0 1-11.32 11.32L128 139.31l-66.34 66.35a8 8 0 0 1-11.32-11.32L116.69 128 50.34 61.66a8 8 0 0 1 11.32-11.32L128 116.69l66.34-66.35a8 8 0 0 1 11.32 11.32L139.31 128Z"/></svg>';
+const ROSTER_FACES = 3;
+
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+
+function face(person) {
+  const el = document.createElement("span");
+  el.className = "clay-avatar";
+  el.setAttribute("aria-hidden", "true");
+  const color = personColor(person.id);
+  el.style.setProperty("color", color);
+  el.style.setProperty("border-color", color);
+  el.style.setProperty("background", "var(--bevel-surface)");
+  el.textContent = initialsOf(person.name);
+  return el;
+}
+
+export function attachPeople({ root, capsule, addItem, removeItem, closeMenu, note }) {
+  let snapshot = { supported: false, people: [], anonymous: 0 };
+  let panel = null;
+  let opener = null;
+  let roster = null;
+  let renaming = false;
+
+  const people = () => window.clay && window.clay.people;
+  const me = () => (window.clay && window.clay.me) || null;
+  const canRename = () => {
+    try {
+      return !!people()?.canRename?.();
+    } catch {
+      return false;
+    }
+  };
+  const total = () => snapshot.people.length + snapshot.anonymous;
+  const wantsRoster = () => document.documentElement.hasAttribute("clay-menu-roster");
+
+  function closePanel({ restore = true } = {}) {
+    if (!panel) return;
+    panel.remove();
+    panel = null;
+    renaming = false;
+    roster?.setAttribute("aria-expanded", "false");
+    if (restore && opener && opener.isConnected) opener.focus();
+    opener = null;
+  }
+
+  function meSection() {
+    const mine = me();
+    if (!mine || !mine.name) return null;
+    const section = document.createElement("div");
+    section.className = "clay-people-me";
+    const label = document.createElement("span");
+    label.className = "clay-people-me-label";
+    label.textContent = "Your edits are signed as";
+    const row = document.createElement("div");
+    row.className = "clay-people-me-row";
+    section.append(label, row);
+
+    if (renaming) {
+      const input = document.createElement("input");
+      input.className = "clay-people-input";
+      input.type = "text";
+      input.value = mine.name;
+      input.setAttribute("aria-label", "Your name");
+      input.maxLength = 120;
+      const save = document.createElement("button");
+      save.type = "button";
+      save.className = "clay-menu-btn clay-menu-btn-small clay-menu-btn-primary";
+      save.textContent = "Save";
+      const commit = () => {
+        try {
+          people().rename(input.value);
+        } catch (err) {
+          note(err && err.code === "not-renamable" ? "This name comes from your account, so it can't be changed here." : "Use a name of 1 to 120 characters that isn't an email address.");
+          input.focus();
+          return;
+        }
+        renaming = false;
+        draw();
+        panel?.querySelector(".clay-people-me .clay-menu-btn")?.focus();
+      };
+      save.addEventListener("click", commit);
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          commit();
+        }
+      });
+      row.append(input, save);
+      queueMicrotask(() => {
+        if (!input.isConnected) return;
+        input.focus();
+        input.select();
+      });
+    } else {
+      const name = document.createElement("span");
+      name.className = "clay-people-me-name";
+      name.textContent = mine.name;
+      row.append(face(mine), name);
+      if (canRename()) {
+        const change = document.createElement("button");
+        change.type = "button";
+        change.className = "clay-menu-btn clay-menu-btn-small";
+        change.textContent = "Change";
+        change.addEventListener("click", () => {
+          renaming = true;
+          draw();
+        });
+        row.append(change);
+      }
+    }
+    return section;
+  }
+
+  function draw() {
+    if (!panel) return;
+    const count = total();
+    panel.textContent = "";
+
+    const head = document.createElement("div");
+    head.className = "clay-people-head";
+    const title = document.createElement("h3");
+    title.className = "clay-people-title";
+    title.textContent = "Who's here";
+    const sum = document.createElement("span");
+    sum.className = "clay-people-sum";
+    sum.textContent = plural(count, "person", "people");
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "clay-people-close";
+    x.setAttribute("aria-label", "Close");
+    x.innerHTML = CROSS;
+    x.addEventListener("click", () => closePanel());
+    head.append(title, sum, x);
+    panel.append(head);
+
+    if (snapshot.people.length) {
+      const list = document.createElement("ul");
+      list.className = "clay-people-list";
+      for (const person of snapshot.people) {
+        const row = document.createElement("li");
+        row.className = "clay-people-row";
+        const who = document.createElement("span");
+        who.className = "clay-people-who";
+        const name = document.createElement("strong");
+        name.textContent = person.name;
+        if (person.you) {
+          const you = document.createElement("span");
+          you.textContent = "(you)";
+          name.append(you);
+        }
+        who.append(name);
+        row.append(face(person), who);
+        list.append(row);
+      }
+      panel.append(list);
+    }
+
+    if (snapshot.anonymous > 0) {
+      const anon = document.createElement("p");
+      anon.className = "clay-people-anon";
+      anon.textContent =
+        snapshot.anonymous === 1
+          ? "1 other person is here without a shared name."
+          : `${snapshot.anonymous} others are here without a shared name.`;
+      panel.append(anon);
+    }
+
+    const mine = meSection();
+    if (mine) panel.append(mine);
+  }
+
+  function openPanel(from) {
+    closeMenu();
+    if (panel) {
+      closePanel();
+      return;
+    }
+    opener = from;
+    panel = document.createElement("div");
+    panel.className = "clay-people";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Who's here");
+    panel.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (renaming) {
+        renaming = false;
+        draw();
+        panel.querySelector(".clay-people-me .clay-menu-btn")?.focus();
+      } else {
+        closePanel();
+      }
+    });
+    draw();
+    root.append(panel);
+    roster?.setAttribute("aria-expanded", from === roster ? "true" : "false");
+    panel.querySelector(".clay-people-close").focus();
+  }
+
+  function drawRoster() {
+    const show = wantsRoster() && snapshot.supported && total() > 1;
+    if (!show) {
+      roster?.remove();
+      roster = null;
+      return;
+    }
+    if (!roster) {
+      roster = document.createElement("button");
+      roster.type = "button";
+      roster.className = "clay-roster";
+      roster.setAttribute("aria-haspopup", "dialog");
+      roster.setAttribute("aria-expanded", panel ? "true" : "false");
+      roster.addEventListener("click", () => openPanel(roster));
+      root.insertBefore(roster, capsule);
+    }
+    const shown = snapshot.people.slice(0, ROSTER_FACES);
+    const rest = total() - shown.length;
+    const faces = document.createElement("span");
+    faces.className = "clay-roster-faces";
+    for (const person of shown) faces.append(face(person));
+    roster.textContent = "";
+    roster.append(faces);
+    if (rest > 0) roster.append(plural(rest, "other", "others"));
+    const names = shown.map((person) => person.name);
+    roster.setAttribute("aria-label", `Who's here: ${names.join(", ")}${rest > 0 ? `${names.length ? " and " : ""}${plural(rest, "other", "others")}` : ""}`);
+  }
+
+  let itemLabel = null;
+
+  function update() {
+    const count = total();
+    if (snapshot.supported && (count > 1 || canRename())) {
+      const label = count > 1 ? `Who's here (${plural(count, "person", "people")})` : "Who's here";
+      // Re-adding redraws the open menu, so only a changed label does it.
+      if (label !== itemLabel) {
+        itemLabel = label;
+        addItem({ id: "clay.people", label, run: () => openPanel(capsule.querySelector(".clay-menu-goo")) });
+      }
+    } else {
+      if (itemLabel !== null) removeItem("clay.people");
+      itemLabel = null;
+      closePanel({ restore: false });
+    }
+    drawRoster();
+    if (panel && !renaming) {
+      const active = root.getRootNode().activeElement;
+      const focused = active && panel.contains(active) ? active.classList[0] : null;
+      draw();
+      if (focused) panel.querySelector(`.${focused}`)?.focus();
+    }
+  }
+
+  document.addEventListener("click", (event) => {
+    if (panel && !event.composedPath().includes(root)) closePanel({ restore: false });
+  });
+  document.addEventListener("clay:people", () => {
+    if (!renaming) update();
+  });
+
+  import("../../sync/presence-store.js")
+    .then(({ presence }) => {
+      presence.subscribe((next) => {
+        snapshot = next || snapshot;
+        update();
+      });
+    })
+    .catch(() => {});
+
+  return { close: closePanel };
+}

package/src/plugins/menu/placement.js

@@ -0,0 +1,121 @@
+// Where the dock sits: one of four corners, chosen by dragging the grip or with its
+// arrow keys, and remembered for this document in this browser.
+const CORNERS = new Set(["top-left", "top-right", "bottom-left", "bottom-right"]);
+const DRAG_START = 4;
+const KEY = "menu-corner";
+
+export function nearestCorner(x, y, width, height) {
+  return `${y < height / 2 ? "top" : "bottom"}-${x < width / 2 ? "left" : "right"}`;
+}
+
+export function cornerAfterKey(corner, key) {
+  let [v, h] = corner.split("-");
+  if (key === "ArrowUp") v = "top";
+  else if (key === "ArrowDown") v = "bottom";
+  else if (key === "ArrowLeft") h = "left";
+  else if (key === "ArrowRight") h = "right";
+  else return null;
+  return `${v}-${h}`;
+}
+
+export function savedCorner(storage) {
+  let value = null;
+  try {
+    value = storage ? storage.get(KEY) : null;
+  } catch {}
+  return CORNERS.has(value) ? value : "top-right";
+}
+
+function makeSpots(container) {
+  const spots = document.createElement("div");
+  spots.className = "clay-menu-spots";
+  spots.setAttribute("clay", "editor-ui");
+  spots.setAttribute("aria-hidden", "true");
+  for (const to of CORNERS) {
+    const spot = document.createElement("span");
+    spot.className = "clay-menu-spot";
+    spot.dataset.to = to;
+    spots.append(spot);
+  }
+  container.append(spots);
+  return spots;
+}
+
+export function attachPlacement({ dock, container = document.body, grip, storage, onMove, onDragStart }) {
+  function setCorner(corner, { remember = true } = {}) {
+    dock.dataset.corner = corner;
+    if (remember) {
+      try {
+        if (storage) storage.set(KEY, corner);
+      } catch {}
+    }
+    if (onMove) onMove(corner);
+  }
+
+  setCorner(savedCorner(storage), { remember: false });
+
+  grip.addEventListener("keydown", (event) => {
+    const next = cornerAfterKey(dock.dataset.corner, event.key);
+    if (!next) return;
+    event.preventDefault();
+    if (next !== dock.dataset.corner) setCorner(next);
+  });
+
+  let drag = null;
+
+  grip.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0 || event.isPrimary === false) return;
+    const rect = dock.getBoundingClientRect();
+    drag = {
+      id: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      dx: event.clientX - rect.left,
+      dy: event.clientY - rect.top,
+      w: rect.width,
+      h: rect.height,
+      moving: false,
+      spots: null,
+      near: null,
+    };
+    if (grip.setPointerCapture) {
+      try {
+        grip.setPointerCapture(event.pointerId);
+      } catch {}
+    }
+  });
+
+  grip.addEventListener("pointermove", (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    if (!drag.moving) {
+      if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < DRAG_START) return;
+      drag.moving = true;
+      dock.setAttribute("data-dragging", "");
+      drag.spots = makeSpots(container);
+      drag.spots.style.setProperty("color-scheme", getComputedStyle(dock).colorScheme);
+      if (onDragStart) onDragStart();
+    }
+    const left = event.clientX - drag.dx;
+    const top = event.clientY - drag.dy;
+    Object.assign(dock.style, { left: `${left}px`, top: `${top}px`, right: "auto", bottom: "auto" });
+    drag.near = nearestCorner(left + drag.w / 2, top + drag.h / 2, window.innerWidth, window.innerHeight);
+    for (const spot of drag.spots.children) spot.toggleAttribute("data-near", spot.dataset.to === drag.near);
+  });
+
+  const finish = (commit) => (event) => {
+    if (!drag || event.pointerId !== drag.id) return;
+    const { moving, near, spots } = drag;
+    drag = null;
+    if (!moving) return;
+    spots.remove();
+    dock.removeAttribute("data-dragging");
+    for (const side of ["left", "top", "right", "bottom"]) dock.style.removeProperty(side);
+    if (commit && near) setCorner(near);
+    else setCorner(dock.dataset.corner, { remember: false });
+  };
+  grip.addEventListener("pointerup", finish(true));
+  grip.addEventListener("pointercancel", finish(false));
+  grip.addEventListener("lostpointercapture", finish(false));
+
+  return { setCorner };
+}

package/src/plugins/menu/preferences.js

@@ -0,0 +1,9 @@
+export const isMac = () =>
+  /mac|iphone|ipad|ipod/i.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+
+const isWindows = () =>
+  /Win/.test((navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || navigator.userAgent || "");
+
+export const revealLabel = () => (isMac() ? "Show in Finder" : isWindows() ? "Show in Explorer" : "Show in folder");
+
+export const keys = (mac, other) => (isMac() ? mac : other);