67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
import { FieldInputItem } from "./FieldInputItem.js";
|
|
|
|
/**
|
|
* Represents the actual input element on the creator tool
|
|
* May contain multiple items if the field allows multiple values
|
|
*/
|
|
export class FieldInput {
|
|
constructor(field, parentElem) {
|
|
this.field = field;
|
|
this.id = "field-" + field.key;
|
|
this.items = [];
|
|
this.parent = parentElem;
|
|
|
|
this.appendHtml(parentElem);
|
|
}
|
|
|
|
appendHtml(parent) {
|
|
const fieldContainer = document.createElement("div");
|
|
fieldContainer.className = "field-container";
|
|
|
|
const item = new FieldInputItem(this, fieldContainer);
|
|
|
|
if (!this.field.isHidden) {
|
|
parent.insertAdjacentHTML("beforeend", `
|
|
<label for="${this.field.key}">${this.field.displayName}</label>
|
|
<p class="description">${this.field.description ?? ""}</p>
|
|
`);
|
|
|
|
parent.appendChild(fieldContainer);
|
|
|
|
if (this.field.allowMultiple && this.items.length === 0) {
|
|
const addBtn = document.createElement("button");
|
|
addBtn.className = "text-button";
|
|
addBtn.type = "button";
|
|
addBtn.innerText = "+ Add";
|
|
addBtn.onclick = () => this.addItem(fieldContainer);
|
|
parent.appendChild(addBtn);
|
|
}
|
|
}
|
|
|
|
this.items.push(item);
|
|
this.updateItems();
|
|
}
|
|
|
|
updateItems() {
|
|
for (const item of this.items) item.update();
|
|
}
|
|
|
|
addItem(parent) {
|
|
const item = new FieldInputItem(this, parent);
|
|
this.items.push(item);
|
|
|
|
this.updateItems();
|
|
}
|
|
|
|
removeItem(id) {
|
|
const i = this.items.findIndex(item => item.id === id);
|
|
|
|
this.items[i].remove();
|
|
this.items.splice(i, 1);
|
|
|
|
this.updateItems();
|
|
|
|
this.parent.closest("form").onchange();
|
|
}
|
|
}
|