Callback after layoutComplete executed too early

[Speekless]

Hi,

I'm using the filter functionality, with a callback function to update item count for each filter. I'm triggering an updatecount() function on layoutComplete, as such:

$("#container").isotope( 'on', 'layoutComplete', function( isoInstance, laidOutItems ) {
    updatecount();
} );

While this works fine in most combinations, sometimes my updatecount() function returns an element count that is incorrect. I've isolated the issue to the selector incorrectly returning elements that are set to hidden. If I run the same selector by hand after the layout has finished updating, the returned value is correct (doesn't return hidden elements). So I can only assume the "callback" is being run before the layout has been completely updated?

[desandro]

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

[Speekless]

Here you go. If you click on "Football", then on "5 Kilometers" (in that order), the count of the other "distance" classes doesn't update. If you run the same selector by hand (the part that is being run inside the updatecount() function), it seems to work fine.

http://codepen.io/anon/pen/EzLsJ

[desandro]

(FYI, I changed sotope v1 jquery.isotope.js to Isotope v2 isotope.pkgd.js to get your example working).

Ah, yes. This appears to be a bug 🪲 When no items need to be moved after a filter, then layoutComplete is triggered immediately, where it should be triggered after the hide transition is completed.

Thank you for reporting this. Unfortunately I do not have a solution at the moment. I'll add this to the work queue for Isotope v2.1

[Speekless]

Oh sorry, no clue what happened, the example was working for me (now it isn't anymore :-D).

Thank you for your time. I will try it with a timeout for now, I'm hoping that should work.

[rtack]

I've run into the same problem. The layoutComplete callback happens before the onTransitionEnd event which will call the Item.prototype.hide() function.

When layout is complete I am checking if there are categories of items without an entry and hide the category.

As a workaround I've added 
    $('.isotope').isotope('on', 'layoutComplete', function (isoInstance, laidOutItems) {
        setTimeout(function () {
            notifyLayoutComplete();
        }, 1000);
    });

I've also come across http://stackoverflow.com/questions/5433862/callback-for-jquery-plugin-isotope where people have similar problems, and the accepted answer is

"$("#isotope").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
     notifyLayoutComplete();
});"

Would you say that that's a good workaround until you can implement in isotope itselfl?

[ghost]

Yes, that works!

[desandro]

Isotope v2.2.0 has been released with a new event arrangeComplete. Try it out: http://codepen.io/desandro/pen/pvXxRN This issue is now resolved 🐰

[Youhan]

I am using arrangeComplete event, but it seems that it is triggering too early. I just set a timeout for 1 sec and it returns fine!

Please test.

[stuk88]

arrange complete not fired at all.

   window.homeIsotope = $(page).find('.friends-list').isotope({
            itemSelector: '.friend',
            masonry: {
                isFitWidth: true
            },
            getSortData: {
                distance: function(itemElem) {
                    return $(itemElem).find(".distance").text().replace("m", "");
                }
            },
            sortBy: 'distance'
        });
            $(page).find('.friends-list').on( 'arrangeComplete', function( event, filteredItems ) {
              console.log("arrangeComplete")
            })

[Kwapi]

I've still got the same issue. Both arrangeComplete and layoutComplete execute before the grid has been formatted properly.

[desandro]

@Kwapi Please open a new issue with a reduced test case. See Submitting Issues in the contributing guidelines.