Enqueue and Load Isotope

Enqueue And Load Isotope

	/* Setup Isotope in functions.php*/
	function add_isotope() {
		wp_register_script('isotope', get_stylesheet_directory_uri() . '/assets/js/isotope.pkgd.min.js', array('jquery'), true);
		wp_register_script('isotope-init', get_stylesheet_directory_uri() . '/assets/js/the-isotope.js', array('jquery', 'isotope'), true);
		wp_enqueue_script('isotope-init');
	}
	add_action('wp_enqueue_scripts', 'add_isotope');


/* JS code that uses isotope (file name 'the-isotope.js' above) */
jQuery(function ($) {
  $(window).load(function() {
    // quick search regex
    var qsRegex;
    var buttonFilter;

    // init Isotope
    var $container = $('#isotope-list').isotope({
      itemSelector: '.item',
      layoutMode: 'fitRows',
      filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
      }
    });

    // reveal all items after init
    var iso = $container.data('isotope');
    $container.isotope( 'reveal', iso.items );

    // use value of search field to filter
    var $quicksearch = $('#quicksearch').keyup( debounce( function() {
      qsRegex = new RegExp( $quicksearch.val(), 'gi' );
      $container.isotope();
    }) );

    $('#filters').on( 'click', 'button', function() {
      buttonFilter = $( this ).attr('data-filter');
      $container.isotope();
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
      });
    });

    $('#resetme').click ( function(){
      qsRegex = new RegExp( '', 'gi');
      buttonFilter = '*';
      $container.isotope()
      $('#quicksearch').val("");
    });

  });
});

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  return function debounced() {
    if ( timeout ) {
      clearTimeout( timeout );
    }
    function delayed() {
      fn();
      timeout = null;
    }
    setTimeout( delayed, threshold || 100 );
  };
}