salix/client/core/src/dialog/dialog.js

import {module} from '../module';
import Component from '../lib/component';
import './style.scss';

/**
 * Dialog component.
 */
export default class Dialog extends Component {
    /**
     * Contructor.
     */
    constructor($element) {
        super($element);
        $element.addClass('vn-dialog');
        this.dialog = $element[0].firstChild;
        this.element.addEventListener('mousedown', event => this.onBackgroundMouseDown(event));
    }
    /**
     * Displays the dialog to the user.
     */
    show() {
        let style = this.dialog.style;
        let window = this.window;
        let innerWidth = window.innerWidth;
        let innerHeight = window.innerHeight;
        let width = this.dialog.offsetWidth;
        let height = this.dialog.offsetHeight;
        let screenMargin = 20;
        let dblMargin = screenMargin * 2;

        if (width + screenMargin > innerWidth) {
            width = innerWidth - dblMargin;
            style.width = width + 'px';
        }
        if (height + screenMargin > innerHeight) {
            height = innerHeight - dblMargin;
            style.height = height + 'px';
        }

        this.keypressHandler = event => this.onKeypress(event);
        this.document.addEventListener('keypress', this.keypressHandler);
        this.element.style.display = 'block';

        if (this.onOpen)
            this.onOpen();
    }
    /**
     * Hides the dialog calling the response handler.
     */
    hide() {
        this.fireResponse();
        this.realHide();
    }
    /**
     * Calls the response handler.
     *
     * @param {String} response The response code
     * @return {Boolean} %true if response was canceled, %false otherwise
     */
    fireResponse(response) {
        let cancel = false;
        if (this.onResponse)
            cancel = this.onResponse({response: response});
        return cancel;
    }

    realHide() {
        this.element.style.display = 'none';
        this.document.removeEventListener('keypress', this.keypressHandler);
        this.lastEvent = null;
    }

    onButtonClick(event) {
        let buttonBar = this.element.querySelector('.button-bar');
        let buttons = buttonBar.querySelector('tpl-buttons');
        let node = event.target;
        while (node.parentNode != buttons) {
            if (node == buttonBar) return;
            node = node.parentNode;
        }

        let response = node.getAttribute('response');
        let cancel = this.fireResponse(response);
        if (cancel !== false) this.realHide();
    }

    onDialogMouseDown(event) {
        this.lastEvent = event;
    }

    onBackgroundMouseDown(event) {
        if (event != this.lastEvent)
            this.hide();
    }

    onKeypress(event) {
        if (event.keyCode == 27) // Esc
            this.hide();
    }
}
Dialog.$inject = ['$element'];

module.component('vnDialog', {
    template: require('./dialog.html'),
    transclude: {
        tplBody: 'tplBody',
        tplButtons: 'tplButtons'
    },
    bindings: {
        onOpen: '&?',
        onResponse: '&?'
    },
    controller: Dialog
});