Comments (3)
This is something that's come up for something before. We currently don't expose the type of interest (hover, focus, long press). Maybe we should do that so you could at least with a bit of JS decide whether to prevent default the event. But JS might not be the ideal here.
Pointer events while designed to be input agnostic do expose the type of input. So maybe this follows in the same theme?
from open-ui.
Interest invokers very specifically abstract away focus/hover to unify cross HID behaviours. I think if you want "interest invokers but just focus" then using the focus
event is probably what you want. I'm not convinced we should extend interest invokers to facilitate exclusion or different semantics for a particular HID.
To more directly talk about your pattern though, a carousel is kind of a spicy tabpanel; it has a list of buttons that can be immediately activated and they will bring the matching panel to the front. They should also activate on click though. You could map the focus to a click, then use invokers to activate a custom element to switch the tab-panel. Given that, you might be better implementing a Carousel as tabpanels, and focusgroup
might be a better fit for the tablist. In lieu of an actual tablist built-in, here's what I'd do:
<my-carousel id=carousel">
<div role=tablist focusgroup slot=tablist>
<button role=tab value=1 tabindex=-1 onfocus="this.onclick()" invoketarget="carousel">1</button>
<button role=tab value=2 tabindex=-1 onfocus="this.onclick()" invoketarget="carousel">2</button>
<button role=tab value=3 tabindex=-1 onfocus="this.onclick()" invoketarget="carousel">3</button>
</div>
<div role=tabpanel>1</div>
<div role=tabpanel>2</div>
<div role=tabpanel>3</div>
</my-carousel>
<script>
customElements.define('my-carousel', class extends HTMLElement {
connectedCallback() { this.addEventListener('invoke', this) }
handleEvent(event) {
const idx = event.target.closest('[role=tab]')?.value
if (value) this.switchTo(idx)
}
switchTo(idx) {
let i = 0;
for(const panel of this.querySelectorAll('[role=tabpanel]')) {
i += 1;
panel.hidden = i != idx
}
}
});
</script>
from open-ui.
Yes, totally agree that clicking should invoke the action as well, and that mapping focus to the invoke action is a way to solve this. I'd like to have a way to do this declaratively, otherwise it doesn't really explain the thing that the pseudo-element scroll markers create. I think this could well be some attribute value for focusgroup which implies invoking on focus.
E.g.
<my-carousel id=carousel">
<div role=tablist focusgroup="invoke" slot=tablist>
<button role=tab value=1 tabindex=-1 invoketarget="tab1" invokeaction="scrollTo">1</button>
<button role=tab value=2 tabindex=-1 invoketarget="tab2" invokeaction="scrollTo">2</button>
<button role=tab value=3 tabindex=-1 invoketarget="tab3" invokeaction="scrollTo">3</button>
</div>
<div role=tabpanel id=tab1>1</div>
<div role=tabpanel id=tab2>2</div>
<div role=tabpanel id=tab3>3</div>
</my-carousel>
As an example of the scrolling interaction you can see the demo at https://flackr.github.io/carousel/examples/carousel/image/ . The advantage of using scrolling is that it automatically supports swiping to advance.
As described in #1031 this alone wouldn't explain how the active button also needs to be updated on scroll.
from open-ui.
Related Issues (20)
- Use cases for a button with a pressed state HOT 10
- Use cases for a button with multiple states HOT 12
- [focusgroup] Should focusgroup direction follow the DOM order or the visual order? HOT 4
- [switch] Should the switch element support swipe actions? HOT 7
- [switch] Should the switch have a toggle() method? HOT 1
- [popover] moving keyboard focus out of a popover should dismiss it HOT 9
- Target minimum size for select HOT 2
- [interest invokers] Touch inputs HOT 37
- Explore `<input>` Element as a child within `<select>` for Combobox HOT 3
- [invokers] Implicit targets HOT 10
- Toggle Button Proposal HOT 15
- Dismissing popovers when focus leaves HOT 6
- Will the stylable <select> element be able to break outside the browser window? HOT 6
- [invokers] setRangeText for textarea and inputs HOT 2
- [select] `<selectedoption for=id>` as an alternative to split buttons and `<button type=popover>` HOT 6
- [interest invokers] How to define/control the action on "losing interest" HOT 3
- Foundation for the Global Design System component library HOT 9
- [invokers] add a way to list supported commands?
- [invokers] add an invoke method?
- [Invokes] commands should be dash delimited HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from open-ui.