Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | interface DynamicFormManagerConfig {
listContainerId: string;
addButtonId: string;
createItemFunction?: () => Element | null;
templateId?: string;
maxItems?: number;
removeSelector: string;
itemSelector: string;
onChange?: (count: number) => void;
}
class DynamicFormManager {
listContainer: HTMLElement | null;
addButton: HTMLElement | null;
createItemFunction?: () => Element | null;
templateId?: string;
maxItems: number;
removeSelector: string;
itemSelector: string;
onChange?: (count: number) => void;
constructor(config: DynamicFormManagerConfig) {
this.listContainer = document.getElementById(config.listContainerId);
this.addButton = document.getElementById(config.addButtonId);
this.createItemFunction = config.createItemFunction;
this.templateId = config.templateId;
this.maxItems = config.maxItems || Infinity;
this.removeSelector = config.removeSelector;
this.itemSelector = config.itemSelector;
this.onChange = config.onChange;
if (this.templateId && !this.createItemFunction) {
const template = document.getElementById(
this.templateId
) as HTMLTemplateElement | null;
if (template) {
this.createItemFunction = () => {
return (template.content.cloneNode(true) as DocumentFragment)
.firstElementChild;
};
}
}
this.init();
}
init(): void {
if (!this.listContainer || !this.addButton) {
console.warn("DynamicFormManager: Required elements not found");
return;
}
this.addButton.addEventListener("click", () => {
this.addItem();
});
this.listContainer.addEventListener("click", (e) => {
const target = e.target as Element;
if (
target.classList.contains(this.removeSelector) ||
target.closest(`.${this.removeSelector}`)
) {
this.removeItem(e);
}
});
this.updateAddButton();
this.handleChange();
}
addItem(): void {
const currentCount = this.listContainer!.querySelectorAll(
this.itemSelector
).length;
if (currentCount >= this.maxItems) {
return;
}
const newItem = this.createItemFunction!();
this.listContainer!.appendChild(newItem!);
this.updateAddButton();
this.handleChange();
}
removeItem(event: Event): void {
const item = (event.target as Element).closest(this.itemSelector);
if (item) {
item.remove();
this.updateAddButton();
this.handleChange();
}
}
updateAddButton(): void {
if (!this.addButton) return;
const currentCount = this.listContainer!.querySelectorAll(
this.itemSelector
).length;
this.addButton.style.display =
currentCount >= this.maxItems ? "none" : "inline-block";
}
handleChange(): void {
if (typeof this.onChange === "function") {
this.onChange(this.getCurrentCount());
}
}
getCurrentCount(): number {
return this.listContainer!.querySelectorAll(this.itemSelector).length;
}
}
export default DynamicFormManager;
|