Hero Innovation

import { Sizes } from '@/js/Sizes';
import { animate, createTimeline, onScroll, stagger } from 'animejs';

const GLOW_CENTER_DASHARRAY = 310;
const GLOW_STAR_DASHARRAY = 570;
const GLOW_LINE_DASHARRAY = 370;

const MOBILE_TRANSLATION_OFFSET = 100;

export class HeroInnovation {
	private $element: HTMLElement;
	private $content: HTMLElement;
	private $scrollItem: HTMLElement;
	private $background: HTMLElement;
	private $backgroundInner: HTMLElement;
	private $backgroundImage: HTMLImageElement;
	private $glowCenter: HTMLElement;
	private $glowStar: HTMLElement;
	private $glowLine: HTMLElement;
	private translationSize: number = 0;
	private sizes: Sizes;
	private isFirstTime: boolean = true;

	constructor($element: HTMLElement) {
		this.$element = $element;
		this.$content = $element.querySelector('.supt-hero-innovation__content') as HTMLElement;
		this.$scrollItem = $element.querySelector('.supt-scroll-item') as HTMLElement;
		this.$background = $element.querySelector('.supt-hero-innovation__background') as HTMLElement;
		this.$backgroundInner = $element.querySelector(
			'.supt-hero-innovation__background__inner'
		) as HTMLElement;
		this.$backgroundImage = this.$background.querySelector('img') as HTMLImageElement;
		this.$glowCenter = this.$background.querySelector(
			'.supt-hero-innovation__background__glow__center'
		) as HTMLElement;
		this.$glowStar = this.$background.querySelector(
			'.supt-hero-innovation__background__glow__star'
		) as HTMLElement;
		this.$glowLine = this.$background.querySelector(
			'.supt-hero-innovation__background__glow__line'
		) as HTMLElement;

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

		this.display();
		this.getTranslationSize();
	}

	private display() {
		animate([this.$content, this.$scrollItem], {
			opacity: [0, 1],
			delay: stagger(100, { start: 500 }),
		});
	}

	/**
	 * Get the translation size of the background image so the glow line reaches the middle of the viewport
	 */
	private getTranslationSize() {
		// Get glowLine left position
		const glowLineLeft = this.$glowLine.getBoundingClientRect().left;
		// Get viewport middle position
		const viewportMiddle = (document.documentElement.clientWidth || window.innerWidth) / 2;
		// Get the difference between the glowLine left position and the viewport middle
		const difference = viewportMiddle - glowLineLeft;

		// Adjust for scale factor (background is scaled at 1.1, but we want calculation for scale 1)
		const adjustedDifference = difference / 1.1;

		// Set the translation size to the adjusted difference
		this.translationSize = this.translationSize - adjustedDifference;

		// On mobile, we place the background image directly so the line reaches the middle of the viewport
		if (this.sizes.isDesktop) {
			this.$backgroundInner.style.transform = '';
		} else {
			this.$backgroundInner.style.transform = `translateX(${-1 * this.translationSize - MOBILE_TRANSLATION_OFFSET}px)`;
		}

		// Setup scroll animation once the translation size is set
		if (this.isFirstTime) {
			this.setupScrollAnimation();
			this.isFirstTime = false;
		}
	}

	private setupScrollAnimation() {
		/**
		 * Draw star with the glow line
		 */
		createTimeline({
			autoplay: onScroll({
				container: document.body,
				target: this.$element,
				enter: 'top top',
				leave: 'bottom bottom',
				sync: true,
			}),
		})
			// glow star scale
			.add(this.$glowCenter, {
				strokeDashoffset: [GLOW_CENTER_DASHARRAY, 0],
				ease: 'linear',
			})
			// lines scale down to let enough space for the title
			.add(this.$glowStar, {
				strokeDashoffset: [GLOW_STAR_DASHARRAY, 0],
				ease: 'linear',
			});

		/**
		 * Move background image + hide content
		 */
		createTimeline({
			autoplay: onScroll({
				container: document.body,
				target: this.$element,
				enter: 'bottom bottom',
				leave: '80vh bottom',
				sync: true,
			}),
		})
			// Hide text + scroll item
			.add([this.$content, this.$scrollItem], {
				opacity: [1, 0],
				ease: 'linear',
			})
			// Move image to the left at same time
			.add(
				this.$background,
				{
					scale: [1.1, 1],
					x: [
						'0px',
						this.sizes.isDesktop
							? `${-1 * this.translationSize}px`
							: `${MOBILE_TRANSLATION_OFFSET}px`,
					],
					y: [this.sizes.isDesktop ? '0%' : '10%', '20%'],
					ease: 'linear',
				},
				'<<'
			)
			// Fade out image
			.add(
				this.$backgroundImage,
				{
					opacity: [1, 0.5],
					ease: 'linear',
				},
				'<<'
			);

		/**
		 * Draw the vertical glow line
		 */
		// glow line display
		animate(this.$glowLine, {
			strokeDashoffset: [GLOW_LINE_DASHARRAY, 0],
			ease: 'linear',
			autoplay: onScroll({
				container: document.body,
				target: this.$element,
				enter: 'bottom bottom',
				leave: '80vh bottom+=20vh',
				sync: true,
			}),
		});
	}
}