BookStack/resources/js/components/popup.js

import {fadeIn, fadeOut} from '../services/animations.ts';
import {onSelect} from '../services/dom';
import {Component} from './component';

/**
 * Popup window that will contain other content.
 * This component provides the show/hide functionality
 * with the ability for popup@hide child references to close this.
 */
export class Popup extends Component {

    setup() {
        this.container = this.$el;
        this.hideButtons = this.$manyRefs.hide || [];

        this.onkeyup = null;
        this.onHide = null;
        this.setupListeners();
    }

    setupListeners() {
        let lastMouseDownTarget = null;
        this.container.addEventListener('mousedown', event => {
            lastMouseDownTarget = event.target;
        });

        this.container.addEventListener('click', event => {
            if (event.target === this.container && lastMouseDownTarget === this.container) {
                this.hide();
            }
        });

        onSelect(this.hideButtons, () => this.hide());
    }

    hide(onComplete = null) {
        fadeOut(this.container, 120, onComplete);
        if (this.onkeyup) {
            window.removeEventListener('keyup', this.onkeyup);
            this.onkeyup = null;
        }
        if (this.onHide) {
            this.onHide();
        }
    }

    show(onComplete = null, onHide = null) {
        fadeIn(this.container, 120, onComplete);

        this.onkeyup = event => {
            if (event.key === 'Escape') {
                this.hide();
            }
        };
        window.addEventListener('keyup', this.onkeyup);
        this.onHide = onHide;
    }

}