diff --git a/_includes/adding-removing.html b/_includes/adding-removing.html index 2dcb768..a764c8e 100644 --- a/_includes/adding-removing.html +++ b/_includes/adding-removing.html @@ -1,21 +1,30 @@

Adding and removing items

You can add and remove elements from shuffle after it has been created. This also works for infinite scrolling.

-

Add a collection

+

Adding elements

+

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.

- 
// 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);
+ 
/**
+ * 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);
+};
-

Remove a collection

+

Removing elements

+

Shuffle will animate the element away and then remove it from the DOM once it's finished. It will then emit the Shuffle.EventType.REMOVED custom event with the array of elements in event.detail.collection.

- 
// Remove the 2 <div>s which were just added.
-var $items = $('.gallery-item');
-$('#my-shuffle').shuffle('remove', $items);
+ 
this.shuffle.remove([element1, element2]);
-

Check out the demo.

+

Check out the adding and removing demo.

diff --git a/_includes/advanced-filters.html b/_includes/advanced-filters.html index 13a999d..c4bf1e2 100644 --- a/_includes/advanced-filters.html +++ b/_includes/advanced-filters.html @@ -1,31 +1,33 @@

Advanced Filtering

-

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 true to keep the element or false to hide it.

+

By passing a function to filter, you can fully customize filtering items. Shuffle will iterate over each item and give your function the element and the shuffle instance. Return true to keep the element or false to hide it.

Example

// 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;
 });

Searching

// 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;
   });
-});
+};

Check out the compounded filters demo.

diff --git a/_includes/public-methods.html b/_includes/public-methods.html index beed951..8eb7ab1 100644 --- a/_includes/public-methods.html +++ b/_includes/public-methods.html @@ -1,14 +1,15 @@

Public Methods

A list of the methods available to you and what they do.

-