klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-22 15:51:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Automatically move inner html in created node when inheriting from HTMLElement

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-10-20 18:29:48 +02:00
parent 301fc73687
commit 517263dd58
4 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
core/static/webpack/core/components/ajax-select-index.ts
View File

@ -60,12 +60,6 @@ class AutocompleteSelect extends inheritHtmlElement("select") {
connectedCallback() {
super.connectedCallback();
for (const option of Array.from(this.children).filter(
(child) => child.tagName.toLowerCase() === "option",
)) {
this.removeChild(option);
this.node.appendChild(option);
}
this.widget = new TomSelect(this.node, this.tomSelectSettings());
this.attachBehaviors();
}
@ -129,6 +123,7 @@ abstract class AjaxSelect extends AutocompleteSelect {
protected abstract renderItem(item: TomOption, sanitize: typeof escape_html): string;
protected abstract search(query: string): Promise<TomOption[]>;
private initialValues: TomOption[] = [];
public setFilter(filter?: (items: TomOption[]) => TomOption[]) {
this.filter = filter;
}
@ -176,13 +171,20 @@ abstract class AjaxSelect extends AutocompleteSelect {
};
}
connectedCallback() {
/* Capture initial values before they get moved to the inner node and overridden by tom-select */
this.initialValues = Array.from(this.children)
.filter((child) => child.tagName.toLowerCase() === "slot")
.map((slot) => JSON.parse(slot.innerHTML));
super.connectedCallback();
}
protected attachBehaviors() {
super.attachBehaviors();
// Gather selected options, they must be added with slots like `<slot>json</slot>`
for (const value of Array.from(this.children)
.filter((child) => child.tagName.toLowerCase() === "slot")
.map((slot) => JSON.parse(slot.innerHTML))) {
for (const value of this.initialValues) {
this.widget.addOption(value, false);
this.widget.addItem(value[this.valueField]);
}

4
core/static/webpack/core/components/easymde-index.ts
View File

@ -193,10 +193,6 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
class MarkdownInput extends inheritHtmlElement("textarea") {
connectedCallback() {
super.connectedCallback();
const initialValue = this.querySelector("slot[name='initial']");
if (initialValue as HTMLSlotElement) {
this.node.textContent = initialValue.textContent;
}
loadEasyMde(this.node);
}
}

6
core/static/webpack/utils/web-components.ts
View File

@ -43,7 +43,11 @@ export function inheritHtmlElement<K extends keyof HTMLElementTagNameMap>(tagNam
this.removeAttributeNode(attr);
this.node.setAttributeNode(attr);
}
// Atuomatically add node to DOM if autoAddNode is true or unspecified
this.node.innerHTML = this.innerHTML;
this.innerHTML = "";
// Automatically add node to DOM if autoAddNode is true or unspecified
if (autoAddNode === undefined || autoAddNode) {
this.appendChild(this.node);
}

4
core/templates/core/widgets/markdown_textarea.jinja
View File

@ -2,8 +2,6 @@
<script-once src="{{ statics.js }}" defer></script-once>
<link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
<markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
<slot name="initial" style="display: none">{% if widget.value %}{{ widget.value }}{% endif %}</slot>
</markdown-input>
<markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
</div>