confirm.plugin.js

import $ from 'external/jquery';
import AtkPlugin from './atk.plugin';

/**
 * A Fomantic-UI Modal dialog for confirming an action.
 *
 * Will execute onApprove function when user click ok button;
 * Will execute onDeny function when user click cancel button.
 *
 * Fomantic-UI modal option can be pass using modalOptions object.
 * Setting onApprove and onDeny function within modalOptions object will override
 * onApprove and onDeny current setting.
 */
export default class AtkConfirmPlugin extends AtkPlugin {
    main() {
        const $m = $('<div class="ui modal" />')
            .appendTo('body')
            .html(this.getDialogHtml(this.settings.message));

        $m.addClass(this.settings.size);

        let options = {};

        let context = this;
        if (this.settings.context) {
            context = this.settings.context;
        }

        // create wrapper function for using proper "this" context
        if (this.settings.onApprove) {
            options.onApprove = () => {
                this.settings.onApprove.call(context);
            };
        }
        if (this.settings.onDeny) {
            options.onDeny = () => {
                this.settings.onDeny.call(context);
            };
        }

        options = Object.assign(options, this.settings.modalOptions);

        $m.data('needRemove', true).modal(options).modal('show');
    }

    getDialogHtml(message) {
        return `
          <div class=" content">${message}</div>
          <div class="actions">
            <div class="ui approve primary button">${this.settings.options.button.ok}</div>
            <div class="ui cancel button">${this.settings.options.button.cancel}</div>
           </div>
          `;
    }
}

AtkConfirmPlugin.DEFAULTS = {
    message: null,
    size: 'tiny',
    onApprove: null,
    onDeny: null,
    options: { button: { ok: 'Ok', cancel: 'Cancel' } },
    modalOptions: { closable: false },
    context: null,
};