From 9639bc901577e86217e32f407f1130edd90c74da Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Wed, 10 Aug 2022 16:05:05 +0530
Subject: [PATCH] Allow multiple masonry in a page

---
 plugin/assets/src/front-end/masonry.js | 144 +++++++++++++------------
 1 file changed, 75 insertions(+), 69 deletions(-)

diff --git a/plugin/assets/src/front-end/masonry.js b/plugin/assets/src/front-end/masonry.js
index 00840de1..cfcf9253 100644
--- a/plugin/assets/src/front-end/masonry.js
+++ b/plugin/assets/src/front-end/masonry.js
@@ -13,92 +13,98 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-let gridElement = null;
-let rowHeight = 24;
-let rowGap = 24;
+
 export const masonryInit = () => {
-	gridElement = document.querySelector( '.is-flex-container' );
+	const gridElements = document.querySelectorAll( '.is-flex-container' );
+	gridElements.forEach( gridElement => {
+		init( gridElement );
+	} );
+};
 
+const init = gridElement => {
+	let rowHeight = 24;
+	let rowGap = 24;
 	if ( ! gridElement ) {
 		return;
 	}
 
-	const mediaQuery = window.matchMedia( '(min-width: 840px)' );
+	const handleResize = mediaQuery => {
+		if ( mediaQuery.matches ) {
+			resizeAllGridItems();
+		}
+	};
 
-	mediaQuery.addEventListener( 'change', handleResize );
-	handleResize( mediaQuery );
-};
+	const resizeAllGridItems = () => {
+		const cells = gridElement.querySelectorAll(
+			'.is-style-material-masonry .wp-block-post'
+		);
 
-const handleResize = mediaQuery => {
-	if ( mediaQuery.matches ) {
-		resizeAllGridItems();
-	}
-};
+		if ( cells.length <= 0 ) {
+			return;
+		}
 
-const resizeAllGridItems = () => {
-	const cells = gridElement.querySelectorAll(
-		'.is-style-material-masonry .wp-block-post'
-	);
+		rowHeight = parseInt(
+			window
+				.getComputedStyle( gridElement )
+				.getPropertyValue( 'grid-auto-rows' ),
+			10
+		);
 
-	if ( cells.length <= 0 ) {
-		return;
-	}
+		rowGap = parseInt(
+			window
+				.getComputedStyle( gridElement )
+				.getPropertyValue( 'grid-row-gap' ),
+			10
+		);
 
-	rowHeight = parseInt(
-		window
-			.getComputedStyle( gridElement )
-			.getPropertyValue( 'grid-auto-rows' ),
-		10
-	);
-
-	rowGap = parseInt(
-		window
-			.getComputedStyle( gridElement )
-			.getPropertyValue( 'grid-row-gap' ),
-		10
-	);
-
-	const hasPostCard = cells[ 0 ].querySelectorAll( '.post-card' ).length > 0;
-
-	if ( ! hasPostCard ) {
-		gridElement.style.gridAutoRows = 'minmax(min-content,max-content)';
-
-		// Let it re-render to compute height.
-		setTimeout( () => {
-			cells.forEach( resizeGridItem );
-			gridElement.style.removeProperty( 'grid-auto-rows' );
-		}, 0 );
-		return;
-	}
+		const hasPostCard =
+			cells[ 0 ].querySelectorAll( '.post-card' ).length > 0;
 
-	cells.forEach( resizeGridItem );
-};
+		if ( ! hasPostCard ) {
+			gridElement.style.gridAutoRows = 'minmax(min-content,max-content)';
 
-const resizeGridItem = cell => {
-	if ( ! cell ) {
-		return;
-	}
+			// Let it re-render to compute height.
+			setTimeout( () => {
+				cells.forEach( resizeGridItem );
+				gridElement.style.removeProperty( 'grid-auto-rows' );
+			}, 0 );
+			return;
+		}
 
-	let cellCard = cell.querySelector( '.post-card' );
+		cells.forEach( resizeGridItem );
+	};
 
-	if ( ! cellCard ) {
-		const imageCardBlock = cell.querySelector(
-			'.wp-block-material-image-card-query'
-		);
-		if ( imageCardBlock ) {
-			// For material image card.
-			cellCard = imageCardBlock;
-		} else {
-			// If we have a cell without card wrapper inside let's use that, Used for default WP template.
-			cellCard = cell;
+	const resizeGridItem = cell => {
+		if ( ! cell ) {
+			return;
 		}
-	}
 
-	const contentHeight = cellCard.getBoundingClientRect().height;
+		let cellCard = cell.querySelector( '.post-card' );
+
+		if ( ! cellCard ) {
+			const imageCardBlock = cell.querySelector(
+				'.wp-block-material-image-card-query'
+			);
+			if ( imageCardBlock ) {
+				// For material image card.
+				cellCard = imageCardBlock;
+			} else {
+				// If we have a cell without card wrapper inside let's use that, Used for default WP template.
+				cellCard = cell;
+			}
+		}
 
-	const rowSpan = Math.ceil(
-		( contentHeight + rowGap ) / ( rowHeight + rowGap )
-	);
+		const contentHeight = cellCard.getBoundingClientRect().height;
 
-	cell.style.gridRowEnd = 'span ' + rowSpan;
+		const rowSpan = Math.ceil(
+			( contentHeight + rowGap ) / ( rowHeight + rowGap )
+		);
+
+		cell.style.gridRowEnd = 'span ' + rowSpan;
+	};
+
+	const mediaQuery = window.matchMedia( '(min-width: 840px)' );
+
+	mediaQuery.addEventListener( 'change', handleResize );
+	handleResize( mediaQuery );
 };