Vestride_Shuffle/docs/_posts/2013-06-19-adding-removing.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
photoCredit: false
---
<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">
    <div class="col-12@sm">
      <h2>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>
  </div>
</section>

<section class="container">
  <div class="row">
    <div class="col-12@sm">

      <fieldset class="filters-group">
        <legend class="filter-label">Sort</legend>
        <div class="btn-group" id="sorter">
          <label class="btn active">
            <input type="radio" name="sort-value" value="dom" checked /> DOM Order
          </label>
          <label class="btn">
            <input type="radio" name="sort-value" value="most-reviews" /> Most Reviews
          </label>
          <label class="btn">
            <input type="radio" name="sort-value" value="least-reviews" /> Least Reviews
          </label>
        </div>
      </fieldset>

      <br>
      <fieldset class="filters-group">
        <legend class="filter-label">Filter</legend>
        <div class="btn-group" id="filterer">
          <label class="btn active">
            <input type="radio" name="filter-value" value="none" checked /> None
          </label>
          <label class="btn">
            <input type="radio" name="filter-value" value="odd-reviews" /> Odd number of reviews
          </label>
          <label class="btn">
            <input type="radio" name="filter-value" value="even-reviews" /> Even number of reviews
          </label>
        </div>
      </fieldset>

      <div>
        <br>
        <p class="filter-label">Actions</p>
        <div class="btn-group">
          <button class="btn" id="prepend">Prepend 5 Boxes</button>
          <button class="btn" id="append">Append 5 Boxes</button>
          <button class="btn" id="remove">Remove Some Boxes</button>
          <button class="btn" id="randomize">Randomize</button>
        </div>
      </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&rsquo;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">setupEvents() {
  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.
 */
onAppendBoxes() {
  var elements = this._getArrayOfElementsToAdd();

  elements.forEach(function (element) {
    this.element.appendChild(element);
  }, this);

  // Tell shuffle elements have been appended.
  // It expects an array of elements as the parameter.
  this.shuffle.add(elements);
};</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> event with the array of elements in <code>data.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>