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

Structured content editor with live previews.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuPart = void 0;
const _1 = require(".");
const modal_1 = require("../ui/modal");
const selective_edit_1 = require("@blinkk/selective-edit");
const events_1 = require("../events");
const site_1 = require("./menu/site");
const users_1 = require("./menu/users");
const workspaces_1 = require("./menu/workspaces");
const MODAL_KEY = 'menu';
const STORAGE_DOCKED_KEY = 'live.menu.isDocked';
class MenuPart extends _1.BasePart {
    constructor(config) {
        super();
        this.config = config;
        this.isDocked = this.config.storage.getItemBoolean(STORAGE_DOCKED_KEY);
        this.parts = {
            site: new site_1.SitePart({
                isExpandedByDefault: true,
                state: this.config.state,
                storage: this.config.storage,
            }),
            users: new users_1.UsersPart({
                state: this.config.state,
                storage: this.config.storage,
            }),
            workspaces: new workspaces_1.WorkspacesPart({
                state: this.config.state,
                storage: this.config.storage,
            }),
        };
    }
    createModal(editor) {
        if (!editor.parts.modals.modals[MODAL_KEY]) {
            const modal = new modal_1.Modal({
                classes: ['le__modal--docked', 'le__modal--docked-left'],
                priority: modal_1.DialogPriorityLevel.Low,
            });
            modal.templateModal = this.templateStructure.bind(this);
            this.modal = modal;
            editor.parts.modals.modals[MODAL_KEY] = modal;
            document.addEventListener(events_1.EVENT_FILE_LOAD_COMPLETE, () => {
                // When loading a file, close the menu modal.
                modal.hide();
            });
        }
        return editor.parts.modals.modals[MODAL_KEY];
    }
    classesForPart() {
        return {
            le__part__menu: true,
        };
    }
    /**
     * Close the menu when it is not docked.
     */
    close() {
        if (this.isDocked) {
            return;
        }
        this.modal?.hide();
    }
    /**
     * Dock the menu.
     */
    dock() {
        this.isDocked = true;
        this.config.storage.setItemBoolean(STORAGE_DOCKED_KEY, this.isDocked);
        this.render();
    }
    loadProject() {
        this.config.state.getProject();
    }
    /**
     * Open the menu when it is not docked.
     */
    open() {
        if (this.isDocked) {
            return;
        }
        this.modal?.show();
    }
    template(editor) {
        if (!this.isDocked) {
            // Let the modal handle the display of the menu.
            this.createModal(editor);
            return selective_edit_1.html ``;
        }
        return this.templateStructure(editor);
    }
    templateActionDocking(editor) {
        let icon = 'last_page';
        let tip = 'Dock menu';
        let handleClick = () => {
            this.close();
            this.dock();
        };
        if (this.isDocked) {
            handleClick = () => {
                this.undock();
            };
            icon = 'first_page';
            tip = 'Undock menu';
        }
        return selective_edit_1.html `<div
      class="le__part__menu__action le__clickable le__tooltip--bottom-right"
      @click=${handleClick}
      data-tip=${tip}
    >
      <span class="material-icons">${icon}</span>
    </div>`;
    }
    templateActionClose(editor) {
        if (this.isDocked) {
            return selective_edit_1.html ``;
        }
        const handleClick = () => {
            this.close();
        };
        return selective_edit_1.html `<div
      class="le__part__menu__action le__clickable le__tooltip--bottom-right"
      @click=${handleClick}
      data-tip="Close menu"
    >
      <span class="material-icons">close</span>
    </div>`;
    }
    templateContent(editor) {
        return selective_edit_1.html `<div class="le__part__menu__content">
      ${this.parts.workspaces.template(editor)}
      ${this.parts.site.template(editor)} ${this.parts.users.template(editor)}
    </div>`;
    }
    templateMenu(editor) {
        const project = this.config.state.project;
        // Lazy load the project.
        if (!project) {
            this.loadProject();
        }
        return selective_edit_1.html `<div class="le__part__menu__header">
      <div class="le__part__menu__project">
        ${project?.title || selective_edit_1.html `&nbsp;`}
      </div>
      <div class="le__actions">
        ${this.templateActionDocking(editor)}
        ${this.templateActionClose(editor)}
      </div>
    </div>`;
    }
    templateStructure(editor) {
        return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
      ${this.templateMenu(editor)} ${this.templateContent(editor)}
    </div>`;
    }
    /**
     * Toggle the menu when it is not docked.
     */
    toggle() {
        if (this.isDocked) {
            return;
        }
        this.modal?.toggle();
    }
    /**
     * Undock the menu.
     */
    undock() {
        this.isDocked = false;
        this.config.storage.setItemBoolean(STORAGE_DOCKED_KEY, this.isDocked);
        this.render();
    }
}
exports.MenuPart = MenuPart;
//# sourceMappingURL=menu.js.map