🎩 v4 CodePen demos

metafizzy · Jan 3, 2021 · 48fa7c5 · 48fa7c5
1 parent 11d08f2
commit 48fa7c5
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 34 deletions.
diff --git a/content/api.hbs b/content/api.hbs
@@ -321,8 +321,7 @@ infScroll.pageIndex
     let infScroll = $container.data('infiniteScroll');
 
     $container.on( 'load.infiniteScroll', function() {
-      $demoStatus.text( 'Loaded page: ' +
-        infScroll.pageIndex );
+      $demoStatus.text(`Loaded page: `${infScroll.pageIndex}`);
     });
     ```
   </div>

diff --git a/content/events.hbs b/content/events.hbs
@@ -217,9 +217,15 @@ infScroll.on( 'error', function( error, path, response ) {...})
 
 <h3>last</h3>
 
-<p>Triggered when the last page has been loaded.</p>
-
-<p>Requires <a href="options.html#checklastpage"><code>checkLastPage</code></a> enabled, and <a href="options.html#path"><code>path</code></a> to be set to a next link.</p>
+<p>Triggered when the last page has been loaded. <code>last</code> is triggered with several conditions.</p>
+
+<ul>
+  <li>Anytime the loaded page returns with <code>204</code> status.</li>
+  <li>With <a href="options.html#append"><code>append</code></a> set, if the loaded page has 0 items to append.</li>
+  <li>With <a href="options.html#path"><code>path</code></a> to be set to a next link and <a href="options.html#checklastpage"><code>checkLastPage</code></a> enabled, if the next link is not found on the loaded page.</li>
+  <li>With <code>checkLastPage</code> set to a selector string, if the selector is not found on the loaded page.</li>
+  <li>With <code>path</code> set to a function and <code>checkLastPage</code> enabled, if the next link is not found on the loaded page.</li>
+</ul>
 
 ``` js
 // jQuery

diff --git a/content/extras.hbs b/content/extras.hbs
@@ -29,7 +29,7 @@ description: "Everything else about Infinite Scroll: module loaders, loading JSO
   </div>
 </div>
 
-<p>You can then <code><span class="built_in">require</span>(<span class="string">'infiniteScroll'</span>)</code>.</p>
+<p>You can then <code><span class="built_in">require</span>(<span class="string">'infinite-scroll'</span>)</code>.</p>
 
 ``` js
 // main.js
@@ -145,17 +145,17 @@ $container.on( 'load.infiniteScroll', function( event, body ) {
   // convert to jQuery object
   let $items = $( itemsHTML );
   // append items
-  $container.infiniteScroll( 'appendItems', $items );
+  $container.append( $items );
 });
 ```
 
-{{> edit-demo default="ZEprdYX" vanillaJS="JJNNqP" }}
+{{> edit-demo default="abmYbxr" vanillaJS="YzGazmq" }}
 
 <p>See additional demos:</p>
 
 <ul>
-  <li><a href="https://codepen.io/desandro/pen/abmqgWQ/">Loading JSON with Masonry</a></li>
-  <li><a href="https://codepen.io/desandro/pen/LLyeJB/">Loading JSON with Masonry, vanilla JS</a></li>
+  <li><a href="https://codepen.io/desandro/pen/rNMdaNR/">Loading JSON with Masonry</a></li>
+  <li><a href="https://codepen.io/desandro/pen/ExgEaaB/">Loading JSON with Masonry, vanilla JS</a></li>
 </ul>
 
 {{! ----------------------------------------------------------------- }}
@@ -499,7 +499,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-v4-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/collection/DZejqa?grid_type=list&sort_by=item_created_at">CodePen demos</a> from these docs.</p>
 
 <ul>
   <li>A reduced test case clearly demonstrates the bug or issue.</li>

diff --git a/content/index.hbs b/content/index.hbs
@@ -207,7 +207,6 @@ let infScroll = new InfiniteScroll( '.container', {
     <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>
 
     {{> button-option}}
-    {{> edit-demo default="VWWqYW" vanillaJS="xrdERX" }}
   </div>
 
   <div class="duo__cell">

diff --git a/content/options.hbs b/content/options.hbs
@@ -83,7 +83,7 @@ $('.container').infiniteScroll({
   </div>
   <div class="duo__cell example__demo">
     {{> append}}
-    {{> edit-demo default="WOjqNM" vanillaJS="WOpjMM"}}
+    {{> edit-demo default="yLaKLop" vanillaJS="vYXRYeY"}}
   </div>
 </div>
 
@@ -170,7 +170,7 @@ path: function() {
   </div>
   <div class="duo__cell example__demo">
     {{> prefill}}
-    {{> edit-demo default="VWWVyj" vanillaJS="WOjxKP"}}
+    {{> edit-demo default="QWKmWoa" vanillaJS="vYXRYMG"}}
   </div>
 </div>
 
@@ -197,10 +197,10 @@ $container.on( 'load.infiniteScroll', function( event, data ) {
 <p>See demos on CodePen:</p>
 
 <ul>
-  <li><a href="https://codepen.io/desandro/pen/LLjYgG/">Loading JSON</a></li>
-  <li><a href="https://codepen.io/desandro/pen/JJNNqP/">Loading JSON, vanilla JS</a></li>
-  <li><a href="https://codepen.io/desandro/pen/QgMWzV/">Loading JSON with Masonry</a></li>
-  <li><a href="https://codepen.io/desandro/pen/LLyeJB/">Loading JSON with Masonry, vanilla JS</a></li>
+  <li><a href="https://codepen.io/desandro/pen/abmYbxr/">Loading JSON</a></li>
+  <li><a href="https://codepen.io/desandro/pen/YzGazmq/">Loading JSON, vanilla JS</a></li>
+  <li><a href="https://codepen.io/desandro/pen/rNMdaNR/">Loading JSON with Masonry</a></li>
+  <li><a href="https://codepen.io/desandro/pen/ExgEaaB/">Loading JSON with Masonry, vanilla JS</a></li>
 </ul>
 
 {{! ----------------------------------------------------------------- }}
@@ -227,7 +227,7 @@ $container.on( 'load.infiniteScroll', function( event, body ) {
 
 <h3>fetchOptions</h3>
 
-<p>Sets <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options">options for the <code>fetch</code> request</a>.</p>
+<p>Sets method, headers, CORS mode, and other options for the <code>fetch</code> request. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options">Supplying request options on MDN</a> for more details.</p>
 
 ``` js
 fetchOptions: {
@@ -485,7 +485,7 @@ scrollThreshold: false
   </div>
   <div class="duo__cell example__demo">
     {{> append}}
-    {{> edit-demo default="Kqqrrb" vanillaJS="MomexY"}}
+    {{> edit-demo default="QWKmgLE" vanillaJS="eYdMROE"}}
    </div>
 </div>
 
@@ -548,7 +548,7 @@ scrollThreshold: false
 
 <p>Changes page URL and browser history.</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>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#Methods"><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>
 
@@ -559,7 +559,7 @@ history: false
 // disable changing URL and browser history
 ```
 
-<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>
+<p>Set <code>history: <span class="string">'push'</span></code> to use <a href="https://developer.mozilla.org/en-US/docs/Web/API/History#Methods"><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>
 
 
 ``` js
@@ -606,7 +606,7 @@ historyTitle: false
 hideNav: '.pagination'
 ```
 
-{{> edit-demo default="vZZQoJ" vanillaJS="qjmaNV"}}
+{{> edit-demo default="JjRLJoB" vanillaJS="gOweRpY"}}
 
 {{! ----------------------------------------------------------------- }}
 
@@ -641,15 +641,15 @@ hideNav: '.pagination'
   </div>
   <div class="duo__cell example__demo">
     {{> status}}
-    {{> edit-demo default="WOjqNM" vanillaJS="WOpjMM"}}
+    {{> edit-demo default="yLaKLop" vanillaJS="vYXRYeY"}}
   </div>
 </div>
 
 {{! ----------------------------------------------------------------- }}
 
 <h3>button</h3>
 
-<p>Enables a button to load pages on click. The button will state will be hooked in to Infinite Scroll events:</p>
+<p>Enables a button to load pages on click. The button state is changed by Infinite Scroll events:</p>
 
 <ul>
   <li>Disabled while loading on <a href="events.html#request"><code>request</code></a></li>
@@ -668,7 +668,6 @@ hideNav: '.pagination'
   </div>
   <div class="duo__cell example__demo">
     {{> button-option }}
-    {{> edit-demo default="VWWqYW" vanillaJS="xrdERX" }}
   </div>
 </div>
 

diff --git a/modules/demos/button-option/button-option.hbs b/modules/demos/button-option/button-option.hbs
@@ -5,3 +5,5 @@
     <button class="button view-more-button">View more</button>
   </p>
 </div>
+
+{{> edit-demo default="OJRvLxG" vanillaJS="VwKXwbJ" }}
diff --git a/modules/demos/button-start/button-start.hbs b/modules/demos/button-start/button-start.hbs
@@ -6,4 +6,4 @@
   </p>
 </div>
 
-{{> edit-demo default="EXXGem" vanillaJS="KqqbEd" }}
+{{> edit-demo default="LYRdrRj" vanillaJS="BaLrVLv" }}
diff --git a/modules/demos/debug/debug.hbs b/modules/demos/debug/debug.hbs
@@ -3,4 +3,4 @@
   {{> scroller-status}}
 </div>
 
-{{> edit-demo default="xrrmwE" vanillaJS="QgvKgb" }}
+{{> edit-demo default="OJRvgyP" vanillaJS="jOMzwbV" }}
diff --git a/modules/demos/element-scroll-container/element-scroll-container.hbs b/modules/demos/element-scroll-container/element-scroll-container.hbs
@@ -5,4 +5,4 @@
     <div class="scroller-item scroller-item--height2 scroller-item--magenta">1d</div>
 </div>
 
-{{> edit-demo default="KqqrJb" vanillaJS="GEmjRX"}}
+{{> edit-demo default="XWjEgWz" vanillaJS="LYRdLYJ"}}
diff --git a/modules/demos/load-count/load-count.hbs b/modules/demos/load-count/load-count.hbs
@@ -6,4 +6,4 @@
   </div>
 </div>
 
-{{> edit-demo default="qjjLpX" vanillaJS="VWWqzy" }}
+{{> edit-demo default="GRjxGZG" vanillaJS="ZEpxRWG" }}
diff --git a/modules/demos/masonry-small/masonry-small.hbs b/modules/demos/masonry-small/masonry-small.hbs
@@ -22,4 +22,4 @@
   {{> scroller-status}}
 </div>
 
-{{> edit-demo default="eRRQVo" vanillaJS="XgRpNr"}}
+{{> edit-demo default="NWRYWgd" vanillaJS="XgRpNr"}}
diff --git a/modules/demos/page-index/page-index.hbs b/modules/demos/page-index/page-index.hbs
@@ -6,4 +6,4 @@
   </div>
 </div>
 
-{{> edit-demo default="rwwoGe" vanillaJS="RggEQJ" }}
+{{> edit-demo default="VwKXQGB" vanillaJS="gOweKPj" }}
diff --git a/modules/demos/scroll-2/scroll-2.hbs b/modules/demos/scroll-2/scroll-2.hbs
@@ -6,4 +6,4 @@
   </p>
 </div>
 
-{{> edit-demo default="jwwdEq" vanillaJS="owwmXM" }}
+{{> edit-demo default="PoGRaby" vanillaJS="oNzqyBG" }}
diff --git a/modules/demos/scroll-threshold-option/scroll-threshold-option.hbs b/modules/demos/scroll-threshold-option/scroll-threshold-option.hbs
@@ -3,4 +3,4 @@
   {{> scroller-status}}
 </div>
 
-{{> edit-demo default="rwwQZE" vanillaJS="WOjxYm"}}
+{{> edit-demo default="eYdMWqE" vanillaJS="oNzqWKa"}}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,5 @@ @@
         <button class="button view-more-button">View more</button>
       </p>
     </div>
+    {{> edit-demo default="OJRvLxG" vanillaJS="VwKXwbJ" }}