javascript - 当过滤器上没有可用项目时，如何在 shuffle.js 上显示消息？

Question

演示

我正在使用shuffle.js。当过滤器上没有可用项目时，如何显示“未找到项目”消息？

例如，如果您选择“红色”和“三角形”，则输出为空。

'use strict';

var Shuffle = window.shuffle;

// ES7 will have Array.prototype.includes.
function arrayIncludes(array, value) {
  return array.indexOf(value) !== -1;
}

// Convert an array-like object to a real array.
function toArray(thing) {
  return Array.prototype.slice.call(thing);
}

var Demo = function (element) {
  this.shapes = toArray(document.querySelectorAll('.js-shapes input'));
  this.colors = toArray(document.querySelectorAll('.js-colors button'));

  this.shuffle = new Shuffle(element, {
    easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
    sizer: '.the-sizer',
  });

  this.filters = {
    shapes: [],
    colors: [],
  };

  this._bindEventListeners();
};

/**
 * Bind event listeners for when the filters change.
 */
Demo.prototype._bindEventListeners = function () {
  this._onShapeChange = this._handleShapeChange.bind(this);
  this._onColorChange = this._handleColorChange.bind(this);

  this.shapes.forEach(function (input) {
    input.addEventListener('change', this._onShapeChange);
  }, this);

  this.colors.forEach(function (button) {
    button.addEventListener('click', this._onColorChange);
  }, this);
};

/**
 * Get the values of each checked input.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentShapeFilters = function () {
  return this.shapes.filter(function (input) {
    return input.checked;
  }).map(function (input) {
    return input.value;
  });
};

/**
 * Get the values of each `active` button.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentColorFilters = function () {
  return this.colors.filter(function (button) {
    return button.classList.contains('active');
  }).map(function (button) {
    return button.getAttribute('data-value');
  });
};

/**
 * A shape input check state changed, update the current filters and filte.r
 */
Demo.prototype._handleShapeChange = function () {
  this.filters.shapes = this._getCurrentShapeFilters();
  this.filter();
};

/**
 * A color button was clicked. Update filters and display.
 * @param {Event} evt Click event object.
 */
Demo.prototype._handleColorChange = function (evt) {
  var button = evt.currentTarget;

  // Treat these buttons like radio buttons where only 1 can be selected.
  if (button.classList.contains('active')) {
    button.classList.remove('active');
  } else {
    this.colors.forEach(function (btn) {
      btn.classList.remove('active');
    });

    button.classList.add('active');
  }

  this.filters.colors = this._getCurrentColorFilters();
  this.filter();
};

/**
 * Filter shuffle based on the current state of filters.
 */
Demo.prototype.filter = function () {
  if (this.hasActiveFilters()) {
    this.shuffle.filter(this.itemPassesFilters.bind(this));
  } else {
    this.shuffle.filter(Shuffle.ALL_ITEMS);
  }
};

/**
 * If any of the arrays in the `filters` property have a length of more than zero,
 * that means there is an active filter.
 * @return {boolean}
 */
Demo.prototype.hasActiveFilters = function () {
  return Object.keys(this.filters).some(function (key) {
    return this.filters[key].length > 0;
  }, this);
};

/**
 * Determine whether an element passes the current filters.
 * @param {Element} element Element to test.
 * @return {boolean} Whether it satisfies all current filters.
 */
Demo.prototype.itemPassesFilters = function (element) {
  var shapes = this.filters.shapes;
  var colors = this.filters.colors;
  var shape = element.getAttribute('data-shape');
  var color = element.getAttribute('data-color');

  // If there are active shape filters and this shape is not in that array.
  if (shapes.length > 0 && !arrayIncludes(shapes, shape)) {
    return false;
  }

  // If there are active color filters and this color is not in that array.
  if (colors.length > 0 && !arrayIncludes(colors, color)) {
    return false;
  }

  return true;
};

document.addEventListener('DOMContentLoaded', function () {
  window.demo = new Demo(document.querySelector('.js-shuffle'));
});

@charset "UTF-8";
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block; }

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/* Forms
   ========================================================================== */
/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  font: inherit; }

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */
button,
input,
select {
  /* 2 */
  overflow: visible; }

/**
 * Remove the margin in Safari.
 * 1. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  /* 1 */
  margin: 0; }

/**
 * Remove the inheritence of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritence of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Change the cursor in all browsers (opinionated).
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer; }

/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */
[disabled] {
  cursor: default; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

   

.question {
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out; }

.question--collapsed {
  height: 0 !important;
  margin: 0;
  border-width: 0; }

.question--collapsed + .question {
  margin-top: 0; }

.question--unanswered {
  padding-top: 1.25em;
  border-top: 2px solid #2ECC71; }

.question__title {
  margin-top: 0; }

.question__answer {
  margin-bottom: 0; }

.btn-group::before, .btn-group::after {
  content: " ";
  display: table; }

.btn-group::after {
  clear: both; }

.btn-group .btn {
  float: left;
  border-radius: 0; }
  .btn-group .btn:first-child {
    border-radius: 6px 0 0 6px; }
  .btn-group .btn:last-child {
    border-radius: 0 6px 6px 0; }

.btn,
button {
  display: inline-block;
  padding: .75em .375em;
  -webkit-appearance: none;
  text-align: center;
  color: white;
  border-radius: .0625em;
  border: 0;
  background-color: #34495E;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out; }
  .btn:hover,
  button:hover {
    background-color: #4a6885;
    text-decoration: none; }
  .btn.active, .btn:active,
  button.active,
  button:active {
    background-color: #2C3E50;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
  .btn:active,
  button:active {
    -webkit-transition: none;
    transition: none; }

.btn--warning {
  background-color: #E67E22; }
  .btn--warning:hover {
    background-color: #ea9347; }
  .btn--warning.active, .btn--warning:active {
    background-color: #D35400; }

.btn--primary {
  background-color: #3498DB; }
  .btn--primary:hover {
    background-color: #57aae1; }
  .btn--primary.active, .btn--primary:active {
    background-color: #3498DB; }

.btn--danger {
  background-color: #E74C3C; }
  .btn--danger:hover {
    background-color: #eb6d60; }
  .btn--danger.active, .btn--danger:active {
    background-color: #E74C3C; }

.btn--go {
  background-color: #2ECC71; }
  .btn--go:hover {
    background-color: #4cd787; }
  .btn--go.active, .btn--go:active {
    background-color: #2ECC71; }

.filter-group .btn {
  position: relative; }
  .filter-group .btn.active:before, .filter-group .btn.active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s; }
  .filter-group .btn:before {
    background-color: #2C3E50;
    border-radius: 50%; }
  .filter-group .btn:after {
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../img/check.svg); }
  .filter-group .btn.active:before, .filter-group .btn.active:after {
    opacity: 1; }

@media (max-width: 47.9375em) {
  .btn,
  button {
    font-size: .875em; } }

@media (max-width: 30em) {
  .btn,
  button {
    font-size: .75em; } }

.text-center {
  text-align: center; }

.ib {
  display: inline-block; }

@media screen and (max-width: 767px) {
  .hidden\@xs {
    display: none; } }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.clearfix,
.clearfix::after {
  content: " ";
  display: table;
  clear: both; }

.pull-left {
  float: left; }

.pull-right {
  float: right; }

.full-width {
  width: 100%; }

.full-height {
  height: 100%; }

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }

.table-center-wrap {
  display: table;
  table-layout: fixed; }

.table-center {
  display: table-cell;
  vertical-align: middle; }

.compound-filter-options {
  margin-top: 20px;
  margin-bottom: 40px; }

.filter-group--compound button {
  width: 40px;
  height: 40px;
  padding: 0; }

.filter-group--compound label {
  cursor: pointer; }

.filter-group--compound .ib + .ib {
  margin-left: 8px; }

.filter-group__label--compound {
  margin: 0 0 5px; }

.shape-shuffle-container {
  position: relative;
  overflow: hidden; }

.shape {
  position: relative;
  margin-left: 0;
  margin-top: 10px; }
  .shape .shape__space {
    width: 100%;
    height: 100%;
    background-color: black;
    border-style: solid;
    border-width: 0;
    border-color: transparent; }

.shape--blue .shape__space {
  background-color: #3498DB;
  border-bottom-color: #3498DB; }

.shape--red .shape__space {
  background-color: #E74C3C;
  border-bottom-color: #E74C3C; }

.shape--orange .shape__space {
  background-color: #F39C12;
  border-bottom-color: #F39C12; }

.shape--green .shape__space {
  background-color: #2ECC71;
  border-bottom-color: #2ECC71; }

.shape--circle .shape__space {
  border-radius: 50%; }

.shape--diamond .shape__space {
  -webkit-transform: rotate(45deg) scale(0.70711);
          transform: rotate(45deg) scale(0.70711); }

.shape--triangle .shape__space {
  padding-top: 9px;
  height: 0;
  width: 0;
  border-width: 0 66px 114px 66px;
  background-color: transparent;
  margin: auto; }

@media (min-width: 425px) {
  .shape--triangle .shape__space {
    padding-top: 12px;
    height: 0;
    width: 0;
    border-width: 0 90px 156px 90px; } }

@media (min-width: 600px) {
  .shape--triangle .shape__space {
    padding-top: 17.5px;
    height: 0;
    width: 0;
    border-width: 0 131px 227px 131px; } }

@media (min-width: 768px) {
  .shape--triangle .shape__space {
    padding-top: 10px;
    height: 0;
    width: 0;
    border-width: 0 74px 128px 74px; } }

@media (min-width: 1024px) {
  .shape--triangle .shape__space {
    padding-top: 13.5px;
    height: 0;
    width: 0;
    border-width: 0 102px 177px 102px; } }

@media (min-width: 1200px) {
  .shape--triangle .shape__space {
    padding-top: 18px;
    height: 0;
    width: 0;
    border-width: 0 135px 234px 135px; } }

@media (min-width: 1392px) {
  .shape--triangle .shape__space {
    padding-top: 19px;
    height: 0;
    width: 0;
    border-width: 0 142px 246px 142px; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.0/shuffle.js"></script>
<section class="container">

  <div class="filter-options filter-options--compound row">

    <div class="col-6@sm">
      <div class="filter-group filter-group--compound js-colors">
        <h5 class="filter-group__label filter-group__label--compound">Colors</h5>
        <button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button>
        <button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button>
        <button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button>
        <button class="btn btn--warning" data-value="orange"><span class="visuallyhidden">Orange</span></button>
      </div>
    </div>

    <div class="col-6@sm">
      <div class="filter-group filter-group--compound js-shapes">
        <h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
        <span class="ib">
          <input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
        </span>
      </div>
    </div>

  </div>

  <div class="row">
    <div class="shape-shuffle-container js-shuffle">
      
      <div class="col-3@xs col-3@sm shape shape--circle shape--blue" data-shape="circle" data-color="blue" data-size="20">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--diamond shape--red" data-shape="diamond" data-color="red">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--triangle shape--green" data-shape="triangle" data-color="green">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--triangle shape--orange" data-shape="triangle" data-color="orange">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--square shape--red" data-shape="square" data-color="red">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--diamond shape--green" data-shape="diamond" data-color="green">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--circle shape--red" data-shape="circle" data-color="red">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--square shape--green" data-shape="square" data-color="green">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--circle shape--orange" data-shape="circle" data-color="orange">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--diamond shape--blue" data-shape="diamond" data-color="blue">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--square shape--orange" data-shape="square" data-color="orange">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--square shape--blue" data-shape="square" data-color="blue">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="the-sizer col-1@xs col-1@sm"></div>
    </div>
  </div>

</section>

标签： javascriptjquery

Answer 1

尝试随机播放选项this.shuffle.visibleItems

this.message = document.querySelector('.js-message');
...
Demo.prototype.filter = function () {
 ...
  if(this.shuffle.visibleItems == 0){
    this.message.innerHTML = (this.shuffle.visibleItems) + " items";
  }
  else{
    this.message.innerHTML ="";
  }
};

这个对我有用！

'use strict';

var Shuffle = window.shuffle;

// ES7 will have Array.prototype.includes.
function arrayIncludes(array, value) {
  return array.indexOf(value) !== -1;
}

// Convert an array-like object to a real array.
function toArray(thing) {
  return Array.prototype.slice.call(thing);
}

var Demo = function (element) {
  this.shapes = toArray(document.querySelectorAll('.js-shapes input'));
  this.colors = toArray(document.querySelectorAll('.js-colors button'));
  this.message = document.querySelector('.js-message');

  this.shuffle = new Shuffle(element, {
    easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
    sizer: '.the-sizer',
  });

  this.filters = {
    shapes: [],
    colors: [],
  };

  this._bindEventListeners();
};

/**
 * Bind event listeners for when the filters change.
 */
Demo.prototype._bindEventListeners = function () {
  this._onShapeChange = this._handleShapeChange.bind(this);
  this._onColorChange = this._handleColorChange.bind(this);

  this.shapes.forEach(function (input) {
    input.addEventListener('change', this._onShapeChange);
  }, this);

  this.colors.forEach(function (button) {
    button.addEventListener('click', this._onColorChange);
  }, this);
};

/**
 * Get the values of each checked input.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentShapeFilters = function () {
  return this.shapes.filter(function (input) {
    return input.checked;
  }).map(function (input) {
    return input.value;
  });
};

/**
 * Get the values of each `active` button.
 * @return {Array.<string>}
 */
Demo.prototype._getCurrentColorFilters = function () {
  return this.colors.filter(function (button) {
    return button.classList.contains('active');
  }).map(function (button) {
    return button.getAttribute('data-value');
  });
};

/**
 * A shape input check state changed, update the current filters and filte.r
 */
Demo.prototype._handleShapeChange = function () {
  this.filters.shapes = this._getCurrentShapeFilters();
  this.filter();
};

/**
 * A color button was clicked. Update filters and display.
 * @param {Event} evt Click event object.
 */
Demo.prototype._handleColorChange = function (evt) {
  var button = evt.currentTarget;

  // Treat these buttons like radio buttons where only 1 can be selected.
  if (button.classList.contains('active')) {
    button.classList.remove('active');
  } else {
    this.colors.forEach(function (btn) {
      btn.classList.remove('active');
    });

    button.classList.add('active');
  }

  this.filters.colors = this._getCurrentColorFilters();
  this.filter();
};

/**
 * Filter shuffle based on the current state of filters.
 */
Demo.prototype.filter = function () {
  if (this.hasActiveFilters()) {
    this.shuffle.filter(this.itemPassesFilters.bind(this));
  } else {
    this.shuffle.filter(Shuffle.ALL_ITEMS);
  }

  if(this.shuffle.visibleItems == 0){
      this.message.innerHTML = (this.shuffle.visibleItems) + " items";
  }
  else{
  this.message.innerHTML = "";
  }
};

/**
 * If any of the arrays in the `filters` property have a length of more than zero,
 * that means there is an active filter.
 * @return {boolean}
 */
Demo.prototype.hasActiveFilters = function () {
  return Object.keys(this.filters).some(function (key) {
    return this.filters[key].length > 0;
  }, this);
};

/**
 * Determine whether an element passes the current filters.
 * @param {Element} element Element to test.
 * @return {boolean} Whether it satisfies all current filters.
 */
Demo.prototype.itemPassesFilters = function (element) {
  var shapes = this.filters.shapes;
  var colors = this.filters.colors;
  var shape = element.getAttribute('data-shape');
  var color = element.getAttribute('data-color');

  // If there are active shape filters and this shape is not in that array.
  if (shapes.length > 0 && !arrayIncludes(shapes, shape)) {
    return false;
  }

  // If there are active color filters and this color is not in that array.
  if (colors.length > 0 && !arrayIncludes(colors, color)) {
    return false;
  }

  return true;
};

document.addEventListener('DOMContentLoaded', function () {
  window.demo = new Demo(document.querySelector('.js-shuffle'));
});

@charset "UTF-8";
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block; }

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline; }

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */ }

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder; }

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none; }

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */ }

/* Forms
   ========================================================================== */
/**
 * Change font properties to `inherit` in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  font: inherit; }

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold; }

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 * 2. Show the overflow in Edge, Firefox, and IE.
 */
button,
input,
select {
  /* 2 */
  overflow: visible; }

/**
 * Remove the margin in Safari.
 * 1. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  /* 1 */
  margin: 0; }

/**
 * Remove the inheritence of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritence of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none; }

/**
 * Change the cursor in all browsers (opinionated).
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer; }

/**
 * Restore the default cursor to disabled elements unset by the previous rule.
 */
[disabled] {
  cursor: default; }

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText; }

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

   

.question {
  margin: 2em 0;
  overflow: hidden;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out; }

.question--collapsed {
  height: 0 !important;
  margin: 0;
  border-width: 0; }

.question--collapsed + .question {
  margin-top: 0; }

.question--unanswered {
  padding-top: 1.25em;
  border-top: 2px solid #2ECC71; }

.question__title {
  margin-top: 0; }

.question__answer {
  margin-bottom: 0; }

.btn-group::before, .btn-group::after {
  content: " ";
  display: table; }

.btn-group::after {
  clear: both; }

.btn-group .btn {
  float: left;
  border-radius: 0; }
  .btn-group .btn:first-child {
    border-radius: 6px 0 0 6px; }
  .btn-group .btn:last-child {
    border-radius: 0 6px 6px 0; }

.btn,
button {
  display: inline-block;
  padding: .75em .375em;
  -webkit-appearance: none;
  text-align: center;
  color: white;
  border-radius: .0625em;
  border: 0;
  background-color: #34495E;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out; }
  .btn:hover,
  button:hover {
    background-color: #4a6885;
    text-decoration: none; }
  .btn.active, .btn:active,
  button.active,
  button:active {
    background-color: #2C3E50;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
  .btn:active,
  button:active {
    -webkit-transition: none;
    transition: none; }

.btn--warning {
  background-color: #E67E22; }
  .btn--warning:hover {
    background-color: #ea9347; }
  .btn--warning.active, .btn--warning:active {
    background-color: #D35400; }

.btn--primary {
  background-color: #3498DB; }
  .btn--primary:hover {
    background-color: #57aae1; }
  .btn--primary.active, .btn--primary:active {
    background-color: #3498DB; }

.btn--danger {
  background-color: #E74C3C; }
  .btn--danger:hover {
    background-color: #eb6d60; }
  .btn--danger.active, .btn--danger:active {
    background-color: #E74C3C; }

.btn--go {
  background-color: #2ECC71; }
  .btn--go:hover {
    background-color: #4cd787; }
  .btn--go.active, .btn--go:active {
    background-color: #2ECC71; }

.filter-group .btn {
  position: relative; }
  .filter-group .btn.active:before, .filter-group .btn.active:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    opacity: 0;
    -webkit-transition: .2s;
    transition: .2s; }
  .filter-group .btn:before {
    background-color: #2C3E50;
    border-radius: 50%; }
  .filter-group .btn:after {
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../img/check.svg); }
  .filter-group .btn.active:before, .filter-group .btn.active:after {
    opacity: 1; }

@media (max-width: 47.9375em) {
  .btn,
  button {
    font-size: .875em; } }

@media (max-width: 30em) {
  .btn,
  button {
    font-size: .75em; } }

.text-center {
  text-align: center; }

.ib {
  display: inline-block; }

@media screen and (max-width: 767px) {
  .hidden\@xs {
    display: none; } }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.clearfix,
.clearfix::after {
  content: " ";
  display: table;
  clear: both; }

.pull-left {
  float: left; }

.pull-right {
  float: right; }

.full-width {
  width: 100%; }

.full-height {
  height: 100%; }

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0; }

.table-center-wrap {
  display: table;
  table-layout: fixed; }

.table-center {
  display: table-cell;
  vertical-align: middle; }

.compound-filter-options {
  margin-top: 20px;
  margin-bottom: 40px; }

.filter-group--compound button {
  width: 40px;
  height: 40px;
  padding: 0; }

.filter-group--compound label {
  cursor: pointer; }

.filter-group--compound .ib + .ib {
  margin-left: 8px; }

.filter-group__label--compound {
  margin: 0 0 5px; }

.shape-shuffle-container {
  position: relative;
  overflow: hidden; }

.shape {
  position: relative;
  margin-left: 0;
  margin-top: 10px; }
  .shape .shape__space {
    width: 100%;
    height: 100%;
    background-color: black;
    border-style: solid;
    border-width: 0;
    border-color: transparent; }

.shape--blue .shape__space {
  background-color: #3498DB;
  border-bottom-color: #3498DB; }

.shape--red .shape__space {
  background-color: #E74C3C;
  border-bottom-color: #E74C3C; }

.shape--orange .shape__space {
  background-color: #F39C12;
  border-bottom-color: #F39C12; }

.shape--green .shape__space {
  background-color: #2ECC71;
  border-bottom-color: #2ECC71; }

.shape--circle .shape__space {
  border-radius: 50%; }

.shape--diamond .shape__space {
  -webkit-transform: rotate(45deg) scale(0.70711);
          transform: rotate(45deg) scale(0.70711); }

.shape--triangle .shape__space {
  padding-top: 9px;
  height: 0;
  width: 0;
  border-width: 0 66px 114px 66px;
  background-color: transparent;
  margin: auto; }

@media (min-width: 425px) {
  .shape--triangle .shape__space {
    padding-top: 12px;
    height: 0;
    width: 0;
    border-width: 0 90px 156px 90px; } }

@media (min-width: 600px) {
  .shape--triangle .shape__space {
    padding-top: 17.5px;
    height: 0;
    width: 0;
    border-width: 0 131px 227px 131px; } }

@media (min-width: 768px) {
  .shape--triangle .shape__space {
    padding-top: 10px;
    height: 0;
    width: 0;
    border-width: 0 74px 128px 74px; } }

@media (min-width: 1024px) {
  .shape--triangle .shape__space {
    padding-top: 13.5px;
    height: 0;
    width: 0;
    border-width: 0 102px 177px 102px; } }

@media (min-width: 1200px) {
  .shape--triangle .shape__space {
    padding-top: 18px;
    height: 0;
    width: 0;
    border-width: 0 135px 234px 135px; } }

@media (min-width: 1392px) {
  .shape--triangle .shape__space {
    padding-top: 19px;
    height: 0;
    width: 0;
    border-width: 0 142px 246px 142px; } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.0/shuffle.js"></script>
<section class="container">

  <div class="filter-options filter-options--compound row">

    <div class="col-6@sm">
      <div class="filter-group filter-group--compound js-colors">
        <h5 class="filter-group__label filter-group__label--compound">Colors</h5>
        <button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button>
        <button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button>
        <button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button>
        <button class="btn btn--warning" data-value="orange"><span class="visuallyhidden">Orange</span></button>
      </div>
    </div>

    <div class="col-6@sm">
      <div class="filter-group filter-group--compound js-shapes">
        <h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
        <span class="ib">
          <input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label>
        </span>
        <span class="ib">
          <input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
        </span>
      </div>
    </div>

  </div>

  <div class="row">
    <span class="js-message"></span>
    <div class="shape-shuffle-container js-shuffle">
      
      <div class="col-3@xs col-3@sm shape shape--circle shape--blue" data-shape="circle" data-color="blue">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--diamond shape--red" data-shape="diamond" data-color="red">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      
      <div class="col-3@xs col-3@sm shape shape--triangle shape--green" data-shape="diamond" data-color="blue">
        <div class="aspect">
          <div class="aspect__inner">
            <div class="shape__space"></div>
          </div>
        </div>
      </div>
      

      <div class="the-sizer col-1@xs col-1@sm"></div>
    </div>
  </div>

</section>