Content Horizontal Scrolling

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

.block-horizontal-scrolling {
	width: 100%;
	overflow: hidden;

	&__container {
		&.scroll-initialised {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;

			.block-horizontal-scrolling {
				&__panel {
					width: 100vw;
					height: 100vh;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.heading-container {
						p {
							&:before {
								@include fluid-type(32, 110);
							}
						}

						h1, .h1,
						h2, .h2 {
							@include bp($lg) {
								font-size: calc(1rem + 10vmin);
							}
						}
					}

					.content-container {
						p, .p {
							@include bp($lg) {
								font-size: calc(1rem + 0.75vmin);
							}
						}
					}
				}
			}
		}
	}

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

		@include bp($md) {
			@include padding-top( rem-calc(80) );
			@include padding-bottom( rem-calc(80) );
		}

		&.theme--light,
		&.theme--dark {
			--color-accent: #{$secondary};
		}

		&.theme--dark {
			.heading-container {
				p {
					&:before {
						background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right--white.svg');
					}
				}
			}
		}

		.heading-container {
			line-height: 1;
			color: var( --text-color );
			@include margin-bottom( rem-calc(44) );

			&.aos-animate {
				p,
				h1,
				h2,
				h3,
				h4,
				h5 {
					&:before {
						transform: scaleX(1);
						opacity: 1;
					}
				}
			}

			p,
			h1,
			h2,
			h3,
			h4,
			h5 {
				position: relative;

				&:before {
					width: calc( 1rem + 12.5vw );
					max-width: rem-calc( 200 );
					height: 0.8ch;
					content: '';
					display: inline-block;
					@include fluid-type(32, 140);
					line-height: 1;
					background-image: url('/wp-content/themes/british-esports/assets/icons/arrow-right.svg');
					background-position: 0 center;
					background-repeat: no-repeat;
					background-size: contain;
					@include margin-right( rem-calc( 30 ) );

					transform-origin: 0 center;
					transform: scaleX(0);
					opacity: 0;
					transition: 0.3s transform var( --ease ), 0.3s opacity var( --ease );
					transition-delay: 0.3s;
				}

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}

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

			&:last-of-type {
				margin-bottom: 0;
			}

			& + .btn {
				margin-top: auto;
				margin-bottom: rem-calc(32);

				@include bp($md) {
					margin-bottom: 0;
				}
			}
		}

		.play-btn {
			top: auto;
			right: 0;
			bottom: 0;
			left: auto;
			transform: none;
		}
	}

	&__panel-logo-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: rem-calc(16);
		align-items: center;

		@include bp($lg) {
			gap: rem-calc(16 30);
			flex-wrap: nowrap;
		}
	}

	&__panel-logo {
		width: calc(50% - 8px);
		max-height: rem-calc(310);
		border: 1px solid $primary;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		@include padding( rem-calc(32) );
		aspect-ratio: 260/310;

		@include bp($lg) {
			width: 25%;
		}

		picture {
			max-width: rem-calc(150);
			max-height: rem-calc(100);
			display: flex;
			flex-direction: column;
		}
	}
}

class HorizontalScrolling {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.sections = this.block.querySelectorAll( '.block-horizontal-scrolling__panel' );
		this.st = false;
		this.container = this.block.querySelector( '.block-horizontal-scrolling__container' );
		this.header = document.querySelector( '.site-header' );

		let mql = window.matchMedia('(min-width: 992px)');
		if ( this.sections.length > 1 && mql.matches ) {
			this.initScrollTrigger();
			this.initialise();
		} else {
			this.killScrollTrigger();
		}
		mql.addEventListener( 'change', e => {
			if ( this.sections.length > 1 && e.matches ) {
				this.initScrollTrigger();
				this.initialise();
			} else {
				this.killScrollTrigger();
			}
		});
	}

	initScrollTrigger() {
		if ( this.st ) {
			return;
		}
		this.st = true;

		this.container.style.width = `${ this.sections.length * 100 }%`;
		this.container.classList.add( 'scroll-initialised' );

		this.block.style.width = `100% !important`;
		this.block.style.maxWidth = `100% !important`;
	}

	killScrollTrigger() {
		if ( this.tl ) {
			this.tl.kill();
		}
		this.tl = false;
		this.st = false;

		this.container.style.width = `100%`;
		this.container.classList.remove( 'scroll-initialised' );
		this.block.style = '';
		this.container.style = '';
		this.sections.forEach( section => section.style = '' );
		this.header.classList.remove( 'no-sticky' );

		let spacers = document.querySelectorAll( '.pin-spacer' );
		spacers.forEach( spacer => spacer.style = '' );
	}

	initialise() {
		if ( this.tl ) {
			return;
		}

		this.tl = gsap.to(this.sections, {
			xPercent: - 100 * (this.sections.length - 1),
			ease: "none",
			scrollTrigger: {
				trigger: this.block,
				pin: true,
				scrub: 0.1,
				end: () => `+=${window.innerWidth}`,
				onEnter: () => { this.header.classList.add( 'no-sticky' ) },
				onEnterBack: () => { this.header.classList.add( 'no-sticky' ) },
				onLeave: () => { this.header.classList.remove( 'no-sticky' ) },
				onLeaveBack: () => { this.header.classList.remove( 'no-sticky' ) },
			},
		});
	}
}

document.querySelectorAll('.block-horizontal-scrolling').forEach((block) => {
	new HorizontalScrolling( block );
});