Isotope - Sorting elements. First by this and then by that

Question

Here's a JSFiddle to what I have working so far: http://jsfiddle.net/FmBFt/1/ My problem is adapting the demo code to do what I want. The Isotope docs aren't that helpful for noob coders such as myself.

To explain what I need

I'm using ISOTOPE and have 6 categories. Each category will have any number of boxes within it. So the lilac category might have 3 boxes within it and the green category may have 8 boxes and so on. I have a list of links to each category. When a category name is clicked (for example: lilac category) I need all boxes with the top lilac border to be sorted by its class name "l" and moved to the top. I then want those lilac boxes to be sorted in order of date added, the most recent box displayed first. I would like that sorting functionality to be applied to all categories but really haven't a clue how to do it.

I noticed that you can sort by "date-category" but all that does is group all categories together, it doesn't move a certain category to the top like I need.

I haven't a clue how to adapt http://jsfiddle.net/FmBFt/1/ to do what I want, could anyone help me out?

EDIT: Well I have one answer so far that has just confused the hell out of me but I'm pretty sure my problem lies with the getSortData function within my JS:

    getSortData : {
      blogs : function( $elem ) {
        return $elem.find('.blogs');
      },
      symbol : function( $elem ) {
        return $elem.attr('data-symbol');
      },
      category : function( $elem ) {
        return $elem.attr('data-category');
      },
      number : function( $elem ) {
        return parseInt( $elem.find('.number').text(), 10 );
      },
      weight : function( $elem ) {
        return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
      },
      name : function ( $elem ) {
        return $elem.find('.name').text();
      }
    }

The category call in the code above looks like it could do it but I just need to find out how to adjust, at the moment all it does is group every category together but I need to group one at a time...anybody?

Answer 1

I was looking at the other answer while looking for a solution for this exact problem. In my case, sorting by platform for game titles. He gets incredibly technical and in depth with it and I can see how you got lost.

Here's one element from the getSortData that I've used:

flash : function ( $elem ) {
    if ($elem.find('.platform').text() == "Flash") {
        return $elem.find('.modes').text();
    } else {
        return "Z";
    }
}

What I'm doing here is checking to see if the value that you would otherwise just return is what I want ie. "Flash". If it is, it returns that perfectly fine. You could also give it the value of 0. Then if its anything else you return a value 'MORE' than your wanted value.

So in my case my first value was Flash and then all other values are set to Z. If you wanted you could even have multiple checks. "if elseif elseif" in order to sort multiple things up to the top.

Hope this helps.

Answer 2

There are two different parts involved here. First, we have the sorting itself. That's handled by isotope and none of your business. What you need is the second part: A comparator.

The comparator is a function defined by you which returns a "key" of sorts. isotope will compare all the keys and sort them in a natural way (texts are sorted by ascii: '1', '10', '100', '11', '2'), numbers are sorted by value (1, 2, 10, 11, 100).

That's what getSortData() does: It returns several functions which isotope can use to create keys. When sorting, you have to specify which function to use. If you specify foo, then isotope will call getSortData().foo(x) for each node to be sorted where x is replaced with each node.

After creating this key list, isotope will sort the keys (and with this information the nodes themselves).

So what you need to a good key generator. My suggestion is to convert the date to milliseconds and that number to a string and left-pad this with 0. See this answer for left padding: How can I pad a value with leading zeros?

Then prepend this string with '1' if the class is 'l' or '0' otherwise:

return (cls == 'l' ? '0' : '1') + zeroFill( dateInMillis, 16 );

That will sort boxes with the correct class first ('0' is less than '1') and then it will sort each type of box by date.

Alternatively, you can give each box with the wrong class the same key (so they don't change order):

return (cls == 'l' ? zeroFill( dateInMillis, 16 ) : 'xxx');