Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove interestaction from interest invokers #1137

Merged
merged 1 commit into from
Jan 16, 2025
Merged

Remove interestaction from interest invokers #1137

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 12 additions & 34 deletions site/src/pages/components/interest-invokers.explainer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ layout: ../../layouts/ComponentLayout.astro

## Introduction

Following [invokers](../invokers.explainer), adding an `interesttarget` and `interestaction`
Following [invokers](../invokers.explainer), adding an `interesttarget`
attributes to interactive elements: starting with `<button>`, `<input
type="button">`/`<input type="reset">`/`<input type="submit">`, `<a>`, and `<area>` (perhaps
expanding to `<input>`, `<textarea>`, `<select>`, `<summary>` or maybe more, see
Expand Down Expand Up @@ -68,13 +68,12 @@ interest.

## Proposed Plan

In the style of `invoketarget`, this document proposes we add `interesttarget` and `interestaction`
In the style of `commandfor`, this document proposes we add `interesttarget`
as available attributes to `<button>`, `<a>`, `<area>` and `<input>` elements.

```webidl
interface mixin InterestInvokerElement {
[CEReactions] attribute Element? interestTargetElement;
[CEReactions] attribute DOMString interestAction;
};
HTMLButtonElement includes InterestInvokerElement
HTMLInputElement includes InterestInvokerElement
Expand All @@ -90,20 +89,6 @@ some cases, see [attr-asociated element
steps](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#attr-associated-element)
for more).

The `interestaction` (and the `interestAction` reflected property) is a freeform hint
to the interestee. InterestAction can be a "built-in" action or a "custom" action.
If `interestaction` is a false value (`''``, `null`, etc), then it will default to
an `auto` state.

Built-in interactive elements have built-in behaviours (detailed below) which
are determined by the `interestaction`. The built-in names _must not_ contain a
`-`. An `interestaction` without a dash that is not a built-in is considered
invalid, and will not dispatch an InterestEvent.

Valid interestactions (that is: custom interestaction or a valid built-in) will
dispatch InterestEvent, allowing custom code to take control of interest invocations (for
example calling `.preventDefault()` or executing custom side-effects).

Elements with `interesttarget` set will dispatch an `InterestEvent` on the
_Interestee_ (the element referenced by `interesttarget`) when the element
_Shows Interest_ or _Loses Interest_. When the element _Shows Interest_ the
Expand All @@ -128,15 +113,14 @@ dictionary InterestEventInit : EventInit {
};
```

Both `interesttarget` and `invoketarget` can exist on the same element at the
Both `interesttarget` and `commandfor` can exist on the same element at the
same time, and both should be respected.

If a `<button>` is a form participant, or has `type=submit`, then `invoketarget`
If a `<button>` is a form participant, or has `type=submit`, then `commandfor`
_must_ be ignored. `interesttarget` is still valid in these scenarios.

If an `<input>` is a form participant, or has a `type` other than `reset` or
`button`, then `invoketarget` and `interesttarget` _must_ be ignored. `interesttarget`
additionally works with `type` of `submit`.
If an `<input>` is a form participant, or has a `type` other than `reset`, `submit`, or
`button`, then `interesttarget` _must_ be ignored.

### Example Code

Expand All @@ -157,7 +141,7 @@ allowing for custom JavaScript to be triggered without having to wire up manual
event handlers to the Interest elements.

```html
<button interesttarget="my-custom" interestaction="custom-action">
<button interesttarget="my-custom">
When this button shows interest, the below div will display.
</button>

Expand All @@ -166,11 +150,9 @@ event handlers to the Interest elements.
<script>
const custom = document.getElementById("my-custom");
custom.addEventListener("interest", (e) => {
if (e.action !== "custom-action") return;
custom.classList.add('active')
});
custom.addEventListener("loseinterest", (e) => {
if (e.action !== "custom-action") return;
custom.classList.remove('active')
});
</script>
Expand Down Expand Up @@ -202,14 +184,10 @@ Showing/losing interest on an interesttarget will _always_ dispatch a trusted
specific element types are handled. Note that this list is ordered and higher
rules take precedence:

When the `interestaction` attribute is missing it will default to an auto state.

| Interestee Element | `action` hint | Event Type | Behaviour |
| :----------------- | :--------------- | :--------------- | :--------------------------------------|
| `<* popover=*>` | (auto) | `'interest'` | Call `.togglePopover()` on the invokee |
| `<* popover=*>` | `togglePopover` | `'interest'` | Call `.togglePopover()` on the invokee |
| `<* popover=*>` | (auto) | `'loseinterest'` | Call `.togglePopover()` on the invokee |
| `<* popover=*>` | `togglePopover` | `'loseinterest'` | Call `.togglePopover()` on the invokee |
| Interestee Element | Event Type | Behaviour |
| :----------------- | :--------------- | :--------------------------------------|
| `<* popover=*>` | `'interest'` | Call `.showPopover()` on the invokee |
| `<* popover=*>` | `'loseinterest'` | Call `.hidePopover()` on the invokee |

> Note: The above table is an attempt at wide coverage, but ideas are welcome. Please submit a PR if you have one!

Expand All @@ -223,7 +201,7 @@ are not terms which encompass all viable methods of interaction. Lots of
it was deemed that `interest` is the best name to explain the concept of a
"hover or focus or equivalent".

#### Why is `interesttarget` on a lot more elements than `invoketarget`?
#### Why is `interesttarget` on a lot more elements than `commandfor`?

While _invocation_ should only be limited to buttons, disclosure of
supplementary information can be expanded to _all_ interactive elements. There
Expand Down