Skip to content

Commit

Permalink
send out direction
Browse files Browse the repository at this point in the history
  • Loading branch information
@amk221
amk221 committed Mar 8, 2024
1 parent 4fb4788 commit a7062fc
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 24 deletions.
8 changes: 6 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,13 @@ Required. Fired when the the element has been scrolled to the specified `@percen

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.

#### `@percent`
#### `@down`

Optional. The distance that has to be scrolled before the load more action is fired. Defaults to `100`%
Optional. The distance that has to be scrolled down before the load more action is fired.

#### `@up`

Optional. The distance that has to be scrolled up before the load more action is fired.

#### `@debounce`

Expand Down
12 changes: 7 additions & 5 deletions addon/components/infinite-scroller.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import { tracked } from '@glimmer/tracking';
import { modifier } from 'ember-modifier';
import { action } from '@ember/object';
const { round } = Math;
const UP = 'UP';
const DOWN = 'DOWN';

export default class InfiniteScrollerComponent extends Component {
@tracked isLoading = false;
@tracked scrollState = {};
@tracked lastScrollState = {};

debug = true;
debug;
scroller;
debounceId;

Expand Down Expand Up @@ -50,10 +52,10 @@ export default class InfiniteScrollerComponent extends Component {
}

@action
loadMore() {
loadMore(direction) {
this.isLoading = true;

resolve(this.args.onLoadMore?.()).finally(() => {
resolve(this.args.onLoadMore?.(direction)).finally(() => {
this.isLoading = false;

this._checkScrollable();
Expand Down Expand Up @@ -88,7 +90,7 @@ export default class InfiniteScrollerComponent extends Component {
this._debug();

if (this.shouldLoadMore) {
this.loadMore();
this.loadMore(this.scrollState.direction);
}
}

Expand Down Expand Up @@ -126,7 +128,7 @@ export default class InfiniteScrollerComponent extends Component {
const percentScrolled = round((scrollTop / bottom) * 100);
const reachedBottom = percentScrolled >= percent;
const scrollingDown = element.scrollTop > this.lastScrollState.scrollTop;
const direction = scrollingDown ? 'DOWN' : 'UP';
const direction = scrollingDown ? DOWN : UP;

return {
isScrollable,
Expand Down
35 changes: 18 additions & 17 deletions tests/integration/components/infinite-scroller-test.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { scrollToPercentage } from '@zestia/ember-simple-infinite-scroller/test-
import InfiniteScroller from '@zestia/ember-simple-infinite-scroller/components/infinite-scroller';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import { fn } from '@ember/helper';
import { modifier } from 'ember-modifier';
import {
render,
Expand All @@ -32,8 +33,8 @@ module('infinite-scroller', function (hooks) {
@tracked customElement;
})();

handleLoadMore = () => {
assert.step('load more');
handleLoadMore = (direction) => {
assert.step(`load more: ${direction}`);
willLoad = defer();
return willLoad.promise;
};
Expand Down Expand Up @@ -87,7 +88,7 @@ module('infinite-scroller', function (hooks) {

await willScroll;

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('load more action (failure)', async function (assert) {
Expand Down Expand Up @@ -125,7 +126,7 @@ module('infinite-scroller', function (hooks) {
'is no longer considered loading if loading fails'
);

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);

resetOnerror();
});
Expand All @@ -144,7 +145,7 @@ module('infinite-scroller', function (hooks) {
scrollToPercentage('.infinite-scroller', 100);
await scrollToPercentage('.infinite-scroller', 100);

assert.verifySteps(['load more'], 'does not fire if already loading');
assert.verifySteps(['load more: DOWN'], 'does not fire if already loading');
});

test('load more action (percent)', async function (assert) {
Expand All @@ -168,7 +169,7 @@ module('infinite-scroller', function (hooks) {

await scrollToPercentage('.infinite-scroller', 60);

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('load more action (debounce)', async function (assert) {
Expand All @@ -195,7 +196,7 @@ module('infinite-scroller', function (hooks) {
await willScroll;

assert.verifySteps(
['load more'],
['load more: DOWN'],
'fires load more action after being debounced'
);
});
Expand Down Expand Up @@ -223,7 +224,7 @@ module('infinite-scroller', function (hooks) {

await scrollToPercentage(document.documentElement, 100);

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('loading class name', async function (assert) {
Expand Down Expand Up @@ -263,23 +264,23 @@ module('infinite-scroller', function (hooks) {
'loading class name is removed after the action resolves'
);

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('yielded loadMore action', async function (assert) {
assert.expect(2);

await render(<template>
<InfiniteScroller @onLoadMore={{handleLoadMore}} as |scroller|>
<button type="button" {{on "click" scroller.loadMore}}>
<button type="button" {{on "click" (fn scroller.loadMore "DOWN")}}>
Load more
</button>
</InfiniteScroller>
</template>);

await click('button');

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('yielded loading state', async function (assert) {
Expand Down Expand Up @@ -318,7 +319,7 @@ module('infinite-scroller', function (hooks) {
.dom('.infinite-scroller')
.containsText('Loading: false', 'loading state is updated');

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('destroying (does not blow up)', async function (assert) {
Expand All @@ -340,7 +341,7 @@ module('infinite-scroller', function (hooks) {

willLoad.resolve();

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('no promise (does not blow up)', async function (assert) {
Expand Down Expand Up @@ -403,7 +404,7 @@ module('infinite-scroller', function (hooks) {
{{/each}}

{{#unless scroller.isScrollable}}
<button type="button" {{on "click" scroller.loadMore}}>
<button type="button" {{on "click" (fn scroller.loadMore "DOWN")}}>
Load more
</button>
{{/unless}}
Expand Down Expand Up @@ -433,7 +434,7 @@ module('infinite-scroller', function (hooks) {
'infinite scroller component re-computes whether or not there is scroll movement available'
);

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);
});

test('custom element via element argument', async function (assert) {
Expand Down Expand Up @@ -465,7 +466,7 @@ module('infinite-scroller', function (hooks) {

await scrollToPercentage('.external-element.one', 100);

assert.verifySteps(['load more']);
assert.verifySteps(['load more: DOWN']);

willLoad.resolve();

Expand All @@ -474,7 +475,7 @@ module('infinite-scroller', function (hooks) {
await scrollToPercentage('.external-element.two', 100);

assert.verifySteps(
['load more'],
['load more: DOWN'],
'load action fires again, because scrollable element has been re-registered'
);
});
Expand Down

0 comments on commit a7062fc

Please sign in to comment.