Opinion poll!
You have a <button>, it makes a <foo> open. What would be the best declarative attribute for the button to control the foo?
Opinion poll!
You have a <button>, it makes a <foo> open. What would be the best declarative attribute for the button to control the foo?
@keithamus ok that makes sense :)
I don't much like the one with 'click' in it, as that's not the only way to activate a button.
They all seem so long, haha. Honestly otherwise however it's named I'd just be so happy to code stuff up like that. So neat. So simple!
@sarajw full disclosure we've been working on the idea for a while: https://open-ui.org/components/invokers.explainer
This is a last minute look at the API naming!
@keithamus and can't we have the attribute be called `action` even if one already exists in <form>s?
So maybe like:
```
<button action="open" controls="my-dialog-id">Show options</button>
```
I guess for a dialog we might also have a "showModal" action available... 🤔
@Lukew @keithamus interesting! Fair play, naming is hard and I'm an outsider just speaking my mind :)
I'm stoked for this though. Feels like how buttons *should* work. But if inline JavaScript was a security issue, how is this safer? Just a lot less flexible and more hardwired?
@keithamus I feel like `command` might have a bit of undesirable baggage w/r/t the content editable API.
I like “invoke” personally. Makes me think about the `__invoke` magic method in PHP (handles when an object is invoked as a function).
Alternatively, `actiontype` and `actiontarget`? `invokee` becomes an `actor`? `invoker` becomes a `director`? 🙃 Might be too confusing. I still find invoker clearer conceptually.
@keithamus the idea of
<button for=demo command=showModal>Show Modal</button>
<dialog id=demo></dialog>
Is quite clean. It does leave out the ability for “interest” to be registered against a different element/method however.
With that out of the way `invokeaction` and `interestaction` make lots of nice symmetry.
@keithamus Is there a reason not to extend the existing `type` attribute?
type=submit
type=reset
type=open (or expand, maybe? if it's expanding something on the current page, to distinguish that from opening a new link)
@sil @AmeliaBR full disclosure; we have a full explainer: https://open-ui.org/components/invokers.explainer/. It allows for `(invent what you like)` (so long as it contains a dash), but it has built-in defaults (which don't contain a dash).
In that regard, `type=whatever-with-dash` would work. If there's a strong desire for it, I can propose it.
@keithamus @sil Oh, if custom types need to be a specific syntax, then that's not a conflict!
I go back to voting for extending type!
`type=widget-play` is a custom extensible behavior that triggers a registered function of some type
`type=play` is something that could be built in for audio and video elements (please!)
But `typetarget` doesn't work for the ID ref, so I don't know about that one. Maybe `buttontarget`?
@AmeliaBR @keithamus @sil One downside to extending type is that unknown types currently fallback to submit buttons. So if we suddenly change the semantics of the type attribute that might break the web...
That's not to say we should never have new types it's just that making type accept anything is probably a non-starter unfortunately.
@Lukew Oh, that's true. If you're adding a custom button within a form, to display a widget or a T&C dialog, you'd want an explicit `type="button"` to be sure a JS error doesn't result in an HTML submit.
(Making submit the default type, instead of button, is definitely one of those errors in the web platform that should be fixed by time machine, IMO.)
@keithamus @sil If it's designed to be an arbitrary name of a function/event to trigger on the other element, then yes, that's a very different API than adding new button types!
I'd go with the `command` / `commandtarget` attributes in that case.
I like the idea of using `action` for consistency, but formaction is a URL, so different.
PS I do hope it will also be possible to use a built-in function as the specified command, like play with a video element target, or open with a dialog target.
@keithamus @AmeliaBR so, there are three possible values for button type. Submit is incompatible with command so you can’t have both at once. Reset “tends to annoy users” (MDN). And “button” doesn’t do anything.
This feels very much suitable for overriding type for command :)
<button target="foo" action="open" on="click">@Lukew @keithamus I just thought as well about specifying multiple invocations. I think it is legal to use {attribute}:{index}={value} in XHTML? e.g.
<button
invoketarget:1="foo"
invokeaction:1="open"
invoketarget:2="foo-tooltip"
invokeaction:2="open"
invokeevent:2="focus mouseover"
invoketarget:3="foo-tooltip"
invokeaction:3="close"
invokeevent:3="focusout mouseout"
>
Here I'm specifying the button opens foo on default invocation (click or keypress), but it can also open/close a related tooltip when the button is focused or hovered (freewheelingly introducing a new attribute invokeevent to specify which event triggers the action).
@Lukew @keithamus the only other thing I could suggest for multiple different invocations is by separating by delimiter within attribute values:
<button invoketarget="foo; foo-tooltip" invokeaction="open; focus mouseover:open, focusout mouseout:close">
In this the suggestion is that the delimiter ; splits the target/action into array where index groups target/action. An additional delimiter of comma separates actions, and actions could be prefixed by the desired event(s) (separated by whitespace if there are multiple) with a : and the action:
{
0: {
invoketarget: "foo",
invokeaction: "open",
},
1: {
invoketarget: "foo-tooltip",
invokeaction: [
0: {
event: "focus mouseover",
action: "open",
},
1: {
event: "focusout mouseout",
action: "close",
}
]
}
}
Maybe that's overcomplicated too...
@keithamus ah, just saw the docs at https://open-ui.org/components/invokers.explainer/
I like the concept behind dynamic invocation that fits the action (e.g. click for mouse/tap, keypress for keyboard)
@keithamus With `<button popovertarget="target-id">` and `<foo id="target-id" popover>`, there’s no need for a new attribute.
The use case of your question is too vague for me.