Merge remote-tracking branch 'origin/master' into scope-fixes

* origin/master: (40 commits)
  updated dependencies
  Bump rollup from 1.27.8 to 1.27.9
  Bump rollup from 1.27.7 to 1.27.8
  Bump eslint from 6.7.1 to 6.7.2
  Bump rollup from 1.27.5 to 1.27.7
  Bump cypress from 3.6.1 to 3.7.0
  Bump http-server from 0.11.1 to 0.12.0
  Bump rollup from 1.27.4 to 1.27.5
  Bump eslint from 6.6.0 to 6.7.1
  Bump rollup from 1.27.3 to 1.27.4
  Bump rollup from 1.27.2 to 1.27.3
  Bump rollup from 1.27.0 to 1.27.2
  Bump rollup from 1.26.3 to 1.27.0
  Bump cypress from 3.6.0 to 3.6.1
  Bump rollup from 1.26.2 to 1.26.3
  Bump cypress from 3.5.0 to 3.6.0
  Bump rollup from 1.26.0 to 1.26.2
  Bump rollup from 1.25.2 to 1.26.0
  Bump eslint from 6.5.1 to 6.6.0
  attempt to remove introduction page from gitbook
  ...

Author: fieg

.gitbook.yaml

@@ -1,5 +1,10 @@
 root: ./docs/
 
 structure:
-  readme: README.md
+  readme: overview.md
   summary: README.md
+
+redirects:
+  options: ./options.md
+  methods: ./methods.md
+  events: ./events.md

.github/ISSUE_TEMPLATE/bug_report.md

@@ -25,6 +25,7 @@ Please consider the following:
 
 1. Can you make a simplified version that reproduces the issue? For example, can you reproduce using one of the available Codesandboxes (see https://codesandbox.io/s/github/webcreate/infinite-ajax-scroll/tree/master/examples/articles)?
 2. If that's not possible, can you provide a live version of your work so we can have a look and inspect your code and configuration?
+3. Can you provide code examples, preferably your html and javascript code.
 -->
 
 **Expected behavior**
@@ -34,5 +35,5 @@ Please consider the following:
 <!-- Please describe your environment -->
 
 - Infinite Ajax Scroll version:
-- Browser version:
+- Browser + version:
 - Operating System:

Makefile

@@ -10,6 +10,12 @@ install:
 	cd examples/masonry && npm install && npm link && npm run build;
 .PHONY: install
 
+update:
+	cd examples/articles && npm update;
+	cd examples/blocks && npm update;
+	cd examples/masonry && npm update;
+.PHONY: update
+
 up:
 	npm run start
 	open http://localhost:8080

docs/README.md

@@ -1,8 +1,20 @@
 # Table of contents
 
+* [Overview](overview.md)
 * [Installation](installation.md)
 * [Getting started](getting-started.md)
+* [License](license.md)
+* [Support](support.md)
+
+## Reference
+
 * [Options](options.md)
 * [Methods](methods.md)
 * [Events](events.md)
 
+## Advanced
+
+* [Triggers](advanced/triggers.md)
+* [Last page message](advanced/last-page-message.md)
+* [History](advanced/history.md)
+* [Overflow](advanced/overflow.md)

docs/advanced/history.md

@@ -0,0 +1,28 @@
+# History
+
+## Updating url and title
+
+When users are scrolling through pages we can update the browser url and page title. This allows the current page to be shared or bookmarked. 
+ 
+We can achieve this by listening for the [`page`](events.md#page) event. The page event contains the `url` and `title` of the current page in view.
+
+The [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) can be used to update the url.
+
+```javascript
+ias.on('page', (event) => {
+  // update the title
+  document.title = event.title;
+
+  // update the url
+  let state = history.state;
+  history.replaceState(state, event.title, event.url);
+});
+```
+
+[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)
+
+## Loading previous pages
+
+{% hint style='working' %}
+This feature is still work in progress
+{% endhint %}

docs/advanced/last-page-message.md

@@ -0,0 +1,31 @@
+# Last page message
+
+When your pages are finite, it is best practise to inform the user that the last page was hit.
+
+First add an element to your document with the message you want to show.
+
+```html
+<div class="no-more">No more pages</div>
+```
+
+Next add a bit of CSS to hide the element on default:
+
+```css
+.no-more {
+  opacity: 0;
+}
+```
+
+Then listen for the [`last`](../events.md#last) event and show to element.
+
+```javascript
+let ias = new InfiniteAjaxScroll(/* config */);
+
+ias.on('last', function() {
+  let el = document.querySelector('.no-more');
+
+  el.style.opacity = '1';
+})
+```
+
+[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)

docs/advanced/overflow.md

@@ -0,0 +1,34 @@
+# Overflow
+
+{% hint style='working' %}
+This feature is still work in progress
+{% endhint %}
+
+It is possible to have infinite scrolling pages inside an overflow element.
+
+First define a container element.
+
+```html
+<div id="scroller">
+    <div class="item">Item 1</div>
+    <div class="item">Item 2</div>
+    <!-- more items -->
+</div>
+```
+
+Then configure the overflow using css. Don't forget to give the element a fixed height.
+
+```css
+#scroller {
+  overflow: scroll;
+  height: 200px;
+}
+```
+
+Then configure the element as scroll container.
+
+```javascript
+let ias = new InfiniteAjaxScroll('#scroller', {
+  scrollContainer: '#scroller'
+});
+```

docs/advanced/triggers.md

@@ -0,0 +1,13 @@
+# Triggers
+
+{% hint style='working' %}
+This feature is still work in progress
+{% endhint %}
+
+Instead of loading next pages on scroll you can use a trigger. A trigger is a link or button that has to be clicked before the next page is loaded.
+
+Reasons for a trigger might be:
+
+* To make the footer reachable.
+* To ease the load on the server. Users have to click before loading the next page. This adds a natural delay.
+

docs/events.md

@@ -113,6 +113,14 @@ This event is triggered after the items have been appended.
 
 Triggered when the last page is appended.
 
+```javascript
+ias.on('last', () => {
+  console.log('Users has reached the last page');
+})
+```
+
+[Read more on how we can inform the user about reaching the last page](advanced/last-page-message.md)
+
 ### page
 
 Triggered when the user scrolls past a page break. The event provides information about the page in view.
@@ -124,5 +132,19 @@ Triggered when the user scrolls past a page break. The event provides informatio
 | title | string | Title of the page |
 | sentinel | Element | Sentinel element. Element used to determine on which page the user is |
 
-> pageIndex is zero indexed. This means the index starts at 0 on the first page.
+> pageIndex is zero-based. This means the index starts at 0 on the first page.
+
+One use case for this event is to update the browser url and title:
+
+```javascript
+ias.on('page', (event) => {
+  // update the title
+  document.title = event.title;
+
+  // update the url
+  let state = history.state;
+  history.replaceState(state, event.title, event.url);
+})
+```
 
+[View this behaviour in a live demo](https://v3.infiniteajaxscroll.com/examples/articles/)

docs/license.md

@@ -0,0 +1,25 @@
+# License
+
+Read about our licensing options.
+
+## Open source license
+
+This license is designed for open-source and non-commercial websites and applications. The Infinite Ajax Scroll open source license is [Affero General Public License (AGPL)](https://www.gnu.org/licenses/agpl-3.0.en.html). The most important part of the license is:
+
+> The key point of the GPL is that it's "sticky." If you use GPL-licensed software in a modified form or incorporate it into your product, you have to make it available under the same terms. You can sell the software, but you also have to make its source code freely available.
+
+> The AGPL is even stickier than the GPL. Its stickiness extends to code which runs on servers, even if it's never published. 
+
+<sub>source: https://www.kwork.me/open-source-free-software-licenses/</sub>
+
+## Commercial license
+
+The commercial license is designed to use Infinite Ajax Scroll in closed-source/proprietary websites and applications. This license removes the "sticky" requirements as described above.
+
+After purchase you will receive a Commercial License PDF which grants the right to use Infinite Ajax Scroll in your commercial projects.
+
+[Buy a commercial license](https://infiniteajaxscroll.com/pricing)
+
+## OEM license
+
+If you develop a commercial SDK, plugin, theme, or an other kind of wrapper around Infinite Ajax Scroll we offer an Commercial OEM License. This license is customized and pricing depends on the expected sales volume and pricing. Please contact us at [[email protected]](mailto:[email protected]) for more details.