Skip to content

Commit

Permalink
before v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@desandro
desandro committed Jun 22, 2017
1 parent f3b31f1 commit 67866a5
Show file tree
Hide file tree
Showing 8 changed files with 128 additions and 28 deletions.
2 changes: 1 addition & 1 deletion content/demo/full-page/page2.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ next: page3.html
</article>

<article class="article">
<h2>Masonry gets horizontalOrder</h2>
<h2>2b - Masonry gets horizontalOrder</h2>

<p>I&#39;ve added Masonry&#39;s first new layout feature in years. <a href="https://masonry.desandro.com/options.html#horizontalorder"><code>horizontalOrder</code> for Masonry</a> and <a href="https://isotope.metafizzy.co/layout-modes/masonry.html#horizontalorder">Isotope</a> will position items in a Masonry staggered layout, but maintain left-to-right order. Previously, Masonry would discard horizontal order and position items in the closest position to the top. While the first row would have horizontal order: 1, 2, 3; subsequent rows would break the order: 5, 4, 6 ... 9, 7, 8.</p>
<p><img src="https://i.imgur.com/WQVtdGp.png" alt="Masonry and left-to-right order"></p>
Expand Down
10 changes: 5 additions & 5 deletions content/extras.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ var $container = $('.container').infiniteScroll({
});

$container.on( 'load.infiniteScroll', function( event, response ) {
// convert response text into JSON data
// prase response text into JSON data
var data = JSON.parse( response );
// put that data into template
var itemsHTML = template.compile( data );
Expand All @@ -253,7 +253,7 @@ $container.on( 'load.infiniteScroll', function( event, response ) {
});
```

{{! TODO JSON demo }}
https://codepen.io/desandro/pen/7bccf0c9c843a910b455c9b2aceda20f

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

Expand Down Expand Up @@ -339,7 +339,7 @@ $container.on( 'load.infiniteScroll', function( event, response ) {
<div class="duo example">
<div class="duo__cell example__code">
``` html
<div class="loader-ellips infinite-scroll-request">
<div class="loader-ellips">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
Expand Down Expand Up @@ -599,8 +599,8 @@ $container.on( 'append.infiniteScroll', function( event, response, path ) {

``` html
<div class="container">
<div class="post">...</div>
<div class="post">...</div>
<<article class="post">...</article>">...</div>
<<article class="post">...</article>">...</div>
...
</div>
<!-- use status element for v2 loading options -->
Expand Down
16 changes: 9 additions & 7 deletions content/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ layout: doc
</div>
</div>

<p style="font-size: 1.2rem;">Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You&rsquo;ve likely seen it in use all over the web.</p>

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

<h2>Install</h2>
Expand Down Expand Up @@ -41,7 +43,7 @@ layout: doc

<h3>Package managers</h3>

<p><a href="https://npmjs.com/package/infinite-scroll">Install with npm</a>: <code>npm install infinite-scroll</code></p>
<p>Install with <a href="https://npmjs.com/package/infinite-scroll">npm</a>: <code>npm install infinite-scroll</code></p>

<p>Install with Yarn: <code>yarn add infinite-scroll</code></p>

Expand Down Expand Up @@ -89,13 +91,13 @@ layout: doc
<script src="/path/to/infinite-scroll.pkgd.min.js"></script>
```

<p>Infinite Scroll works on a container element with a group of item elements.</p>
<p>Infinite Scroll works on a container element with item elements.</p>

``` html
<div class="container">
<div class="post">...</div>
<div class="post">...</div>
<div class="post">...</div>
<article class="post">...</article>
<article class="post">...</article>
<article class="post">...</article>
...
</div>
```
Expand Down Expand Up @@ -177,14 +179,14 @@ var infScroll = new InfiniteScroll( '.container', {
<div class="duo__cell">
<h3>Easy start, powerful build</h3>

<p>Infinite Scroll works out-of-the-box with any blog or WordPress site. And with its robust array of <a href="options.html">options</a>, <a href="api.html">methods</a>, and <a href="events.html">events</a>, you can add custom loaders, notifications and behaviors to fully integrate Infinite Scroll into your user experience.</p>
<p>Infinite Scroll works out-of-the-box with any blog or WordPress site. With its robust array of <a href="options.html">options</a>, <a href="api.html">methods</a>, and <a href="events.html">events</a>, you can add custom behaviors, notifications, and loading animations to fully integrate Infinite Scroll into your user experience.</p>
</div>
</div>


<div class="duo">
<div class="duo__cell">
<h3>Versatile UI options</h3>
<h3>Versatile UI</h3>

<p>Rather load with a button than use scrolling? <a href="options.html#button">Got it</a>. What about scrolling a couple pages, then using a button? <a href="extras.html#scroll-2-pages-then-use-button">Got that</a>. Or load with your own specific logic? <a href="api.html#loadnextpage">Yup</a>.</p>

Expand Down
71 changes: 61 additions & 10 deletions content/options.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ path: '.pagination__next'
// => /page/2, /page/3, page/4 ...
```

<p><a href="demo/full-page">View full page demo with <code>path</code> selector string</a>.</p>

<p>Set to a string with <code>\{{#}}</code> for the incremental page number.</p>

``` js
Expand All @@ -33,7 +35,7 @@ path: 'news/blog-p\{{#}}.html'
// => news/blog-p2.html, news/blog-p3.html, news/blog-p4.html...
```

<p>Set to a function that returns the URL for page URLs that do not use incremental numbers. For example, A List Apart articles increment by 10. Use <a href="api.html#pageindex"><code>pageIndex</code></a> and <a href="api.html#loadcount">loadCount</a> properties to calculate the URL.</p>
<p>Set to a function that returns the URL for page URLs that do not use incremental numbers. For example, A List Apart articles increment by 10. Use <a href="api.html#pageindex"><code>pageIndex</code></a> and <a href="api.html#loadcount"><code>loadCount</code></a> properties to calculate the URL.</p>

``` js
path: function() {
Expand All @@ -43,6 +45,28 @@ path: function() {
// => /articles/P10, /articles/P20, /articles/P30 ...
```

<p>For another example, this documentation site uses a function to get the next URL from an array.</p>

``` js
var nextPages = [
'index',
'options',
'api',
'events',
'extras',
'license',
];

$('.container').infiniteScroll({
path: function() {
return nextPages[ this.loadCount ] + '.html';
},
// options...
});
```

<p>This technique is used in <a href="{{! TODO codepen links here}}">all the CodePen demos</a>.</p>

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

<h3>append</h3>
Expand All @@ -58,6 +82,7 @@ path: function() {
</div>
<div class="duo__cell example__demo">
{{> append}}
{{> edit-demo default="WOjqNM" vanillaJS="WOpjMM"}}
</div>
</div>

Expand All @@ -74,9 +99,10 @@ Disable appending by not setting <code>append</code>, for loading JSON or adding

<h3>checkLastPage</h3>

<p>Checks if page has selector element. This prevents Infinite Scroll from requesting a non-existant page. If enabled and page does not have selector, <a href="events.html#last"><code>last</code> event</a> will be triggered. Requires <code><span class="comment"><a href="#responsetype">responseType</a>: 'document'</span></code>.</p>
<p>Checks if Infinite Scroll has reached the last page. This prevents Infinite Scroll from requesting a non-existant page. <a href="events.html#last"><code>last</code> event</a> will be triggered when last page is reached. Enabled by default <code><span class="comment">heckLastPage: true</span></code>.</p>


<p>Enabled by default <code><span class="comment">checkLastPage: true</span></code>. When set to <code><span class="literal">true</span></code> and <a href="#path"><code>path</code></a> set to a selector string, Infinite Scroll will check if the loaded page has the <code>path</code> selector.</p>
<p>When set to <code><span class="comment">checkLastPage: true</span></code> and <a href="#path"><code>path</code></a> set to a selector string, Infinite Scroll will check if the loaded page has the <code>path</code> selector. Requires <code><span class="comment"><a href="#responsetype">responseType</a>: 'document'</span></code>.</p>

<div class="duo example">
<div class="duo__cell example__code">
Expand All @@ -102,6 +128,18 @@ checkLastPage: '.pagination__next',
// check page for .pagination__next
```

<p>If <code>path</code> is set a function, Infinite Scroll will check if that function returns a value.</p>

``` js
path: function() {
// no value returned after 4th loaded page
if ( this.loadCount < 4 ) {
var nextIndex = this.loadCount + 2;
return 'news/blog-p' + nextIndex + '.html';
}
}
```

<p>When disabled, Infinite Scroll will attempt to load the next page.</p>

<div class="duo example">
Expand Down Expand Up @@ -131,6 +169,8 @@ checkLastPage: '.pagination__next',
</div>
<div class="duo__cell example__demo">
{{> prefill}}

https://codepen.io/desandro/pen/b0b561e71e91fc047bf1e55448c24ecd
</div>
</div>

Expand Down Expand Up @@ -199,6 +239,7 @@ outlayer: instance
</div>
<div class="duo__cell example__demo">
{{> masonry-small}}
https://codepen.io/desandro/pen/97b617c7fbddc3e044eafee925fa62c8
</div>
</div>

Expand Down Expand Up @@ -338,6 +379,7 @@ onInit: function() {
</div>
<div class="duo__cell example__demo">
{{> scroll-threshold-option}}
https://codepen.io/desandro/pen/4b4048c2b932111f88913c80963301bb
</div>
</div>

Expand Down Expand Up @@ -366,12 +408,12 @@ scrollThreshold: false
<div class="sidebar">
<!-- .container has scroll content -->
<div class="container">
<div class="post">...</div>
<div class="post">...</div>
<article class="post">...</article>">...</div>
<article class="post">...</article>">...</div>
...
</div>
<!-- status is at bottom of scroll -->
<div class="scroller-status">
<div class="page-load-status">
<p class="infinite-scroll-request">Loading...</p>
...
</div>
Expand All @@ -389,6 +431,7 @@ scrollThreshold: false
</div>
<div class="duo__cell example__demo">
{{> append}}
https://codepen.io/desandro/pen/121fd5852838a335b10b0678cead1b54
</div>
</div>

Expand All @@ -399,8 +442,8 @@ scrollThreshold: false
``` html
<!-- .container is scrollable and has scroll content -->
<div class="container">
<div class="post">...</div>
<div class="post">...</div>
<article class="post">...</article>">...</div>
<article class="post">...</article>">...</div>
...
</div>
```
Expand All @@ -416,6 +459,7 @@ scrollThreshold: false
</div>
<div class="duo__cell example__demo">
{{> element-scroll-container}}
https://codepen.io/desandro/pen/32a447147ed9babf5964f2f1ed1aeafe
</div>
</div>

Expand Down Expand Up @@ -451,7 +495,9 @@ scrollThreshold: false

<p>Changes the browser history and URL.</p>

<p>Enabled by default <code><span class="comment">history: 'replace'</span></code> will use <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method"><code>history.replaceState()</code></a> to change the current history entry. Going back in the browser will return the user to previous site. <a href="demo/full-page">View full page demo with <code>history: 'replace'</code></a>.</p>
<p>Enabled by default <code><span class="comment">history: 'replace'</span></code> will use <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_replaceState()_method"><code>history.replaceState()</code></a> to change the current history entry. Going back in the browser will return the user to previous site.</p>

<p><a href="demo/full-page">View full page demo with <code>history: 'replace'</code></a>.</p>

<p>Set <code>history: <span class="string">'push'</span></code> to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method"><code>history.pushState()</code></a> to create new history entries for each page change. Going back in the browser will load the previous page.</p>

Expand Down Expand Up @@ -500,6 +546,8 @@ historyTitle: false
hideNav: '.pagination'
```

https://codepen.io/desandro/pen/0f24e61280a058a9a61f1787e86517a7

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

<h3>status</h3>
Expand Down Expand Up @@ -533,6 +581,7 @@ hideNav: '.pagination'
</div>
<div class="duo__cell example__demo">
{{> status}}
https://codepen.io/desandro/pen/4048e5959b5de67637b9ac37e4932d97
</div>
</div>

Expand All @@ -551,14 +600,15 @@ hideNav: '.pagination'
<div class="duo example">
<div class="duo__cell example__code">
``` js
button: '.load-next-button',
button: '.view-more-button',
// load pages on button click
scrollThreshold: false,
// disable loading on scroll
```
</div>
<div class="duo__cell example__demo">
{{> button-option}}
https://codepen.io/desandro/pen/868bc09b61964c17ca2d01d1bd9af052
</div>
</div>

Expand All @@ -577,5 +627,6 @@ hideNav: '.pagination'
<div class="duo__cell example__demo">
<p>View logs in your browser's Developer Console.</p>
{{> debug}}
https://codepen.io/desandro/pen/29922876b14d34665a36ebca377601c7
</div>
</div>
6 changes: 3 additions & 3 deletions data/licenses.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
"title": "Developer",
"for": "1 developer",
"price": "25",
"gumroadSlug": "infinite-scroll-dev"
"gumroadSlug": "infscroll-dev"
},
"team": {
"title": "Team",
"for": "up to 8 developers",
"price": "110",
"gumroadSlug": "infinite-scroll-team"
"gumroadSlug": "infscroll-team"
},
"organization": {
"title": "Organization",
"for": "Unlimited developers",
"price": "320",
"gumroadSlug": "infinite-scroll-org"
"gumroadSlug": "infscroll-org"
}
}
40 changes: 40 additions & 0 deletions modules/hero/hero.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,19 @@
padding-top: 10px;
}

.hero__new-badge {
display: inline-block;
padding: 5px 10px;
vertical-align: top;
border-radius: 1.0em;
background: #C25;
color: white;
text-align: center;
font-weight: bold;
font-style: normal;
font-size: 1.0rem;
}

.hero__tagline {
font-size: 1.2rem;
line-height: 1.2;
Expand Down Expand Up @@ -82,6 +95,33 @@
padding-left: 300px;
}

.hero__new-badge {
position: relative;
top: -10px;
width: 70px;
height: 70px;
background: #C25;
color: white;
border-radius: 35px;
margin: 0;
}

.hero__new-badge__new {
display: block;
font-size: 0.85rem;
margin-top: 4px;
text-transform: uppercase;
transform: skewY(-15deg);
}

.hero__new-badge__version {
display: block;
font-size: 2.4rem;
line-height: 0.8;
font-weight: bold;
transform: skewY(-15deg);
}

.hero__title {
font-size: 5.0rem;
padding-top: 25px;
Expand Down
8 changes: 7 additions & 1 deletion modules/hero/hero.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
<div class="hero__masthead">
{{> infinite-scroll-logo}}
<div class="hero__text">
<h1 class="hero__title">Infinite Scroll</h1>
<h1 class="hero__title">
Infinite Scroll
<i class="hero__new-badge">
<span class="hero__new-badge__new">New!</span>
<span class="hero__new-badge__version">v3</span>
</i>
</h1>
<p class="hero__tagline">Automatically add next page</p>
<p>
{{>gh-button project="Infinite Scroll" ghPath="metafizzy/infinite-scroll" stars="4,400" }}
Expand Down
Loading

0 comments on commit 67866a5

Please sign in to comment.