auro-carousel: Center on Selected Item

isaiahscheel commented 2 years ago

Is your feature request related to a problem? Please describe.

Flight search uses auro-carousel to hold the shoulder dates (panes) on the new microsite. These shoulder dates usually do 15 days before the flight date and 15 days after so guests can easily view prices surrounding the date they chose.
Auro-carousel automatically renders with the carousel scrolled all the way to the left so the first items are displayed. However, it would be convenient if instead, we had an option to render with the selected pane centered on render.
This is due to the "selected pane" being the date you search for which will be on average the most middle element, however, if there are not 15 days before the date you searched it could be some random pane, not necessarily in the middle

Not centered:

Centered:

Describe the solution you'd like

Configuration that allows the carousel to center on a selected child. In this instance it would be a pane
Describe alternatives you've considered
We have accomplished this, however it was a bit messy and convoluted : https://github.com/Alaska-ECommerce/ComponentLibrary/blob/main/components/flight-results/fs-shoulder/index.js#L116
Additional context
This is just a feature request, like I stated above, we did find a way to do it but ran into this problem again while converting that web component to a svelte component so it would be nice to be able to forego that logic into this component and seems like an appropriate feature.
If this is too specific to the flight search team, I totally understand, mostly wanted to discuss and see if it would be easier to accomplish on the auro-component rather than the weird math we have to do to and the forced scroll on load

blackfalcon commented 2 years ago

@geoffrich you had a huge hand in creating this element, I seem to remember this issue happening during dev. Do you have any insight into that and any guidance on how we can do this update?

geoffrich commented 2 years ago

This sounds vaguely familiar - I have some ideas, will hack on it a bit and let you know what I think.

geoffrich commented 2 years ago

@blackfalcon @isaiahscheel what about something like this? https://github.com/AlaskaAirlines/auro-carousel/commit/6fadca8e2a2bcaedf96b96c3669ab21379eed0eb

We can add a centerElement method to the carousel that will center the given element inside the carousel. This makes it generic -- you can pass the selected pane yourself, or any element inside the carousel that you want to center. I didn't want to add any logic to the carousel that was coupled to auro-pane.

It can be used like so:

const carousel = document.querySelector('auro-carousel') // or bind:this in Svelte
const selected = document.querySelector('auro-pane[selected]');
carousel.centerElement(selected);

I added an example to the demo page that centers the selected element every time it's clicked:

https://github.com/AlaskaAirlines/auro-carousel/blob/cb4f0e032e49c09ed14b26d3347a70517977fbb8/demo/index.html#L90-L98

Will this API work for you?

center-carousel