Add event system

src/page/about/about.ts

@@ -1,9 +1,9 @@
 import { PageContent } from "../content/content";
 import { Header } from "../../model/portfolio";
 import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/element-factory";
 
 import { generate } from "./about.html";
+import { createElement } from "../../framework/helper";
 
 export class PageHeader extends PageElement {
   public constructor(header: Header, aPictureOf: string) {

src/page/background/background.ts

@@ -1,6 +1,7 @@
 import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/element-factory";
 import { generate } from "./background.html";
+import { createElement } from "../../framework/helper";
+import { PageEvent, PageEventType } from "../../framework/page-event";
 
 export class PageBackground extends PageElement {
   public constructor(
@@ -16,4 +17,18 @@ export class PageBackground extends PageElement {
       createElement(generate(count, probability, width, color, translateZ))
     );
   }
+
+  protected handleEvent(event: PageEvent, parent: PageElement) {
+    if (event.type === PageEventType.onLoad) {
+      window.addEventListener("resize", this.resize.bind(this, parent));
+      this.resize(parent);
+    } else if (event.type === PageEventType.onBodyDimensionsChanged) {
+      this.resize(parent);
+    }
+  }
+
+  private resize(parent: PageElement) {
+    const width = parent.getElement().clientWidth;
+    const height = parent.getElement().clientHeight;
+  }
 }

src/page/content/content.ts

@@ -1,7 +1,7 @@
 import { Content, TypedContent } from "../../model/content";
 import "./content.scss";
 import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/element-factory";
+import { createElement } from "../../framework/helper";
 
 export class PageContent extends PageElement {
   private static isTyped(content): content is TypedContent {

src/page/footer/footer.ts

@@ -1,8 +1,8 @@
 import { Footer } from "../../model/portfolio";
 import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/element-factory";
 
 import { generate } from "./footer.html";
+import { createElement } from "../../framework/helper";
 
 export class PageFooter extends PageElement {
   constructor(footer: Footer, cvName: string) {

src/page/image-viewer/image-viewer.ts

@@ -1,7 +1,8 @@
-import { createElement } from "../../framework/element-factory";
 import { PageElement } from "../../framework/page-element";
 
 import { generate } from "./image-viewer.html";
+import { createElement } from "../../framework/helper";
+import { PageEvent, PageEventType } from "../../framework/page-event";
 
 export class PageImageViewer extends PageElement {
   public constructor() {
@@ -12,12 +13,16 @@ export class PageImageViewer extends PageElement {
     this.setElement(root);
   }
 
-  public onAfterLoad(parent: HTMLElement) {
-    super.onAfterLoad(parent);
+  protected handleEvent(event: PageEvent, parent: PageElement) {
+    if (event.type !== PageEventType.onLoad) {
+      return;
+    }
 
     document.body.addEventListener("keydown", this.handleKeydown.bind(this));
 
-    const images = Array.prototype.slice.call(parent.querySelectorAll("img"));
+    const images = Array.prototype.slice.call(
+      parent.getElement().querySelectorAll("img")
+    );
     images
       .filter(
         (img: HTMLImageElement) => img.parentElement !== this.getElement()
@@ -28,7 +33,7 @@ export class PageImageViewer extends PageElement {
   }
 
   private handleClick(event: Event) {
-    (this.getElement().querySelector(
+    (this.query(
       "#photo"
     ) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
 

src/page/index.ts

@@ -1,24 +1,23 @@
 import { Portfolio } from "../model/portfolio";
-import { PageElement } from "../framework/page-element";
 import { PageBackground } from "./background/background";
 import { PageHeader } from "./about/about";
 import { PageTimeline } from "./timeline/timeline";
 import { PageFooter } from "./footer/footer";
 import { PageImageViewer } from "./image-viewer/image-viewer";
+import { Page } from "../framework/page";
 
 export const create = ({ config, header, timeline, footer }: Portfolio) => {
   document.title = header.name;
 
-  const pageElements: Array<PageElement> = [
-    new PageBackground(0.1, 200, 140, 0.4, "#fff9e0aa", -15),
-    new PageBackground(0.15, 300, 80, 0.3, "#ffd6d6aa", -10),
-    new PageHeader(header, config.aPictureOf),
-    new PageTimeline(timeline, config.showMore, config.showLess),
-    new PageFooter(footer, config.cvName),
-    new PageImageViewer()
-  ];
-
-  const root = document.body.querySelector("main");
-  root.append(...pageElements.map(e => e.getElement()));
-  pageElements.forEach(e => e.onAfterLoad(root));
+  new Page(
+    [
+      new PageBackground(0.1, 200, 140, 0.4, "#fff9e0aa", -15),
+      new PageBackground(0.15, 300, 80, 0.3, "#ffd6d6aa", -10),
+      new PageHeader(header, config.aPictureOf),
+      new PageTimeline(timeline, config.showMore, config.showLess),
+      new PageFooter(footer, config.cvName),
+      new PageImageViewer()
+    ],
+    document.body.querySelector("main")
+  );
 };

src/page/timeline/timeline-element/timeline-element.ts

@@ -1,8 +1,9 @@
 import { TimelineElement } from "../../../model/portfolio";
 import { PageContent } from "../../content/content";
 import { PageElement } from "../../../framework/page-element";
-import { createElement } from "../../../framework/element-factory";
 import { generate } from "./timeline-element.html";
+import { createElement } from "../../../framework/helper";
+import { PageEventType } from "../../../framework/page-event";
 
 export class PageTimelineElement extends PageElement {
   private isOpen;
@@ -30,12 +31,8 @@ export class PageTimelineElement extends PageElement {
   }
 
   private toggleOpen() {
-    const showMore = this.getElement().querySelector(
-      "#show-more"
-    ) as HTMLElement;
-    const showLess = this.getElement().querySelector(
-      "#show-less"
-    ) as HTMLElement;
+    const showMore = this.query("#show-more") as HTMLElement;
+    const showLess = this.query("#show-less") as HTMLElement;
     if (this.isOpen) {
       this.more.style.height = "0";
       PageTimelineElement.show(showMore);
@@ -47,6 +44,9 @@ export class PageTimelineElement extends PageElement {
     }
 
     this.isOpen = !this.isOpen;
+    this.eventGenerator?.giveEvent({
+      type: PageEventType.onBodyDimensionsChanged
+    });
   }
 
   private static hide(element: HTMLElement) {

src/page/timeline/timeline.ts

@@ -1,8 +1,8 @@
 import { TimelineElement } from "../../model/portfolio";
 import { PageElement } from "../../framework/page-element";
-import { createElement } from "../../framework/element-factory";
 import { PageTimelineElement } from "./timeline-element/timeline-element";
 import { generate } from "./timeline.html";
+import { createElement } from "../../framework/helper";
 
 export class PageTimeline extends PageElement {
   public constructor(