Hi there

Would be nice to have in core a modal builder implementation like in Ext: frontend_editing.

Idea¶

Simple base structure to create modal and modalButton configuration as builder.
https://github.com/FriendsOfTYPO3/frontend_editing/blob/master/Resources/Public/JavaScript/Modal.js#L47

var builder = {
    constraints: {
        'required': 1,
        'func': 2,
        'int': 4,
    },

    modal: createModalBuilder,
    button: createButtonBuilder,
};

function createModalBuilder (title, message) {
...
    return {
        title: title,
        content: message,
        severity: Severity.info,
        buttons: [],
        additionalCssClasses: ['t3-frontend-editing__modal'],

        translateTitle: function () {
            this.title = translate(this.title);
            return this;
        },
        setSeverity: function (severity) {
            testConstraints(builder.constraints.int, severity, 'severity');
            this.severity = severity;
            return this;
        },
        onReady: function (listener) {
            testConstraints(builder.constraints.func, listener, 'listener');
            // bad callback naming, callback if modal is ready
            /*eslint-disable-next-line id-denylist*/
            this.callback = listener;
            readyListener = listener;
            return this;
        },
        ...
        show: function () {
            ...
            return Modal.advanced(this);
        }
    }
}
...

Example¶

So we have a nice configuration builder to make it simple to use:

return builder.modal(title, message)
    .setSeverity(Severity.warning)
    .dismissOnButtonClick();
    .onEscape(callbacks.yes)
    .appendButton(
        builder.button(translateKeys.okayLabel)
            .translateLabel()
            .onClick(callbacks.yes)
            .setActive()
    );

Hint: With a builder concept one would also be able to build modals easly by YAML.