Skip to content

Commit

Permalink
📝 upgrading from v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@desandro
desandro committed Jan 1, 2021
1 parent 619da13 commit 5deb201
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 231 deletions.
291 changes: 60 additions & 231 deletions content/extras.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ description: "Everything else about Infinite Scroll: module loaders, loading JSO

<p>Install Infinite Scroll with npm or Yarn.</p>


<div class="duo">
<div class="duo__cell">
``` bash
Expand All @@ -34,7 +33,7 @@ description: "Everything else about Infinite Scroll: module loaders, loading JSO

``` js
// main.js
let InfiniteScroll = require('infinite-scroll');
const InfiniteScroll = require('infinite-scroll');

let infScroll = new InfiniteScroll( '.container', {
// options...
Expand Down Expand Up @@ -77,9 +76,9 @@ let infScroll = new InfiniteScroll( '.container', {

``` js
// main.js
let $ = require('jquery');
let jQueryBridget = require('jquery-bridget');
let InfiniteScroll = require('infinite-scroll');
const $ = require('jquery');
const jQueryBridget = require('jquery-bridget');
const InfiniteScroll = require('infinite-scroll');

// make Infinite Scroll a jQuery plugin
jQueryBridget( 'infiniteScroll', InfiniteScroll, $ );
Expand All @@ -106,9 +105,9 @@ $('.container').infiniteScroll({...});

``` js
// main.js
let Masonry = require('masonry-layout');
let InfiniteScroll = require('infinite-scroll');
let imagesLoaded = require('imagesloaded');
const Masonry = require('masonry-layout');
const InfiniteScroll = require('infinite-scroll');
const imagesLoaded = require('imagesloaded');

// init Masonry
let msnry = new Masonry( '.container', {...});
Expand All @@ -125,110 +124,6 @@ let infScroll = new InfiniteScroll( '.container', {

{{! ----------------------------------------------------------------- }}

<h3>Requirejs</h3>

<p>Infinite Scroll supports <a href="https://requirejs.org/">RequireJS</a>.</p>

<p>You can require infinite-scroll.pkgd.js.</p>

``` js
requirejs( [
'path/to/infinite-scroll.pkgd.js',
], function( InfiniteScroll ) {
let infScroll = new InfiniteScroll( '.container', {...});
});
```

<p>To use Infinite Scroll as a jQuery plugin with RequireJS and infinite-scroll.pkgd.js, you need to call <a href="https://github.com/desandro/jquery-bridget">jQuery Bridget</a>.</p>

``` js
// require the require function
requirejs( [ 'require', 'jquery', 'path/to/infinite-scroll.pkgd.js' ],
function( require, $, InfiniteScroll ) {
// require jquery-bridget, it's included in infinite-scroll.pkgd.js
require( [ 'jquery-bridget/jquery-bridget' ],
function( jQueryBridget ) {
// make Infinite Scroll a jQuery plugin
jQueryBridget( 'infiniteScroll', InfiniteScroll, $ );
// now you can use $().infiniteScroll()
$('.container').infiniteScroll({...});
});
});
```

<p>Or, you can require Infinite Scroll's index.js by using a package manager: npm, Bower, or Yarn. Set <code>baseUrl</code> to the package install path and set a config path for all your application code.</p>

``` js
requirejs.config({
baseUrl: 'node_modules/', // npm install path
paths: {
app: '../'
},
});

requirejs( [
'infinite-scroll/js/index',
'app/my-component.js',
], function( InfiniteScroll, myComp ) {
let infScroll = new InfiniteScroll( '.container', {...});
});
```

<p>You can require dependencies and use Infinite Scroll as a jQuery plugin with jQuery Bridget.</p>

``` js
requirejs.config({
baseUrl: 'node_modules/',
paths: {
jquery: 'jquery/jquery'
},
});

requirejs( [
'jquery',
'infinite-scroll/js/index',
'jquery-bridget/jquery-bridget',
],
function( $, InfiniteScroll ) {
// make Infinite Scroll a jQuery plugin
$.bridget( 'infiniteScroll', InfiniteScroll, $ );
// now you can use $().infiniteScroll()
$('.container').infiniteScroll({...});
});
```

<p>Infinite Scroll does not include <code>imagesLoaded</code>, which is required to use <a href="options.html#outlayer"><code>outlayer</code></a>. You will need to install and require <code>imagesLoaded</code> separately.</p>

``` js
requirejs.config({
baseUrl: 'node_modules/', // npm install path
paths: {
app: '../'
},
});

requirejs( [
'masonry-layout/masonry',
'imagesloaded/imagesloaded',
'infinite-scroll/js/index',
'app/my-component.js',
], function( Masonry, imagsLoaded InfiniteScroll, myComp ) {
// init Masonry
let msnry = new Masonry( '.container', {...});

// make imagesLoaded available for Infinite Scroll
InfiniteScroll.imagesLoaded = imagesLoaded;

// now you can use outlayer option
let infScroll = new InfiniteScroll( '.container', {
// options...
outlayer: msnry,
});
});
```

{{! ----------------------------------------------------------------- }}

<h2>Loading JSON</h2>

<p>Here is one example of how to use Infinite Scroll to load JSON data and append content. We'll use the Unsplash API to load pages of photos.</p>
Expand Down Expand Up @@ -366,8 +261,8 @@ let $container = $('.container').infiniteScroll({
});

// update nextURL on page load
$container.on( 'load.infiniteScroll', function( event, response ) {
updateNextURL( response );
$container.on( 'load.infiniteScroll', function( event, body ) {
updateNextURL( body );
});
```

Expand Down Expand Up @@ -531,139 +426,73 @@ $container.on( 'append.infiniteScroll', function( event, response, path ) {

{{! ----------------------------------------------------------------- }}

<h2>Upgrading from v2</h2>

<p>Infinite Scroll v3 is a complete rewrite with all new API and behavior. Upgrading from v2 to v3 will require making several changes.</p>

<ul>
<li><code>jquery.infinitescroll.js</code> and <code>jquery.infinite-scroll.min.js</code> files have been replaced with
<a href="{{sourceUrlPath}}infinite-scroll.pkgd.js"><code>dist/infinite-scroll.pkgd.js</code></a> and
<a href="{{sourceUrlPath}}infinite-scroll.pkgd.min.js"><code>dist/infinite-scroll.pkgd.min.js</code></a>
</li>
<li><code>.infinitescroll()</code> jQuery plugin renamed to camelCased <code>.infiniteScroll()</code>.</li>
<li>The callback function has been removed.
Use <a href="events.html#append"><code>append</code></a> or
<a href="events.html#load"><code>load</code></a> event.
For Masonry, use <a href="options.html#outlayer"><code>outlayer</code></a>.
</li>
</ul>

{{! ----------------------------------------------------------------- }}

<h3>Upgrading v2 options</h3>

<ul>
<li><code>itemSelector</code>:
Use <a href="options.html#append"><code>append</code></a> to select items to append.</li>
<li><code>nextSelector</code>:
Set <a href="options.html#path"><code>path</code></a> to a selector string of a link to the next page to use its <code>href</code> value.
Use <a href="options.html#hideNav"><code>hideNav</code></a> to hide navigation.</li>
<li><code>binder</code>:
Use <a href="options.html#elementscroll"><code>elementScroll</code></a> to scroll within an element.</li>
<li><code>path</code>:
<a href="options.html#path"><code>path</code></a> works differently.</li>
<li><code>pathParse</code>:
Use <a href="options.html#path"><code>path</code></a>.</li>
<li><code>prefill</code>:
<a href="options.html#prefilll">Backwards compatible</a>, works in v3.</li>
<li><code>dataType</code>:
Use <a href="options.html#responsetype"><code>responseType</code></a> to load data content like JSON.</li>
<li><code>animate</code> &amp; <code>extraScrollPx</code>:
Scrolling animation has been removed in v3.</li>
<li><code>maxPage</code>:
removed in v3. Use conditional event logic, like in <a href="#scroll-2-pages-then-load-with-button">scroll 2 pages then button example</a>.</li>
<li><code>appendCallback</code>:
Use <a href="events.html#append"><code>append</code> event</a>.</li>
<li><code>errorCallback</code>:
Use <a href="events.html#error"><code>error</code> event</a>.</li>
<li><code>debug</code>:
<a href="options.html#debug">Backwards compatible</a>, works in v3.</li>
<li><code>loading</code>
<ul>
<li><code>finished</code>:
Use <a href="events.html#load"><code>load</code> event</a>.</li>
<li><code>finishedMsg</code>:
Use <a href="options.html#status"><code>status</code></a> and set message HTML in <code>.infinite-scroll-error</code> and <code>.infinite-scroll-last</code>.</li>
<li><code>img</code> &amp; <code>msgText</code>:
Use <a href="options.html#status"><code>status</code></a> and set loading HTML in <code>.infinite-scroll-request</code>.</li>
</ul>
</li>
</ul>

{{! ----------------------------------------------------------------- }}

<h3>Upgrading v2 methods</h3>
<h2>Upgrading from v3</h2>

<ul>
<li><code>pause</code>, <code>resume</code>, &amp; <code>toggle</code>:
Enable and disable <a href="options.html#loadonscroll"><code>loadOnScroll</code> option</a>.</li>
<li><code>bind</code> &amp; <code>unbind</code>:
Disable and re-set <a href="options.html#scrollthreshold"><code>scrollThreshold</code> option</a>.</li>
<li><code>retrieve</code>:
Use <a href="api.html#loadnextpage"><code>loadNextPage</code></a>.</li>
<li><code>update</code>:
Use <a href="api.html#option"><code>option</code></a>.</li>
<li><code>destroy</code>:
<a href="api.html#destroy">Backward compatible</a>, works in v3.</li>
</ul>
<p>Infinite Scroll v4 is mostly backwards compatible with v3.</p>

{{! ----------------------------------------------------------------- }}
<p>The one breaking change is that Infinite Scroll v4 removed <code>responseType</code> option in favor of <a href="options.html#responsebody"><code>responseBody</code></a>. This change effects loading JSON in particular. To load JSON with Infinite Scroll v4, set <code>responseBody: <span class="comment">'json'</span></code> in your options. Then the <code>body</code> argument in the load event will be <i>JSON</i>.</p>

<h3>v2 upgrade example</h3>

<div class="duo example">
<div class="duo__cell example__code">
<div class="duo">
<div class="duo__cell">
``` js
// Infinite Scroll v2
$('.container').infinitescroll({
itemSelector: '.post',
nextSelector: '.pagination__next',
loading: {
img: '/loading.gif',
msgText: 'Loading...',
finished: 'Congratulations, you have reached the end of the internet',
// Infinite Scroll v3
let $container = $('.container').infiniteScroll({
path: function() {
return 'https://api.unsplash.com/photos?client_id=...&page=' + this.pageIndex;
},
// callback
}, function( items ) {
$( items ).tooltip();
// load page as text
responseType: 'text',
// disable history
history: false,
});

$container.on( 'load.infiniteScroll', function( event, response ) {
// parse response text into JSON data
var data = JSON.parse( response );
// put that data into template
var itemsHTML = template.compile( data );
// convert to jQuery object
var $items = $( itemsHTML );
// append items
$container.infiniteScroll( 'appendItems', $items );
});
```
</div>
<div class="duo__cell example__code">
<div class="duo__cell">
``` js
// Infinite Scroll v3
// Infinite Scroll v4
let $container = $('.container').infiniteScroll({
append: '.post',
path: '.pagination__next',
status: '.page-load-status',
path: function() {
return 'https://api.unsplash.com/photos?client_id=...&page=' + this.pageIndex;
},
// load page as json
responseBody: 'json',
// disable history
history: false,
});

// use event for v2 callback
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
$( items ).tooltip();
$container.on( 'load.infiniteScroll', function( event, body ) {
// body is JSON data
var itemsHTML = template.compile( body );
// convert to jQuery object
var $items = $( itemsHTML );
// append items
$container.infiniteScroll( 'appendItems', $items );
});
```

``` html
<div class="container">
<<article class="post">...</article>">...</div>
<<article class="post">...</article>">...</div>
...
</div>
<!-- use status element for v2 loading options -->
<div class="page-load-status">
<div class="infinite-scroll-request">
<img src="/loading.gif" alt="Loading" />
Loading...
</div>
<p class="infinite-scroll-error infinite-scroll-last">
Congratulations, you have reached the end of the internet
</p>
</div>
```
</div>
</div>

<h3>New features</h3>

<ul>
<li>Uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a> to make requests</li>
<li><a href="api.html#loadnextpage"><code>loadNextPage</code></a> returns a Promise</li>
<li>Set headers and fetch options with <a href="options.html#fetchoptions"><code>fetchOptions</code></a></li>
<li>10% smaller filesize</li>
<li>Internet Explorer support dropped</li>
</ul>

{{! ----------------------------------------------------------------- }}

<h2>Issues</h2>
Expand All @@ -672,7 +501,7 @@ $container.on( 'append.infiniteScroll', function( event, response, path ) {

<p>Creating a reduced test case is the best way to debug problems and report issues. Read <a href="https://css-tricks.com/reduced-test-cases/">CSS Tricks</a> on why they&rsquo;re so great.</p>

<p>Create a reduced test case for Infinite Scroll by forking any one of the <a href="https://codepen.io/desandro/pens/tags/?selected_tag=infinite-scroll-v3-docs">CodePen demos</a> from these docs.</p>
<p>Create a reduced test case for Infinite Scroll by forking any one of the <a href="https://codepen.io/desandro/pens/tags/?selected_tag=infinite-scroll-v4-docs">CodePen demos</a> from these docs.</p>

<ul>
<li>A reduced test case clearly demonstrates the bug or issue.</li>
Expand Down
4 changes: 4 additions & 0 deletions css/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,10 @@ tr:nth-child(2) td {
border-top: none;
}

.main li {
margin: 4px 0;
}

/* ---- data-license-property ---- */

*[data-license-property] {
Expand Down

0 comments on commit 5deb201

Please sign in to comment.