256 lines
9.9 KiB
HTML
256 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link href="../reset.css" rel="stylesheet"/>
|
|
<link href="./style.css" rel="stylesheet"/>
|
|
|
|
<title>MixItUp Demo - Dataset with Pre-rendered Targets</title>
|
|
</head>
|
|
<body>
|
|
<div class="controls" data-ref="controls">
|
|
<button type="button" class="control control-filter" data-ref="filter" data-color="all">All</button>
|
|
<button type="button" class="control control-filter" data-ref="filter" data-color="green">Green</button>
|
|
<button type="button" class="control control-filter" data-ref="filter" data-color="blue">Blue</button>
|
|
<button type="button" class="control control-filter" data-ref="filter" data-color="pink">Pink</button>
|
|
<button type="button" class="control control-filter" data-ref="filter" data-color="none">None</button>
|
|
|
|
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="asc">Asc</button>
|
|
<button type="button" class="control control-sort" data-ref="sort" data-key="publishedDate" data-order="desc">Desc</button>
|
|
</div>
|
|
|
|
<div class="container" data-ref="container">
|
|
<div class="item green" data-ref="item">
|
|
<time class="published-date">2015-10-03</time>
|
|
</div>
|
|
|
|
<div class="item green" data-ref="item">
|
|
<time class="published-date">2015-12-22</time>
|
|
</div>
|
|
|
|
<div class="item blue" data-ref="item">
|
|
<time class="published-date">2016-02-15</time>
|
|
</div>
|
|
|
|
<div class="item pink" data-ref="item">
|
|
<time class="published-date">2016-04-25</time>
|
|
</div>
|
|
|
|
<div class="item green" data-ref="item">
|
|
<time class="published-date">2016-05-02</time>
|
|
</div>
|
|
|
|
<div class="item blue" data-ref="item">
|
|
<time class="published-date">2016-10-07</time>
|
|
</div>
|
|
|
|
<div class="item pink" data-ref="item">
|
|
<time class="published-date">2016-11-13</time>
|
|
</div>
|
|
|
|
<div class="item blue" data-ref="item">
|
|
<time class="published-date">2016-12-01</time>
|
|
</div>
|
|
|
|
<div class="gap" data-ref="first-gap"></div>
|
|
<div class="gap"></div>
|
|
<div class="gap"></div>
|
|
</div>
|
|
|
|
<script src="../mock-api.js"></script>
|
|
<script src="../mixitup.min.js"></script>
|
|
|
|
<script>
|
|
// Typically, our data would live in a DB and be retrieved via a JSON API, but in
|
|
// this demo we will create a mock dataset using an array literal.
|
|
|
|
// You will notice that this data exactly matches our pre-rendered targets.
|
|
|
|
var items = [
|
|
{
|
|
id: 1,
|
|
color: 'green',
|
|
publishedDate: '2015-10-03'
|
|
},
|
|
{
|
|
id: 2,
|
|
color: 'green',
|
|
publishedDate: '2015-12-22'
|
|
},
|
|
{
|
|
id: 3,
|
|
color: 'blue',
|
|
publishedDate: '2016-02-15'
|
|
},
|
|
{
|
|
id: 4,
|
|
color: 'pink',
|
|
publishedDate: '2016-04-25'
|
|
},
|
|
{
|
|
id: 5,
|
|
color: 'green',
|
|
publishedDate: '2016-05-02'
|
|
},
|
|
{
|
|
id: 6,
|
|
color: 'blue',
|
|
publishedDate: '2016-10-07'
|
|
},
|
|
{
|
|
id: 7,
|
|
color: 'pink',
|
|
publishedDate: '2016-11-13'
|
|
},
|
|
{
|
|
id: 8,
|
|
color: 'blue',
|
|
publishedDate: '2016-12-01'
|
|
}
|
|
];
|
|
|
|
// The `Api` class is not part of MixItUp and has been created to mock
|
|
// the asyncronous fetching of data for this demo. To use it, we must
|
|
// create an api instance, passing in our mock data to represent the
|
|
// contents of a DB.
|
|
|
|
var api = new Api(items);
|
|
|
|
// As we'll be building and binding our own UI, we'll start with caching
|
|
// references to any DOM elements we'll need to work with
|
|
|
|
var controls = document.querySelector('[data-ref="controls"]');
|
|
var filters = document.querySelectorAll('[data-ref="filter"]');
|
|
var sorts = document.querySelectorAll('[data-ref="sort"]');
|
|
var container = document.querySelector('[data-ref="container"]');
|
|
|
|
// "Gap" elements are used to maintain even columns in a justified grid. See our
|
|
// "MixItUp Grid Layouts" tutorial for more information.
|
|
|
|
var firstGap = document.querySelector('[data-ref="first-gap"]');
|
|
|
|
// We'll need to keep track of our active current filter so
|
|
// that we can sort within the current filter.
|
|
|
|
var activeColor = '';
|
|
|
|
// Instantiate and configure the mixer
|
|
|
|
var mixer = mixitup(container, {
|
|
selectors: {
|
|
target: '[data-ref="item"]' // Query targets with an attribute selector to keep our JS and styling classes seperate
|
|
},
|
|
layout: {
|
|
siblingAfter: firstGap // Ensure the first "gap" element is known to mixitup incase of insertion into an empty container
|
|
},
|
|
load: {
|
|
dataset: items // As we have pre-rendered targets, we must "prime" MixItUp with their underlying data
|
|
},
|
|
data: {
|
|
uidKey: 'id' // Our data model must have a unique id. In this case, its key is 'id'
|
|
},
|
|
render: { // We must provide a target render function incase we need to render new items not in the initial dataset (not used in this demo)
|
|
target: function(item) {
|
|
return '<div class="item ' + item.color + '" data-ref="item"><time class="published-date">' + item.publishedDate + '</time></div>';
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* A helper function to set an active styling class on an active button,
|
|
* and remove it from its siblings at the same time.
|
|
*
|
|
* @param {HTMLElement} activeButton
|
|
* @param {HTMLELement[]} siblings
|
|
* @return {void}
|
|
*/
|
|
|
|
function activateButton(activeButton, siblings) {
|
|
var button;
|
|
var i;
|
|
|
|
for (i = 0; i < siblings.length; i++) {
|
|
button = siblings[i];
|
|
|
|
button.classList[button === activeButton ? 'add' : 'remove']('control-active');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A click handler to detect the type of button clicked, read off the
|
|
* relevent attributes, call the API, and trigger a dataset operation.
|
|
*
|
|
* @param {HTMLElement} button
|
|
* @return {void}
|
|
*/
|
|
|
|
function handleButtonClick(button) {
|
|
// Define default values for color, sortBy and order
|
|
// incase they are not present in the clicked button
|
|
|
|
var color = activeColor;
|
|
var sortBy = 'id';
|
|
var order = 'asc';
|
|
|
|
// If button is already active, or an operation is in progress, ignore the click
|
|
|
|
if (button.classList.contains('control-active') || mixer.isMixing()) return;
|
|
|
|
// Else, check what type of button it is, if any
|
|
|
|
if (button.matches('[data-ref="filter"]')) {
|
|
// Filter button
|
|
|
|
activateButton(button, filters);
|
|
|
|
color = activeColor = button.getAttribute('data-color');
|
|
} else if (button.matches('[data-ref="sort"]')) {
|
|
// Sort button
|
|
|
|
activateButton(button, sorts);
|
|
|
|
sortBy = button.getAttribute('data-key');
|
|
order = button.getAttribute('data-order');
|
|
} else {
|
|
// Not a button
|
|
|
|
return;
|
|
}
|
|
|
|
// Now that we have our color filter and sorting order, we can fetch some data from the API.
|
|
|
|
api.get({
|
|
color: color,
|
|
$sort_by: sortBy,
|
|
$order: order
|
|
})
|
|
.then(function(items) {
|
|
// Our api returns an array of items which we can send
|
|
// straight to our mixer using the .dataset() method
|
|
|
|
return mixer.dataset(items);
|
|
})
|
|
.then(function(state) {
|
|
console.log('fetched ' + state.activeDataset.length + ' items');
|
|
})
|
|
.catch(console.error.bind(console));
|
|
}
|
|
|
|
// We can now set up a handler to listen for "click" events on our UI buttons
|
|
|
|
controls.addEventListener('click', function(e) {
|
|
handleButtonClick(e.target);
|
|
});
|
|
|
|
// Set controls the active controls on startup to match the default filter and sort
|
|
|
|
activateButton(controls.querySelector('[data-color="all"]'), filters);
|
|
activateButton(controls.querySelector('[data-order="asc"]'), sorts);
|
|
|
|
// NB: Always remember to destroy the instance with mixer.destroy() when your
|
|
// component unmounts to ensure that event handlers are unbound and the
|
|
// instance can be garbage collected.
|
|
</script>
|
|
</body>
|
|
</html> |