books/client/ui/modal.js

const $ = require('jquery');
const bootstrap = require('bootstrap'); // eslint-disable-line
const Observable = require('frappejs/utils/observable');

module.exports = class Modal extends Observable {
    constructor({ title, body, primary, secondary }) {
        super();
        Object.assign(this, arguments[0]);
        this.make();
        this.show();
    }

    make() {
        this.$modal = $(`<div class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">${this.title}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ${this.getBodyHTML()}
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>`).appendTo(document.body);
        this.modal = this.$modal.get(0);

        if (this.primary) {
            this.addPrimary(this.primary.label, this.primary.action);
        }
        if (this.secondary) {
            this.addSecondary(this.secondary.label, this.secondary.action);
        }

        this.$modal.on('hidden.bs.modal', () => this.trigger('hide'));
        this.$modal.on('shown.bs.modal', () => {
            this.trigger('show');
        });
    }

    getBodyHTML() {
        return this.body || '';
    }

    addPrimary(label, action) {
        return $(`<button type="button" class="btn btn-primary">
            ${label}</button>`)
            .appendTo(this.$modal.find('.modal-footer'))
            .on('click', () => action(this));
    }

    addSecondary(label, action) {
        return $(`<button type="button" class="btn btn-secondary">
            ${label}</button>`)
            .appendTo(this.$modal.find('.modal-footer'))
            .on('click', () => action(this));
    }

    setTitle(title) {
        this.$modal.find('.modal-title').text(title);
    }

    show() {
        this.$modal.modal('show');
    }

    hide() {
        this.$modal.modal('hide');
    }

    getBody() {
        return this.$modal.find('.modal-body').get(0);
    }
}