Skip to content

Commit 75b6026

Browse files
authored
Remove interestaction from interest invokers (#1137)
Also rename invoketarget references to commandfor.
1 parent cf48d96 commit 75b6026

File tree

1 file changed

+12
-34
lines changed

1 file changed

+12
-34
lines changed

site/src/pages/components/interest-invokers.explainer.mdx

+12-34
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ layout: ../../layouts/ComponentLayout.astro
2121

2222
## Introduction
2323

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

6969
## Proposed Plan
7070

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

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

93-
The `interestaction` (and the `interestAction` reflected property) is a freeform hint
94-
to the interestee. InterestAction can be a "built-in" action or a "custom" action.
95-
If `interestaction` is a false value (`''``, `null`, etc), then it will default to
96-
an `auto` state.
97-
98-
Built-in interactive elements have built-in behaviours (detailed below) which
99-
are determined by the `interestaction`. The built-in names _must not_ contain a
100-
`-`. An `interestaction` without a dash that is not a built-in is considered
101-
invalid, and will not dispatch an InterestEvent.
102-
103-
Valid interestactions (that is: custom interestaction or a valid built-in) will
104-
dispatch InterestEvent, allowing custom code to take control of interest invocations (for
105-
example calling `.preventDefault()` or executing custom side-effects).
106-
10792
Elements with `interesttarget` set will dispatch an `InterestEvent` on the
10893
_Interestee_ (the element referenced by `interesttarget`) when the element
10994
_Shows Interest_ or _Loses Interest_. When the element _Shows Interest_ the
@@ -128,15 +113,14 @@ dictionary InterestEventInit : EventInit {
128113
};
129114
```
130115

131-
Both `interesttarget` and `invoketarget` can exist on the same element at the
116+
Both `interesttarget` and `commandfor` can exist on the same element at the
132117
same time, and both should be respected.
133118

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

137-
If an `<input>` is a form participant, or has a `type` other than `reset` or
138-
`button`, then `invoketarget` and `interesttarget` _must_ be ignored. `interesttarget`
139-
additionally works with `type` of `submit`.
122+
If an `<input>` is a form participant, or has a `type` other than `reset`, `submit`, or
123+
`button`, then `interesttarget` _must_ be ignored.
140124

141125
### Example Code
142126

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

159143
```html
160-
<button interesttarget="my-custom" interestaction="custom-action">
144+
<button interesttarget="my-custom">
161145
When this button shows interest, the below div will display.
162146
</button>
163147

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

205-
When the `interestaction` attribute is missing it will default to an auto state.
206-
207-
| Interestee Element | `action` hint | Event Type | Behaviour |
208-
| :----------------- | :--------------- | :--------------- | :--------------------------------------|
209-
| `<* popover=*>` | (auto) | `'interest'` | Call `.togglePopover()` on the invokee |
210-
| `<* popover=*>` | `togglePopover` | `'interest'` | Call `.togglePopover()` on the invokee |
211-
| `<* popover=*>` | (auto) | `'loseinterest'` | Call `.togglePopover()` on the invokee |
212-
| `<* popover=*>` | `togglePopover` | `'loseinterest'` | Call `.togglePopover()` on the invokee |
187+
| Interestee Element | Event Type | Behaviour |
188+
| :----------------- | :--------------- | :--------------------------------------|
189+
| `<* popover=*>` | `'interest'` | Call `.showPopover()` on the invokee |
190+
| `<* popover=*>` | `'loseinterest'` | Call `.hidePopover()` on the invokee |
213191

214192
> Note: The above table is an attempt at wide coverage, but ideas are welcome. Please submit a PR if you have one!
215193
@@ -223,7 +201,7 @@ are not terms which encompass all viable methods of interaction. Lots of
223201
it was deemed that `interest` is the best name to explain the concept of a
224202
"hover or focus or equivalent".
225203

226-
#### Why is `interesttarget` on a lot more elements than `invoketarget`?
204+
#### Why is `interesttarget` on a lot more elements than `commandfor`?
227205

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

0 commit comments

Comments
 (0)