Skip to content

Commit 5deb201

Browse files
desandrodesandro
committed
📝 upgrading from v3
1 parent 619da13 commit 5deb201

File tree

2 files changed

+64
-231
lines changed

2 files changed

+64
-231
lines changed

‎content/extras.hbs

+60-231
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ description: "Everything else about Infinite Scroll: module loaders, loading JSO
1414

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

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

3534
``` js
3635
// main.js
37-
let InfiniteScroll = require('infinite-scroll');
36+
const InfiniteScroll = require('infinite-scroll');
3837

3938
let infScroll = new InfiniteScroll( '.container', {
4039
// options...
@@ -77,9 +76,9 @@ let infScroll = new InfiniteScroll( '.container', {
7776

7877
``` js
7978
// main.js
80-
let $ = require('jquery');
81-
let jQueryBridget = require('jquery-bridget');
82-
let InfiniteScroll = require('infinite-scroll');
79+
const $ = require('jquery');
80+
const jQueryBridget = require('jquery-bridget');
81+
const InfiniteScroll = require('infinite-scroll');
8382

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

107106
``` js
108107
// main.js
109-
let Masonry = require('masonry-layout');
110-
let InfiniteScroll = require('infinite-scroll');
111-
let imagesLoaded = require('imagesloaded');
108+
const Masonry = require('masonry-layout');
109+
const InfiniteScroll = require('infinite-scroll');
110+
const imagesLoaded = require('imagesloaded');
112111

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

126125
{{! ----------------------------------------------------------------- }}
127126

128-
<h3>Requirejs</h3>
129-
130-
<p>Infinite Scroll supports <a href="https://requirejs.org/">RequireJS</a>.</p>
131-
132-
<p>You can require infinite-scroll.pkgd.js.</p>
133-
134-
``` js
135-
requirejs( [
136-
'path/to/infinite-scroll.pkgd.js',
137-
], function( InfiniteScroll ) {
138-
let infScroll = new InfiniteScroll( '.container', {...});
139-
});
140-
```
141-
142-
<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>
143-
144-
``` js
145-
// require the require function
146-
requirejs( [ 'require', 'jquery', 'path/to/infinite-scroll.pkgd.js' ],
147-
function( require, $, InfiniteScroll ) {
148-
// require jquery-bridget, it's included in infinite-scroll.pkgd.js
149-
require( [ 'jquery-bridget/jquery-bridget' ],
150-
function( jQueryBridget ) {
151-
// make Infinite Scroll a jQuery plugin
152-
jQueryBridget( 'infiniteScroll', InfiniteScroll, $ );
153-
// now you can use $().infiniteScroll()
154-
$('.container').infiniteScroll({...});
155-
});
156-
});
157-
```
158-
159-
<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>
160-
161-
``` js
162-
requirejs.config({
163-
baseUrl: 'node_modules/', // npm install path
164-
paths: {
165-
app: '../'
166-
},
167-
});
168-
169-
requirejs( [
170-
'infinite-scroll/js/index',
171-
'app/my-component.js',
172-
], function( InfiniteScroll, myComp ) {
173-
let infScroll = new InfiniteScroll( '.container', {...});
174-
});
175-
```
176-
177-
<p>You can require dependencies and use Infinite Scroll as a jQuery plugin with jQuery Bridget.</p>
178-
179-
``` js
180-
requirejs.config({
181-
baseUrl: 'node_modules/',
182-
paths: {
183-
jquery: 'jquery/jquery'
184-
},
185-
});
186-
187-
requirejs( [
188-
'jquery',
189-
'infinite-scroll/js/index',
190-
'jquery-bridget/jquery-bridget',
191-
],
192-
function( $, InfiniteScroll ) {
193-
// make Infinite Scroll a jQuery plugin
194-
$.bridget( 'infiniteScroll', InfiniteScroll, $ );
195-
// now you can use $().infiniteScroll()
196-
$('.container').infiniteScroll({...});
197-
});
198-
```
199-
200-
<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>
201-
202-
``` js
203-
requirejs.config({
204-
baseUrl: 'node_modules/', // npm install path
205-
paths: {
206-
app: '../'
207-
},
208-
});
209-
210-
requirejs( [
211-
'masonry-layout/masonry',
212-
'imagesloaded/imagesloaded',
213-
'infinite-scroll/js/index',
214-
'app/my-component.js',
215-
], function( Masonry, imagsLoaded InfiniteScroll, myComp ) {
216-
// init Masonry
217-
let msnry = new Masonry( '.container', {...});
218-
219-
// make imagesLoaded available for Infinite Scroll
220-
InfiniteScroll.imagesLoaded = imagesLoaded;
221-
222-
// now you can use outlayer option
223-
let infScroll = new InfiniteScroll( '.container', {
224-
// options...
225-
outlayer: msnry,
226-
});
227-
});
228-
```
229-
230-
{{! ----------------------------------------------------------------- }}
231-
232127
<h2>Loading JSON</h2>
233128

234129
<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>
@@ -366,8 +261,8 @@ let $container = $('.container').infiniteScroll({
366261
});
367262

368263
// update nextURL on page load
369-
$container.on( 'load.infiniteScroll', function( event, response ) {
370-
updateNextURL( response );
264+
$container.on( 'load.infiniteScroll', function( event, body ) {
265+
updateNextURL( body );
371266
});
372267
```
373268

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

532427
{{! ----------------------------------------------------------------- }}
533428

534-
<h2>Upgrading from v2</h2>
535-
536-
<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>
537-
538-
<ul>
539-
<li><code>jquery.infinitescroll.js</code> and <code>jquery.infinite-scroll.min.js</code> files have been replaced with
540-
<a href="{{sourceUrlPath}}infinite-scroll.pkgd.js"><code>dist/infinite-scroll.pkgd.js</code></a> and
541-
<a href="{{sourceUrlPath}}infinite-scroll.pkgd.min.js"><code>dist/infinite-scroll.pkgd.min.js</code></a>
542-
</li>
543-
<li><code>.infinitescroll()</code> jQuery plugin renamed to camelCased <code>.infiniteScroll()</code>.</li>
544-
<li>The callback function has been removed.
545-
Use <a href="events.html#append"><code>append</code></a> or
546-
<a href="events.html#load"><code>load</code></a> event.
547-
For Masonry, use <a href="options.html#outlayer"><code>outlayer</code></a>.
548-
</li>
549-
</ul>
550-
551-
{{! ----------------------------------------------------------------- }}
552-
553-
<h3>Upgrading v2 options</h3>
554-
555-
<ul>
556-
<li><code>itemSelector</code>:
557-
Use <a href="options.html#append"><code>append</code></a> to select items to append.</li>
558-
<li><code>nextSelector</code>:
559-
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.
560-
Use <a href="options.html#hideNav"><code>hideNav</code></a> to hide navigation.</li>
561-
<li><code>binder</code>:
562-
Use <a href="options.html#elementscroll"><code>elementScroll</code></a> to scroll within an element.</li>
563-
<li><code>path</code>:
564-
<a href="options.html#path"><code>path</code></a> works differently.</li>
565-
<li><code>pathParse</code>:
566-
Use <a href="options.html#path"><code>path</code></a>.</li>
567-
<li><code>prefill</code>:
568-
<a href="options.html#prefilll">Backwards compatible</a>, works in v3.</li>
569-
<li><code>dataType</code>:
570-
Use <a href="options.html#responsetype"><code>responseType</code></a> to load data content like JSON.</li>
571-
<li><code>animate</code> &amp; <code>extraScrollPx</code>:
572-
Scrolling animation has been removed in v3.</li>
573-
<li><code>maxPage</code>:
574-
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>
575-
<li><code>appendCallback</code>:
576-
Use <a href="events.html#append"><code>append</code> event</a>.</li>
577-
<li><code>errorCallback</code>:
578-
Use <a href="events.html#error"><code>error</code> event</a>.</li>
579-
<li><code>debug</code>:
580-
<a href="options.html#debug">Backwards compatible</a>, works in v3.</li>
581-
<li><code>loading</code>
582-
<ul>
583-
<li><code>finished</code>:
584-
Use <a href="events.html#load"><code>load</code> event</a>.</li>
585-
<li><code>finishedMsg</code>:
586-
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>
587-
<li><code>img</code> &amp; <code>msgText</code>:
588-
Use <a href="options.html#status"><code>status</code></a> and set loading HTML in <code>.infinite-scroll-request</code>.</li>
589-
</ul>
590-
</li>
591-
</ul>
592-
593-
{{! ----------------------------------------------------------------- }}
594-
595-
<h3>Upgrading v2 methods</h3>
429+
<h2>Upgrading from v3</h2>
596430

597-
<ul>
598-
<li><code>pause</code>, <code>resume</code>, &amp; <code>toggle</code>:
599-
Enable and disable <a href="options.html#loadonscroll"><code>loadOnScroll</code> option</a>.</li>
600-
<li><code>bind</code> &amp; <code>unbind</code>:
601-
Disable and re-set <a href="options.html#scrollthreshold"><code>scrollThreshold</code> option</a>.</li>
602-
<li><code>retrieve</code>:
603-
Use <a href="api.html#loadnextpage"><code>loadNextPage</code></a>.</li>
604-
<li><code>update</code>:
605-
Use <a href="api.html#option"><code>option</code></a>.</li>
606-
<li><code>destroy</code>:
607-
<a href="api.html#destroy">Backward compatible</a>, works in v3.</li>
608-
</ul>
431+
<p>Infinite Scroll v4 is mostly backwards compatible with v3.</p>
609432

610-
{{! ----------------------------------------------------------------- }}
433+
<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>
611434

612-
<h3>v2 upgrade example</h3>
613-
614-
<div class="duo example">
615-
<div class="duo__cell example__code">
435+
<div class="duo">
436+
<div class="duo__cell">
616437
``` js
617-
// Infinite Scroll v2
618-
$('.container').infinitescroll({
619-
itemSelector: '.post',
620-
nextSelector: '.pagination__next',
621-
loading: {
622-
img: '/loading.gif',
623-
msgText: 'Loading...',
624-
finished: 'Congratulations, you have reached the end of the internet',
438+
// Infinite Scroll v3
439+
let $container = $('.container').infiniteScroll({
440+
path: function() {
441+
return 'https://api.unsplash.com/photos?client_id=...&page=' + this.pageIndex;
625442
},
626-
// callback
627-
}, function( items ) {
628-
$( items ).tooltip();
443+
// load page as text
444+
responseType: 'text',
445+
// disable history
446+
history: false,
447+
});
448+
449+
$container.on( 'load.infiniteScroll', function( event, response ) {
450+
// parse response text into JSON data
451+
var data = JSON.parse( response );
452+
// put that data into template
453+
var itemsHTML = template.compile( data );
454+
// convert to jQuery object
455+
var $items = $( itemsHTML );
456+
// append items
457+
$container.infiniteScroll( 'appendItems', $items );
629458
});
630459
```
631460
</div>
632-
<div class="duo__cell example__code">
461+
<div class="duo__cell">
633462
``` js
634-
// Infinite Scroll v3
463+
// Infinite Scroll v4
635464
let $container = $('.container').infiniteScroll({
636-
append: '.post',
637-
path: '.pagination__next',
638-
status: '.page-load-status',
465+
path: function() {
466+
return 'https://api.unsplash.com/photos?client_id=...&page=' + this.pageIndex;
467+
},
468+
// load page as json
469+
responseBody: 'json',
470+
// disable history
471+
history: false,
639472
});
640473

641-
// use event for v2 callback
642-
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
643-
$( items ).tooltip();
474+
$container.on( 'load.infiniteScroll', function( event, body ) {
475+
// body is JSON data
476+
var itemsHTML = template.compile( body );
477+
// convert to jQuery object
478+
var $items = $( itemsHTML );
479+
// append items
480+
$container.infiniteScroll( 'appendItems', $items );
644481
});
645482
```
646-
647-
``` html
648-
<div class="container">
649-
<<article class="post">...</article>">...</div>
650-
<<article class="post">...</article>">...</div>
651-
...
652-
</div>
653-
<!-- use status element for v2 loading options -->
654-
<div class="page-load-status">
655-
<div class="infinite-scroll-request">
656-
<img src="/loading.gif" alt="Loading" />
657-
Loading...
658-
</div>
659-
<p class="infinite-scroll-error infinite-scroll-last">
660-
Congratulations, you have reached the end of the internet
661-
</p>
662-
</div>
663-
```
664483
</div>
665484
</div>
666485

486+
<h3>New features</h3>
487+
488+
<ul>
489+
<li>Uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a> to make requests</li>
490+
<li><a href="api.html#loadnextpage"><code>loadNextPage</code></a> returns a Promise</li>
491+
<li>Set headers and fetch options with <a href="options.html#fetchoptions"><code>fetchOptions</code></a></li>
492+
<li>10% smaller filesize</li>
493+
<li>Internet Explorer support dropped</li>
494+
</ul>
495+
667496
{{! ----------------------------------------------------------------- }}
668497

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

673502
<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>
674503

675-
<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>
504+
<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>
676505

677506
<ul>
678507
<li>A reduced test case clearly demonstrates the bug or issue.</li>

‎css/base.css

+4
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,10 @@ tr:nth-child(2) td {
146146
border-top: none;
147147
}
148148

149+
.main li {
150+
margin: 4px 0;
151+
}
152+
149153
/* ---- data-license-property ---- */
150154

151155
*[data-license-property] {

0 commit comments

Comments
 (0)