Integrate with Views Infinite Scroll 7.x-2.x

Nice work on this Paul, thanks for keeping this rolling. I haven't been able to get this patch working unfortunately. Here are the steps I took.

- On a fresh install, generate a load of content and enable views_infinite_scroll (2.x).
- Create a simple view of content (50 items, paged at 10) and infinite scroll. Add some text to the view header.
- Infinite scroll works as expected.
- Make another view to act as the "filter". Simple html-list of taxonomy terms. Add this to the header of the content view.
- Content view now breaks. As I scroll down the page, I get the view header duplicated with each new block of content that is loaded. Also, each time the whole result is appended. So On the first scroll, twenty items (with header) are appended, on the next scroll thrity are appended, etc.
- Note that this breakage seems to just be an infinite-scroll bug. To this point I have not used isotope or patched anything.
- Now I apply the patches to both modules, change the view type to isotope grid, and the filter view to isotope filter.
- The result is now that when I scroll down, the window just jumps back to the top of the screen and nothing is appended. This is different functionality but still broken.
- No JS errors visible in console.

Hopefully that's enough info for you to debug further? Let me know if I've made a mistake.
Cheers,
Chris

Hello All,
I've just tested the patch in Comment #6 and here's what I see:

1. New content does load however the Packery styling is gone on newly loaded content, so the originally displayed content is followed by an overlapping left-aligned column of new content.
2. there is a classic Drupal pager showing above the entire view (the view includes the isotope display with it's filters above)

I'm using views infinite scroll 2.0 (stable) and Isotope 7.x-2.x-dev.
Thank you!

I'm seeing the same thing as Stephanie_42 with views infinite scroll 2.x-dev & isotope dev

Patch on #6 works for me combined with patch #2 on #2761365: Allow modules to specify their own content selector. However, I also experience the problem of @Stephanie_42: newly added content is all left-aligned and in some cases there are overlappings. Any workaround for this?

My current workaround when you click on infinite pager and all elements are all left-aligned and overlapped:

jQuery(document).ready(function() {
  // Fix error with Views Infinite Scroll module.
  jQuery(document).on("infiniteScrollComplete", function(event) {
    // Refresh the layout.
    //jQuery('.isotope-container').isotope();
    jQuery('.isotope-container').isotope({masonry: { columnWidth: 50 }});
  });
});

I also have seen that in some cases, when you click the infinite pager, some elements are duplicated. But not always.

I just found out that element duplication is not due to infinite scroll, it's just due to the fact I allow to assign multiple taxonomy values for each element.

I found out how to fix my issues:

• To remove duplicated content: edit the "Isotope Grid" view and enable "Pure distinct"
• To remove filters of multiple values: edit the "Isotope Filter" view and just enable "Aggregation" with no more additional changes of configuration

Hi rcodina, I tried the two patches (you reference in #9) as well and although the grid-items load without the container as hoped they all shift left. I tried the code you have above in #10 and it mostly works but every other load the grid-items appear to scatter (some show up in totally incorrect spots, sometimes overlapping with others). I'm thinking maybe it's a timing issue in regards to execution. Note, as soon as I resize the browser port they all reshuffle to their correct spots.

Here's the code I'm using:

jQuery(function($) {
  // Fix error with Views Infinite Scroll module.
  $(document).on("infiniteScrollComplete", function(event) {
    // Refresh the layout.
    //$('.isotope-container').isotope();
    $('.isotope-container').isotope({masonry: { columnWidth: '.isotope-element' }});
  });
});

Then I set the width to .isotope-element in CSS to 33%.

Upon further investigation, I'm noticing the following behavior when the grid-items scatter:
- As soon as infinite scroll runs and loads the new grid-items they load in the correct positions.
- A split second later they scatter to random positions all across the browser port.
- If I inspect the markup of the grid items (li.isotope-element) that are out of place they appear to have a transform applied to them. If I remove the transform they go back to their correct position.

I'm not sure why the extra transform is being applied to the grid items (.isotope-element).