auro-carousel: Render on the Selected Pane/center on it - Low Priority

[isaiahscheel]

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

• Low priority, just something to think on and see if there is a better way
• Not a huge problem, however the search team is using a carousel of panes and we have to use some weird math and querySelectors to grab the selected pane and then use scrollCarousel method to go to that selected pane
• It would be nice if we were able to just center and have it render right at the center
• The scroll is buggy at times because of the querySelect and the time to render the component so sometimes we get an error and no centering

Describe the solution you'd like

A clear and concise description of what you want to happen.

• Have the carousel render with the element that is "selected" in the middle already
• No "scroll" animation needed

  Describe alternatives you've considered

  A clear and concise description of any alternative solutions or features you've considered.

• We have used the scrollCarousel method to get the pane that is selected in the middle

  Additional context

  Add any other context or screenshots about the feature request here.

What it renders without the scroll method implementation we did:

What it looks like with the auto scroll to middle:

[blackfalcon]

Assigned to future milestone for consideration when this work is prioritized.

[Patrick-Daly-AA]

Flagging as Help Wanted, as this appears to be a great candidate for inner sourcing.

[fajar-apri-alaska]

idk, I have done a bit of research, I don't think we can have the selected children in the middle on component render with our current code. Some other carousel element out there also have this 'centerMode' property. If they have the first children as the selected one, it clones one or more components of the last index child, and puts it before the first child. [ -3 -2 -1 0 1 2 3 ] something like that While ours did nothing with the case.

The best that I can propose right now is to automatically scroll to the selected children (using Promises.all to all of the children updateComplete property to resolve first)

firstUpdated() {
    ...
    if (this.centerSelectedOnRender) { // just a flag for someone that doesn't want to center the selected one
      this.actionOnChildrenReady();
    }
  }

  actionOnChildrenReady() {
    const promises = [];

    [...this.children].forEach((child) => {
      promises.push(child.updateComplete);
    })

    Promise.all(promises).then(() => {
      this.scrollToSelected();
    });
  }

  scrollToSelected() {
    const selectedChildren = [...this.children].find((child) => child.hasAttribute('selected'));

    if (selectedChildren) {
      this.centerElement(selectedChildren);
    }
  }

[blackfalcon]

@fajar-apri-alaska I like where you are going with this. Please address this as an OSS contribution. Fork the repo and submit a PR from your fork.

Thanks!

[isaiahscheel]

I am a little confused on this new attribute, in the code it is called centerSelectedOnRender but on the doc site it is centerSelected. Also it is a string? Is there an example on how to use this or just set it equal to "true"?

[blackfalcon]

Please see the API page https://auro.alaskaair.com/components/auro/carousel/api

The reference to centerSelectedOnRender was an incorrect reference in the local demo page. This has been addressed. There is no demo on the docsite yet, we are working on a Node 18 update of the repo with new examples, this will be updated in that work.

The scope of this update is that ON PAGE RENDER, when a node is preselected and the attribute of centerSelected is on the auro-carousel element, the UI will center that element.

[isaiahscheel]

Thanks @blackfalcon, let me play around with it a little more then and I will reach out if I hav emore questions. I appreciate you looking into it.