@blinkk/editor
Version:
Structured content editor with live previews.
196 lines • 6.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContentFooterPart = void 0;
const __1 = require("..");
const selective_edit_1 = require("@blinkk/selective-edit");
class ContentFooterPart extends __1.BasePart {
constructor(config) {
super();
this.config = config;
}
classesForPart() {
return {
le__part__content__footer: true,
};
}
template(editor) {
return selective_edit_1.html `<div class=${selective_edit_1.classMap(this.classesForPart())}>
<div class="le__part__content__logo">
<svg
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
x="0"
y="0"
version="1.1"
xml:space="preserve"
viewBox="0 0 504.4 505.6"
>
<style>
.st0 {
fill: #922169;
}
.st1 {
fill: #ed3784;
}
.st2 {
fill: #f59ec1;
}
.st3 {
fill: #0f76bc;
}
.st7 {
fill: #9bc1dd;
}
.st8 {
fill: #e9e9ea;
}
.st11,
.st9 {
enable-background: new;
}
.st9 {
opacity: 0.56;
fill: #2f2e73;
}
.st11 {
opacity: 0.34;
fill: #0f76bc;
}
</style>
<circle cx="252.2" cy="252.3" r="252.2" />
<path
d="M199.5 334.5l2.2 166.1c16.8 3.4 34.1 5.1 51.9 5s35.1-2.2 51.8-6l-2.2-166.1-51.9.5-51.8.5z"
class="st0"
/>
<path
d="M251.5 341.3l-40.1.4 1.3 131.1 22.6-14.2 17.5 13.8 17.2-14.1 22.9 13.7-1.4-131.1-40 .4z"
class="st1"
/>
<path
d="M252.5 341h-27v101.2l14-9.7 13 9.7 13.1-9.7 14 9.7V341h-27.1z"
class="st2"
/>
<path
d="M345.7 391.9h-29.6V497c21-5.6 40.8-13.9 59.2-24.4V392h-29.6v-.1zm-189.2 0h-29.6v79c18.3 10.9 38.2 19.5 59.2 25.3V391.9h-29.6z"
class="st0"
/>
<path
d="M345 368.6l-22.9.2.7 74.7 12.9-8 10 7.8 9.8-8 13.1 7.8-.8-74.8-22.8.3z"
class="st1"
/>
<path
d="M345.7 369.2h-15.4v57.7l8-5.6 7.4 5.6 7.5-5.6 8 5.6v-57.7h-15.5z"
class="st2"
/>
<path
d="M156.5 369.2h-22.9v74.7l13-7.9 9.9 7.9 9.9-7.9 13 7.9v-74.7h-22.9z"
class="st1"
/>
<path
d="M156.5 369.2h-15.4v57.7l7.9-5.6 7.5 5.6 7.5-5.6 7.9 5.6v-57.7h-15.4z"
class="st2"
/>
<path
d="M156.9 127.1v-.2s-.1 0-.2.1c-.1-.1-.2-.1-.2-.1v.2c-3.2 1.6-29 15.8-29 43.6V392h58.4V170.7c0-27.8-25.8-42-29-43.6z"
class="st3"
/>
<path
fill="#2f2e73"
d="M345.5 127.1v-.2s-.1 0-.2.1c-.1-.1-.2-.1-.2-.1v.2c-3.2 1.6-29 15.8-29 43.6V392h58.4V170.7c0-27.8-25.8-42-29-43.6z"
/>
<path
fill="#fcbe52"
d="M252.3 0s-51.9 24.9-51.9 77.2v215.3h51.9V0z"
/>
<path
fill="#e08444"
d="M252.3 0s51.8 24.9 51.8 77.2v215.3h-51.9L252.3 0z"
/>
<path
d="M438.2 328.3l-103.1-73.8-33.6-57L272.3 82l-19.8-11.7v309.9h169.6l16.2 41.6-.1-93.5z"
class="st7"
/>
<path
d="M232.8 82l-29.2 115.5-33.6 57-103.1 73.8v91.8L83 380.2h169.5V70.3L232.8 82z"
class="st8"
/>
<path
d="M335.1 254.5l-30.7 125.7h-24.8l21.9-182.7 33.6 57z"
class="st9"
/>
<path
fill="#010101"
d="M252.5 141.9l17.6 5.2 25.7 27.7 5.7 22.7-32.9-21.5h-16.1v-34.1zm0-42.3h14.7l11.5 7.8-6.4-25.4-19.8-11.7v29.3z"
/>
<path
d="M170 254.5l30.7 125.7h24.8l-21.9-182.7-33.6 57z"
class="st11"
/>
<path
d="M252.5 141.9l-17.5 5.2-25.7 27.7-5.7 22.7 32.9-21.5h16v-34.1zm0-42.3h-14.6l-11.5 7.8 6.4-25.4 19.7-11.7v29.3z"
class="st3"
/>
<path d="M252.5 380.2h51.9v11.7h-51.9v-11.7z" class="st7" />
<path d="M252.5 380.2h51.9v11.7h-51.9v-11.7z" class="st9" />
<path d="M200.7 380.2h51.9v11.7h-51.9v-11.7z" class="st8" />
<path d="M200.7 380.2h51.9v11.7h-51.9v-11.7z" class="st11" />
<path d="M422.1 380.2l16.2 41.6-.1-93.5-16.1 51.9z" class="st9" />
<path d="M66.9 328.3v93.8L83 380.2l-16.1-51.9z" class="st11" />
</svg>
</div>
<div class="le__part__content__dev_tools">Developer tools:</div>
<div class="le__part__content__dev_tools__icons">
<div
class=${selective_edit_1.classMap({
le__part__content__dev_tools__icon: true,
'le__part__content__dev_tools__icon--selected': this.config.contentSettings.highlightAuto || false,
'le__tooltip--top': true,
})}
@click=${() => {
this.config.contentSettings.toggleHighlightAuto();
this.render();
}}
aria-label="Highlight auto fields"
aria-role="link"
data-tip="Highlight auto fields"
>
<span class="material-icons">assistant</span>
</div>
<div
class=${selective_edit_1.classMap({
le__part__content__dev_tools__icon: true,
'le__part__content__dev_tools__icon--selected': this.config.contentSettings.showDeepLinks || false,
'le__tooltip--top': true,
})}
@click=${() => {
this.config.contentSettings.toggleShowDeepLinks();
this.render();
}}
aria-label="Deep link to fields"
aria-role="link"
data-tip="Deep link to fields"
>
<span class="material-icons">link</span>
</div>
<div
class=${selective_edit_1.classMap({
le__part__content__dev_tools__icon: true,
'le__part__content__dev_tools__icon--selected': this.config.contentSettings.highlightDirty || false,
'le__tooltip--top': true,
})}
@click=${() => {
this.config.contentSettings.toggleHighlightDirty();
this.render();
}}
aria-label="Highlight changed fields"
aria-role="link"
data-tip="Highlight changed fields"
>
<span class="material-icons">change_history</span>
</div>
</div>
</div>`;
}
}
exports.ContentFooterPart = ContentFooterPart;
//# sourceMappingURL=footer.js.map