@jsenv/dom 0.17.16 → 0.17.18

package/dist/jsenv_dom.js

@@ -8651,43 +8651,64 @@ const createDragGestureController = (options = {}) => {
       document.removeEventListener("selectstart", preventSelectStart);
     });
     /*
-     * Refusing every selection also refuses the one a press is entitled to
-     * make: a double click selects the word under it, and that selection is
-     * over before the pointer has gone anywhere. It is made here instead,
-     * spelled out (see selectWordAtPoint) rather than left to a browser
+     * Refusing every selection also refuses the ones a press is entitled to
+     * make: a double click selects the word under it, a triple click the
+     * paragraph around it, and both are over before the pointer has gone
+     * anywhere. They are made here instead, spelled out (see
+     * selectWordAtPoint, selectParagraphAtPoint) rather than left to a browser
      * heuristic that cannot tell a drag from a click.
      *
+     * Read from `click` rather than `dblclick`, because a triple click has no
+     * event of its own: what tells the clicks apart is `detail`, the count the
+     * browser keeps of how many presses landed in the same place in a row — 2
+     * for a word, 3 and beyond for a paragraph (a fourth click keeps the
+     * paragraph, the way the browser does).
+     *
      * On the document and outliving the gesture, because the gesture is
-     * already over when the second click completes: dblclick comes after
-     * mouseup, the gesture ends at pointerup. It is dropped when it fires, and
-     * otherwise when the next press installs its own — a listener waiting for
-     * a double click that never comes costs nothing until then.
+     * already over when the second click completes: click comes after mouseup,
+     * the gesture ends at pointerup. Kept installed after it fires, since the
+     * click that selects a word is also the one the next click turns into a
+     * paragraph; it goes when the next press installs its own — a listener
+     * waiting for a click that never comes costs nothing until then.
      */
-    removePendingDoubleClickListener();
-    const onDoubleClick = dblclickEvent => {
-      removePendingDoubleClickListener = NOOP;
+    removePendingMultiClickListener();
+    const onClick = clickEvent => {
+      const clickCount = clickEvent.detail;
+      if (clickCount < 2) {
+        return;
+      }
       // A drag that happened is a gesture, not a click: the second press of a
       // double click can be the one that drags, and what it drags must not end
       // up selected too.
       if (dragGesture.gestureInfo.started) {
         return;
       }
+      // Only the clicks that continue THIS press: the listener outlives the
+      // gesture and the page keeps being clicked elsewhere, where the browser
+      // is doing its own selecting — a second opinion there would only fight
+      // it.
+      const clickTarget = clickEvent.target;
+      if (clickTarget !== grabEvent.target && !clickTarget.contains(grabEvent.target)) {
+        return;
+      }
       // Text the page says is not selectable stays not selectable: a
       // programmatic selection goes through `user-select: none` in every
       // engine — it is a rule about what the USER may start, and the browser
       // does not read it back when asked directly. Read here so that doing the
       // browser's work does not also undo what the page asked of it.
-      if (!isSelectable(dblclickEvent.target)) {
+      if (!isSelectable(clickEvent.target)) {
+        return;
+      }
+      if (clickCount === 2) {
+        selectWordAtPoint(clickEvent.clientX, clickEvent.clientY);
         return;
       }
-      selectWordAtPoint(dblclickEvent.clientX, dblclickEvent.clientY);
+      selectParagraphAtPoint(clickEvent.clientX, clickEvent.clientY);
     };
-    document.addEventListener("dblclick", onDoubleClick, {
-      once: true
-    });
-    removePendingDoubleClickListener = () => {
-      removePendingDoubleClickListener = NOOP;
-      document.removeEventListener("dblclick", onDoubleClick);
+    document.addEventListener("click", onClick);
+    removePendingMultiClickListener = () => {
+      removePendingMultiClickListener = NOOP;
+      document.removeEventListener("click", onClick);
     };
     const cleanup = initializer({
       onMove: dragViaPointer,
@@ -8882,7 +8903,7 @@ const definePropertyAsReadOnly = (object, propertyName) => {
   });
 };
 const NOOP = () => {};
-let removePendingDoubleClickListener = NOOP;
+let removePendingMultiClickListener = NOOP;
 
 // What a double click selects when the browser is allowed to do it itself: the
 // word around the caret the click lands on.
@@ -8902,6 +8923,46 @@ const selectWordAtPoint = (x, y) => {
     selection.modify("extend", "forward", "word");
   }
 };
+
+// What a triple click selects when the browser is allowed to do it itself: the
+// paragraph around the caret the click lands on — in the DOM, the contents of
+// the closest block the caret sits in.
+//
+// Drawn from the box tree rather than from `selection.modify("extend",
+// "forward", "paragraph")`: "paragraph" is a granularity Gecko never
+// implemented (it stops at word and line), so the modify route would select a
+// line in Firefox and a paragraph in Chrome.
+const selectParagraphAtPoint = (x, y) => {
+  const caretRange = createCaretRange(x, y);
+  if (!caretRange) {
+    return;
+  }
+  const block = getClosestBlock(caretRange.startContainer);
+  if (!block) {
+    return;
+  }
+  const selection = window.getSelection();
+  selection.removeAllRanges();
+  const paragraphRange = document.createRange();
+  paragraphRange.selectNodeContents(block);
+  selection.addRange(paragraphRange);
+};
+const getClosestBlock = node => {
+  let element = node.nodeType === 1 ? node : node.parentElement;
+  while (element) {
+    const {
+      display
+    } = window.getComputedStyle(element);
+    // Everything that is not laid out as a line inside another line: the first
+    // ancestor that breaks the flow is the one whose text reads as a paragraph
+    // of its own.
+    if (!display.startsWith("inline") && display !== "contents") {
+      return element;
+    }
+    element = element.parentElement;
+  }
+  return null;
+};
 const createCaretRange = (x, y) => {
   if (document.caretPositionFromPoint) {
     const caretPosition = document.caretPositionFromPoint(x, y);
@@ -12894,6 +12955,16 @@ const DRAG_EXCLUDED_SELECTOR = ["input", "textarea", "select", '[contenteditable
 const DRAG_AXES_ATTRIBUTE = "data-travel-by-drag";
 const WHEEL_AXES_ATTRIBUTE = "data-travel-by-wheel";
 
+// A surface the browser paints in the top layer: it is still a DOM descendant
+// of whatever it was written in, and it is nowhere near it on screen — it
+// covers everything. So a gesture that happened on it is not the gesture of any
+// box it merely sits on top of, and every walk up the tree from the pointer
+// ends here: the boxes above are behind, and behind is not under the finger.
+const TOP_LAYER_SELECTOR = [":popover-open", "dialog:modal", ":fullscreen"].join(",");
+const isTopLayer = element => {
+  return element.matches(TOP_LAYER_SELECTOR);
+};
+
 /**
  * What is left for this box of the axes it travels, once the boxes it CONTAINS
  * have taken theirs: a row of slides inside a page that walks between pages, a
@@ -12908,6 +12979,10 @@ const WHEEL_AXES_ATTRIBUTE = "data-travel-by-wheel";
  * the browser for the pointer LAST, which is the outermost box — the wrong one,
  * and past that point the inner one stops being told anything. So the box that
  * does not own the gesture must never ask for it.
+ *
+ * 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.
  */
 const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
   if (!stopElement.contains(fromElement)) {
@@ -12919,6 +12994,11 @@ const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
   let left = axes;
   let element = fromElement;
   while (element && element !== stopElement && element.nodeType === 1) {
+    if (isTopLayer(element)) {
+      // The gesture happened on a surface painted over this box, not in it:
+      // there is nothing left of it here, whatever axes are still unclaimed.
+      return "";
+    }
     const taken = element.getAttribute(attribute);
     if (taken) {
       let rest = "";
@@ -12946,6 +13026,11 @@ const axesLeftBy = (axes, fromElement, stopElement, attribute) => {
 const scrollRoomTowards = (fromElement, stopElement, axis, sign) => {
   let element = fromElement;
   while (element && element !== stopElement && element.nodeType === 1) {
+    if (isTopLayer(element)) {
+      // A scroller above a top-layer surface is painted behind it: whatever
+      // room it has left is not room the finger is asking for.
+      return false;
+    }
     const size = axis === "x" ? element.clientWidth : element.clientHeight;
     const scrollSize = axis === "x" ? element.scrollWidth : element.scrollHeight;
     if (scrollSize > size + 1) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.17.16",
+  "version": "0.17.18",
   "type": "module",
   "description": "DOM utilities for writing frontend code",
   "repository": {