@blinkk/editor
Version:
Structured content editor with live previews.
121 lines • 4.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentSectionPart = exports.STORAGE_CONTENT_SECTION = void 0;
const __1 = require("..");
const selective_edit_1 = require("@blinkk/selective-edit");
const events_1 = require("../../events");
const autoFields_1 = require("../../autoFields");
exports.STORAGE_CONTENT_SECTION = 'live.content.section';
class ContentSectionPart extends __1.BasePart {
constructor(config) {
super();
this.config = config;
this.selective = new selective_edit_1.SelectiveEditor(this.config.selectiveConfig);
// Override the autofields class.
this.selective.types.globals.AutoFieldsCls = autoFields_1.LiveEditorAutoFields;
if (this.isVisible === undefined) {
const currentSection = this.config.storage.getItem(exports.STORAGE_CONTENT_SECTION);
if (currentSection === null) {
this.isVisible = this.config.isDefaultSection;
}
else {
this.isVisible = this.section === currentSection;
}
}
// 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();
});
// Show a message when there are pending changes and navigating.
window.addEventListener('beforeunload', (evt) => {
if (!this.selective.isClean) {
evt.preventDefault();
evt.returnValue = '';
}
});
}
get canChangeSection() {
return this.selective.isClean;
}
classesForAction() {
return {
le__part__content__header__action: true,
le__button: true,
'le__button--extreme': !this.selective.isValid,
'le__button--primary': this.selective.isValid,
};
}
classesForPart() {
const classes = {
le__part__content__section: true,
};
classes[`le__part__content__${this.section}`] = true;
return classes;
}
handleAction(evt) {
console.log('missing action handler.');
}
get isActionDisabled() {
return (this.isProcessing || !this.selective.isValid || this.selective.isClean);
}
get label() {
return 'Section';
}
labelForAction(editor) {
if (this.isProcessing) {
return editor.config.labels?.contentSaveProcessing || 'Saving';
}
else if (!this.selective.isValid) {
return editor.config.labels?.contentSaveErrors || 'Form errors';
}
else if (this.selective.isClean) {
return editor.config.labels?.contentSaveClean || 'No changes';
}
return editor.config.labels?.contentSave || 'Save';
}
get section() {
return 'section';
}
template(editor) {
if (!this.isVisible) {
return selective_edit_1.html ``;
}
return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
${this.templateContent(editor)}
</div>`;
}
templateAction(editor) {
return selective_edit_1.html `<button
class=${selective_edit_1.classMap(this.classesForAction())}
=${this.handleAction.bind(this)}
?disabled=${this.isActionDisabled}
>
${this.labelForAction(editor)}
</button>`;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
templateContent(editor) {
return selective_edit_1.html `section content`;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
templateStatus(editor) {
if (!this.selective.isValid) {
return selective_edit_1.html `<div
class=${selective_edit_1.classMap({
le__part__content__header__status: true,
'le__part__content__header__status--error': true,
'le__tooltip--top': true,
})}
data-tip="Form errors"
>
<span class="material-icons">error</span>
</div>`;
}
return selective_edit_1.html ``;
}
}
exports.ContentSectionPart = ContentSectionPart;
//# sourceMappingURL=section.js.map