Tile Carousel

@import "../../resources/scss/util/colours";
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-tile-carousel {
	background-color: $veryLightBlue;
	padding-top: rem-calc(80);
	padding-bottom: rem-calc(80);
	overflow: hidden;

	.heading {
		@include fluid-type(28, 34);
	}

	.swiper {
		overflow: visible;
	}

	.swiper-slide {
		@include bp($lg) {
			width: auto !important;
		}

		&:nth-of-type(even) {
			.block-tile-carousel__tile {
				background-color: $navy;
			}
		}
	}

	&__intro {
		margin-bottom: rem-calc(48);
	}

	&__buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		@include bp($lg) {
			justify-content: flex-end;
			width: auto;
		}
	}

	&__tile {
		display: block;
		background-color: $blue;
		color: $white;
		text-decoration: none;
		@include fluid-type(20, 24);
		font-weight: 700;
		padding: rem-calc(24);
		height: 100%;
		min-height: rem-calc(215);
		width: auto !important;
		max-width: none;
		position: relative;
		transition: all 0.2s ease-in-out;

		@include bp($lg) {
			width: rem-calc(275) !important;
			max-width: rem-calc(275);
		}

		&:after {
			content: '';
			position: absolute;
			bottom: rem-calc(24);
			left: rem-calc(24);
			width: rem-calc(40);
			height: rem-calc(40);
			border-radius: 50%;
			border: 1px solid $white;
			background-image: url('#{$asset-path}/icons/icon-full-arrow-right-white.svg');
			background-size: 50%;
			background-position: center;
			background-repeat: no-repeat;
		}

		&:hover {

			&:after {
				border: 1px solid $orange;
				background-image: url('#{$asset-path}/icons/icon-full-arrow-right-orange.svg');
			}
		}
	}
}

class TileCarousel {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-tile-carousel');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {

			const blockCarousel = block.querySelector(".swiper");
			const navNext = block.querySelector(".e-carousel__next");
			const navPrev = block.querySelector(".e-carousel__prev");

			const swiper = new Swiper(blockCarousel, {
				loop: false,
				slidesPerView: 1.5,
				spaceBetween: 24,
				navigation: {
					nextEl: navNext,
					prevEl: navPrev,
				},
				// speed: 3000,
				breakpoints: {
					992: {
						slidesPerView: 'auto',
					},
					// 992: {
					// 	slidesPerView: 5,
					// }
				}
			});

			// Staggered reveal animation
			const staggeredCards = document.querySelectorAll(".st-stagger-reveal");

			if (staggeredCards !== null)  {
				gsap.set(".st-stagger-reveal", {y: 100});

				ScrollTrigger.batch(".st-stagger-reveal", {
					start: "top 100%",
					onEnter: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
					onLeave: batch => gsap.set(batch, {opacity: 0, y: -100, overwrite: true}),
					onEnterBack: batch => gsap.to(batch, {opacity: 1, y: 0, stagger: 0.15, overwrite: true}),
					onLeaveBack: batch => gsap.set(batch, {opacity: 0, y: 100, overwrite: true})
				});

				ScrollTrigger.addEventListener("refreshInit", () => gsap.set(".st-stagger-reveal", {y: 0}));
			}

		});
	}
}

new TileCarousel();