Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zestia/ember-simple-infinite-scroller
:scroll: Simple infinite scroll component for Ember apps
https://github.com/zestia/ember-simple-infinite-scroller
ember infinite-scroll
Last synced: 5 days ago
JSON representation
:scroll: Simple infinite scroll component for Ember apps
- Host: GitHub
- URL: https://github.com/zestia/ember-simple-infinite-scroller
- Owner: zestia
- License: mit
- Created: 2016-06-27T16:13:16.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T10:11:07.000Z (2 months ago)
- Last Synced: 2024-12-31T09:13:25.818Z (12 days ago)
- Topics: ember, infinite-scroll
- Language: JavaScript
- Homepage:
- Size: 6.33 MB
- Stars: 39
- Watchers: 18
- Forks: 7
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @zestia/ember-simple-infinite-scroller
[![Ember Observer][ember-observer-badge]][ember-observer-url]
[npm-badge]: https://img.shields.io/npm/v/@zestia/ember-simple-infinite-scroller.svg
[npm-badge-url]: https://www.npmjs.com/package/@zestia/ember-simple-infinite-scroller
[github-actions-badge]: https://github.com/zestia/ember-simple-infinite-scroller/workflows/CI/badge.svg
[github-actions-url]: https://github.com/zestia/ember-simple-infinite-scroller/actions
[ember-observer-badge]: https://emberobserver.com/badges/-zestia-ember-simple-infinite-scroller.svg
[ember-observer-url]: https://emberobserver.com/addons/@zestia/ember-simple-infinite-scroller
This Ember addon provides a simple component that fires an action whenever it is scrolled to the bottom.
Allowing you to load more data.
## Installation
```
ember install @zestia/ember-simple-infinite-scroller
```
Add the following to `~/.npmrc` to pull @zestia scoped packages from Github instead of NPM.
```
@zestia:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=
```
## Demo
https://zestia.github.io/ember-simple-infinite-scroller
## Example
```handlebars
{{#each things as |thing|}}
...
{{/each}}
{{if scroller.isLoading 'Please wait...'}}
```
## Features
- Very simple! ✔︎
- Bidirectional ✔︎
- Not coupled to Ember Data ✔︎
- Supports use with FastBoot ✔︎
## Notes
- This addon intentionally does not come with any styles.
## `InfiniteScroller`
### Arguments
#### `@onLoadMore`
Required. Fired when the the element has been scrolled to the specified `@percent`.
#### `@element`
Optional. By default the scroll position of the component's own DOM element is monitored. You can use this argument to change the element, to monitor the document for example.
#### `@percentDown`
Optional. The distance that has to be scrolled down before the load more action is fired. 100% means the bottom.
#### `@percentUp`
Optional. The distance that has to be scrolled up before the load more action is fired. 0% means the top.
#### `@debounce`
Optional. Milliseconds delay for when to check if more needs to be loaded. Defaults to every `100`ms
### API
#### `isLoading`
Whether the promise for more data has resolved yet
#### `direction`
The direction scrolled that caused `onLoadMore` to fire
#### `isScrollable`
Whether the element is overflowing or not. If it's not, then the user will not be able to scroll to load more. In such a case, you can use this boolean to provide a button to manually load more.
#### `loadMore`
Call this to manually load more
## Testing
A test helper is provided to help scrolling your element
Example
```javascript
import { scrollToPercentage } from '@zestia/ember-simple-infinite-scroller/test-support/helpers';
test('loading more', async function () {
await visit('/');
await scrollToPercentage('.infinite-scroller', 100);
// ...
});
```
## Performance
Please read: https://github.com/TryGhost/Ghost/issues/7934
You may need to add the below code to `app/app.js`
View
```javascript
customEvents = {
touchstart: null,
touchmove: null,
touchend: null,
touchcancel: null
};
```