Card Stack

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

.block-card-stack {
	@include padding-top(rem-calc(120));
	@include padding-bottom(rem-calc(120));

	.intro-content {
		text-align: center;
		margin-bottom: rem-calc(48);
	}

	.stack-cards {
		--stack-spacing: 2rem;

		@include bp($lg) {
			--stack-spacing: 3rem;
		}

		display: flex;
		flex-direction: column;
		gap: var(--stack-spacing);

		.stack-card {
			@include ts(transform);
			grid-column-start: 1;
			grid-row-start: 1;
			position: relative;
			transform-origin: bottom;
			transform: translateY(0);
		}
	}

	.stack-card {
		color: var(--text-color);
		display: grid;
		grid-template-columns: 1fr;
		height: 100%;
		border-radius: rem-calc(20);
		overflow: hidden;
		margin: 0 auto;
		max-width: rem-calc(1295);
		position: relative;
		isolation: isolate;
		background-color: var(--primary);
		// aspect-ratio: 2.4/1;

		align-items: flex-end;

		padding: rem-calc(10);

		.content-container {
			--text-color: var(--primary);

			width: 90%;
			max-width: rem-calc(345);
			margin-top: rem-calc(100);
			z-index: 5;
			padding: rem-calc(20 24);
			background-color: var(--white);
			border-radius: rem-calc(20);

			@include bp($md) {
				width: 50%;
				max-width: rem-calc(345);
			}

			@include bp($lg) {
				margin-top: rem-calc(200);
			}
		}

		.content-styles p,
		.content-styles .p {
			margin: 0 0 1em;
		}
	}
}

class CardStack {
	block;
	triggers = [];

	constructor(block) {
		this.block = block;

		this.init();
		this.setupRefreshEvents();
	}

	init() {
		const cardsWrappers = this.block.querySelectorAll('.stack-card-wrapper');
		const cards = this.block.querySelectorAll('.stack-card');

		cardsWrappers.forEach((wrapper, i) => {
			const card = cards[i];
			let scale = 1;

			if (i !== cards.length - 1) {
				scale = 0.85 + 0.025 * i;
			}

			const trigger = gsap.to(card, {
				scale: scale,
				transformOrigin: "top center",
				ease: "none",
				scrollTrigger: {
					trigger: wrapper,
					start: "top " + (60 + 10 * i),
					end: "bottom 660",
					endTrigger: this.block,
					scrub: true,
					pin: wrapper,
					pinSpacing: false,
				}
			}).scrollTrigger;

			this.triggers.push(trigger);
		});

		// set up a scrolltrigger for the whole block
		gsap.to(this.block, {
			scrollTrigger: {
				trigger: this.block,
				start: "top top",
				end: "bottom bottom",
				onEnter: () => {
					this.refresh();
				},
				onEnterBack: () => {
					this.refresh();
				}
			}
		}).scrollTrigger;
	}

	setupRefreshEvents() {
		window.addEventListener('resize', debounce(() => this.refresh(), 250));
	}

	refresh() {
		ScrollTrigger.refresh();
	}
}

function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
		const later = () => {
			clearTimeout(timeout);
			func(...args);
		};
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
	};
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-card-stack').forEach((block) => {
		new CardStack(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/card-stack",
    "title": "Card Stack",
    "description": "Card Stack block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-card-stack.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Post Card Stack",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/card-stack/block-card-stack.css"
}