Section Text Big

import { animate, onScroll, stagger } from 'animejs';

import { CONTAINER_WIDTH } from '@/js/constants';
import { Sizes } from '@/js/Sizes';

export class SectionTextBigInnovation {
	$element: HTMLElement;
	$container: HTMLElement;
	$linesWrapper: HTMLElement;
	$lines: NodeListOf<HTMLElement>;
	$linesGlow: NodeListOf<HTMLElement>;
	$title: HTMLElement;
	$content: HTMLElement;
	strokeLength: number = 0;

	sizes: Sizes;

	constructor($element: HTMLElement, $container: HTMLElement) {
		this.$element = $element;
		this.$container = $container;

		this.$content = $element.querySelector('.supt-section-text-big__content') as HTMLElement;
		this.$linesWrapper = $element.querySelector(
			'.supt-section-text-big__line-wrapper'
		) as HTMLElement;
		this.$lines = $element.querySelectorAll(
			'.supt-section-text-big__line'
		) as NodeListOf<HTMLElement>;
		this.$linesGlow = $element.querySelectorAll(
			'.supt-section-text-big__line__glow'
		) as NodeListOf<HTMLElement>;
		this.$title = this.$element.querySelector('.supt-section-text-big__title') as HTMLElement;

		this.sizes = new Sizes(); // Singleton

		this.splitTitle();

		this.setLineStrokeDashoffset();

		this.handleScrollAnimation();
	}

	setLineStrokeDashoffset() {
		this.strokeLength = Math.max(this.$linesWrapper.offsetHeight / 1.2, 250);

		this.$linesGlow.forEach(line => {
			line.style.strokeDasharray = `${this.strokeLength}`;
		});
	}

	/**
	 * Split title into words and add glow class to each word
	 */
	splitTitle() {
		const title = this.$title.textContent || '';
		this.$title.innerHTML = title
			.split(' ')
			.map(
				word =>
					`<span class="supt-section-text-big__title__word"><span class="-is-default">${word}</span><span class="-is-glow" aria-hidden="true">${word}</span></span>`
			)
			.join(' ');
	}

	handleScrollAnimation() {
		// Update container background on scroll
		const $darkBackground = this.$container.querySelector(
			'.supt-innovation-overview-page__background.-dark'
		) as HTMLElement;
		animate($darkBackground, {
			opacity: [0, 1],
			autoplay: onScroll({
				container: document.body,
				target: this.$element,
				enter: 'bottom top',
				leave: 'center top',
				sync: true,
			}),
		});

		// 1st line glow
		animate(this.$linesGlow[0], {
			strokeDashoffset: [this.strokeLength, 0],
			ease: 'linear',
			autoplay: onScroll({
				container: document.body,
				target: this.$element,
				enter: this.$element.dataset.scrollStart || 'center top',
				leave: 'center 15%',
				sync: true,
			}),
		});

		// title glow fadeIn (word by word)
		const $glowWords = this.$title.querySelectorAll(
			'.supt-section-text-big__title__word .-is-glow'
		) as NodeListOf<HTMLElement>;
		animate($glowWords, {
			opacity: [0, 1],
			duration: 500,
			ease: 'linear',
			delay: stagger(200),
			autoplay: onScroll({
				container: document.body,
				target: this.$element,
				enter: 'center 35%',
				leave: 'center 58%',
				sync: true,
			}),
		});
	}

	getLineTranslateX() {
		const containerWidth =
			this.sizes.currentWidth > CONTAINER_WIDTH ? CONTAINER_WIDTH : this.sizes.currentWidth;
		const textCols = this.sizes.isDesktop ? 3 : 5;

		return (
			-window.innerWidth / 2 +
			(window.innerWidth - containerWidth) / 2 +
			(containerWidth * (textCols / 2)) / 12 +
			50
		);
	}
}