Support Masonry Views module with D8

This patch reverse the process of adding items to the view by adding new ones instead.

This patch combined with #2771287: Fix initialization code makes masonry and VIS play nice.

Ok no that doesn't work, paging is broken and click to load only reload the same page all the time.

Lets see if the tests work :)

Well.. if the patch is broken, clearly these tests suck! :)

Edit: after manual testing, this actually seems to work fine for me? Using 8.2.x HEAD.

Edit: Nope, same issue as you describe.

Ok now it works.

Thanks for working on this.

I've opened #2771483: Make tests assert the correct order of content being loaded. to make the tests better and #2771485: Adhere to JavaScript coding standards. to fix the JS coding standards (reverted the camel case to be consistent with the rest of the file).

This broke click to load, updated the selector and it seems to work now. I also experimented using Drupal.detachBehaviors instead of removeOnce, but no luck. This is unfortunately a touch more complex, but hopefully provides the most compatibility with other libraries and views JS.

Tagged 8.1: https://www.drupal.org/project/views_infinite_scroll/releases/8.x-1.1

Thanks again.

Hey, I just followed the discussion about integrating/re-initiating istope/masonry with VIS, but could not find an answer to my problem.

I am just trying to integrate Isotope with Views Infinite Scroll, but manually, without an extra module. I can initiate Isotope from my custom js file, calling the specific selectors of my view, but after triggering the button to append more items, the view breaks. So I am searching for a way to use isotope's append method to layout the new items of $newRows. Any advice here?

Drupal 8.1.7
VIS 8.x-1.2

Any reason not to use masonry? Don't they do practically the same thing?

The main reason is that I would like to benefit from Isotope's filtering/sorting options. On the other hand I will be using the Packery layout mode to achieve a grid which is able to fill the empty gaps between items with varying dimensions.

Well, I managed to do it, but am not sure if this is best practice though. On the other hand some functions are still called twice.

I used a variable to specify that the initiation of isotope only fires once. Then I added a custom class to the already processed items. For the part after the VIS ajax call I used $(document).ajaxComplete for now, because I do not know how to target the specific one, to append the newly loaded items.

What do you think? Bulky or doable?

Drupal.behaviors.isotopegrid = {
	attach: function (context, settings) {
		
		var teaser_grid_init;
		
		// only init on first load
		if(!teaser_grid_init) {			
			$(window).load(function() {
		
				// isotope init
				teaser_grid.isotope({
					layoutMode: 'packery',
					packery: {
						columnWidth: '.grid-sizer',
						gutter: '.gutter-sizer'
					},
					itemSelector: '.grid-item',
					percentPosition: true
				});
				// layout isotope after each image loads
				teaser_grid.imagesLoaded().progress( function() {
					teaser_grid.isotope('layout');
					// set initial load
					teaser_grid_init = true;
				});
				// add class to items to prevent them from being processed again
				$('.grid-item').addClass('grid-processed');
		
			});
		}
		
		// find a way to target only the specific ajax call of views infinite scroll
		$(document).ajaxComplete(function() {
			// find new items
			var newItems = teaser_grid.find('.grid-item:not(.grid-processed)');
			// add new items
			teaser_grid.imagesLoaded( function() {
				teaser_grid.append(newItems);
				teaser_grid.isotope('appended', newItems);
			});
			// add class to items to prevent them from being processed again
			newItems.each(function() {
				$(this).addClass('grid-processed');
			});
		});

	}
};

Thanks for this great module!
I am using Views Infinite Scroll with the Masonry Views module and the Masonry .grid-sizer approach for a responsive layout.
Views's Style Options: "Add views row classes" is checked, Column width in percentage. Also added my own CSS for Masonry.
Everything works fine except that new rows get an extra masonry container instead of just being appended to the existing masonry container.

After looking at attar_eweev's patch for views-infinite-scroll.js I was able to find a working solution for my project.

var $newRows = $newView.find(contentWrapperSelector).children();
The masonry container .masonry-layout is the direct child of contentWrapperSelector, not the new rows
view.$view.find(contentWrapperSelector).append($newRows);
New rows should be appended to the masonry container instead of contentWrapperSelector

I used existing classes in Masonry Views's views-view-masonry.html.twig to
check if masonry is involved and replaced children() with find()

Before the Patch:
There is a gap between the old and the new rows caused by the extra masonry container

After the Patch:
Everything works fine, all rows are placed in a single masonry container.

I use this patch in my current project, but I had no time to consider other use cases, configuration options etc.

Apart from the gap, the Masonry layout works fine, before and after the patch.

Patch #19 worked fine for me on version 8.x-1.3.

we need to commit this patch please.

Patched #19 worked for me but only if all ajax views rendered on page has masonry plugin applied. I had combination of standard row display view and masonry on same page and to regular view new rows wasn't appended after ajax call.

Submitting patch that fixing this behaviour.

the patches did not work for me. I create a new one with this change:

      // Add the new rows to existing view.
      view.$view.find('.masonry-layout').append($newRows).masonry( 'appended', $newRows, true );

views_infinite_scroll: 8.x-1.5
masonry: 8.x-1.0-rc2
masonry_views: 8.x-1.0-rc1
drupal core: 8.3.7-dev

handkerchief's patch works great - the only issue i can see is when an image is included in one of the new masonry fields that appears. normally you can set to "load images first" in the masonry settings in a view, but when using infinite scrolls it doesn't apply that setting to the new fields that appear.

any idea how to resolve this so it also loads images first for new masonry fields? current working example with images not loading first here - www.kobejet.com/speakraku

Updated patch from @handkerchief to get "images_first" functionality.
@W0LF please test. If you can't apply it, try manually.

Sorry, I forgot condition if images_first it's not selected.
New pach here.

@ion.macaria
Hi ion, thanks so much for your quick response. I tried both of your patches, applying manually, but both left the images set apart from the rest of their masonry item content. If it would help to troubleshoot let me know and I can leave and link the test code on my site page.

@W0LF do you check images_first option in view?
After patching try view in incognito tab in your browser and rebuild drupal cache, or clear cache in your browser after cache rebuild.
If you want more help, you can write me on macaria_ion[at]yahoo.com.

@ion.macaria
Thanks for the patch in #27. It works well. But there's a think: For a fraction of a second, when the view infinite scroll loads the new items, some of the already displayed items moved/reordered. It's not so smooth like here: https://masonry.desandro.com/v2/demos/infinite-scroll.html

Do you know what i mean? Can you see the same effect?

@handkerchief i think this is masonry version issue, not Infinite Scroll.

@ion.macaria
You're right: https://www.drupal.org/node/2894069

but is that correct that the new rows (page 2) are not added in the same container (class = views-infinite-scroll-content-wrapper)

because this issue is closed, i created a new one: https://www.drupal.org/node/2917271

@handkerchief i think the best way is to reopen this task, not duplicate.

@ion.macaria
oho too late :) sorry about that. Hm... what now?

@Sam152 or @nod_ please reopen this issue.
@handkerchief please relate your issue with that and close it like duplicate.

I have done it days ago. But nothing has happened here so far. That's really sad. Is this not maintained?

Here some help

var viewName = view.settings.view_name.replace('_', '-');
var object = ".view-"+ viewName + '.view-display-id-'+ view.settings.view_display_id + " > .view-content";
...
 $(object).find('.views-infinite-scroll-content-wrapper').append($newRows);//change

after this worked.

@Regnoy
Thanks for your input. I tried it with your code, but with the same result as in #33.

Or what do you mean with "after this worked"? :)

Thank you @Regnoy. I updated my patch.

@ion.macaria You were faster than me ;) Because it's working, I changed the wrong line. thanks @Regnoy.

And the moved/reordered-effect appears now only the first time when I load new rows. afterwards not more, only the first time new rows are loaded... strange.

@ion.macaria thanks for creating so quick patch.

Can somebody apply this patch to the dev verison of this module? The bugfix workflow should not stop in this stage.

I would be great if it would be a setting of this module. Like you can choose between 'Append to existing container' or 'Create a new container'.
Because the behaviour to append could also be usable in non-masonry situations, eg. when you are building a CSS pattern with nth-of-type.

I just ran into a problem with the patch at #41: the replace method called on the view_name is .replace('_','-'), but that only replaces the first dash. Should it instead be .replace(/_/g,'-')? The selector was broken for a view name that had multiple underscores.

I needed to recreate the patch because I could not apply.

Using the latest dev version of views_infinite_scroll and masonry, everything worked without installing an extra patch to let those 2 modules work together. Masonry uses Drupal.behaviours which are automatically reloaded when adding new view-rows, so there is no need to do an extra $(object).masonry( 'appended', $newRows, true ); .

Remark: using a correct div-structure and class-naming in view-view.html.twig is important. The view-view.html.twig from the classy theme works.

Hello, here is the patch that I use for the lines added by "infinite_scroll" is well taken into account jute after their addition to the DOM.
used with:
"drupal/masonry_views": "1.x-dev" + "different_item_count-2852080-36.patch"
"drupal/views_infinite_scroll": "1.x-dev"
and the "view-view.html.twig" from the classy theme

I´ve tried #49 but after load the content masonry can´t organize the items well, overlaying the new items by column. Maybe masonry is not getting items height. I´m starting to try a solution, do you have some tip?

This is an update of the patch #49, changing only one line for append new rows to masonry using imagesloaded.

Modified...
view.$view.find('.masonry-layout').masonry( 'appended', $newRows );
to
view.$view.find('.masonry-layout').imagesLoaded( function(){ view.$view.find('.masonry-layout').masonry( 'appended', $newRows ); } );

I don´t think it´s a good way to write this, but is working.

Used with:
"drupal/masonry_views": "1.x-dev" + "different_item_count-2852080-36.patch"
"drupal/views_infinite_scroll": "1.x-dev"
and the "view-view.html.twig" from the classy theme OR the bootstrap default template

This integration is very powerful, please, who have more experience, take a look. Let's conclude these dev versions. Thank you for all.

#51 did not solve the problem mentioned in #33 for me. I used patch in #41 with suggestion in #46 and some minor changes.

Use the following versions:
"drupal/views_infinite_scroll": "1.x-dev"
"drupal/masonry_views": "1.x-dev"

You need to apply two patches in the following order in composer.json:
"https://www.drupal.org/files/issues/2020-01-24/13433832-60%2B2852080-40...." from issue https://www.drupal.org/project/views_infinite_scroll/issues/2852080

Then my patch. Copy the "view-view.html.twig" from the classy theme OR the bootstrap default template.

Re rolling patch as patch in issue https://www.drupal.org/project/views_infinite_scroll/issues/2852080#comm... got updated. Now using https://www.drupal.org/files/issues/2020-04-21/different_item_count-2852... along with re rolled patch.