Update docs for adding, removing, advanced filters, sorting, and public methods.
Glen Cheney
8 years ago
parent
d7e4f4b720
commit
20823d49af
@ -1,21 +1,30 @@
|
||||
<h2>Adding and removing items<a href="#adding-removing"></a></h2>
|
||||
<p>You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.</p>
|
||||
|
||||
<h3>Add a collection</h3>
|
||||
<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">// Adds 2 <div>s to an existing Shuffle instance.
|
||||
var $item1 = $('<div class="gallery-item item1">')
|
||||
var $item2 = $('<div class="gallery-item item2">')
|
||||
var $items = $item1.add($item2);
|
||||
$('#my-shuffle').append($items);
|
||||
$('#my-shuffle').shuffle('appended', $items);</code></pre>
|
||||
<pre rel="JavaScript"><code class="language-javascript">/**
|
||||
* 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.shuffle.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>
|
||||
|
||||
<h3>Remove a collection</h3>
|
||||
<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">// Remove the 2 <div>s which were just added.
|
||||
var $items = $('.gallery-item');
|
||||
$('#my-shuffle').shuffle('remove', $items);</code></pre>
|
||||
<pre rel="JavaScript"><code class="language-javascript">this.shuffle.remove([element1, element2]);</code></pre>
|
||||
</div>
|
||||
|
||||
<p class="demo-link-container">Check out the <a href="{{ site.baseurl }}{% post_url 2013-06-19-adding-removing %}">demo</a>.</p>
|
||||
<p class="demo-link-container">Check out the <a href="{{ site.baseurl }}{% post_url 2013-06-19-adding-removing %}">adding and removing demo</a>.</p>
|
||||
|
||||
@ -1,31 +1,33 @@
|
||||
<h2>Advanced Filtering<a href="#advanced-filters"></a></h2>
|
||||
|
||||
<p>By passing a function to shuffle, you can customize the filtering to your hearts content. Shuffle will iterate over each item and give your function the element wrapped in jQuery and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
|
||||
<p>By passing a function to <code>filter</code>, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return <code>true</code> to keep the element or <code>false</code> to hide it.</p>
|
||||
|
||||
<h3>Example</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">// Filters elements with a data-title attribute with less than 10 characters
|
||||
$('#grid').shuffle('shuffle', function($el, shuffle) {
|
||||
return $el.data('title').length < 10;
|
||||
instance.filter(function (element) {
|
||||
return element.getAttribute('data-title').length < 10;
|
||||
});</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Searching</h3>
|
||||
<div class="code-block">
|
||||
<pre rel="JavaScript"><code class="language-javascript">// Advanced filtering
|
||||
$('.js-shuffle-search').on('keyup change', function() {
|
||||
var val = this.value.toLowerCase();
|
||||
$grid.shuffle('shuffle', function($el, shuffle) {
|
||||
Demo.prototype.addSearchFilter = function () {
|
||||
document.querySelector('.js-shuffle-search').addEventListener('keyup', this._handleSearchKeyup.bind(this));
|
||||
};
|
||||
|
||||
// Only search elements in the current group
|
||||
if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
|
||||
return false;
|
||||
}
|
||||
// Filter the shuffle instance by items with a title that matches the search input.
|
||||
Demo.prototype._handleSearchKeyup = function (evt) {
|
||||
var searchText = evt.target.value.toLowerCase();
|
||||
|
||||
var text = $.trim( $el.find('.picture-item__title').text() ).toLowerCase();
|
||||
return text.indexOf(val) !== -1;
|
||||
this.shuffle.filter(function (element, shuffle) {
|
||||
var titleElement = element.querySelector('.picture-item__title');
|
||||
var titleText = titleElement.textContent.toLowerCase().trim();
|
||||
|
||||
return titleText.indexOf(searchText) !== -1;
|
||||
});
|
||||
});</code></pre>
|
||||
};</code></pre>
|
||||
</div>
|
||||
|
||||
<p class="demo-link-container">Check out the <a href="{{ site.baseurl }}{% post_url 2013-05-02-compound-filters %}">compounded filters demo</a>.</p>
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<h2>Public Methods<a href="#adding-removing"></a></h2>
|
||||
<p>A list of the methods available to you and what they do.</p>
|
||||
|
||||
<ul class="breathable-list">
|
||||
<li><code>shuffle</code> - Filters all the shuffle items.</li>
|
||||
<li><code>sort</code> - Sorts the currently filtered shuffle items.</li>
|
||||
<li><code>update</code> - Repositions everything. Useful for when dimensions (like the window size) change.</li>
|
||||
<li><code>layout</code> - Use this instead of <code>update()</code> if you don't need the columns and gutters updated. Maybe an image loaded and now has a height.</li>
|
||||
<li><code>appended</code> - New items have been appended to the shuffle container.</li>
|
||||
<li><code>disable</code> - Disables Shuffle from updating dimensions and layout on resize.</li>
|
||||
<li><code>enable</code> - Enables Shuffle again.</li>
|
||||
<li><code>remove</code> - Remove one or more shuffle items.</li>
|
||||
<li><code>destroy</code> - Destroys Shuffle, removes events, styles, classes, and references.</li>
|
||||
<ul>
|
||||
<li><code>filter(category, sortObject)</code> - Filters all the shuffle items and then sorts them. <code>category</code> can be a string, array of strings, or a function. The sort object is optional and will use the last-used sort object.</li>
|
||||
<li><code>sort(sortObject)</code> - Sorts the currently filtered shuffle items.</li>
|
||||
<li><code>update()</code> - Repositions everything. Useful for when dimensions (like the window size) change.</li>
|
||||
<li><code>layout()</code> - Use this instead of <code>update()</code> if you don't need the columns and gutters updated. Maybe an image loaded and now has a height.</li>
|
||||
<li><code>add(newItems)</code> - New items have been appended to the shuffle container. <code>newItems</code> is an array of elements.</li>
|
||||
<li><code>disable()</code> - Disables Shuffle from updating dimensions and layout on resize.</li>
|
||||
<li><code>enable()</code> - Enables Shuffle again.</li>
|
||||
<li><code>remove()</code> - Remove one or more shuffle items.</li>
|
||||
<li><code>getItemByElement(element)</code> - Retrieve a <code>ShuffleItem</code> by its element.</li>
|
||||
<li><code>destroy()</code> - Destroys Shuffle, removes events, styles, classes, and references.</li>
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue