Landing Hero

import './landing-hero.scss';
import Component from '@component';
import helpers from '@helpers';

interface ICoords {
    x: number;
    y: number;
}

export default class LandingHero extends Component {
    static initSelector: string = '.landing-hero';

    widthFactor: number = 1.1;
    heightFactor: number = 0.8;
    h1Size: number = 80;
    h1SizeLg: number = 120;
    titleSize: number = 105;
    titleSizeLg: number = 425;
    h1Height: number = 85;
    h1HeightLg: number = 140;
    titleHeight: number = 125;
    titleHeightLg: number = 450;
    timingLength: number = .8;

    animationDelay: number = 1000;
    animationPercent: number = 1;
    isAnimating: boolean = false;
    titles: JQuery;
    titleCoords: ICoords[] = [];
    animationRequest: number;

    constructor(target: HTMLElement) {
        super(target);

        this.titles = this.element.find('.landing-hero__title-text');

        this.titles.each((index: number, domElement: HTMLElement) => {
            this.titleCoords.push({x: domElement.getBoundingClientRect().x, y: domElement.getBoundingClientRect().y});
        });

        this.init();
    }

    init(): void {
        if ($(window).scrollTop() === 0) {
            helpers.disableScroll();

            if (helpers.isMobileDevice) {
                window.addEventListener('touchstart', this.startAnimation.bind(this));
            } else {
                window.addEventListener('wheel', this.startAnimation.bind(this));
            }

            window.addEventListener('resize', () => this.animate(1));

            this.animationRequest = requestAnimationFrame(() => this.animate(2));

            requestAnimationFrame(() => $('body').removeClass('header-is-visible'));
        } else {
            this.element.addClass('is-animating');
            this.cleanUp();
        }
    }

    smoothstep(x : number): number {
        const clampedValue: number = Math.min(1, Math.max(x, 0));

        return clampedValue * clampedValue * (3 - 2 * clampedValue);
    }

    viewportWidthToPixels(vw: number): number {
        return vw * (document.documentElement.clientWidth / 100);
    }

    setTitlePosition(index: number, percent: number): void {
        const title: HTMLElement = this.titles.get()[index];
        const titleRect: DOMRect = title.getBoundingClientRect();

        const maxX: number = window.innerWidth - title.parentElement.getBoundingClientRect().x - titleRect.width * this.widthFactor;
        const maxY: number = window.innerHeight - title.parentElement.getBoundingClientRect().y - titleRect.height * this.heightFactor + titleRect.height * index * 2;

        const translateX: number = maxX * percent;
        const translateY: number = maxY * percent;

        let h1Size: number = this.h1Size;
        const titleSize: number = this.viewportWidthToPixels(28);

        let h1Height: number = this.h1Height;
        const titleHeight: number = this.viewportWidthToPixels(28);

        if (window.matchMedia('only screen and (min-width: 768px)').matches) {
            h1Size = this.h1SizeLg;

            h1Height = this.h1HeightLg;
        }

        const fontSize: number = h1Size + (titleSize - h1Size) * percent;
        const lineHeight: number = h1Height + (titleHeight - h1Height) * percent;

        title.style.transform = 'translate(' + translateX + 'px, ' + translateY + 'px' + ')';
        title.style.fontSize = fontSize + 'px';
        title.style.lineHeight = lineHeight + 'px';
    }

    startAnimation(): void {
        if (!this.isAnimating) {
            this.element.addClass('is-animating');

            this.isAnimating = true;

            window.removeEventListener('resize', this.animate.bind(this));
            this.animationRequest = requestAnimationFrame(this.animate.bind(this));
        }
    }

    adjustAnimationTiming(percent: number, length: number, delay: number): number {
        const lower: number = Math.max((1 - percent) - delay, 0);

        return 1 - Math.min(lower / length, 1);
    }

    animate(times?: number): void {
        if (this.isAnimating) {
            this.animationPercent = Math.max(0, this.animationPercent - 0.03);
        }

        if (this.animationPercent > 0) {
            this.titles.each((index: number) => {
                this.setTitlePosition(index, this.smoothstep(this.adjustAnimationTiming(this.animationPercent, this.timingLength, (1- this.timingLength) / 3 * index)));
            });

            if (times !== undefined) {
                if (times > 0) {
                    this.animationRequest = requestAnimationFrame(() => this.animate(times - 1));
                }
            } else {
                this.animationRequest = requestAnimationFrame(this.animate.bind(this));
            }
        } else {
            this.cleanUp();
        }
    }

    cleanUp(): void {
        helpers.enableScroll();
        requestAnimationFrame(() => $('body').addClass('header-is-visible'));
        this.titles.get().forEach((title: HTMLElement) => {
            title.style.transform = '';
            title.style.fontSize = '';
            title.style.lineHeight = '';
        });
    }
}