@blinkk/editor
Version:
Structured content editor with live previews.
277 lines • 9.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormDialogModal = exports.DialogModal = exports.Modal = exports.DialogActionLevel = exports.DialogPriorityLevel = void 0;
const selective_edit_1 = require("@blinkk/selective-edit");
const template_1 = require("../template");
const _1 = require(".");
const listeners_1 = require("../../mixin/listeners");
const uuid_1 = require("@blinkk/selective-edit/dist/src/mixins/uuid");
const error_1 = require("./error");
const events_1 = require("../events");
/**
* Priority of the modal.
*
* Used to determine the stacking order when multiple modals are
* displayed at once.
*/
var DialogPriorityLevel;
(function (DialogPriorityLevel) {
DialogPriorityLevel[DialogPriorityLevel["Low"] = 0] = "Low";
DialogPriorityLevel[DialogPriorityLevel["Normal"] = 1] = "Normal";
DialogPriorityLevel[DialogPriorityLevel["High"] = 2] = "High";
})(DialogPriorityLevel = exports.DialogPriorityLevel || (exports.DialogPriorityLevel = {}));
var DialogActionLevel;
(function (DialogActionLevel) {
DialogActionLevel[DialogActionLevel["Tertiary"] = 0] = "Tertiary";
DialogActionLevel[DialogActionLevel["Secondary"] = 1] = "Secondary";
DialogActionLevel[DialogActionLevel["Primary"] = 2] = "Primary";
DialogActionLevel[DialogActionLevel["Extreme"] = 3] = "Extreme";
})(DialogActionLevel = exports.DialogActionLevel || (exports.DialogActionLevel = {}));
class Modal extends listeners_1.ListenersMixin(uuid_1.UuidMixin(_1.BaseUI)) {
constructor(config) {
super();
this.config = config;
this.isVisible = false;
}
classesForModal() {
const classes = {
le__modal: true,
'le__modal--low_priority': this.config.priority === DialogPriorityLevel.Low,
'le__modal--high_priority': this.config.priority === DialogPriorityLevel.High,
};
if (this.config.classes) {
for (const classname of this.config.classes) {
classes[classname] = true;
}
}
return classes;
}
handleKeyup(evt) {
if (evt.key === 'Escape') {
evt.preventDefault();
evt.stopPropagation();
// Allow for overriding the ability to close when clicking
// out of the modal content.
if (this.config.canClickToCloseFunc) {
if (this.config.canClickToCloseFunc()) {
this.hide();
}
}
else {
this.hide();
}
}
}
handleOffClick(evt) {
const modalContent = selective_edit_1.findParentByClassname(evt.target, 'le__modal__content');
// Do not close when clicking on the modal content.
if (modalContent) {
return;
}
// Allow for overriding the ability to close when clicking
// out of the modal content.
if (this.config.canClickToCloseFunc) {
if (this.config.canClickToCloseFunc()) {
this.hide();
}
}
else {
this.hide();
}
}
hide() {
this.isVisible = false;
this.triggerListener('hide');
this.render();
}
show() {
this.isVisible = true;
this.triggerListener('show');
this.render();
}
template(editor) {
if (!this.isVisible) {
return selective_edit_1.html ``;
}
return selective_edit_1.html `<div
class=${selective_edit_1.classMap(this.classesForModal())}
=${this.handleKeyup.bind(this)}
>
<div
class="le__modal__container"
=${this.handleOffClick.bind(this)}
>
${this.templateContent(editor)}
</div>
</div>`;
}
templateContent(editor) {
if (!this.templateModal) {
return selective_edit_1.html `Modal missing template.`;
}
return selective_edit_1.html `<div class="le__modal__content">
${this.templateModal(editor)}
</div>`;
}
toggle() {
if (this.isVisible) {
this.hide();
}
else {
this.show();
}
}
}
exports.Modal = Modal;
class DialogModal extends Modal {
constructor(config) {
super(config);
this.config = config;
this.actions = [];
}
/**
* Add a cancel action to the dialog.
*/
addCancelAction(label = 'Cancel') {
this.actions.push({
label: label,
isDisabledFunc: () => false,
onClick: () => {
this.hide();
},
});
}
classesForAction(config) {
const classes = {
le__button: true,
le__modal__action: true,
'le__button--extreme': config.level === DialogActionLevel.Extreme,
'le__button--primary': config.level === DialogActionLevel.Primary,
'le__button--secondary': config.level === DialogActionLevel.Secondary,
};
if (config.classes) {
for (const classname of config.classes) {
classes[classname] = true;
}
}
return classes;
}
classesForModal() {
const classes = super.classesForModal();
classes['le__modal--dialog'] = true;
classes['le__modal--processing'] = this.isProcessing || false;
return classes;
}
startProcessing() {
this.isProcessing = true;
this.render();
}
stopProcessing(hideModal = false) {
this.isProcessing = false;
if (hideModal) {
this.isVisible = false;
}
this.render();
}
templateContent(editor) {
return selective_edit_1.html `<div class="le__modal__content">
${this.templateHeader(editor)} ${this.templateTemplate(editor)}
${this.templateFooter(editor)}
</div>`;
}
templateFooter(editor) {
if (!this.actions.length) {
return selective_edit_1.html ``;
}
const tertiaryActions = this.actions.filter((config) => {
return (config.level === DialogActionLevel.Tertiary ||
config.level === undefined);
});
const primaryActions = this.actions.filter((config) => {
return (config.level === DialogActionLevel.Primary ||
config.level === DialogActionLevel.Extreme);
});
const secondaryActions = this.actions.filter((config) => config.level === DialogActionLevel.Secondary);
const templateActionButton = (config) => selective_edit_1.html `<button
class=${selective_edit_1.classMap(this.classesForAction(config))}
?disabled=${config.isDisabledFunc()}
=${config.onClick}
>
${config.label}
</button>`;
return selective_edit_1.html `<div class="le__modal__content__footer">
<div class="le__modal__actions__tertiary">
${selective_edit_1.repeat(tertiaryActions, (config) => config.label, templateActionButton)}
</div>
${this.isProcessing
? template_1.templateLoading(editor, {
padHorizontal: true,
})
: ''}
<div class="le__modal__actions__secondary">
${selective_edit_1.repeat(secondaryActions, (config) => config.label, templateActionButton)}
</div>
<div class="le__modal__actions__primary">
${selective_edit_1.repeat(primaryActions, (config) => config.label, templateActionButton)}
</div>
</div>`;
}
templateHeader(editor) {
if (!this.config.title) {
return selective_edit_1.html ``;
}
return selective_edit_1.html `<div class="le__modal__content__header">
${this.config.title}
</div>`;
}
templateTemplate(editor) {
if (!this.templateModal) {
return selective_edit_1.html `Modal missing template.`;
}
return selective_edit_1.html ` <div class="le__modal__content__template">
${this.templateModal(editor)}
</div>`;
}
}
exports.DialogModal = DialogModal;
class FormDialogModal extends DialogModal {
constructor(config) {
super(config);
this.config = config;
this.data = new selective_edit_1.DeepObject({});
this.selective = new selective_edit_1.SelectiveEditor(this.config.selectiveConfig);
// When the project type is updated the field types change.
// Update the field types on the selective editor which
// also reloads the fields on the selective editor.
document.addEventListener(events_1.EVENT_PROJECT_TYPE_UPDATE, () => {
this.selective.addFieldTypes(this.config.selectiveConfig.fieldTypes || {});
this.render();
});
}
handleKeyup(evt) {
super.handleKeyup(evt);
if (evt.key === 'Enter') {
for (const action of this.actions) {
if (action.isSubmit) {
evt.preventDefault();
evt.stopPropagation();
if (action.isDisabledFunc && action.isDisabledFunc()) {
// Disabled, do nothing.
return;
}
// 'Submit' the form.
action.onClick(evt);
}
}
}
}
templateContent(editor) {
return selective_edit_1.html `<div class="le__modal__content">
${this.templateHeader(editor)} ${this.templateTemplate(editor)}
${error_1.templateApiError(editor, this.error, { pad: true })}
${this.templateFooter(editor)}
</div>`;
}
}
exports.FormDialogModal = FormDialogModal;
//# sourceMappingURL=modal.js.map