diff --git a/source b/source index 2f6d690e48d..1b7e3861a63 100644 --- a/source +++ b/source @@ -13335,6 +13335,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  • onchange
  • onclick
  • onclose
    • +
  • oncommand
  • oncontextlost
  • oncontextmenu
  • oncontextrestored
    • @@ -53419,6 +53420,8 @@ You cannot submit this form when the field is incorrect. specified.
    Content attributes:
    Global attributes
    +
    command
    +
    commandfor
    disabled
    form
    formaction
    @@ -53441,6 +53444,8 @@ You cannot submit this form when the field is incorrect. interface HTMLButtonElement : HTMLElement { [HTMLConstructor] constructor(); + [CEReactions] attribute DOMString command; + [CEReactions] attribute Element? commandForElement; [CEReactions] attribute boolean disabled; readonly attribute HTMLFormElement? form; [CEReactions] attribute USVString formAction; @@ -53498,20 +53503,84 @@ interface HTMLButtonElement : HTMLElement {

    The attribute's missing value default and invalid value default are both the Submit Button state.

    + data-x="invalid value default">invalid value default are both the Auto state.

    A button element is said to be a submit button if the type attribute is in the Submit Button state.

    + data-x="concept-submit-button">submit button if any of the following are true:

    -
    +

    Constraint validation: If the element is not a submit button, the element is barred from constraint validation.

    +

    If specified, the commandfor attribute value must be the ID of an element in the same tree as the button with the commandfor attribute.

    + +

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

    + + + + + + + + + + + +
    Keyword + State + Brief description +
    toggle-popover + Toggle Popover + Shows or hides the targeted popover element. +
    show-popover + Show Popover + Shows the targeted popover element. +
    hide-popover + Hide Popover + Hides the targeted popover element. +
    close + Close + Closes the targeted dialog element. +
    show-modal + Show Modal + Opens the targeted dialog element as modal. +
    A custom command keyword + Custom + Only dispatches the command event on the targeted + element. +
    + +

    The attribute's missing value default and invalid value default are both the Unknown state.

    + +

    A custom command keyword is a string that + starts with "--".

    + +
    +

    A button element element's activation behavior given event is:

    @@ -53539,10 +53608,123 @@ interface HTMLButtonElement : HTMLElement { -

  • Run the popover target attribute activation behavior given element - and event's target.

    • +

  • Let target be the result of running element's get the commandfor associated + element.

    • + +
  • +

    If target is not null:

    + +
      +

    1. If element has a form owner and element's type attribute is in the Submit Button state, then return.

      2. + +

    2. Let command be element's command attribute.

      3. + +

    3. If command is in the Unknown state, then return.

      4. + +

    4. Let isPopover be true if target's popover attribute is not in the no popover state; otherwise false.

      5. + +
    5. +

      If isPopover is false and command is not in the Custom state:

      + +
        +

      1. Assert: target's namespace is the + HTML namespace.

        2. + +

      2. If this standard does not define is valid invoker command steps for + target's local name, then + return.

        3. + +

      3. Otherwise, if the result of running target's corresponding is valid + invoker command steps given command is false, then + return.

        4. +
      +
      6. + +
    6. +

      Let continue be the result of firing an + event named command at target, using + CommandEvent, with its command + attribute initialized to command, its source attribute initialized to element, + and its cancelable and composed attributes initialized to true.

      + +

      DOM standard issue + #1328 tracks how to better standardize associated event data in a way which makes sense on + Events. Currently an event attribute initialized to a value cannot also have a getter, and so + an internal slot (or map of additional fields) is required to properly specify this.

      +
      7. + +

    7. If continue is false, then return.

      8. + +

    8. If command is in the Custom state, then return.

      9. + +
    9. +

      If command is in the Hide Popover state:

      + +
        +

      1. If the result of running check popover validity given + target, true, false, and null is true, then run the + hide popover algorithm given target, true, true, and false.

        2. +
      +
      10. + +
    10. +

      Otherwise, if command is in the Toggle Popover state:

      + +
        +

      1. If the result of running check popover validity given + target, false, false, and null is true, then run the + show popover algorithm given target, true, + true, and false.

        2. + +

      2. Otheriwse, if the result of running check popover validity given + target, true, false, and null is true, then run the + hide popover algorithm given target, true, + true, and false.

        3. +
      +
      11. + +
    11. +

      Otherwise, if command is in the Show Popover state:

      + +
        +

      1. If the result of running check popover validity given target, + false, false, and null is true, then run the show popover algorithm given target, true, true, + and false.

        2. +
      +
      12. + +

    12. Otherwise, if this standard defines invoker command steps for + target's local name, then run the + corresponding invoker command steps given target, element + and command.

      13. +
    +
    • + +

  • Otherwise, run the popover target attribute activation behavior given + element and event's target.

    • +

    An HTML element can have specific + is valid invoker command steps and invoker command steps defined for the + element's local name.

    +

    The form attribute is used to explicitly associate the @@ -53566,6 +53748,32 @@ interface HTMLButtonElement : HTMLElement { data-x="attr-fs-formtarget">formtarget must not be specified if the element is not a submit button.

    +

    The commandForElement IDL attribute must + reflect the element's commandfor + content attribute.

    + +

    The command getter steps are:

    + +
      +

    1. Let command be this's command attribute.

      2. + +

    2. If command is in the Custom state, then return command's + value.

      3. + +

    3. If command is in the Unknown state, then return the empty + string.

      4. + +

    4. Return the keword corresponding to the value of command.

      5. +
    + +

    The command setter steps are to set the command content attribute to the given value.

    +

    The value attribute gives the element's value for the purposes of form submission. The element's value is the value of the element's HTMLButtonElement : HTMLElement {

    The value IDL attribute must reflect the content attribute of the same name.

    -

    The type IDL - attribute must reflect the content attribute of the same name, limited to only - known values.

    +

    The type + getter steps are:

    + +
      +

    1. Let state be this's type attribute.

      2. + +

    2. If state is in the Auto + state and this is not a submit button, + then return "button".

      3. + +

    3. Return the keyword value corresponding to state.

      4. +
    + +

    The type setter steps are to set the type content attribute to the given value.

    The willValidate, validity, and HTMLButtonElement : HTMLElement {

    +
    +

    The following shows how buttons can use commandfor to show and hide an element with + the popover attribute when activated:

    + 
    <button type=button
+        commandfor="the-popover"
+        command="show-popover">
+ Show menu
+</button>
+<div popover
+     id="the-popover">
+ <button commandfor="the-popover"
+         command="hide-popover">
+  Hide menu
+ </button>
+</div>
+
    +
    + +
    +

    The following shows how buttons can use commandfor with a custom command keyword on an element, demonstrating + how one could use custom commands for unspecified behavior:

    + 
    <button type=button
+        commandfor="the-image"
+        command="--rotate-landscape">
+ Rotate Left
+</button>
+<button type=button
+        commandfor="the-image"
+        command="--rotate-portrait">
+ Rotate Right
+</button>
+<img id="the-image"
+     src="photo.jpg">
+<script>
+  const image = document.getElementById("the-image");
+  image.addEventListener("command", (event) => {
+   if ( event.command == "--rotate-landscape" ) {
+    event.target.style.rotate = "-90deg"
+   } else if ( event.command == "--rotate-portrait" ) {
+    event.target.style.rotate = "0deg"
+   }
+  });
+</script>
+
    +

    The select element

    @@ -62200,6 +62469,67 @@ interface HTMLDialogElement : HTMLElement { +

    The is valid invoker command steps for dialog elements, given + a command attribute command, are:

    + +
      +

    1. If command is in the Close state or in the Show Modal state, then + return true.

      2. + +

    2. Return false.

      3. +
    + +

    The invoker command steps for dialog elements, given an element + element, an element invoker, and a command attribute command, are:

    + +
      +

    1. If element is in the popover showing state, then return.

      2. + +
    2. +

      If command is in the Close + state and element has an open attribute:

      + +
        +

      1. Let value be invoker's value.

        2. + +

      2. Close the dialog element with value.

        3. +
      +
      3. + +

    3. If command is the Show Modal state and element does + not have an open attribute, then + show a modal dialog given element.

      4. +
    + +
    +

    The following buttons use commandfor to open and + close a "confirm" dialog as modal when activated:

    + + 
    <button type=button
+        commandfor="the-dialog"
+        command="show-modal">
+ Delete
+</button>
+<dialog id="the-dialog">
+ <form action="/delete" method="POST">
+  <button type="submit">
+   Delete
+  </button>
+  <button commandfor="the-dialog"
+          command="close">
+   Cancel
+  </button>
+ </form>
+</dialog>
+
    +
    +

    When a dialog element subject is to be closed, with null or a string result, run these steps:

    @@ -79884,6 +80214,50 @@ dictionary ToggleEventInit : EventInit { the oldState attribute. +

    The CommandEvent interface

    + + 
    [Exposed=Window]
+interface CommandEvent : Event {
+  constructor(DOMString type, optional CommandEventInit eventInitDict = {});
+  readonly attribute Element? source;
+  readonly attribute DOMString action;
+};
+
+dictionary CommandEventInit : EventInit {
+  Element? source = null;
+  DOMString action = "auto";
+};
    + +
    +
    event.command
    + +
    +

    Returns what action the element can take.

    +
    + +
    event.source
    + +
    +

    Returns the Element that was interacted with in order to cause this event.

    +
    +
    + +

    The command attribute must return the value it was + initialized to.

    + +

    The source getter steps are to + return the result of retargeting source against this's currentTarget.

    + +

    DOM standard issue #1328 + tracks how to better standardize associated event data in a way which makes sense on Events. + Currently an event attribute initialized to a value cannot also have a getter, and so an internal + slot (or map of additional fields) is required to properly specify this.

    Focus

    @@ -114252,6 +114626,7 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl onchange change onclick click onclose close + oncommand command oncontextlost contextlost oncontextmenu contextmenu oncontextrestored contextrestored @@ -114424,6 +114799,7 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl attribute EventHandler onchange; attribute EventHandler onclick; attribute EventHandler onclose; + attribute EventHandler oncommand; attribute EventHandler oncontextlost; attribute EventHandler oncontextmenu; attribute EventHandler oncontextrestored; @@ -141028,6 +141404,8 @@ interface External { phrasing phrasing* globals; + command; + commandfor; disabled; form; formaction; @@ -143029,6 +143407,21 @@ interface External { th Number of columns that the cell is to span Valid non-negative integer greater than zero + + command + button + Indicates to the targeted element which action to take. + "toggle-popover"; + "show-popover"; + "hide-popover"; + "close"; + "show-modal"; + a custom command keyword + + commandfor + button + Targets another element to be invoked. + ID* content meta @@ -144045,6 +144438,12 @@ interface External { close event handler Event handler content attribute + + oncommand + HTML elements + command event handler + Event handler content attribute + oncontextlost HTML elements @@ -145052,6 +145451,13 @@ INSERT INTERFACES HERE CloseWatcher, dialog elements, MessagePort Fired at CloseWatcher objects or dialog elements when they are closed via a close request or via web developer code, or at MessagePort objects when disentangled + + command + CommandEvent + Elements + Fired at elements when they handle a user invocation, via a commandfor attribute. + connect MessageEvent