Move setting of index to connectedCallback
This commit is contained in:
parent
fe87f986d3
commit
0beefc0699
@ -434,10 +434,6 @@ class EditingArea extends HTMLElement {
|
|||||||
this.setAttribute("contenteditable", "true");
|
this.setAttribute("contenteditable", "true");
|
||||||
}
|
}
|
||||||
|
|
||||||
initialize(index: number): void {
|
|
||||||
this.className = `editor-field-${index}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
set fieldHTML(content: string) {
|
set fieldHTML(content: string) {
|
||||||
this.innerHTML = content;
|
this.innerHTML = content;
|
||||||
|
|
||||||
@ -496,14 +492,12 @@ class EditingContainer extends HTMLDivElement {
|
|||||||
0
|
0
|
||||||
);
|
);
|
||||||
|
|
||||||
this.editingArea = this.editingShadow.appendChild(
|
this.editingArea = document.createElement("editing-area") as EditingArea;
|
||||||
document.createElement("editing-area")
|
this.editingArea.id = `editor-field-${this.id.match(/\d+$/)[0]}`;
|
||||||
) as EditingArea;
|
this.editingShadow.appendChild(this.editingArea);
|
||||||
}
|
}
|
||||||
|
|
||||||
initialize(index: number, color: string, content: string): void {
|
initialize(color: string, content: string): void {
|
||||||
this.id = `f${index}`;
|
|
||||||
this.editingArea.initialize(index);
|
|
||||||
this.setBaseColor(color);
|
this.setBaseColor(color);
|
||||||
this.editingArea.fieldHTML = content;
|
this.editingArea.fieldHTML = content;
|
||||||
}
|
}
|
||||||
@ -553,21 +547,25 @@ class EditorField extends HTMLDivElement {
|
|||||||
editingContainer: EditingContainer;
|
editingContainer: EditingContainer;
|
||||||
|
|
||||||
connectedCallback(): void {
|
connectedCallback(): void {
|
||||||
|
const index = Array.prototype.indexOf.call(this.parentNode.children, this);
|
||||||
|
|
||||||
this.labelContainer = this.appendChild(document.createElement("div"));
|
this.labelContainer = this.appendChild(document.createElement("div"));
|
||||||
this.labelContainer.className = "fname";
|
this.labelContainer.className = "fname";
|
||||||
|
this.labelContainer.id = `name${index}`;
|
||||||
|
|
||||||
this.label = this.labelContainer.appendChild(document.createElement("span"));
|
this.label = this.labelContainer.appendChild(document.createElement("span"));
|
||||||
this.label.className = "fieldname";
|
this.label.className = "fieldname";
|
||||||
|
|
||||||
this.editingContainer = this.appendChild(
|
this.editingContainer = document.createElement("div", {
|
||||||
document.createElement("div", { is: "editing-container" })
|
is: "editing-container",
|
||||||
) as EditingContainer;
|
}) as EditingContainer;
|
||||||
|
this.editingContainer.id = `f${index}`;
|
||||||
|
this.appendChild(this.editingContainer);
|
||||||
}
|
}
|
||||||
|
|
||||||
initialize(index: number, label: string, color: string, content: string): void {
|
initialize(label: string, color: string, content: string): void {
|
||||||
this.labelContainer.id = `name${index}`;
|
|
||||||
this.label.innerText = label;
|
this.label.innerText = label;
|
||||||
this.editingContainer.initialize(index, color, content);
|
this.editingContainer.initialize(color, content);
|
||||||
}
|
}
|
||||||
|
|
||||||
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
|
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
|
||||||
@ -611,8 +609,8 @@ function setFields(fields: [string, string][]): void {
|
|||||||
.getPropertyValue("--text-fg");
|
.getPropertyValue("--text-fg");
|
||||||
|
|
||||||
adjustFieldAmount(fields.length);
|
adjustFieldAmount(fields.length);
|
||||||
forField(fields, ([name, fieldContent], field, index) =>
|
forField(fields, ([name, fieldContent], field) =>
|
||||||
field.initialize(index, name, color, fieldContent)
|
field.initialize(name, color, fieldContent)
|
||||||
);
|
);
|
||||||
|
|
||||||
maybeDisableButtons();
|
maybeDisableButtons();
|
||||||
|
Loading…
Reference in New Issue
Block a user