Fast List
Installation
npm install fastlist
The FastList is a virtual-list implementation based on the DomScheduler. See <fxos-fastlist>
for the simpler, more opinionated web-component.
The content of the list comes from a DataSource
that needs to implement the API described
below. When the content is edited from the list "Edit mode", the list will trigger calls to the source itself.
But there's no observation going on, so if the content changes for other reasons the list needs to be made aware of that.
var myList = new FastList({
container: document.querySelector('.my-container'),
createItem: function() {},
createSection: function() {},
populateItem: function(el, index) { ... },
populateItemDetail: function(el, index) { ... },
unpopulateItemDetail: function(el) { ... },
populateSection: function(el, section, index) { ... }
getSections() { ... },
getSectionHeaderHeight() { ... },
getFullSectionHeight() { ... },
getFullSectionLength() { ... },
getSectionFor(index) { ... },
getRecordAt: function(index) { ... },
getIndexAtPosition: function(pos) { ... },
getPositionForIndex: function(index) { ... },
getFullLength: function() { ... },
getItemHeight: function() { ... },
getFullHeight: function() { ... },
getViewportHeight: function() {},
insertAtIndex: function(index, record, toSection) { ... },
replaceAtIndex: function(index, record) { ... }
});
If the content is not ready by the time it needs to be rendered
When the source is not ready to populate an item, maybe because the
IndexedDB cursor hasn't caught up with scrolling yet it should do the
following.
- return a Promise from
populateItem
, resolving once the content is
ready - return
false
if it implements the populateItemDetail
method
Once the promise resolves, the list will try again to call populateItem
/ populateItemDetail
.
API
Notifying of new content insertion
list.insertedAtIndex(0);
To insert with a nice transition.
list.reloadData()
For bigger, instantaneous changes.
Scrolling
list.scrollTop
Will give you the cached scroll top position (not causing a reflow).
list.scrollInstantly(by)
Will do as it says.
list.updateListHeight()
Can be called if the number of items in the list has changed, it'll return a scheduler promise fulfilled after the mutation is executed. This will also cause the scrollbar to flash.
Edit mode
The edit mode support leaves in a plugin, to enable in you need to load
plugins/edit.js
and initialize the FastList
as follow.
var list = new FastList(config).plugin(fastListEdit);
list.toggleEditMode()
This method returns a promise, fulfilled once the transition is done.