New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sort by selected dynamic category #901

Closed
ASTN1 opened this Issue Apr 22, 2015 · 3 comments

Comments

2 participants
@ASTN1
Copy link

ASTN1 commented Apr 22, 2015

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.
    faded down elements

Thank you very much for your help!

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Apr 22, 2015

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

This comment has been minimized.

Copy link
Author

ASTN1 commented Apr 22, 2015

Hi, thank you for your answer.

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

@desandro desandro changed the title Sort dynamic categories Sort by selected category Jun 4, 2015

@desandro desandro changed the title Sort by selected category Sort by selected dynamic category Jun 4, 2015

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Jun 4, 2015

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
  });

desandro added a commit to metafizzy/isotope-docs that referenced this issue Jun 4, 2015

@desandro desandro closed this Jun 23, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment