Add ajax demo
parent
68be2fe35f
commit
5ca1ca6ba0
@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
layout: default
|
||||||
|
title: Loading ajax content
|
||||||
|
description: Fetch data from an api, then add it to Shuffle.
|
||||||
|
image: /demos/ajax.jpg
|
||||||
|
extraJS: ["demos/ajax.js"]
|
||||||
|
externalJS: ["https://unpkg.com/whatwg-fetch"]
|
||||||
|
prism: true
|
||||||
|
photoCredit: false
|
||||||
|
---
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.person-item {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person-item__inner {
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person-item__inner > span {
|
||||||
|
margin: auto;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-wrapper {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12@sm">
|
||||||
|
<h2>Shuffle with <abbr title="asynchronous JavaScript and XML">Ajax</abbr> Content</h2>
|
||||||
|
<p>This demo builds off the <a href="{{ site.baseurl }}{% post_url 2013-06-19-adding-removing %}">adding and removing demo</a> to append new items after fetching them from an API and follows the same pattern:</p>
|
||||||
|
<ol>
|
||||||
|
<li>Insert the elements into the shuffle container element (in this case, <code>#grid</code>) however you like. You could use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML"><code>insertAdjacentHTML</code></a>, <code>jQuery.append</code>, or any other method of inserting new content.</li>
|
||||||
|
<li>Make an array of the newly added items.</li>
|
||||||
|
<li>Call <code>add(newItemsArray)</code> on your shuffle instance.</li>
|
||||||
|
</ol>
|
||||||
|
<p>The data comes from <a href="https://reqres.in" target="_blank" rel="noopener">https://reqres.in</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div id="grid" class="my-shuffle-container row">
|
||||||
|
<div class="col-3@xs col-3@sm my-sizer-element"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6@xs col-12@sm">
|
||||||
|
<div class="load-more-wrapper text-center">
|
||||||
|
<button class="btn" id="load-more-button">Load More</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container has-code-block">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12@sm">
|
||||||
|
<h2>Source code for this demo</h2>
|
||||||
|
<p>Link to <a href="{{ site.baseurl }}/js/demos/ajax.js">demo source</a></p>
|
||||||
|
<div class="code-block">
|
||||||
|
<pre class="language-jsx" data-src="{{ site.baseurl }}/js/demos/ajax.js"></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Binary file not shown.
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
After Width: | Height: | Size: 8.4 KiB |
@ -0,0 +1,106 @@
|
|||||||
|
var Shuffle = window.Shuffle;
|
||||||
|
var currentPage = 1;
|
||||||
|
var totalPages;
|
||||||
|
var gridContainerElement = document.getElementById('grid');
|
||||||
|
var loadMoreButton = document.getElementById('load-more-button');
|
||||||
|
var shuffleInstance;
|
||||||
|
|
||||||
|
// Fetch first page of results from the API.
|
||||||
|
// You should probably polyfill `fetch` if you're going to copy this demo.
|
||||||
|
// https://github.com/github/fetch
|
||||||
|
fetch('https://reqres.in/api/users?page=' + currentPage)
|
||||||
|
.then(function (response) {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
// Store the total number of pages so we know when to disable the "load more" button.
|
||||||
|
totalPages = response.total_pages;
|
||||||
|
|
||||||
|
// Create and insert the markup.
|
||||||
|
var markup = getItemMarkup(response.data);
|
||||||
|
appendMarkupToGrid(markup);
|
||||||
|
|
||||||
|
// Add click listener to button to load the next page.
|
||||||
|
loadMoreButton.addEventListener('click', fetchNextPage);
|
||||||
|
|
||||||
|
// Initialize Shuffle now that there are items.
|
||||||
|
shuffleInstance = new Shuffle(gridContainerElement, {
|
||||||
|
itemSelector: '.js-item',
|
||||||
|
sizer: '.my-sizer-element',
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function fetchNextPage() {
|
||||||
|
currentPage += 1;
|
||||||
|
fetch('https://reqres.in/api/users?page=' + currentPage)
|
||||||
|
.then(function (response) {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
// Create and insert the markup.
|
||||||
|
var markup = getItemMarkup(response.data);
|
||||||
|
appendMarkupToGrid(markup);
|
||||||
|
|
||||||
|
// Check if there are any more pages to load.
|
||||||
|
if (currentPage === totalPages) {
|
||||||
|
replaceLoadMoreButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save the total number of new items returned from the API.
|
||||||
|
var itemsFromResponse = response.data.length;
|
||||||
|
// Get an array of elements that were just added to the grid above.
|
||||||
|
var allItemsInGrid = Array.from(gridContainerElement.children);
|
||||||
|
// Use negative beginning index to extract items from the end of the array.
|
||||||
|
var newItems = allItemsInGrid.slice(-itemsFromResponse);
|
||||||
|
|
||||||
|
// Notify the shuffle instance that new items were added.
|
||||||
|
shuffleInstance.add(newItems);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert an object to HTML markup for an item.
|
||||||
|
* @param {object} dataForSingleItem Data object.
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
function getMarkupFromData(dataForSingleItem) {
|
||||||
|
var name = dataForSingleItem.first_name + ' ' + dataForSingleItem.last_name;
|
||||||
|
// https://www.paulirish.com/2009/random-hex-color-code-snippets/
|
||||||
|
var randomColor = ('000000' + Math.random().toString(16).slice(2, 8)).slice(-6);
|
||||||
|
return [
|
||||||
|
'<div class="js-item col-3@xs col-3@sm person-item" data-id="' + dataForSingleItem.id + '">',
|
||||||
|
'<div class="person-item__inner" style="background-color:#' + randomColor + '">',
|
||||||
|
'<span>' + name + '</span>',
|
||||||
|
'</div>',
|
||||||
|
'</div>',
|
||||||
|
].join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert an array of item objects to HTML markup.
|
||||||
|
* @param {object[]} items Items array.
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
function getItemMarkup(items) {
|
||||||
|
return items.reduce(function (str, item) {
|
||||||
|
return str + getMarkupFromData(item);
|
||||||
|
}, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Append HTML markup to the main Shuffle element.
|
||||||
|
* @param {string} markup A string of HTML.
|
||||||
|
*/
|
||||||
|
function appendMarkupToGrid(markup) {
|
||||||
|
gridContainerElement.insertAdjacentHTML('beforeend', markup);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the load more button so that the user cannot click it again.
|
||||||
|
*/
|
||||||
|
function replaceLoadMoreButton() {
|
||||||
|
var text = document.createTextNode('All users loaded');
|
||||||
|
var replacement = document.createElement('p');
|
||||||
|
replacement.appendChild(text);
|
||||||
|
loadMoreButton.parentNode.replaceChild(replacement, loadMoreButton);
|
||||||
|
}
|
Loading…
Reference in New Issue