@@ -21,7 +21,7 @@ layout: ../../layouts/ComponentLayout.astro
21
21
22
22
## Introduction
23
23
24
- Following [ invokers] ( ../invokers.explainer ) , adding an ` interesttarget ` and ` interestaction `
24
+ Following [ invokers] ( ../invokers.explainer ) , adding an ` interesttarget `
25
25
attributes to interactive elements: starting with ` <button> ` , `<input
26
26
type = " button" >` / ` <input type = " reset" >` / ` <input type = " submit" >` , ` <a >` , and ` <area >` (perhaps
27
27
expanding to ` <input> ` , ` <textarea> ` , ` <select> ` , ` <summary> ` or maybe more, see
@@ -68,13 +68,12 @@ interest.
68
68
69
69
## Proposed Plan
70
70
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 `
72
72
as available attributes to ` <button> ` , ` <a> ` , ` <area> ` and ` <input> ` elements.
73
73
74
74
``` webidl
75
75
interface mixin InterestInvokerElement {
76
76
[CEReactions] attribute Element? interestTargetElement;
77
- [CEReactions] attribute DOMString interestAction;
78
77
};
79
78
HTMLButtonElement includes InterestInvokerElement
80
79
HTMLInputElement includes InterestInvokerElement
@@ -90,20 +89,6 @@ some cases, see [attr-asociated element
90
89
steps] ( https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#attr-associated-element )
91
90
for more).
92
91
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
-
107
92
Elements with ` interesttarget ` set will dispatch an ` InterestEvent ` on the
108
93
_ Interestee_ (the element referenced by ` interesttarget ` ) when the element
109
94
_ Shows Interest_ or _ Loses Interest_ . When the element _ Shows Interest_ the
@@ -128,15 +113,14 @@ dictionary InterestEventInit : EventInit {
128
113
};
129
114
```
130
115
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
132
117
same time, and both should be respected.
133
118
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 `
135
120
_ must_ be ignored. ` interesttarget ` is still valid in these scenarios.
136
121
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.
140
124
141
125
### Example Code
142
126
@@ -157,7 +141,7 @@ allowing for custom JavaScript to be triggered without having to wire up manual
157
141
event handlers to the Interest elements.
158
142
159
143
``` html
160
- <button interesttarget =" my-custom" interestaction = " custom-action " >
144
+ <button interesttarget =" my-custom" >
161
145
When this button shows interest, the below div will display.
162
146
</button >
163
147
@@ -166,11 +150,9 @@ event handlers to the Interest elements.
166
150
<script >
167
151
const custom = document .getElementById (" my-custom" );
168
152
custom .addEventListener (" interest" , (e ) => {
169
- if (e .action !== " custom-action" ) return ;
170
153
custom .classList .add (' active' )
171
154
});
172
155
custom .addEventListener (" loseinterest" , (e ) => {
173
- if (e .action !== " custom-action" ) return ;
174
156
custom .classList .remove (' active' )
175
157
});
176
158
</script >
@@ -202,14 +184,10 @@ Showing/losing interest on an interesttarget will _always_ dispatch a trusted
202
184
specific element types are handled. Note that this list is ordered and higher
203
185
rules take precedence:
204
186
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 |
213
191
214
192
> Note: The above table is an attempt at wide coverage, but ideas are welcome. Please submit a PR if you have one!
215
193
@@ -223,7 +201,7 @@ are not terms which encompass all viable methods of interaction. Lots of
223
201
it was deemed that ` interest ` is the best name to explain the concept of a
224
202
"hover or focus or equivalent".
225
203
226
- #### Why is ` interesttarget ` on a lot more elements than ` invoketarget ` ?
204
+ #### Why is ` interesttarget ` on a lot more elements than ` commandfor ` ?
227
205
228
206
While _ invocation_ should only be limited to buttons, disclosure of
229
207
supplementary information can be expanded to _ all_ interactive elements. There
0 commit comments