bookhoard/web/src/dom.ts

function escapeHtml(text: string): string {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

function querySelector<T extends Element>(selector: string): T | null {
  return document.querySelector<T>(selector);
}

function querySelectorAll<T extends Element>(selector: string): NodeListOf<T> {
  return document.querySelectorAll<T>(selector);
}

function getElementById<T extends HTMLElement>(id: string): T | null {
  return document.getElementById(id) as T | null;
}

function createElement<K extends keyof HTMLElementTagNameMap>(
  tagName: K,
  attributes?: Record<string, string>,
  children?: (string | Node)[],
): HTMLElementTagNameMap[K] {
  const element = document.createElement(tagName);

  if (attributes) {
    Object.entries(attributes).forEach(([key, value]) => {
      if (key === "className") {
        element.className = value;
      } else if (key === "dataset") {
        Object.entries(JSON.parse(value)).forEach(([dataKey, dataValue]) => {
          element.dataset[dataKey] = String(dataValue);
        });
      } else {
        element.setAttribute(key, value);
      }
    });
  }

  if (children) {
    children.forEach((child) => {
      if (typeof child === "string") {
        element.appendChild(document.createTextNode(child));
      } else {
        element.appendChild(child);
      }
    });
  }

  return element;
}

function showElement(element: HTMLElement | null): void {
  if (element) {
    element.classList.remove("hidden");
  }
}

function hideElement(element: HTMLElement | null): void {
  if (element) {
    element.classList.add("hidden");
  }
}

function toggleElement(element: HTMLElement | null): void {
  if (element) {
    element.classList.toggle("hidden");
  }
}

function setTextContent(element: HTMLElement | null, text: string): void {
  if (element) {
    element.textContent = text;
  }
}

function setInnerHTML(element: HTMLElement | null, html: string): void {
  if (element) {
    element.innerHTML = html;
  }
}

function addClass(element: HTMLElement | null, className: string): void {
  if (element) {
    element.classList.add(className);
  }
}

function removeClass(element: HTMLElement | null, className: string): void {
  if (element) {
    element.classList.remove(className);
  }
}

function toggleClass(element: HTMLElement | null, className: string): void {
  if (element) {
    element.classList.toggle(className);
  }
}

function hasClass(element: HTMLElement | null, className: string): boolean {
  return element ? element.classList.contains(className) : false;
}

(window as any).dom = {
  escapeHtml,
  querySelector,
  querySelectorAll,
  getElementById,
  createElement,
  showElement,
  hideElement,
  toggleElement,
  setTextContent,
  setInnerHTML,
  addClass,
  removeClass,
  toggleClass,
  hasClass,
};

export {
  escapeHtml,
  querySelector,
  querySelectorAll,
  getElementById,
  createElement,
  showElement,
  hideElement,
  toggleElement,
  setTextContent,
  setInnerHTML,
  addClass,
  removeClass,
  toggleClass,
  hasClass,
};