Only one instance of Flexmasonry working

[benhaldenby]

I have two pages on a site where I want to create two separate, different instances of Flexmasonry. But only one the instances is working.

One page has a UL of images, the other a UL of divs with text content. I have the Flexmasonry code in two separate JS files which are built and minified with Gulp into a single main.js file, which is included on both pages. It seems that whichever of the instances comes last in the compiled JS file is the instance that works, and the previous one doesn't.

This is the un-minified fragment from the built main.js file:

document.addEventListener('DOMContentLoaded', function () {
  
  FlexMasonry.init('.js-image-gallery', {
    responsive: true,
    breakpointCols: {
        'min-width: 980px': 4,
        'min-width: 768px': 2
    },
  });
  
})

document.addEventListener('DOMContentLoaded', function () {
  
  FlexMasonry.init('.js-information-grid', {
    responsive: true,
    breakpointCols: {
      'min-width: 980px': 3,
      'min-width: 768px': 2
    },
  });
    
})

Here the .js-information-grid works, but the gallery does not. If switched in order, then the other works.

Is this a known issue with Flexmasonry?

Thanks!

[enzedonline]

Just came to report this too. I created a block that editors can add to a page in their CMS multiple times, each time can have different column config.

It seems only the last class name used in the init is retained. The JS does a refreshAll() when the window is resized, this only refreshes the elements with class the init was called with.

I worked around this by adding a couple of lines after my init code:

            FlexMasonry.init(
                   .grid-{{block.id}},
                    ....
                );
            el = document.getElementsByClassName('grid-{{block.id}}')[0]
            window.addEventListener('resize', FlexMasonry.refresh(el));

Each of my blocks calls FlexMasonry with a unique classname, I add an extra resize listener for each block which add responsiveness back to each block.

For your case above, just add a listener for js-image-gallery I guess.