Convert to component based architecture

src/framework/element-factory.ts

@@ -0,0 +1,7 @@
+import { html } from "../model/misc";
+
+export const createElement = (from: html): HTMLElement => {
+  const element: HTMLElement = document.createElement("div");
+  element.innerHTML = from;
+  return element.firstElementChild as HTMLElement;
+};

src/framework/helpers.ts

@@ -0,0 +1,2 @@
+export const show = (e: HTMLElement) => (e.style.display = "block");
+export const hide = (e: HTMLElement) => (e.style.display = "none");

src/framework/page-element.ts

@@ -0,0 +1,16 @@
+export abstract class PageElement {
+  // Getter and setter accessors would have to agree in visibility
+  public getElement(): HTMLElement {
+    return this._element;
+  }
+  private _element: HTMLElement;
+  protected setElement(value: HTMLElement) {
+    this._element = value;
+  }
+
+  protected constructor(private children: Array<PageElement> = []) {}
+
+  public onAfterLoad(parent: HTMLElement) {
+    this.children.forEach(c => c.onAfterLoad(this.getElement()));
+  }
+}