Sort by selected dynamic category

[ASTN1]

Hi,

firstly I would like to thank you for your work. Isotope is awesome!
Then I hope you'll be able to help me. I'm currently trying to build a sort-able portfolio using Isotope and hit a brickwall because of 2 matters:

• My buttons set is a list of Wordpress categories, so it's dynamic (categories can be added or removed at any time). It means I cannot define sort tags as recommanded, e.g.

getSortData: {
  green : function ( $elem ) {
    return $elem.data('green');
  },
  red : function ( $elem ) {
    return $elem.data('red');
  },
  blue : function ( $elem ) {
    return $elem.data('blue');
  }
}

I'd rather need a getSortData function which is dynamic, but don't have any idea of how to write it... e.g.

getSortData: {
  x : function ( $elem ) {
    return $elem.data(x);
  }
}

• Then I'd like the elements which aren't matching the selected category to be faded down.
  Can figure how to do it as well... e.g.
  

Thank you very much for your help!

[desandro]

I'm sorry to see you're having trouble with Isotope. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

[ASTN1]

Hi, thank you for your answer.

My test case doesn't work well unfortunately: http://codepen.io/anon/pen/EjxWmB

[desandro]

Thanks for that. Here's my solution: http://codepen.io/desandro/pen/zGZywM

var selectedCategory;

var $grid = $('.grid').isotope({
  getSortData: {
    // sort items with selected category first
    selectedCategory: function( itemElem ) {
      return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
    }
  }
});

var $items = $('.grid').find('.grid-item');

$('.sort-button-group').on( 'click', '.button', function() {
  // set selectedCategory
  selectedCategory = $( this ).attr('data-category');
  if ( selectedCategory == 'all' ) {
    $grid.isotope({
      sortBy: 'original-order'
    });
    return;
  }

  // update sort data now that selectedCategory has changed
  $grid.isotope('updateSortData');
  $grid.isotope({ sortBy: 'selectedCategory' });
});

Given your scenario, my solution is to use sorting so that the selected category gets sorted to the top. Instead of using multiple getSortData properties, we set only one to use the selectedCategory. Then, when a button is clicked, selectedCategory is changed. This allows selectedCategory to be anything to match your HTML. The other piece of the puzzle is to use updateSortData so that items with the selected category are now sorted first.

As for fading out un-selected items, that can be done with jQuery, rather than using funny stuff with Isotope.

  // change opacity for selected/unselected items
  var selectedClass = '.' + selectedCategory;
  $items.filter( selectedClass ).css({
    opacity: 1
  });
  $items.not( selectedClass ).css({
    opacity: 0.25
  });