Add event system

src/framework/element-factory.ts

@@ -1,7 +0,0 @@
-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/helper.ts

@@ -1,31 +1,11 @@
-export const mixColorsToRGB = (
-  hexColorA: string,
-  hexColorB: string,
-  qA: number
-): string => {
-  const colorA = hexToRGB(hexColorA);
-  const colorB = hexToRGB(hexColorB);
-  const mixedColor: [number, number, number] = [
-    colorA[0] * qA + colorB[0] * (1 - qA),
-    colorA[1] * qA + colorB[1] * (1 - qA),
-    colorA[2] * qA + colorB[2] * (1 - qA)
-  ];
+import { html } from "../model/misc";
 
-  return RGBToHex(mixedColor);
+export const createElement = (from: html): HTMLElement => {
+  const element: HTMLElement = document.createElement("div");
+  element.innerHTML = from;
+  return element.firstElementChild as HTMLElement;
 };
 
-const hexToRGB = (hex: string): [number, number, number] => {
-  const [r1, r2, g1, g2, b1, b2] = hex;
-  return [
-    Number.parseInt(r1 + r2, 16),
-    Number.parseInt(g1 + g2, 16),
-    Number.parseInt(b1 + b2, 16)
-  ];
-};
-
-const RGBToHex = (rgb: [number, number, number]): string =>
-  rgb.map(n => Math.round(n).toString(16)).join("");
-
 export const randomFactory = seed => () =>
   ((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
 

src/framework/page-element.ts

@@ -1,16 +1,32 @@
+import { PageEvent, PageEventType } from "./page-event";
+
 export abstract class PageElement {
+  private element: HTMLElement;
+
   // Getter and setter accessors would have to agree in visibility
   public getElement(): HTMLElement {
-    return this._element;
+    return this.element;
   }
-  private _element: HTMLElement;
+
   protected setElement(value: HTMLElement) {
-    this._element = value;
+    this.element = value;
   }
 
+  protected eventGenerator: PageElement;
+
   protected constructor(private children: Array<PageElement> = []) {}
 
-  public onAfterLoad(parent: HTMLElement) {
-    this.children.forEach(c => c.onAfterLoad(this.getElement()));
+  public giveEvent(event: PageEvent, parent: PageElement = null) {
+    if (event.type === PageEventType.eventGeneratorChanged) {
+      this.eventGenerator = event.data;
+    }
+    this.handleEvent(event, parent);
+    this.children.forEach(c => c.giveEvent(event, this));
   }
+
+  protected query(query: string): HTMLElement | null {
+    return this.getElement()?.querySelector(query);
+  }
+
+  protected handleEvent(event: PageEvent, parent: PageElement) {}
 }

src/framework/page-event.ts

@@ -0,0 +1,10 @@
+export class PageEvent {
+  type: PageEventType;
+  data?: any;
+}
+
+export enum PageEventType {
+  onLoad,
+  onBodyDimensionsChanged,
+  eventGeneratorChanged
+}

src/framework/page.ts

@@ -0,0 +1,18 @@
+import { PageElement } from "./page-element";
+import { PageEventType } from "./page-event";
+
+export class Page extends PageElement {
+  public constructor(
+    children: Array<PageElement>,
+    private rootElement: HTMLElement
+  ) {
+    super(children);
+    this.setElement(rootElement);
+    this.giveEvent(
+      { type: PageEventType.eventGeneratorChanged, data: this },
+      this
+    );
+    rootElement.append(...children.map(e => e.getElement()));
+    this.giveEvent({ type: PageEventType.onLoad }, this);
+  }
+}