Image Mask

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

.block-image-mask {
	--text-color: var(--white);
	--hero-mask-size: 200%;

	@include padding-top(rem-calc(140));
	@include padding-bottom(rem-calc(140));

	.content-container {
		text-align: center;
		position: relative;
		z-index: 5;
		padding-left: 4rem;
		padding-right: 4rem;

		.btn.btn--hollow {
			--arrow: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.695312 4.33333C0.327123 4.33333 0.0286458 4.63181 0.0286458 5C0.0286458 5.36819 0.327123 5.66667 0.695312 5.66667V5V4.33333ZM18.1667 5.4714C18.4271 5.21105 18.4271 4.78895 18.1667 4.5286L13.9241 0.285954C13.6637 0.0256052 13.2416 0.0256052 12.9813 0.285954C12.7209 0.546304 12.7209 0.968414 12.9813 1.22876L16.7525 5L12.9813 8.77124C12.7209 9.03159 12.7209 9.4537 12.9813 9.71405C13.2416 9.97439 13.6637 9.97439 13.9241 9.71405L18.1667 5.4714ZM0.695312 5V5.66667H17.6953V5V4.33333H0.695312V5Z' fill='white'/%3E%3C/svg%3E%0A");
		}
	}

	picture {
		display: flex;
		flex-direction: column;

		mask: url("data:image/svg+xml,%3Csvg width='416' height='196' viewBox='0 0 416 196' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 98C0 43.8761 43.8761 0 98 0H318C372.124 0 416 43.8761 416 98C416 152.124 372.124 196 318 196H98C43.8761 196 0 152.124 0 98Z' fill='white'/%3E%3C/svg%3E%0A");
		mask-repeat: no-repeat;
		mask-position: center;
		// mask-size: 70%;
		mask-size: var(--hero-mask-size);

		&:after {
			width: 100%;
			height: 100%;
			background-color: var(--primary);
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			opacity: 0.5;
		}
	}
}

class ImageMask {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;

		if (window.innerWidth >= 768) {
			this.init();
		}
	}

	init() {
		ScrollTrigger.create({
			trigger: this.block,
			start: "top 80%",
			end: "50% 50%",
			markers: false,
			onUpdate: (self) => {
				this.block.style.setProperty('--hero-mask-size', `${this.getProgress(self.progress)}%`);
			},
		});
	}

	/**
	 * Get the progress of the scroll
	 * @param {number} progress
	 * @returns {number}
	 */
	getProgress(progress) {
		let maskSize = 200 - (115 * progress);

		if(window.innerWidth >= 1100) {
			maskSize = 200 - (130 * progress);
		}

		if(window.innerWidth >= 1600) {
			maskSize = 200 - (140 * progress);
		}

		return maskSize;
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-image-mask').forEach( block => new ImageMask(block) );
});

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