Modal

import Component from '../component/component';
import Helpers from '../helpers/helpers';
import Icon from '../icon/icon';

import './modal.scss';

export default class Modal extends Component {
    static initSelector: string = '.js-modal';

    closeButton: JQuery;
    container: JQuery;
    hasContainer: boolean;
    inner: JQuery;
    header: JQuery;
    keyboardHandler: () => void;

    constructor(target: HTMLElement, open: boolean = true) {
        super(target);

        this.hasContainer = false;
        this.container = $('<div class="modal-container"></div>');
        this.inner = $('<div class="modal-container__inner"></div>');
        this.header = $('<div class="modal__header"></div>');
        this.closeButton = $('<button class="modal__close">' + Icon.render('close-24', 'modal__close-icon') + '</button>');

        this.keyboardHandler = this.keyboard.bind(this);

        if (open) {
            this.open();
        }
    }

    bindEventHandlers(): void {
        this.container.on('click', (event: JQuery.TriggeredEvent): void => {
            if (event.target === event.currentTarget || event.target === this.inner[0]) {
                event.preventDefault();

                this.close();
            }
        });

        this.closeButton.on('click', (event: JQuery.Event): void => {
            event.preventDefault();

            this.close();
        });
    }

    open(): void {
        if (!this.hasContainer) {
            this.inner.append(this.element);
            this.container.append(this.inner);
            this.element.prepend(this.header);
            this.header.prepend(this.closeButton);

            $('body').append(this.container);

            this.bindEventHandlers();
            this.hasContainer = true;
        }

        this.container.addClass('is-visible');
        this.container.trigger('open-modal');

        Helpers.disableScroll();

        $(document).on('keyup.modal', this.keyboardHandler);
    }

    close(): void {
        this.container.removeClass('is-visible');

        Helpers.enableScroll();

        $(document).off('keyup.modal', this.keyboardHandler);

        $('.cursor-pet').removeClass('is-hover').removeClass('is-text').removeClass('is-modal');
        $('.cursor-pet__label').text('');
    }

    keyboard(event: JQuery.Event): void {
        if (event.keyCode === 27) {
            this.close();
        }
    }
}

$(document).on('click', '[data-js="open-modal"]', (event: JQuery.TriggeredEvent): void => {
    event.preventDefault();

    const trigger: JQuery<EventTarget> = $(event.currentTarget);
    const element: JQuery = $(trigger.attr('href'));
    const type: string = Component.getDataName(Modal.initSelector);
    const dataAttr: string = type + 'Class';

    if (element.data(dataAttr)) {
        const instance: Modal = element.data(dataAttr);

        instance.open();
    } else {
        const instance: Modal = new Modal(element[0], true);

        element.data(dataAttr, instance);
    }
});

import Component from '../component/component';
import Helpers from '../helpers/helpers';
import Icon from '../icon/icon';

import './modal.scss';

export default class Modal extends Component {
    static initSelector: string = '.js-modal';

    closeButton: JQuery;
    container: JQuery;
    hasContainer: boolean;
    inner: JQuery;
    header: JQuery;
    keyboardHandler: () => void;

    constructor(target: HTMLElement, open: boolean = true) {
        super(target);

        this.hasContainer = false;
        this.container = $('<div class="modal-container"></div>');
        this.inner = $('<div class="modal-container__inner"></div>');
        this.header = $('<div class="modal__header"></div>');
        this.closeButton = $('<button class="modal__close">' + Icon.render('close-24', 'modal__close-icon') + '</button>');

        this.keyboardHandler = this.keyboard.bind(this);

        if (open) {
            this.open();
        }
    }

    bindEventHandlers(): void {
        this.container.on('click', (event: JQuery.TriggeredEvent): void => {
            if (event.target === event.currentTarget || event.target === this.inner[0]) {
                event.preventDefault();

                this.close();
            }
        });

        this.closeButton.on('click', (event: JQuery.Event): void => {
            event.preventDefault();

            this.close();
        });
    }

    open(): void {
        if (!this.hasContainer) {
            this.inner.append(this.element);
            this.container.append(this.inner);
            this.element.prepend(this.header);
            this.header.prepend(this.closeButton);

            $('body').append(this.container);

            this.bindEventHandlers();
            this.hasContainer = true;
        }

        this.container.addClass('is-visible');
        this.container.trigger('open-modal');

        Helpers.disableScroll();

        $(document).on('keyup.modal', this.keyboardHandler);
    }

    close(): void {
        this.container.removeClass('is-visible');

        Helpers.enableScroll();

        $(document).off('keyup.modal', this.keyboardHandler);

        $('.cursor-pet').removeClass('is-hover').removeClass('is-text').removeClass('is-modal');
        $('.cursor-pet__label').text('');
    }

    keyboard(event: JQuery.Event): void {
        if (event.keyCode === 27) {
            this.close();
        }
    }
}

$(document).on('click', '[data-js="open-modal"]', (event: JQuery.TriggeredEvent): void => {
    event.preventDefault();

    const trigger: JQuery<EventTarget> = $(event.currentTarget);
    const element: JQuery = $(trigger.attr('href'));
    const type: string = Component.getDataName(Modal.initSelector);
    const dataAttr: string = type + 'Class';

    if (element.data(dataAttr)) {
        const instance: Modal = element.data(dataAttr);

        instance.open();
    } else {
        const instance: Modal = new Modal(element[0], true);

        element.data(dataAttr, instance);
    }
});