You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
4.5 KiB
HTML
161 lines
4.5 KiB
HTML
---
|
|
layout: default
|
|
title: Shuffle Adding and Removing Elements Demo
|
|
description: This demo of shuffle shows how to add and removing items.
|
|
image: /demos/adding-removing.jpg
|
|
extraJS: [ "demos/adding-removing.js" ]
|
|
prism: true
|
|
---
|
|
<style>
|
|
|
|
/* Styles for shuffle */
|
|
.container {
|
|
counter-reset: boxes;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 18%;
|
|
margin-left: 2.5%;
|
|
height: 100px;
|
|
margin-top: 20px;
|
|
float: left;
|
|
background: #E74C3C;
|
|
counter-increment: boxes;
|
|
}
|
|
|
|
.box::before {
|
|
content: 'DOM: ' counter(boxes);
|
|
position: absolute;
|
|
color: white;
|
|
top: .5em;
|
|
left: .5em;
|
|
}
|
|
|
|
|
|
.box::after {
|
|
content: 'Reviews: ' attr(data-reviews);
|
|
position: absolute;
|
|
color: white;
|
|
bottom: .5em;
|
|
left: .5em;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.box::before {
|
|
content: 'DOM order: ' counter(boxes);
|
|
}
|
|
|
|
.box::after {
|
|
content: 'Total Reviews: ' attr(data-reviews);
|
|
}
|
|
}
|
|
|
|
.box.shuffle-item,
|
|
.box:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.w2 {
|
|
width: 38.5%;
|
|
}
|
|
|
|
.w3 {
|
|
width: 59%;
|
|
}
|
|
|
|
.h2 {
|
|
height: 220px;
|
|
}
|
|
</style>
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<h2 class="col-12@sm">Adding and Removing Items</h2>
|
|
<p>When you add elements to the Shuffle container, notify the Shuffle instance with the <code>add</code> method. You must add the elements to the DOM yourself. This lets you control the default (DOM) sort order.</p>
|
|
<p>When you want to remove item(s), use <code>remove</code>. This will fade out the item(s) then remove it from the DOM.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
|
|
<div class="pull-left">
|
|
<button id="prepend">Prepend 5 Boxes</button>
|
|
<button id="append">Append 5 Boxes</button>
|
|
<button id="remove">Remove Some Boxes</button>
|
|
<button id="randomize">Randomize</button>
|
|
</div>
|
|
|
|
<div class="pull-right">
|
|
<span class="filter__label">Sort:</span>
|
|
<select id="sorter" class="sort-options">
|
|
<option value="dom">DOM Order</option>
|
|
<option value="most-reviews">Most Reviews</option>
|
|
<option value="least-reviews">Least Reviews</option>
|
|
<option value="random">Randomize</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<div id="my-shuffle" class="items">
|
|
<div class="box" data-reviews="45"></div>
|
|
<div class="box h2 w2" data-reviews="19"></div>
|
|
<div class="box" data-reviews="66"></div>
|
|
<div class="box" data-reviews="148"></div>
|
|
<div class="box w2" data-reviews="99"></div>
|
|
<div class="box" data-reviews="3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12@sm">
|
|
<h3>Adding elements</h3>
|
|
<p>Wherever you add the element in the DOM is where it will show up in the grid (assuming you’re using the default sort-by-dom-order). With this in mind, you can append, prepend, or insert elements wherever you need to get them to show up in the right order.</p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">Demo.prototype.setupEvents = function () {
|
|
document.querySelector('#append').addEventListener('click', this.onAppendBoxes.bind(this));
|
|
};
|
|
|
|
/**
|
|
* Create some DOM elements, append them to the shuffle container, then notify
|
|
* shuffle about the new items. You could also insert the HTML as a string.
|
|
*/
|
|
Demo.prototype.onAppendBoxes = function () {
|
|
var items = this._getArrayOfElementsToAdd();
|
|
|
|
items.forEach(function (item) {
|
|
this.element.appendChild(item);
|
|
}, this);
|
|
|
|
// Tell shuffle items have been appended.
|
|
// It expects an array of elements as the parameter.
|
|
this.shuffle.add(items);
|
|
};</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-12@sm">
|
|
<h3>Removing elements</h3>
|
|
<p>Shuffle will animate the element away and then remove it from the DOM once it's finished. It will then emit the <code>Shuffle.EventType.REMOVED</code> custom event with the array of elements in <code>event.detail.collection</code>.</p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">this.shuffle.remove([element1, element2]);</code></pre>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-12@sm">
|
|
<h2>Source code for this demo</h2>
|
|
<p><a href="{{ site.baseurl }}/js/demos/adding-removing.js">Demo source</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|