Manual scrolling (updating idForFirstItem)

[buschtoens]

As far as I can see, it's currently not possible to update idForFirstItem after the first render. The docs concur with this assessment.

https://github.com/html-next/vertical-collection/blob/b218268807b620854105ba76496844eb703d1959/addon/components/vertical-collection/component.js#L112-L121

Is this just not implemented yet or intentionally left out? In the latter case: how would you expect users of this addon to implement a "jump to" feature?

[pzuraq]

This hasn’t been implemented yet, we’ve been waiting for v1.0 to work on it because the other issues we need to solve are a bit more fundamental (a11y, etc). But we do have a plan.

Scrolling through the collection is an imperative action, you want to tell the collection what to do, or potentially query it for the scrollTop of an item so you can animate the transition to it. This is not really like an action or argument - instead we want to yield back an API from the component that parent components can use.

This would be similar to registerAPI in ember-power-select. The hard part is figuring out what that API should look like, which is why we keep punting on it. I think the most minimal version would be to query for the position of an item given it’s id, so we might be able to start there.

[hfranken]

We want to use vertical-collection for implementing a long list of selectable items. However. after manually scrolling the collection, the selected item may be way out of view. The user should be able to select the next (or previous item) with 1 click, so that the new selected item scrolls automatically into view (at the top or bottom, whichever is closest). When do you think this behaviour will be possible ? If it takes too long we may fork the vertical-collection and start working out our own solution, but it would be better if we could know in advance the API you were thinking about.

[pzuraq]

We're hoping to work on it early next year, I'll be needing this API soon too for some of the work I'm planning on doing next quarter on our internal select components.

The API would follow the registerAPI pattern used by ember-power-select and others to yield an imperative API upwards:

{{vertical-collection registerAPI=(action "registerAPI")}}

export default Component.extend({
  actions: {
    registerAPI(api) {
      this.set('collectionAPI', api);
    }
  } 
});

The two methods this API should have are:

• offsetForIndex(index: number): number
• offsetForId(id: any): number

Both should return the pixel value of the scroll offset for the index/id. This allows external contexts to control the way that the collection scrolls, whether it's just setting scrolltop instantly or animating to it with easing, etc.

[Luiz-N]

+1 This would be great!

[fpauser]

Any updates on this?

[pzuraq]

I haven’t had time recently to work on this library unfortunately, so haven’t had a chance to implement this. Planning on coming back around to it at some point in the future, once some of my other obligations are fulfilled

[ahamedalthaf]

@pzuraq Can you please check if this works.

[pzuraq]

Unfortunately I don't have bandwidth at the moment to work on this library, I'm unsure when I will 😩 it is something I do plan on coming back to, particularly once we're about to land some optimizations upstream in Glimmer which, ideally, will allow us to do even more performant work.

I'll try to find some time in the next few quarters to see if I can do some maintenance work. I have a few major refactors I'd like to do, including dropping support for Ember 1-2 so we can have a more streamlined API.

[pzuraq]

@ahamedalthaf I actually was able to look at that PR and I think it's small enough that we can merge it, if we can get tests passing and add a test for it. Thanks for taking this on!

[ahamedalthaf]

@pzuraq Thanks