mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-09-09 12:19:33 +02:00
- create markdown-write-preview + markdown-preview webcomponents using lit - create form_markdown_editor helper form component - simplify form_dropdown and form_multiselect components - fix partner fields display fixes #93, #94, #120
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { html, LitElement, TemplateResult } from "lit";
|
|
import { customElement, property, queryAssignedNodes } from "lit/decorators.js";
|
|
import { MarkdownPreview } from "./markdown-preview";
|
|
|
|
@customElement("markdown-write-preview")
|
|
export class MarkdownWritePreview extends LitElement {
|
|
@property()
|
|
for!: string;
|
|
|
|
@property()
|
|
_textarea: HTMLTextAreaElement | null = null;
|
|
|
|
@property()
|
|
_markdownPreview!: MarkdownPreview;
|
|
|
|
@queryAssignedNodes("write", true)
|
|
_write!: NodeListOf<HTMLButtonElement>;
|
|
|
|
@queryAssignedNodes("preview", true)
|
|
_preview!: NodeListOf<HTMLButtonElement>;
|
|
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
|
|
this._textarea = document.getElementById(this.for) as HTMLTextAreaElement;
|
|
this._markdownPreview = document.querySelector(
|
|
`markdown-preview[for=${this.for}]`
|
|
) as MarkdownPreview;
|
|
}
|
|
|
|
write(): void {
|
|
this._markdownPreview.hide();
|
|
this._write[0].classList.add("font-semibold");
|
|
this._preview[0].classList.remove("font-semibold");
|
|
}
|
|
|
|
preview(): void {
|
|
this._markdownPreview.show();
|
|
this._preview[0].classList.add("font-semibold");
|
|
this._write[0].classList.remove("font-semibold");
|
|
}
|
|
|
|
render(): TemplateResult<1> {
|
|
return html`<slot name="write" @click="${this.write}"></slot>
|
|
<slot name="preview" @click="${this.preview}"></slot>`;
|
|
}
|
|
}
|