Content Card Grid

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-card-grid {
	transition: 0.3s opacity var( --ease );

	&.loading {
		opacity: 0.5;
		pointer-events: none;
	}

	.heading {
		@include margin-bottom( rem-calc(48) );
	}

	&__meta {
		display: flex;
		flex-direction: row;
		gap: rem-calc(16);
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		@include margin-bottom( rem-calc(60) );

		.heading {
			margin-bottom: 0;
		}
	}

	.filter-row {
		select {
			background-color: $grey;
			border: none;
			text-overflow: ellipsis;
			padding-right: rem-calc(36);
			@include fluid-type(14, 18);
		}
	}

	&__grid {
		@include padding-top( rem-calc(32) );
		@include padding-bottom( rem-calc(32) );

		&.no-filters {
			padding-top: 0;
		}
	}

	.card-grid {
		&__item {
			padding: 0;

			.post-card {
				height: 100%;
			}
		}
	}
}

class CardGrid {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.initialised = false;
		this.blockId = this.block.getAttribute( 'id' );

		ScrollTrigger.create({
			trigger: this.block,
			start: 'top bottom',
			end: 'bottom top',
			// markers: true,
			// onEnter: () => this.initGrid(),
		});

		this.filters = block.querySelectorAll( '.filter-row select' );
		this.filters.forEach( filter => {
			filter.addEventListener( 'change', () => {
				this.updateURL();
			});
		});
	}

	updateURL() {
		this.block.classList.add( 'loading' );

		const urlWithParams = new URL( `${window.location.origin}${window.location.pathname}` );

		this.filters.forEach( filter => {
			if ( filter.options[filter.selectedIndex].value !== '' ) {
				urlWithParams.searchParams.append( filter.getAttribute( 'name' ), filter.options[filter.selectedIndex].value );
			}
		});

		let href = urlWithParams.href;
		if ( this.blockId ) {
			href = `${urlWithParams.href}#${this.blockId}`;
		}

		if ( window.location.href !== href ) {
			window.location = href;
		} else {
			this.block.classList.remove( 'loading' );
		}
	}

	initGrid() {
		if ( this.initialised === true ) {
			return;
		}
		this.initialised = true;

		this.grid = this.block.querySelector('.block-card-grid__grid');

		this.items = this.grid.querySelectorAll( '.card-grid__item' );
		this.setHeights();

		this.shuffle = new Shuffle(this.grid, {
			itemSelector: '.card-grid__item',
		});

		this.shuffle.on(Shuffle.EventType.LAYOUT, () => {
			setTimeout( () => {
				this.setHeights();
			}, 0);
		});

		const resizeHandler = debounce( () => {
			// this.setHeights();
		}, 500);
		window.addEventListener('resize', resizeHandler);
	}

	setHeights() {
		let rowHeight = {
			0: 0,
			1: 0,
			2: 0,
			3: 0,
		}

		this.items.forEach( (item, index) => {
			item.style.removeProperty( 'height' );
			let row = this.getRow( index );
			rowHeight[row] = item.clientHeight > rowHeight[row] ? item.clientHeight : rowHeight[row];
		});

		this.items.forEach( (item, index) => {
			let row = this.getRow( index );
			item.style.height = `${rowHeight[row] + 24}px`;
		});
	}

	getRow( index ) {
		let row = 0;
		if ( index >= 4 ) {
			row = 1;
		}
		if ( index >= 8 ) {
			row = 2;
		}
		if ( index >= 12 ) {
			row = 3;
		}

		return row;
	}
}

document.querySelectorAll('.block-card-grid').forEach((block) => {
	new CardGrid( block );
});