Skip to content

Commit 92b3b10

Browse files
fiegfieg
authored
Merge pull request #809 from webcreate/3.1
3.1.0 Upwards scroll support
2 parents 24b7075 + d19b00a commit 92b3b10

22 files changed

+473
-40
lines changed

‎CHANGELOG.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,25 @@ All notable changes to this project will be documented in this file.
66
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
77
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
88

9+
## [3.1.0]
10+
11+
This version introduces upwards scroll support (fixes [#466](https://github.com/webcreate/infinite-ajax-scroll/issues/466)). See [`upwards scroll`](docs/advanced/upwards.md) documentation on how to use this feature.
12+
13+
* Adds all features from 3.1.0-beta.1
14+
* Added [`upwards`](docs/advanced/upwards.md) documentation
15+
16+
## [3.1.0-beta.1]
17+
18+
This version introduces upwards scroll support (fixes [#466](https://github.com/webcreate/infinite-ajax-scroll/issues/466)). See documentation on the [`prev`](docs/options.md#prev) option on how to enable this feature.
19+
20+
* Added [`prev`](docs/options.md#prev) option
21+
* Added [`prev`](docs/events.md#prev) event
22+
* Added [`preved`](docs/events.md#preved) event
23+
* Added [`top`](docs/events.md#top) event
24+
* Added [`first`](docs/events.md#first) event
25+
* Added [`prepend`](docs/events.md#prepend) event
26+
* Added [`prepended`](docs/events.md#prepended) event
27+
928
## [3.0.1]
1029

1130
* Fixed prefill not filling past the scroll threshold
@@ -111,6 +130,8 @@ See [LICENSE](LICENSE) for more details.
111130
* Extensible through events
112131
* Added an extensive test suite
113132

133+
[3.1.0]: https://github.com/webcreate/infinite-ajax-scroll/compare/3.0.1...3.1.0
134+
[3.1.0-beta.1]: https://github.com/webcreate/infinite-ajax-scroll/compare/3.0.1...3.1.0-beta.1
114135
[3.0.1]: https://github.com/webcreate/infinite-ajax-scroll/compare/3.0.0...3.0.1
115136
[3.0.0]: https://github.com/webcreate/infinite-ajax-scroll/compare/3.0.0-rc.1...3.0.0
116137
[3.0.0-rc.1]: https://github.com/webcreate/infinite-ajax-scroll/compare/v2.3.1...3.0.0-rc.1

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ install:
1313
update:
1414
npm ci
1515
npm run build
16-
$(foreach ex,$(EXAMPLES),(cd $(ex) && npm ci) || exit $$?;)
16+
$(foreach ex,$(EXAMPLES),(cd $(ex) && npm install) || exit $$?;)
1717
.PHONY: update
1818

1919
up:

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@ Infinite Ajax Scroll works on a container with item elements which get appended.
4949
</div>
5050

5151
<div class="pagination">
52-
<a href="page2.html" class="next">Next</a>
52+
<a href="page1.html" class="prev">Prev</a>
53+
<span class="current">2</span>
54+
<a href="page3.html" class="next">Next</a>
5355
</div>
5456
```
5557

@@ -62,6 +64,7 @@ import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
6264
let ias = new InfiniteAjaxScroll('.container', {
6365
item: '.item',
6466
next: '.next',
67+
prev: '.prev',
6568
pagination: '.pagination'
6669
});
6770
```

‎UPGRADE.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
Upgrade from 3.0.x to 3.1.0
2+
===========================
3+
4+
Version 3.1.0 is backwards-compatible with 3.0.x.
5+
16
Upgrade from 2.3.x to 3.0
27
=========================
38

‎docs/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
* [Last page message](advanced/last-page-message.md)
1919
* [History](advanced/history.md)
2020
* [Overflow](advanced/overflow.md)
21+
* [Upward scroll](advanced/upwards.md)

‎docs/advanced/history.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ ias.on('page', (event) => {
2323

2424
## Loading previous pages
2525

26-
{% hint style='working' %}
27-
This feature is still work in progress
28-
{% endhint %}
26+
Infinite Ajax Scroll can also be used to load items above the current scroll position. This is useful when you want to load older items first.
27+
28+
[View upwards infinite scroll documentation](upwards.md)
29+

‎docs/advanced/upwards.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Upward Infinite Scroll
2+
3+
Infinite Ajax Scroll can also be used to load items above the current scroll position. This is useful when you want to load older items first.
4+
5+
*Introduced in Infinite Ajax Scroll 3.1.0*
6+
7+
## Caveats
8+
9+
### Fixed height images
10+
11+
Upward scroll works by calculation screen height and content height. Due to they way browser load content, especially images, this could cause incorrect measurements. This can be solved by using fixed height images.
12+
13+
## Setup
14+
15+
1. Add a previous page link to your pagination.
16+
17+
```html
18+
<div class="pagination">
19+
<a href="page1.html" class="prev">Prev</a>
20+
<span class="current">2</span>
21+
<a href="page3.html" class="next">Next</a>
22+
</div>
23+
```
24+
25+
2. Configure the [`prev`](../options.md#prev) option.
26+
27+
```javascript
28+
// import if you use the NPM package
29+
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
30+
31+
let ias = new InfiniteAjaxScroll('.container', {
32+
item: '.item',
33+
next: '.next',
34+
prev: '.prev',
35+
pagination: '.pagination'
36+
});
37+
```
38+
39+
## Hook into upward scroll with events
40+
41+
In this example we notify the user about loading the previous page.
42+
43+
```js
44+
ias.on('prev', function(event) {
45+
// pageIndex is 0-indexed, so we add 1
46+
alert(`Page ${event.pageIndex+1} is loading...`);
47+
});
48+
ias.on('preved', function(event) {
49+
alert(`Page ${event.pageIndex+1} is loaded and prepended to the page.`);
50+
});
51+
```
52+
53+
## Inform user about first page reached
54+
55+
In this example we notify the user when the first page is reached.
56+
57+
```javascript
58+
ias.on('first', () => {
59+
console.log('User has reached the first page');
60+
})
61+
```

‎docs/events.md‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,16 @@ Triggered when the user has hit the scroll threshold for the next page due to sc
6363
| :--- | :--- | :--- |
6464
| distance | int | The distance to the scroll threshold in pixels |
6565

66+
### top
67+
68+
*Introduced in Infinite Ajax Scroll 3.1.0*
69+
70+
Triggered when the user has hit the top of the scroll area for the previous page due to scrolling or resizing.
71+
72+
| property | type | description |
73+
| :--- | :--- |:---------------------------------------|
74+
| distance | int | The distance to the scroll top in pixels |
75+
6676
### next
6777

6878
Triggered right after the `hit` event. Indicating that the next page will be loaded.
@@ -93,6 +103,40 @@ Trigger when loading and appending the next page is completed.
93103
| :--- | :--- | :--- |
94104
| pageIndex | int | The page index of the next page (the page that is finished loading) |
95105

106+
### prev
107+
108+
*Introduced in Infinite Ajax Scroll 3.1.0*
109+
110+
Triggered right after the `top` event. Indicating that the previous page will be loaded.
111+
112+
| property | type | description |
113+
| :--- | :--- |:----------------------------------------------------------------------|
114+
| pageIndex | int | The page index of the prev page (the page that is about to be loaded) |
115+
116+
> pageIndex is zero indexed. This means the index starts at 0 on the first page.
117+
118+
For example to notify the user about loading the previous page, you can do:
119+
120+
```js
121+
ias.on('prev', function(event) {
122+
// pageIndex is 0-indexed, so we add 1
123+
alert(`Page ${event.pageIndex+1} is loading...`);
124+
});
125+
ias.on('preved', function(event) {
126+
alert(`Page ${event.pageIndex+1} is loaded and prepended to the page.`);
127+
});
128+
```
129+
130+
### preved
131+
132+
*Introduced in Infinite Ajax Scroll 3.1.0*
133+
134+
Trigger when loading and prepending the previous page is completed.
135+
136+
| property | type | description |
137+
| :--- | :--- | :--- |
138+
| pageIndex | int | The page index of the next page (the page that is finished loading) |
139+
96140
### load
97141

98142
This event is triggered before the next page is requested from the server.
@@ -158,18 +202,55 @@ This event is triggered after the items have been appended.
158202
| items | array | Array of items that have been appended |
159203
| parent | Element | The element to which the items have been appended |
160204

205+
### prepend
206+
207+
*Introduced in Infinite Ajax Scroll 3.1.0*
208+
209+
This event is triggered before the items are about to be prepended.
210+
211+
| property | type | description |
212+
| :--- | :--- |:-------------------------------------------------|
213+
| items | array | Array of items that will be prepended |
214+
| parent | Element | The element to which the items will be prepended |
215+
| prependFn | function | Function used to prepend items to the container |
216+
217+
See [src/prepend.js](../src/prepend.js) for the default prepend function.
218+
219+
### prepended
220+
221+
*Introduced in Infinite Ajax Scroll 3.1.0*
222+
223+
This event is triggered after the items have been prepended.
224+
225+
| property | type | description |
226+
| :--- | :--- |:---------------------------------------------------|
227+
| items | array | Array of items that have been prepended |
228+
| parent | Element | The element to which the items have been prepended |
229+
161230
### last
162231

163232
Triggered when the last page is appended.
164233

165234
```javascript
166235
ias.on('last', () => {
167-
console.log('Users has reached the last page');
236+
console.log('User has reached the last page');
168237
})
169238
```
170239

171240
[Read more on how we can inform the user about reaching the last page](advanced/last-page-message.md)
172241

242+
### first
243+
244+
*Introduced in Infinite Ajax Scroll 3.1.0*
245+
246+
Triggered when the last page is appended.
247+
248+
```javascript
249+
ias.on('first', () => {
250+
console.log('User has reached the first page');
251+
})
252+
```
253+
173254
### page
174255

175256
Triggered when the user scrolls past a page break. The event provides information about the page in view.

‎docs/options.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,29 @@ let ias = new InfiniteAjaxScroll(/*..*/, {
4444
})
4545
```
4646

47+
## prev
48+
49+
*Introduced in Infinite Ajax Scroll 3.1.0*
50+
51+
**Type:** `string`<br>
52+
**Default:** `undefined`<br>
53+
**Required:** no
54+
55+
Selector of the previous link. The `href` attribute will be used for the url of the previous page. Only a single element should match this selector.
56+
57+
```html
58+
<a href="/page/1" class="pager__prev">Prev</a>
59+
<span class="pager__current">2</span>
60+
<a href="/page/3" class="pager__next">Next</a>
61+
```
62+
63+
```javascript
64+
let ias = new InfiniteAjaxScroll(/*..*/, {
65+
next: '.pager__next',
66+
prev: '.pager__prev'
67+
})
68+
```
69+
4770
## pagination
4871

4972
**Type:** `boolean|string|Element`<br>

‎examples/articles/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
33
window.ias = new InfiniteAjaxScroll('.surface-container', {
44
item: '.article',
55
next: '.pager__next',
6+
prev: '.pager__prev',
67
pagination: '.pager',
78
spinner: '.loader'
89
});
@@ -21,3 +22,8 @@ ias.on('page', (e) => {
2122

2223
history.replaceState(state, e.title, e.url);
2324
});
25+
26+
// disable cache busting
27+
ias.on('load', function(event) {
28+
event.nocache = true;
29+
});

0 commit comments

Comments
 (0)