javascript Isotope.js

Posted 2021-05-03

var $container = $('.grid').isotope({
			itemSelector: '.project-item'
		});


		// filter with selects and checkboxes
		var $selects = $('select');

		$selects.change( function() {
			// map input values to an array
			var exclusives = [];
			var inclusives = [];
			// exclusive filters from selects
			$selects.each( function( i, elem ) {
				if ( elem.value ) {
					exclusives.push( elem.value );
				}
			});

			// combine exclusive and inclusive filters

			// first combine exclusives
			exclusives = exclusives.join('');

			var filterValue;
			if ( inclusives.length ) {
				// map inclusives with exclusives for
				filterValue = $.map( inclusives, function( value ) {
					return value + exclusives;
				});
				filterValue = filterValue.join(', ');
			} else {
				filterValue = exclusives;
			}

			$container.isotope({ filter: filterValue })
		});

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.project-posts .grid').isotope({
  itemSelector: '.project-item'
});

// store filter for each group
var filters = {};

$('.filters').on( 'click', '.button', function( event ) {
  var $button = $( event.currentTarget );
  // get group key
  var $buttonGroup = $button.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $button.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

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

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}