46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import "./ui_template_general_layout.css";
|
|
|
|
export interface GeneralLayoutOptions {
|
|
pageClass?: string;
|
|
title?: string;
|
|
subtitle?: string;
|
|
content: HTMLElement | readonly HTMLElement[];
|
|
}
|
|
|
|
export interface GeneralLayoutHandle {
|
|
root: HTMLElement;
|
|
content: HTMLElement;
|
|
}
|
|
|
|
export function createGeneralLayout(options: GeneralLayoutOptions): GeneralLayoutHandle {
|
|
const root = document.createElement("div");
|
|
root.className = "ui-general-layout";
|
|
if (options.pageClass) root.classList.add(options.pageClass);
|
|
|
|
const inner = document.createElement("div");
|
|
inner.className = "ui-general-layout__inner";
|
|
|
|
if (options.title) {
|
|
const header = document.createElement("header");
|
|
header.className = "ui-general-layout__header";
|
|
const title = document.createElement("h1");
|
|
title.className = "ui-general-layout__title";
|
|
title.textContent = options.title;
|
|
header.append(title);
|
|
if (options.subtitle) {
|
|
const subtitle = document.createElement("p");
|
|
subtitle.className = "ui-general-layout__subtitle";
|
|
subtitle.textContent = options.subtitle;
|
|
header.append(subtitle);
|
|
}
|
|
inner.append(header);
|
|
}
|
|
|
|
const content = document.createElement("main");
|
|
content.className = "ui-general-layout__content";
|
|
content.append(...(Array.isArray(options.content) ? options.content : [options.content]));
|
|
inner.append(content);
|
|
root.append(inner);
|
|
return { root, content };
|
|
}
|