@blinkk/editor/dist/src/editor/parts/menu/index.js

Structured content editor with live previews.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuSectionPart = void 0;
const __1 = require("..");
const selective_edit_1 = require("@blinkk/selective-edit");
const slugify_1 = require("../../../utility/slugify");
class MenuSectionPart extends __1.BasePart {
    constructor(config) {
        super();
        this.config = config;
        if (this.isExpanded === undefined) {
            this.isExpanded = this.config.storage.getItemBoolean(`live.menu.section.${this.key}.isExpanded`, this.config.isExpandedByDefault ? true : false);
        }
    }
    classesForPart() {
        return {
            le__part__menu__section: true,
        };
    }
    get key() {
        return slugify_1.slugify(this.title);
    }
    template(editor) {
        return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
      ${this.templateHeader(editor)}
      ${this.isExpanded ? this.templateContent(editor) : ''}
    </div>`;
    }
    templateActionExpandCollapse(editor) {
        const icon = this.isExpanded ? 'expand_more' : 'chevron_right';
        return selective_edit_1.html `<div class="le__part__menu__action">
      <span class="material-icons">${icon}</span>
    </div>`;
    }
    templateContent(editor) {
        return selective_edit_1.html `section content`;
    }
    templateHeader(editor) {
        const handleClick = () => {
            this.isExpanded = !this.isExpanded;
            this.config.storage.setItem(`live.menu.section.${this.key}.isExpanded`, String(this.isExpanded));
            this.render();
        };
        return selective_edit_1.html `<div
      class="le__part__menu__section__header le__clickable"
      @click=${handleClick}
    >
      <div class="le__part__menu__section__icon">
        ${this.templateActionExpandCollapse(editor)}
      </div>
      ${this.templateTitle(editor)}
    </div>`;
    }
    templateTitle(editor) {
        return selective_edit_1.html `<div class="le__part__menu__section__title">
      ${this.title}
    </div>`;
    }
    get title() {
        return 'Section';
    }
}
exports.MenuSectionPart = MenuSectionPart;
//# sourceMappingURL=index.js.map