@blinkk/editor/dist/src/editor/parts/content.js

Structured content editor with live previews.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentSettings = exports.ContentPart = void 0;
const _1 = require(".");
const selective_edit_1 = require("@blinkk/selective-edit");
const mixins_1 = require("@blinkk/selective-edit/dist/src/mixins");
const footer_1 = require("./content/footer");
const header_1 = require("./content/header");
const toolbar_1 = require("./content/toolbar");
const events_1 = require("../events");
const sectionFields_1 = require("./content/sectionFields");
const sectionHistory_1 = require("./content/sectionHistory");
const listeners_1 = require("../../mixin/listeners");
const sectionMedia_1 = require("./content/sectionMedia");
const sectionRaw_1 = require("./content/sectionRaw");
const STORAGE_SETTING_HIGHLIGHT_AUTO = 'live.content.dev.hightlightAuto';
const STORAGE_SETTING_HIGHLIGHT_DIRTY = 'live.content.dev.hightlightDirty';
const STORAGE_SETTING_SHOW_DEEP_LINKS = 'live.content.dev.showDeepLinks';
class ContentPart extends _1.BasePart {
    constructor(config) {
        super();
        this.config = config;
        this.contentSettings = new ContentSettings(this.config.storage);
        // Order of appearance.
        this.sections = [
            new sectionFields_1.FieldsPart({
                selectiveConfig: this.config.selectiveConfig,
                state: this.config.state,
                isDefaultSection: true,
                storage: this.config.storage,
            }),
            new sectionMedia_1.MediaPart({
                selectiveConfig: this.config.selectiveConfig,
                state: this.config.state,
                storage: this.config.storage,
            }),
            new sectionRaw_1.RawPart({
                selectiveConfig: this.config.selectiveConfig,
                state: this.config.state,
                storage: this.config.storage,
            }),
            new sectionHistory_1.HistoryPart({
                selectiveConfig: this.config.selectiveConfig,
                state: this.config.state,
                storage: this.config.storage,
            }),
        ];
        this.parts = {
            footer: new footer_1.ContentFooterPart({
                contentSettings: this.contentSettings,
                storage: this.config.storage,
            }),
            header: new header_1.ContentHeaderPart({
                sections: this.sections,
                state: this.config.state,
                storage: this.config.storage,
            }),
            toolbar: new toolbar_1.ContentToolbarPart({
                state: this.config.state,
                storage: this.config.storage,
            }),
        };
        // Watch for a load file event and load the file.
        document.addEventListener(events_1.EVENT_FILE_LOAD, (evt) => {
            const customEvent = evt;
            this.config.state.getFile(customEvent.detail);
        });
    }
    classesForPart() {
        return {
            le__part__content: true,
        };
    }
    get isExpanded() {
        return this.parts.toolbar.isExpanded || false;
    }
    template(editor) {
        return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
      ${this.parts.toolbar.template(editor)}
      ${this.parts.header.template(editor)} ${this.templateSections(editor)}
      ${this.parts.footer.template(editor)}
    </div>`;
    }
    templateSections(editor) {
        return selective_edit_1.html `<div class="le__part__content__sections">
      ${selective_edit_1.repeat(this.sections, part => part.section, part => part.template(editor))}
    </div>`;
    }
}
exports.ContentPart = ContentPart;
class ContentSettings extends listeners_1.ListenersMixin(mixins_1.Base) {
    constructor(storage) {
        super();
        this.storage = storage;
        this._highlightAuto = this.storage.getItemBoolean(STORAGE_SETTING_HIGHLIGHT_AUTO);
        this._highlightDirty = this.storage.getItemBoolean(STORAGE_SETTING_HIGHLIGHT_DIRTY);
        this._showDeepLinks = this.storage.getItemBoolean(STORAGE_SETTING_SHOW_DEEP_LINKS);
    }
    get highlightAuto() {
        return this._highlightAuto || false;
    }
    set highlightAuto(value) {
        this._highlightAuto = value;
        this.storage.setItemBoolean(STORAGE_SETTING_HIGHLIGHT_AUTO, value);
        this.triggerListener('highlightAuto', this.highlightAuto);
    }
    get highlightDirty() {
        return this._highlightDirty || false;
    }
    set highlightDirty(value) {
        this._highlightDirty = value;
        this.storage.setItemBoolean(STORAGE_SETTING_HIGHLIGHT_DIRTY, value);
        this.triggerListener('highlightDirty', this.highlightDirty);
    }
    get showDeepLinks() {
        return this._showDeepLinks || false;
    }
    set showDeepLinks(value) {
        this._showDeepLinks = value;
        this.storage.setItemBoolean(STORAGE_SETTING_SHOW_DEEP_LINKS, value);
        this.triggerListener('showDeepLinks', this.showDeepLinks);
    }
    toggleHighlightAuto() {
        this.highlightAuto = !this.highlightAuto;
    }
    toggleHighlightDirty() {
        this.highlightDirty = !this.highlightDirty;
    }
    toggleShowDeepLinks() {
        this.showDeepLinks = !this.showDeepLinks;
    }
}
exports.ContentSettings = ContentSettings;
//# sourceMappingURL=content.js.map