From 834a8b13d109ba7c5ae40737d57293a5f0a08c4c Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Thu, 5 Oct 2023 09:17:32 +0100 Subject: [PATCH 1/2] Add InvokeElement, InvokeEvent, steps for invocation This specifies some of the detail within the Invokers proposal (https://github.com/whatwg/html/issues/9625). This introduces 2 new IDLs: - InvokeEvent: A new event that has `action` and `invoker`. - InvokeElement: A mixin applied to Buttons to add `invokeTargetElement`/`invokeAction` It also adds the `invoketarget` & `invokeaction` attributes which are reflected to the IDL properties. It also adds the steps for invocation: button activation checks if the node has an invokeTarget and dispatches an InvokeEvent if so. Things NOT covered in this commit that are included in the propoal (https://github.com/whatwg/html/issues/9625): - Default per element behaviours (invocation action algorithms), this will be dealt with in subsequent individual commits. - `interestaction` and `interesttarget`. --- source | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 225 insertions(+), 1 deletion(-) diff --git a/source b/source index b8b9888bc90..995a25a0a06 100644 --- a/source +++ b/source @@ -46048,6 +46048,8 @@ interface HTMLLabelElement : HTMLElement {
formnovalidate
formtarget
height
+
invoketarget
+
invokeaction
list
max
maxlength
@@ -46713,6 +46715,55 @@ interface HTMLInputElement : HTMLElement { · + + invoketarget + · + · + + · + · + · + · + + + + · + · + · + · + · + + · + Yes + Yes + Yes + + + + invokeaction + · + · + + · + · + · + · + + + + · + · + · + · + · + + · + Yes + Yes + Yes + + + list · @@ -47873,6 +47924,8 @@ interface HTMLInputElement : HTMLElement { formnovalidate, formtarget, height, + invoketarget, + invokeaction, list, max, maxlength, @@ -48015,6 +48068,8 @@ interface HTMLInputElement : HTMLElement { formnovalidate, formtarget, height, + invoketarget, + invokeaction, max, min, multiple, @@ -48118,6 +48173,8 @@ interface HTMLInputElement : HTMLElement { formnovalidate, formtarget, height, + invoketarget, + invokeaction, max, min, multiple, @@ -48223,6 +48280,8 @@ interface HTMLInputElement : HTMLElement { formnovalidate, formtarget, height, + invoketarget, + invokeaction, max, min, multiple, @@ -48494,6 +48553,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, max, min, popovertarget, @@ -48590,6 +48651,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, list, max, min, @@ -48764,6 +48827,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -48917,6 +48982,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -49074,6 +49141,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -49227,6 +49296,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -49373,6 +49444,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -49538,6 +49611,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -49809,6 +49884,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, maxlength, minlength, multiple, @@ -49915,6 +49992,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, max, maxlength, min, @@ -50030,6 +50109,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, list, max, maxlength, @@ -50207,6 +50288,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, list, max, maxlength, @@ -50461,6 +50544,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, list, max, maxlength, @@ -50555,6 +50640,8 @@ ldh-str = < as defined in formmethod, formnovalidate, formtarget, + invoketarget, + invokeaction, popovertarget, and popovertargetaction content attributes; value IDL attribute.

@@ -50825,6 +50912,8 @@ ldh-str = < as defined in formnovalidate, formtarget, height, + invoketarget, + invokeaction, popovertarget, popovertargetaction, src, and @@ -50948,6 +51037,8 @@ ldh-str = < as defined in apply to the element: + invoketarget, + invokeaction, popovertarget and popovertargetaction.

@@ -51033,6 +51124,8 @@ ldh-str = < as defined in apply to the element: + invoketarget, + invokeaction, popovertarget and popovertargetaction.

@@ -52614,6 +52707,8 @@ You cannot submit this form when the field is incorrect.
formmethod
formnovalidate
formtarget
+
invoketarget
+
invokeaction
name
popovertarget
popovertargetaction
@@ -52732,7 +52827,11 @@ interface HTMLButtonElement : HTMLElement { -

  • Run the popover target attribute activation behavior given +

  • If element has an + invoketarget-associated element then run the invoke + target attribute activation behavior given element
    • + +

  • Otherwise, run the popover target attribute activation behavior given element.

    • @@ -78238,6 +78337,46 @@ dictionary ToggleEventInit : EventInit { the oldState attribute. +

    The InvokeEvent interface

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

    This is a freeform hint dictating what action the element must take. + Defaults to "auto".

    +
    + +
    event.invoker
    + +
    +

    Used to identifiy the EventTarget that was interacted with in order to + cause this event.

    +
    + +
    + +

    The action + and attribute must return the value it is initialized to.

    + +

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

    Focus

    @@ -84778,6 +84917,85 @@ dictionary DragEventInit : MouseEventInit { +

    Invokers

    + +

    Introduction

    + + + +

    Buttons are used to control elements on the page, such as + controlling forms. They can be used to control other elements on the page using the invoketarget attribute.

    + +

    HTML elements may have an associated invocation action algorithm + which defines how the element reacts to being invoked. Invocations can vary based on the invokeaction attribute.

    + +

    The invokeaction attribute is a freeform string + that acts as a hint to invocation action algorithms to perform some specific action + such as showing or hiding. It is not enumerated, to allow for userland implementations of an + invocation.

    + +

    The invoke target attributes

    + +

    Buttons may have the following content attributes:

    + + + +

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

    + + DOM interface: + 
    interface mixin InvokeElement {
+  [CEReactions] attribute Element? invokeTargetElement;
+  [CEReactions] attribute DOMString invokeAction;
+};
    + +

    The invokeTargetElement IDL attribute must + reflect the invoketarget attribute.

    + +

    The invokeAction + IDL attribute must reflect the invokeaction + attribute.

    + +

    To run the invoke target attribute activation behavior given a Node + node:

    + +
      +

    1. Let invokee be + invoketarget-associated element.

      2. + +

    2. If invokee is null, then return.

      3. + +

    3. Let action be node's invokeaction + attribute

      4. + +

    4. If action is null or empty, then let action be the string "auto".

      5. + +

    5. Let notCancelled be the result of firing an + event named invoke at invokee with its action set to action, its invoker set to node, and its cancelable attribute initialized to true.

      6. + +

    6. If notCancelled is true and invokee has an associated + invocation action algorithm then run the invokee's invocation + action algorithm given action. + +

    + +

    HTML elements may have an associated invocation action algorithm + which defines how the element reacts to being invoked.

    Loading web pages

    @@ -139208,6 +139426,12 @@ INSERT INTERFACES HERE Form controls Fired at controls during form validation if they do not satisfy their constraints + + invoke + InvokeEvent + Elements + Fired at elements when they handle a user invocation, such as from an invoketarget. + languagechange Event From b7a409f2c13aed801ff5ee367cd31dff669f2cd0 Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Sun, 22 Oct 2023 23:38:46 +0100 Subject: [PATCH 2/2] Add popover default behavior for invoke targets This specifies what buttons with an invoketarget pointing to an element with `popover` should do, based on the Invokers proposal (https://github.com/whatwg/html/issues/9625). This introduces new specifications just within the "invoke target attribute activation behavior" algorithm such that: - If an `invoketarget` points to an element with `popover` - If the `invokeaction` is `auto` or `togglePopover`, try to toggle the popover - If the `invokeaction` is `hidePopover`, try to hide the popover - If the `invokeaction` is `showPopover`, try to show the popover If the `invokeaction` is none of the above, then it will fall through the logic and be passed over to the "invocation action algorithm" for the invokee element, if present. Things NOT covered in this commit that are included in the propoal (https://github.com/whatwg/html/issues/9625): - Default per element behaviours (invocation action algorithms) beyond popovers. These will be dealt with in subsequent commits adding each elements "invocation action algorithm". - `interestaction` and `interesttarget`. --- source | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/source b/source index 995a25a0a06..3c578ddc84b 100644 --- a/source +++ b/source @@ -84988,9 +84988,71 @@ dictionary DragEventInit : MouseEventInit { data-x="dom-invokeevent-invoker">invoker set to node, and its cancelable attribute initialized to true.

    -

  • If notCancelled is true and invokee has an associated - invocation action algorithm then run the invokee's invocation - action algorithm given action. +

  • +

    If notCancelled is true:

    + +
      +
    1. Let shouldShowPopover be false. + +
    2. Let shouldHidePopover be false. + +

    3. If action is an ASCII case-insensitive match for "togglePopover" or "auto", then:

      + +
        + +

      1. If invokee's popover visibility state is hidden, then set shouldShowPopover to + true.

        2. + +

      2. Otherwise set shouldHidePopover to true.

        3. + +
      + +
      4. + +

    4. if action is an ASCII case-insensitive match for "hidePopover", and invokee's popover visibility + state is showing, then set + shouldHidePopover to true. + +

    5. if action is an ASCII case-insensitive match for "showPopover", and invokee's popover visibility + state is hidden, then set + shouldShowPopover to true. + +

    6. If shouldShowPopover is true, then:

      + +
        + +

      1. Assert: shouldHidePopover is false.

        2. + +

      2. Run the show popover given invokee, false, and node.

        3. + +
      + +
      7. + +

    7. Otherwise, if shouldHidePopover is true and the result of + running check popover validity given popover, false, false, and null + is true, then:

      + +
        + +

      1. Assert: shouldShowPopover is false.

        2. + +

      2. Run the hide popover algorithm given invokee, true, true, and false.

        3. + +
      + +
      8. + +

    8. Otherwise, if invokee has an associated invocation action algorithm + then run the invokee's invocation action algorithm given action.

      9. + +
    + +