diff options
Diffstat (limited to 'app/dom.js')
| -rw-r--r-- | app/dom.js | 81 |
1 files changed, 16 insertions, 65 deletions
@@ -44,7 +44,7 @@ export class Dom { for (const cls of classes) div.classList.add(cls); if (textContent) div.textContent = textContent; for (const [k, v] of Object.entries(attributes)) div.setAttribute(k, v); - Dom.appendChildren(div, children); + if (children) div.append(...children); return div; } @@ -69,7 +69,7 @@ export class Dom { for (const cls of classes) span.classList.add(cls); if (textContent) span.textContent = textContent; for (const [k, v] of Object.entries(attributes)) span.setAttribute(k, v); - Dom.appendChildren(span, children); + if (children) span.append(...children); return span; } @@ -95,7 +95,7 @@ export class Dom { for (const cls of classes) button.classList.add(cls); if (textContent) button.textContent = textContent; for (const [k, v] of Object.entries(attributes)) button.setAttribute(k, v); - Dom.appendChildren(button, children); + if (children) button.append(...children); if (onClick) button.addEventListener("click", onClick); return button; } @@ -180,7 +180,7 @@ export class Dom { for (const cls of classes) label.classList.add(cls); if (textContent) label.textContent = textContent; for (const [k, v] of Object.entries(attributes)) label.setAttribute(k, v); - Dom.appendChildren(label, children); + if (children) label.append(...children); label.htmlFor = htmlFor; return label; } @@ -211,7 +211,7 @@ export class Dom { for (const cls of classes) heading.classList.add(cls); if (textContent) heading.textContent = textContent; for (const [k, v] of Object.entries(attributes)) heading.setAttribute(k, v); - Dom.appendChildren(heading, children); + if (children) heading.append(...children); return heading; } @@ -260,7 +260,7 @@ export class Dom { if (id) select.id = id; for (const cls of classes) select.classList.add(cls); for (const [k, v] of Object.entries(attributes)) select.setAttribute(k, v); - Dom.appendChildren(select, children); + if (children) select.append(...children); if (onChange) select.addEventListener("change", onChange); return select; } @@ -301,7 +301,7 @@ export class Dom { for (const cls of classes) p.classList.add(cls); if (textContent) p.textContent = textContent; for (const [k, v] of Object.entries(attributes)) p.setAttribute(k, v); - Dom.appendChildren(p, children); + if (children) p.append(...children); return p; } @@ -380,7 +380,7 @@ export class Dom { }, textContent: `Score: ${house.scores.current.toFixed(1)}`, }); - Dom.appendChildren(header, [title, score]); + header.append(title, score); frag.appendChild(header); /* Details grid */ @@ -393,12 +393,12 @@ export class Dom { }, }); const details = [ - { label: "Price", value: `${house.property.price} €` }, - { label: "Building Type", value: house.property.buildingType }, - { label: "Construction Year", value: house.property.constructionYear?.toString() ?? "N/A" }, - { label: "Living Area", value: `${house.property.livingArea} m²` }, - { label: "District", value: house.location.district }, - { label: "Rooms", value: house.property.rooms?.toString() ?? "N/A" }, + { label: "Price", value: `${house.price} €` }, + { label: "Building Type", value: house.buildingType }, + { label: "Construction Year", value: house.constructionYear?.toString() ?? "N/A" }, + { label: "Living Area", value: `${house.livingArea} m²` }, + { label: "District", value: house.district }, + { label: "Rooms", value: house.rooms?.toString() ?? "N/A" }, { label: "Price", value: `${house.price} €` }, { label: "Building Type", value: house.buildingType }, { label: "Construction Year", value: house.constructionYear?.toString() ?? "N/A" }, @@ -430,7 +430,7 @@ export class Dom { styles: { color: "#333", fontSize: "14px", lineHeight: "1.4", marginTop: "5px" }, textContent: house.description ?? "No description available.", }); - Dom.appendChildren(descSect, [descTitle, descText]); + descSect.append(descTitle, descText); frag.appendChild(descSect); /* Images */ @@ -452,7 +452,7 @@ export class Dom { }), ); } - Dom.appendChildren(imgSect, [imgTitle, imgCont]); + imgSect.append(imgTitle, imgCont); frag.appendChild(imgSect); } @@ -503,35 +503,6 @@ export class Dom { } /** - * Loading spinner - * @returns {HTMLDivElement} - */ - static loadingIndicator() { - const spinner = Dom.div({ - classes: ["loading-indicator"], - styles: { - animation: "spin 1s linear infinite", - border: "2px solid #f3f3f3", - borderRadius: "50%", - borderTop: "2px solid #3498db", - display: "inline-block", - height: "16px", - width: "16px", - }, - }); - - if (!document.querySelector("#loading-styles")) { - const style = document.createElement("style"); - style.id = "loading-styles"; - style.textContent = ` - @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } - `; - document.head.appendChild(style); - } - return spinner; - } - - /** * Remove all children * @param {HTMLElement} el */ @@ -540,26 +511,6 @@ export class Dom { } /** - * Append many children - * @param {HTMLElement} parent - * @param {HTMLElement[]} children - */ - static appendChildren(parent, children) { - for (const child of children) { - if (child) parent.appendChild(child); - } - } - - /** - * Replace an element - * @param {HTMLElement} oldEl - * @param {HTMLElement} newEl - */ - static replace(oldEl, newEl) { - oldEl.parentNode?.replaceChild(newEl, oldEl); - } - - /** * Create a weight slider * @param {string} id * @param {string} labelText |