@blinkk/editor
Version:
Structured content editor with live previews.
76 lines • 2.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentToolbarPart = void 0;
const __1 = require("..");
const selective_edit_1 = require("@blinkk/selective-edit");
const api_1 = require("../../api");
const preview_1 = require("@blinkk/selective-edit/dist/src/utility/preview");
const STORAGE_EXPANDED_KEY = 'live.content.isExpanded';
class ContentToolbarPart extends __1.BasePart {
constructor(config) {
super();
this.config = config;
this.isExpanded = this.config.storage.getItemBoolean(STORAGE_EXPANDED_KEY);
}
classesForPart() {
return {
le__part__content__toolbar: true,
};
}
getIconForUrl(url) {
if (url.level === api_1.UrlLevel.Public) {
return 'public';
}
if (url.level === api_1.UrlLevel.Protected) {
return 'vpn_lock';
}
if (url.level === api_1.UrlLevel.Source) {
return 'source';
}
return 'lock';
}
template(editor) {
return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
<div class="le__part__content__toolbar__label">
<strong>${editor.config.labels?.file || 'File'}:</strong>
${preview_1.findPreviewValue(this.config.state?.file?.data || {}, [], this.config.state.file?.file.path || '')}
</div>
<div class="le__part__content__toolbar__icons">
${selective_edit_1.repeat(this.config.state?.file?.urls || [], url => {
url.label;
}, url => {
return selective_edit_1.html `<a
href="${url.url}"
class="le__tooltip--top"
data-tip=${url.label}
target="_blank"
><span class="material-icons">${this.getIconForUrl(url)}</span></a
>`;
})}
${this.templateExpanded(editor)}
</div>
</div>`;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
templateExpanded(editor) {
// If there is nothing to preview, do not need an expand button.
if (!editor.state.file?.url) {
return selective_edit_1.html ``;
}
return selective_edit_1.html `<div
class="le__clickable le__tooltip--top"
data-tip=${this.isExpanded ? 'Content and preview' : 'Content only'}
=${() => {
this.isExpanded = !this.isExpanded;
this.config.storage.setItemBoolean(STORAGE_EXPANDED_KEY, this.isExpanded);
this.render();
}}
>
<span class="material-icons"
>${this.isExpanded ? 'fullscreen_exit' : 'fullscreen'}</span
>
</div>`;
}
}
exports.ContentToolbarPart = ContentToolbarPart;
//# sourceMappingURL=toolbar.js.map