work

Author: dmail

packages/frontend/dom/dist/jsenv_dom.js

@@ -9,6 +9,7 @@ export {
   dispatchPublicCustomEvent,
   findEvent,
   formatEventSideEffect,
+  isPressDrivenClick,
   isTouchDrivenEvent,
 } from "./src/dom_events.js";
 export { createIterableWeakSet } from "./src/iterable_weak_set.js";

packages/frontend/dom/index.js

@@ -138,6 +138,25 @@ export const isTouchDrivenEvent = (event) => {
   return event.sourceCapabilities?.firesTouchEvents === true;
 };
 
+/**
+ * Whether `event` is a click a pointer press produced, as opposed to one
+ * dispatched with no press behind it: keyboard activation (Enter or Space on a
+ * button or a link), `element.click()`, a label forwarding to the control it
+ * labels.
+ *
+ * `detail` is the click count, and it is 0 for every click no press stands
+ * behind — the reading that tells the two apart, and why nothing here may
+ * overwrite it (see EVENT_TYPES_WITH_MEANINGFUL_DETAIL below). It survives a
+ * cancelled `pointerdown`: the compatibility mouse events go, the click and its
+ * count stay — which is what makes it readable for a press a drag source or a
+ * control arbitrated.
+ *
+ * Asked by whoever armed something on a press and is waiting for the click that
+ * press owes: a click nothing pressed for is not that one, and taking it would
+ * cost a keyboard user their activation.
+ */
+export const isPressDrivenClick = (event) => event.detail > 0;
+
 /**
  * Returns true if the event itself or any event in its chain matches the predicate.
  *

packages/frontend/dom/src/dom_events.js

@@ -23,13 +23,23 @@
  * stands aside on its own.
  */
 
+import { isPressDrivenClick } from "../dom_events.js";
+
 let suppressing = false;
 let disarmAtNextPress = false;
 
 const suppressClick = (clickEvent) => {
   if (!suppressing) {
     return;
   }
+  if (!isPressDrivenClick(clickEvent)) {
+    // A click nothing pressed for — a keyboard activation, an `element.click()`
+    // — is not the one a gesture left behind, and swallowing it would take away
+    // an activation no hand ever gave. Left armed rather than lifted: the click
+    // this is waiting for may still be coming, and the next press lifts it
+    // either way.
+    return;
+  }
   suppressing = false;
   disarmAtNextPress = false;
   clickEvent.preventDefault();
@@ -64,8 +74,11 @@ export const suppressClickAfterGesture = () => {
 };
 
 /**
- * Whether the click being dispatched is one a gesture left behind — armed by
- * `suppressClickAfterGesture`, waiting to be swallowed by this module.
+ * Whether `clickEvent` is one a gesture left behind — armed by
+ * `suppressClickAfterGesture`, waiting to be swallowed by this module. The
+ * click itself is asked for, not just the arming: a keyboard activation
+ * arriving while a gesture's click is still awaited is nobody's leftover (see
+ * isPressDrivenClick).
  *
  * A last resort, not a convenience. The suppressor already swallows the click
  * before anyone else sees it; the one listener that legitimately needs to ask
@@ -76,4 +89,5 @@ export const suppressClickAfterGesture = () => {
  * dead code. Reach for it only when you are sure that is your situation and
  * no other ordering is available.
  */
-export const clickIsSuppressed = () => suppressing;
+export const clickIsSuppressed = (clickEvent) =>
+  suppressing && isPressDrivenClick(clickEvent);

packages/frontend/dom/src/interaction/click_suppression.js

@@ -212,6 +212,43 @@ export const markDragSource = (element, axes = "xy") => {
   };
 };
 
+// Which drag source, on this very press, said it walks no axis after all.
+const STOOD_DOWN = Symbol.for("jsenv_drag_source_stood_down");
+
+/**
+ * Says THIS press carries nothing, from an element that is a drag source
+ * otherwise.
+ *
+ * The mark above is written once and says what the element IS — something a drag
+ * can start from, along these axes. Whether it is free to be carried right now
+ * is another question, one render away from changing (a court locked on a plan,
+ * a row pinned by whoever owns the list), and the element is the only one who
+ * knows it, at the moment the press lands. So it is said on the press rather
+ * than in the DOM, and everything that reads a source's axes to know what is
+ * left for itself — a box that travels, a surface that pans — steps over the one
+ * that stood down: what walks no axis takes none.
+ *
+ * It is legible in time because a press reaches the element it landed on before
+ * whatever holds it, so the source has stood down while the event is still on
+ * its way up.
+ *
+ * @param {PointerEvent} pressEvent
+ * @param {Element} element The source itself.
+ */
+export const standDownFromPress = (pressEvent, element) => {
+  pressEvent[STOOD_DOWN] = element;
+};
+
+/**
+ * Which drag source stood down from this press, if any — see standDownFromPress.
+ *
+ * @param {PointerEvent} pressEvent
+ * @returns {Element|null}
+ */
+export const dragSourceThatStoodDown = (pressEvent) => {
+  return pressEvent[STOOD_DOWN] || null;
+};
+
 /**
  * Waits for the user to mean it, then starts a drag gesture.
  *

packages/frontend/dom/src/interaction/drag/drag_after_intent.js

@@ -56,6 +56,7 @@ import {
   dragAfterIntent,
   keepTouchRefusable,
   markDragSource,
+  standDownFromPress,
 } from "./drag_after_intent.js";
 import { initDragConstraints } from "./drag_constraint.js";
 import { createDragElementPositioner } from "./drag_element_positioner.js";
@@ -67,7 +68,7 @@ import {
   getDropTargetInfo,
   rectangleAreIntersecting,
 } from "./drop_target_detection.js";
-import { standDownFromPanZoomSurface } from "./pan_zoom.js";
+import { findPanZoomSurface } from "./pan_zoom.js";
 import { applyStickyFrontiersToAutoScrollArea } from "./sticky_frontiers.js";
 
 const dragStyleController = createStyleController("drag_to_move");
@@ -921,16 +922,21 @@ export const startDragTo = (
  * says nothing reads as a screen that is broken, and the hand pulls harder; the
  * refusal has to be told where the grab would have been felt.
  *
- * WHO KEEPS THE PRESS: whoever else it was for. Nothing is carried here, so no
- * axis is walked and nothing is disputed — the press is kept only because, over
- * a list or a page, nobody else wanted it (and the click it leaves behind has to
- * be swallowed, something pulled and told to stay put must not also be clicked).
- * Over a surface that pans, somebody does: "I cannot be carried" and "I want to
- * look around" are two sentences, and the second is the one the hand says nine
- * times out of ten — a thing that cannot be taken hold of is exactly the one a
- * finger rests on without thinking. So the surface keeps the press, whole (see
- * standDownFromPanZoomSurface), and the refusal is only told: no pointer taken,
- * no click swallowed, nothing prevented.
+ * WHAT IT GIVES UP, ALWAYS: the axes. Nothing is carried, so nothing is walked,
+ * and everything that reads what a drag source walks to know what is left for
+ * itself steps over this one (see standDownFromPress) — a swipe that starts on a
+ * locked row is the swipe of the box it stands in, a drag that starts on a
+ * pinned object pans the surface under it. A locked thing must not be a hole in
+ * what holds it.
+ *
+ * WHAT IT KEEPS: the press, unless a surface that pans was after it. Over a list
+ * or a page nobody else was, so the press is settled here like any gesture
+ * settles one — the pointer is taken (a `longpress` on the same finger must not
+ * answer afterwards), and the click the release leaves behind is swallowed:
+ * something pulled and told to stay put must not also be clicked. A surface is
+ * the one thing that takes it whole and in every direction, so there it is the
+ * surface's and the refusal takes nothing at all: no pointer, no click, nothing
+ * prevented.
  *
  * @param {PointerEvent} event The `pointerdown` that would have become a drag.
  * @param {object} [options]
@@ -953,14 +959,21 @@ export const refuseDragTo = (
   if (!isPrimaryButtonEvent(event)) {
     return;
   }
-  const stoodDown = standDownFromPanZoomSurface(event, draggedElement);
-  if (!stoodDown) {
+  // Nothing will be carried, so no axis is walked: whatever reads a drag
+  // source's axes to know what is left for itself must find none here.
+  standDownFromPress(event, draggedElement);
+  // And over a surface that pans, the press was never this element's to keep:
+  // "this one cannot be carried" and "I want to look around" are two sentences,
+  // and the hand says the second nine times out of ten — a thing that cannot be
+  // taken hold of is exactly the one a finger rests on without thinking.
+  const surfaceKeepsThePress = Boolean(findPanZoomSurface(draggedElement));
+  if (!surfaceKeepsThePress) {
     event.preventDefault();
   }
   dragAfterIntent(
     event,
     () => {
-      if (stoodDown) {
+      if (surfaceKeepsThePress) {
         // The surface is holding the hand: taking the pointer or the click from
         // it would be taking the gesture it is answering. The word is all that
         // is owed.

packages/frontend/dom/src/interaction/drag/drag_to.js

@@ -38,7 +38,10 @@
  */
 
 import { createDragGestureController } from "./drag_gesture.js";
-import { dragAfterIntent } from "./drag_after_intent.js";
+import {
+  dragAfterIntent,
+  dragSourceThatStoodDown,
+} from "./drag_after_intent.js";
 import {
   claimWheelGesture,
   releaseWheelGesture,
@@ -334,8 +337,12 @@ const isTopLayer = (element) => {
  * A box lifted into the top layer on the way up takes everything: a popover or a
  * modal dialog is written inside a slide and painted over the whole screen, so
  * the slides are nowhere near the finger and none of the axes are left.
+ *
+ * `stoodDown` is the one element on the way up whose axes are not read: a drag
+ * source that says this press carries nothing (see standDownFromPress in
+ * drag_after_intent.js).
  */
-const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
+const axesLeftBy = (axes, fromElement, stopElement, attribute, stoodDown) => {
   if (!stopElement.contains(fromElement)) {
     // Not a press that came up through this box: a browser view transition
     // delivers one to the document root instead, and the caller hands it over
@@ -350,6 +357,14 @@ const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
       // there is nothing left of it here, whatever axes are still unclaimed.
       return "";
     }
+    if (element === stoodDown) {
+      // It says which way it would be dragged and it is not being dragged from
+      // this press (standDownFromPress): a locked object walks no axis, so it
+      // takes none — a swipe that starts on it is the swipe of whatever it
+      // stands in.
+      element = element.parentElement;
+      continue;
+    }
     const taken = element.getAttribute(attribute);
     if (taken) {
       let rest = "";
@@ -539,7 +554,13 @@ export const startDragToTravel = (
   );
   const axesLeft =
     axesLeftByTravels &&
-    axesLeftBy(axesLeftByTravels, target, element, DRAG_SOURCE_AXES_ATTRIBUTE);
+    axesLeftBy(
+      axesLeftByTravels,
+      target,
+      element,
+      DRAG_SOURCE_AXES_ATTRIBUTE,
+      dragSourceThatStoodDown(pointerDownEvent),
+    );
   if (!axesLeft) {
     return null;
   }

packages/frontend/dom/src/interaction/drag/drag_to_travel.js

@@ -72,6 +72,7 @@ import {
   claimWheelGesture,
   wheelGestureIsTakenFrom,
 } from "../scroll/wheel_gesture.js";
+import { dragSourceThatStoodDown } from "./drag_after_intent.js";
 import { isPrimaryButtonEvent } from "./drag_gesture.js";
 import { DRAG_EXCLUDED_SELECTOR } from "./drag_to_travel.js";
 
@@ -167,31 +168,16 @@ const pageScrolls = (document) => {
 // or on plain content in it finds the surface first.
 const YIELDED_SELECTOR = `${DRAG_EXCLUDED_SELECTOR},[data-drag-source],[data-drag-ignore],[${SURFACE_ATTRIBUTE}]`;
 
-// Which element, on this very press, said it walks no axis after all.
-const STOOD_DOWN = Symbol.for("jsenv_drag_source_stood_down");
-
 /**
- * A drag source standing on a surface says THIS press is not its own after all:
- * nothing will be carried from it, so nothing is walked, and what the hand is on
- * is the surface. Read by the surface a hair later — a press reaches the element
- * it landed on before whatever holds it — which is why it is said on the event
- * rather than in the DOM: whether a source is free to be carried is a render
- * away from changing, and the mark that makes it a drag source was written long
- * before this finger.
- *
- * Returns whether there is a surface at all: a source that stands on none keeps
- * the press, there being nobody else to hand it to.
+ * The surface this element stands on, if any: what a gesture that gives itself
+ * up asks, to know whether there is anyone to give it up TO (see refuseDragTo in
+ * drag_to.js).
  *
- * @param {PointerEvent} event The `pointerdown` the source is standing down from.
- * @param {Element} element The source itself.
+ * @param {Element} element
+ * @returns {Element|null}
  */
-export const standDownFromPanZoomSurface = (event, element) => {
-  const surface = element.closest(`[${SURFACE_ATTRIBUTE}]`);
-  if (!surface) {
-    return false;
-  }
-  event[STOOD_DOWN] = element;
-  return true;
+export const findPanZoomSurface = (element) => {
+  return element.closest(`[${SURFACE_ATTRIBUTE}]`);
 };
 
 /**
@@ -337,11 +323,11 @@ export const installPanZoom = (
       return;
     }
     let yieldedTo = event.target.closest(YIELDED_SELECTOR);
-    if (yieldedTo && yieldedTo === event[STOOD_DOWN]) {
-      // It is a drag source and it is taking nothing from this press
-      // (standDownFromPanZoomSurface), so it is no reason to yield — and the
-      // walk goes on above it, where a field, a nested surface or something
-      // that IS being carried would still be.
+    if (yieldedTo && yieldedTo === dragSourceThatStoodDown(event)) {
+      // It is a drag source and it carries nothing from this press
+      // (standDownFromPress), so it is no reason to yield — and the walk goes on
+      // above it, where a field, a nested surface or something that IS being
+      // carried would still be.
       yieldedTo = yieldedTo.parentElement?.closest(YIELDED_SELECTOR) || null;
     }
     if (yieldedTo && yieldedTo !== element && element.contains(yieldedTo)) {