dashboard: an entry's menu left of the finger

Opened by a finger held on an entry, its menu had its top left corner
at the finger, under the hand holding it, a right hand mostly. By
touch it now has its top right corner there; opened by a pointer, its
top left, as before.

1 files changed, 12 insertions, 4 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 18c7ab1..09c7917 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -1783,7 +1783,9 @@ function adding(kind, path, known, place, index) {
 // --- An entry's menu (right-click, or a finger held on it): edit its value, rename its
 // key (a map's), add to it (a map: a key; a list: an item at the end, or at an index).
 // Each in a field below its row. ---
-function entryMenu(x, y, items) {
+// By touch (`touch`), its top right corner at the finger, so the hand holding it, a
+// right hand mostly, doesn't cover it; else its top left at the pointer.
+function entryMenu(x, y, items, touch = false) {
   const menu = document.getElementById("entry-menu");
   menu.replaceChildren(...items.map(([label, act]) => {
     const button = el("button", { type: "button", role: "menuitem" }, label);
@@ -1792,12 +1794,15 @@ function entryMenu(x, y, items) {
   }));
   if (items.length === 0) return;
   menu.hidden = false;
-  menu.style.left = Math.max(8, Math.min(x, innerWidth - menu.offsetWidth - 8)) + "px";
+  const left = touch ? x - menu.offsetWidth : x;
+  menu.style.left = Math.max(8, Math.min(left, innerWidth - menu.offsetWidth - 8)) + "px";
   menu.style.top = Math.max(8, Math.min(y, innerHeight - menu.offsetHeight - 8)) + "px";
 }
 // `row` opens a menu of `items()` on a right-click, or a finger held on it half a second
 // (the click that ends the touch then neither opens nor closes the row).
 const HOLD_MS = 500;
+// What the last press on an entry was made with (`pointerType`).
+let lastPointer = "mouse";
 function withMenu(row, items) {
   row.addEventListener("contextmenu", event => {
     if (event.target.closest(".editor, .renamer")) return;
@@ -1806,10 +1811,13 @@ function withMenu(row, items) {
     if (offered.length === 0) return;
     event.preventDefault();
     event.stopPropagation();
-    entryMenu(event.clientX, event.clientY, offered);
+    // Opened by a finger held (some browsers say so with this, after the hold below).
+    entryMenu(event.clientX, event.clientY, offered,
+      event.pointerType === "touch" || lastPointer === "touch");
   });
   let held = null, swallow = false;
   row.addEventListener("pointerdown", event => {
+    lastPointer = event.pointerType;
     if (event.pointerType !== "touch" || event.target.closest(".editor, .renamer")) return;
     const { clientX: x, clientY: y } = event;
     held = setTimeout(() => {
@@ -1817,7 +1825,7 @@ function withMenu(row, items) {
       const offered = items();
       if (offered.length === 0) return;
       swallow = true;
-      entryMenu(x, y, offered);
+      entryMenu(x, y, offered, true);
     }, HOLD_MS);
     const cancel = moved => {
       if (moved && Math.hypot(moved.clientX - x, moved.clientY - y) < 10) return;