hyperloadmore
a simple paginator
The main goal here is to come up with an interface that could be supported by both an infinite scroller, or a "load more" button. some interfaces also like to have a "load more" at the top, but an infinite scroll at the bottom.
The interface used here is CustomEvents, first hyperloadmore
is created with a content object. The user emits "hasmore" messages
on the content element when there are new elements ready to display.
this updates the button to show the user it's waiting.
When the user clicks the button, the hyperloadmore
emits
a readymore
event - this tells content to add more elements
to that end... The content is responsible for
deciding how many to add, and if/when there are more to come,
to emit another "hasmore" event.
hasmore
events have a .detail.top
and .detail.bottom
boolean
properties to indicate whether the new content is to be added
at the start or end. ("detail" is a feature of CustomEvents api)
scrolling
This is also an idea towards a better infinite scroller. We need to decouple the control part from the application. I want the incoming data to be decoupled from the thing which manages the scrolling.
example
var HyperLoadMore =var h =var content =contentdocumentbodycontent
example 2: streams helper
var HyperLoadMore =var Streams =var h =var content =documentbody
events
readymore
event.target
is the element to be added to.
event.detail.top
is true if elements should be added to the top.
event.detail.bottom
is true if elements should be added to the bottom
hasmore
when you have new data ready to display, emit the hasmore
event.
content
streams
see also, streams helper
License
MIT