Profile

import Component from '../component/component';

import './profile.scss';

export interface IProfileSettings {
    animationDuration?: number;
    closingClass?: string;
    contentSelector?: string;
    nameSelector?: string;
    openClass?: string;
    openingClass?: string;
    toggleSelector?: string;
}

export const profileSettings: IProfileSettings = {
    animationDuration: 300,
    closingClass: 'is-closing',
    contentSelector: '.profile__content',
    nameSelector: '.profile__name',
    openClass: 'is-open',
    openingClass: 'is-opening',
    toggleSelector: '.js-profile-toggle',
};

export default class Profile extends Component {
    static initSelector: string = '.profile';

    content: JQuery<HTMLElement>;
    inner: JQuery<HTMLElement>;
    isOpen: boolean;
    name: JQuery<HTMLElement>;
    timeout: number;
    nameTimeout: number;
    toggleButton: JQuery<HTMLElement>;
    settings: IProfileSettings;

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

        this.settings = profileSettings;

        this.content = this.element.find(this.settings.contentSelector);
        this.inner = this.content.children().first();
        this.isOpen = false;
        this.toggleButton = this.element.find(this.settings.toggleSelector);
        this.name = this.toggleButton.find(this.settings.nameSelector);

        this.toggleButton.on('click', this.handleClick.bind(this));
    }

    handleClick(): void {
        this.toggle();
    }

    toggle(): void {
        this.isOpen = !this.isOpen;

        if (this.isOpen) {
            this.element.addClass(this.settings.openingClass);

            this.open(this.content);
            this.hideName();
        } else {
            this.element.addClass(this.settings.closingClass);

            this.close(this.content);
            this.showName();
        }
    }

    open(el: JQuery<HTMLElement>): void {
        el.css({
            maxHeight: this.inner.innerHeight(),
        });

        clearTimeout(this.timeout);

        this.timeout = window.setTimeout(() => {
            el.removeAttr('style');

            this.element.removeClass(this.settings.openingClass);
            this.element.addClass(this.settings.openClass);
        }, this.settings.animationDuration);
    }

    close(el: JQuery<HTMLElement>): void {
        el.css({
            maxHeight: this.inner.innerHeight(),
        });

        this.element.removeClass(this.settings.openClass);

        clearTimeout(this.timeout);

        this.timeout = window.setTimeout(() => {
            el.css({
                maxHeight: 0,
            });

            clearTimeout(this.timeout);

            this.timeout = window.setTimeout(() => {
                el.removeAttr('style');

                this.element.removeClass(this.settings.closingClass);
            }, this.settings.animationDuration);
        }, 10);
    }

    hideName(): void {
        const inner: JQuery<HTMLElement> = this.name.children().first();

        this.name.css({
            maxHeight: inner.outerHeight(),
        });

        clearTimeout(this.nameTimeout);

        this.nameTimeout = window.setTimeout(() => {
            this.name.css({
                maxHeight: 0,
            });

            clearTimeout(this.nameTimeout);

            this.nameTimeout = window.setTimeout(() => {
                this.name.removeAttr('style');
            }, this.settings.animationDuration);
        }, 10);
    }

    showName(): void {
        const inner: JQuery<HTMLElement> = this.name.children().first();

        this.name.css({
            maxHeight: inner.outerHeight(),
        });

        clearTimeout(this.nameTimeout);

        this.nameTimeout = window.setTimeout(() => {
            this.name.removeAttr('style');
        }, this.settings.animationDuration);
    }
}