Move setting of index to connectedCallback

This commit is contained in:
Henrik Giesel 2021-01-29 14:00:33 +01:00
parent fe87f986d3
commit 0beefc0699

View File

@ -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();