From a5df5070e02304966ee4a28dda88798b4cced581 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Sat, 24 Feb 2024 01:19:57 +0000 Subject: [PATCH] WIP dialog closedby attribute spec --- source | 265 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 254 insertions(+), 11 deletions(-) diff --git a/source b/source index 5c17e790d5a..f77c8b1d326 100644 --- a/source +++ b/source @@ -60968,6 +60968,7 @@ interface HTMLDetailsElement : HTMLElement {
Flow content.
Content attributes:
Global attributes
+
closedby
open
Accessibility considerations:
@@ -60981,6 +60982,7 @@ interface HTMLDialogElement : HTMLElement { [CEReactions] attribute boolean open; attribute DOMString returnValue; + attribute DOMString closedBy; [CEReactions] undefined show(); [CEReactions] undefined showModal(); [CEReactions] undefined close(optional DOMString returnValue); @@ -61076,6 +61078,39 @@ interface HTMLDialogElement : HTMLElement { is a boolean attribute. When specified, it indicates that the dialog element is active and that the user can interact with it.

+

The closedby + content attribute is an enumerated attribute with the following keywords and + states:

+ + + + + + + + + +
Keyword + State + Brief description +
any + any + Close requests or clicking outside closes the dialog +
closerequest + closerequest + Close requests close the dialog +
none + none + Nothing automatically closes the dialog +
No corresponding keyword + auto + Same as closerequest when modal or none when not +
+ +

The closedby attribute's invalid value default and missing value + default are both the auto state.

+

A dialog element without an open attribute @@ -61153,6 +61188,29 @@ interface HTMLDialogElement : HTMLElement {

  • Add an open attribute to this, whose value is the empty string.

    • +
  • +

    If this's closedby attribute state + is any or closerequest then:

    + +
      +

    1. Set this's close watcher to the + result of establishing a close watcher given + this's relevant global object, with:

      + +
        +

      • cancelAction being to return the + result of firing an event named cancel at this, with the cancelable attribute initialized to true.

        • + +

      • closeAction being to close the + dialog given this and null.

        • +
      +
      2. +
    +
    • +

  • Set this's previously focused element to the focused element.

    • @@ -61201,19 +61259,25 @@ interface HTMLDialogElement : HTMLElement { to the top layer given this.

  • -

    Set this's close watcher to the - result of establishing a close watcher given - this's relevant global object, with:

    +

    If this's closedby attribute state + is not none then:

    -
      -

    • cancelAction being to return the - result of firing an event named cancel at this, with the cancelable attribute initialized to true.

      • +
        +

      1. Set this's close watcher to the + result of establishing a close watcher given + this's relevant global object, with:

        -

      2. closeAction being to close the - dialog given this and null.

        3. -
    +
      +

    • cancelAction being to return the + result of firing an event named cancel at this, with the cancelable attribute initialized to true.

      • + +

    • closeAction being to close + the dialog given this and null.

      • +
    +
    • +

  • Set this's previously focused element to the @@ -61264,6 +61328,48 @@ interface HTMLDialogElement : HTMLElement {

  • Set topDocument's autofocus processed flag to true.

    • +

    To get the showing any dialog list for a + Document document:

    + +
      +

    1. Let dialogs be « ».

      2. + +

    2. For each Element element in + document's top layer: if element is a dialog element, element's closedby attribute is in the any state and element has an open attribute, then append + element to dialogs.

      3. + +

    3. Return dialogs.

      4. +
    + +

    To find the nearest inclusive open dialog given a Node + node, perform the following steps. They return an HTML dialog element or null.

    + +
      +

    1. Let currentNode be node.

      2. + +
    2. +

      While currentNode is not null:

      + +
        +

      1. If currentNode is an HTML dialog + element, currentNode's closedby + attribute is in the any state and + currentNode has an open attribute, then + return currentNode.

        2. + +

      2. Set currentNode to currentNode's parent in the flat + tree.

        3. +
      +
      3. + +

    3. Return null.

      4. +
    +

    The dialog HTML element removing steps, given removedNode and oldParent, are:

    @@ -61397,6 +61503,9 @@ interface HTMLDialogElement : HTMLElement {
    +

    The Document has a dialog pointerdown target, which is an HTML dialog element or null, initially null.

    +

    Each dialog element has a close watcher, which is a close watcher or null, initially null.

    @@ -61411,8 +61520,79 @@ interface HTMLDialogElement : HTMLElement { attribute set this element to the currently focused element during the show popover algorithm.

    +

    The following attribute change + steps, given element, localName, oldValue, + value, and namespace, are used for HTML + dialog elements:

    + +
      +

    1. If namespace is not null, then return.

      2. + +

    2. If localName is not closedby, then + return.

      3. + +

    3. If element has no open attribute, then + return.

      4. + +

    4. If oldValue and value are in the same state, then return.

      5. + +

    5. If value is in the none state + or auto state and element's is + modal flag is false then:

      +
        +
      1. +

        If element's close watcher is not + null, then:

        + +
          +

        1. Destroy element's close watcher.

          2. + +

        2. Set element's close watcher to + null.

          3. +
        +
        2. +
      +
      6. +

    6. If value is in the closerequest state, any state, or auto state and element's is + modal flag is true then:

      +
        +
      1. +

        If element's close watcher is null, + then:

        + +
          +

        1. Set element's close watcher to + the result of establishing a close watcher + given element's relevant global object, with:

          + +
            +

          • cancelAction being to return the + result of firing an event named cancel at element, with the cancelable attribute initialized to true.

            • + +

          • closeAction being to close + the dialog given element and null.

            • +
          +
          2. +
        +
        2. +
      +
      7. +
    +
    +

    The closedBy IDL attribute must reflect the + closedby content attribute, limited to only + known values.

    +

    The open IDL attribute must reflect the open content attribute.

    @@ -61433,6 +61613,69 @@ interface HTMLDialogElement : HTMLElement { </dialog>
    +

    Dialog light dismiss

    + +

    "Light dismiss" means that clicking outside of a dialog whose closedby attribute is in the any state will close the dialog. This is in addition to + how such dialogs respond to close requests.

    + +

    To light dismiss open dialogs, given an Event event:

    + +
      +

    1. Assert: event's isTrusted attribute is true.

      2. + +

    2. Let target be event's target.

      3. + +

    3. Let document be target's node document.

      4. + +

    4. If document's showing any dialog list is empty, then + return.

      5. + +

    5. If event is a PointerEvent and event's type is "pointerdown", + then: set document's dialog pointerdown target to the result of running + topmost clicked dialog given target.

      6. + +
    6. +

      If event is a PointerEvent and event's type is "pointerup", + then:

      + +
        +

      1. Let clickedDialog be the result of running topmost clicked + dialog given target.

        2. + +

      2. Let topDialog be document's showing any dialog + list's last element.

        3. + +

      3. Let clickedTopDialog be clickedDialog is topDialog, or + clickedDialog is dialog pointerdown target

        4. + +

      4. Set document's dialog pointerdown target to null.

        5. + +

      5. If clickedTopDialog, then return.

        6. + +

      6. Perform close the dialog given topDialog.

        7. +
      +
      7. +
    + +

    Light dismiss open dialogs will be called by the Pointer Events spec when the user clicks + or touches anywhere on the page.

    + +

    To find the topmost clicked dialog, given a Node node:

    + +
      +

    1. Let clickedDialog be the result of running nearest inclusive open + dialog given node.

      2. + +

    2. Return clickedDialog

      3. +
    +