From ce14794eb6ea0e4e8a9a4a899bafd0114d58930f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Schmelczer=20Andr=C3=A1s?= <schmelczerandras@gmail.com>
Date: Thu, 23 Jan 2020 10:08:16 +0100
Subject: [PATCH] Refactor

---
 .idea/workspace.xml                           | 50 +++++++---
 src/framework/container-page.ts               | 11 +--
 .../on-body-dimensions-changed-event.ts       | 11 +++
 .../on-event-broadcaster-changed-event.ts     | 12 +++
 .../events/concrete-events/on-load-event.ts   | 12 +++
 .../on-page-theme-changed-event.ts            | 11 +++
 src/framework/events/event-broadcaster.ts     |  4 +-
 src/framework/events/event-handler.ts         | 34 +++++++
 src/framework/events/event.ts                 |  6 ++
 src/framework/events/optional-event.ts        |  3 +
 src/framework/events/page-event.ts            | 11 ---
 src/framework/page-element.ts                 | 38 +++++---
 .../primitives/implementations/image.ts       | 28 +++---
 .../primitives/implementations/video.ts       |  6 +-
 src/page/background/background.html.ts        |  3 +-
 src/page/background/background.ts             | 91 +++++++++++--------
 src/page/background/blob.ts                   | 35 ++++---
 src/page/image-viewer/image-viewer.ts         | 24 +++--
 src/page/theme-switcher/theme-switcher.ts     | 17 ++--
 .../timeline-element/timeline-element.ts      | 15 ++-
 20 files changed, 269 insertions(+), 153 deletions(-)
 create mode 100644 src/framework/events/concrete-events/on-body-dimensions-changed-event.ts
 create mode 100644 src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts
 create mode 100644 src/framework/events/concrete-events/on-load-event.ts
 create mode 100644 src/framework/events/concrete-events/on-page-theme-changed-event.ts
 create mode 100644 src/framework/events/event-handler.ts
 create mode 100644 src/framework/events/event.ts
 create mode 100644 src/framework/events/optional-event.ts
 delete mode 100644 src/framework/events/page-event.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 11644db..fd92b3f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,8 +2,28 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/framework/events/concrete-events/on-body-dimensions-changed-event.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/events/concrete-events/on-load-event.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/events/concrete-events/on-page-theme-changed-event.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/events/event-handler.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/events/event.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/framework/events/optional-event.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/container-page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/container-page.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/events/event-broadcaster.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/events/event-broadcaster.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/events/page-event.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/page-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-element.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -51,6 +71,13 @@
     <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
   </component>
   <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Projects\portfolio\CompiledCV\src\framework\events\concrete-events" />
+      <recent name="$PROJECT_DIR$/src/framework/events" />
+      <recent name="$PROJECT_DIR$/src/framework/model" />
+      <recent name="$PROJECT_DIR$/src/framework/styles/dark-mode" />
+      <recent name="$PROJECT_DIR$/src/framework/styles" />
+    </key>
     <key name="CopyFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/src/page/background" />
       <recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
@@ -58,23 +85,16 @@
       <recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
       <recent name="$PROJECT_DIR$" />
     </key>
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="$PROJECT_DIR$/src/framework/events" />
-      <recent name="$PROJECT_DIR$/src/framework/model" />
-      <recent name="$PROJECT_DIR$/src/framework/styles/dark-mode" />
-      <recent name="$PROJECT_DIR$/src/framework/styles" />
-      <recent name="$PROJECT_DIR$/src/framework/helper/animations" />
-    </key>
   </component>
-  <component name="ServiceViewManager">
-    <option name="viewStates">
+  <component name="RunDashboard">
+    <option name="ruleStates">
       <list>
-        <serviceView>
-          <treeState>
-            <expand />
-            <select />
-          </treeState>
-        </serviceView>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
       </list>
     </option>
   </component>
diff --git a/src/framework/container-page.ts b/src/framework/container-page.ts
index 5753365..4a803b8 100644
--- a/src/framework/container-page.ts
+++ b/src/framework/container-page.ts
@@ -1,5 +1,6 @@
 import { PageElement } from './page-element';
-import { PageEventType } from './events/page-event';
+import { OnEventBroadcasterChangedEvent } from './events/concrete-events/on-event-broadcaster-changed-event';
+import { OnLoadEvent } from './events/concrete-events/on-load-event';
 
 export class ContainerPage extends PageElement {
   public constructor(rootElement: HTMLElement, children: Array<PageElement>) {
@@ -10,11 +11,7 @@ export class ContainerPage extends PageElement {
   }
 
   public setAsMain() {
-    this.broadcastEvent(
-      { type: PageEventType.eventBroadcasterChanged, data: this },
-      this
-    );
-
-    this.broadcastEvent({ type: PageEventType.onLoad }, this);
+    this.broadcastEvent(new OnEventBroadcasterChangedEvent(this));
+    this.broadcastEvent(new OnLoadEvent(this));
   }
 }
diff --git a/src/framework/events/concrete-events/on-body-dimensions-changed-event.ts b/src/framework/events/concrete-events/on-body-dimensions-changed-event.ts
new file mode 100644
index 0000000..d354cb3
--- /dev/null
+++ b/src/framework/events/concrete-events/on-body-dimensions-changed-event.ts
@@ -0,0 +1,11 @@
+import { Event } from '../event';
+import { EventHandler } from '../event-handler';
+import { OptionalEvent } from '../optional-event';
+
+export class OnBodyDimensionsChangedEvent implements Event {
+  public constructor(public deltaHeight?: number) {}
+
+  public accept(handler: EventHandler): OptionalEvent {
+    return handler.handleOnBodyDimensionsChangedEvent(this);
+  }
+}
diff --git a/src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts b/src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts
new file mode 100644
index 0000000..f42fa90
--- /dev/null
+++ b/src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts
@@ -0,0 +1,12 @@
+import { Event } from '../event';
+import { EventHandler } from '../event-handler';
+import { EventBroadcaster } from '../event-broadcaster';
+import { OptionalEvent } from '../optional-event';
+
+export class OnEventBroadcasterChangedEvent implements Event {
+  public constructor(public broadcaster: EventBroadcaster) {}
+
+  public accept(handler: EventHandler): OptionalEvent {
+    return handler.handleOnEventBroadcasterChangedEvent(this);
+  }
+}
diff --git a/src/framework/events/concrete-events/on-load-event.ts b/src/framework/events/concrete-events/on-load-event.ts
new file mode 100644
index 0000000..7bf1558
--- /dev/null
+++ b/src/framework/events/concrete-events/on-load-event.ts
@@ -0,0 +1,12 @@
+import { Event } from '../event';
+import { EventHandler } from '../event-handler';
+import { PageElement } from '../../page-element';
+import { OptionalEvent } from '../optional-event';
+
+export class OnLoadEvent implements Event {
+  public constructor(public parent: PageElement) {}
+
+  public accept(handler: EventHandler): OptionalEvent {
+    return handler.handleOnLoadEvent(this);
+  }
+}
diff --git a/src/framework/events/concrete-events/on-page-theme-changed-event.ts b/src/framework/events/concrete-events/on-page-theme-changed-event.ts
new file mode 100644
index 0000000..caabf82
--- /dev/null
+++ b/src/framework/events/concrete-events/on-page-theme-changed-event.ts
@@ -0,0 +1,11 @@
+import { Event } from '../event';
+import { EventHandler } from '../event-handler';
+import { OptionalEvent } from '../optional-event';
+
+export class OnPageThemeChangedEvent implements Event {
+  public constructor(public isDark: boolean) {}
+
+  public accept(handler: EventHandler): OptionalEvent {
+    return handler.handleOnPageThemeChangedEvent(this);
+  }
+}
diff --git a/src/framework/events/event-broadcaster.ts b/src/framework/events/event-broadcaster.ts
index 8a4633f..e81be26 100644
--- a/src/framework/events/event-broadcaster.ts
+++ b/src/framework/events/event-broadcaster.ts
@@ -1,5 +1,5 @@
-import { PageEvent } from './page-event';
+import { Event } from './event';
 
 export interface EventBroadcaster {
-  broadcastEvent(event: PageEvent, parent?: EventBroadcaster);
+  broadcastEvent(event: Event);
 }
diff --git a/src/framework/events/event-handler.ts b/src/framework/events/event-handler.ts
new file mode 100644
index 0000000..ac22f9b
--- /dev/null
+++ b/src/framework/events/event-handler.ts
@@ -0,0 +1,34 @@
+import { Event } from './event';
+import { OnLoadEvent } from './concrete-events/on-load-event';
+import { OnBodyDimensionsChangedEvent } from './concrete-events/on-body-dimensions-changed-event';
+import { OnPageThemeChangedEvent } from './concrete-events/on-page-theme-changed-event';
+import { OnEventBroadcasterChangedEvent } from './concrete-events/on-event-broadcaster-changed-event';
+import { OptionalEvent } from './optional-event';
+
+export abstract class EventHandler {
+  public handle(event: Event): OptionalEvent {
+    return event.accept(this);
+  }
+
+  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
+    return event;
+  }
+
+  public handleOnBodyDimensionsChangedEvent(
+    event: OnBodyDimensionsChangedEvent
+  ): OptionalEvent {
+    return event;
+  }
+
+  public handleOnEventBroadcasterChangedEvent(
+    event: OnEventBroadcasterChangedEvent
+  ): OptionalEvent {
+    return event;
+  }
+
+  public handleOnPageThemeChangedEvent(
+    event: OnPageThemeChangedEvent
+  ): OptionalEvent {
+    return event;
+  }
+}
diff --git a/src/framework/events/event.ts b/src/framework/events/event.ts
new file mode 100644
index 0000000..c07b72e
--- /dev/null
+++ b/src/framework/events/event.ts
@@ -0,0 +1,6 @@
+import { EventHandler } from './event-handler';
+import { OptionalEvent } from './optional-event';
+
+export interface Event {
+  accept(handler: EventHandler): OptionalEvent;
+}
diff --git a/src/framework/events/optional-event.ts b/src/framework/events/optional-event.ts
new file mode 100644
index 0000000..edad78f
--- /dev/null
+++ b/src/framework/events/optional-event.ts
@@ -0,0 +1,3 @@
+import { Event } from './event';
+
+export type OptionalEvent = Event | undefined;
diff --git a/src/framework/events/page-event.ts b/src/framework/events/page-event.ts
deleted file mode 100644
index 71447b0..0000000
--- a/src/framework/events/page-event.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class PageEvent {
-  type: PageEventType;
-  data?: any;
-}
-
-export enum PageEventType {
-  onLoad,
-  onBodyDimensionsChanged,
-  eventBroadcasterChanged,
-  pageThemeChanged,
-}
diff --git a/src/framework/page-element.ts b/src/framework/page-element.ts
index 160c892..0c731ff 100644
--- a/src/framework/page-element.ts
+++ b/src/framework/page-element.ts
@@ -1,28 +1,38 @@
-import { PageEvent, PageEventType } from './events/page-event';
 import { EventBroadcaster } from './events/event-broadcaster';
+import { EventHandler } from './events/event-handler';
+import { OnEventBroadcasterChangedEvent } from './events/concrete-events/on-event-broadcaster-changed-event';
+import { Event } from './events/event';
+import { OnLoadEvent } from './events/concrete-events/on-load-event';
+import { OptionalEvent } from './events/optional-event';
 
-export abstract class PageElement implements EventBroadcaster {
+export abstract class PageElement extends EventHandler
+  implements EventBroadcaster {
   protected eventBroadcaster: EventBroadcaster;
 
   protected constructor(
-    private readonly rootElement?: HTMLElement,
+    public readonly element?: HTMLElement,
     private readonly children: Array<PageElement> = []
-  ) {}
-
-  public get element(): HTMLElement {
-    return this.rootElement;
+  ) {
+    super();
   }
 
-  public broadcastEvent(event: PageEvent, parent: EventBroadcaster = null) {
-    if (event.type === PageEventType.eventBroadcasterChanged) {
-      this.eventBroadcaster = event.data;
+  public broadcastEvent(event: Event) {
+    event = this.handle(event);
+    if (event) {
+      this.children.forEach(c => c.broadcastEvent(event));
     }
-
-    this.handleEvent(event, parent);
-    this.children.forEach(c => c.broadcastEvent(event, this));
   }
 
-  protected handleEvent(event: PageEvent, parent: EventBroadcaster) {}
+  public handleOnEventBroadcasterChangedEvent(
+    event: OnEventBroadcasterChangedEvent
+  ): OptionalEvent {
+    this.eventBroadcaster = event.broadcaster;
+    return super.handleOnEventBroadcasterChangedEvent(event);
+  }
+
+  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
+    return super.handleOnLoadEvent(new OnLoadEvent(this));
+  }
 
   protected query(query: string): HTMLElement | null {
     return this.element?.querySelector(query);
diff --git a/src/framework/primitives/implementations/image.ts b/src/framework/primitives/implementations/image.ts
index de7c185..a737058 100644
--- a/src/framework/primitives/implementations/image.ts
+++ b/src/framework/primitives/implementations/image.ts
@@ -9,24 +9,28 @@ export class Image implements Primitive {
     private readonly alt: string
   ) {}
 
-  public toHTML(disableInnerShadow = false): html {
+  public toHTML(noContainer = false): html {
     return `
-        ${!disableInnerShadow ? `<div class="figure-container">` : ''}
+        ${!noContainer ? `<div class="figure-container">` : ''}
             <img tabindex="0"
                 srcset="${this.image.srcSet}" 
-                sizes="${this.image.images
-                  .slice(0, -1)
-                  .map(
-                    d =>
-                      `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${
-                        d.width
-                      }px,`
-                  )
-                  .join('\n') + `\n${last(this.image.images).width}px`}"
+                sizes="${this.getSizes()}"
                 src="${last(this.image.images)?.path}" 
                 alt="${this.alt}"
             />
-        ${!disableInnerShadow ? `</div>` : ''}
+        ${!noContainer ? `</div>` : ''}
       `;
   }
+
+  private getSizes(): string {
+    return (
+      this.image.images
+        .slice(0, -1)
+        .map(
+          d =>
+            `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${d.width}px,`
+        )
+        .join('\n') + `\n${last(this.image.images).width}px`
+    );
+  }
 }
diff --git a/src/framework/primitives/implementations/video.ts b/src/framework/primitives/implementations/video.ts
index 121f205..b867924 100644
--- a/src/framework/primitives/implementations/video.ts
+++ b/src/framework/primitives/implementations/video.ts
@@ -8,16 +8,16 @@ export class Video implements Primitive {
     private readonly webm: url,
     private readonly options?: string
   ) {}
-  public toHTML(disableInnerShadow = false): string {
+  public toHTML(noContainer = false): string {
     return `
-        ${!disableInnerShadow ? `<div class="figure-container">` : ''}
+        ${!noContainer ? `<div class="figure-container">` : ''}
           <video ${this.options} ${
       this.poster ? `poster="${this.poster}` : ''
     }" >
               <source src="${this.webm}" type="video/webm"/>
               <source src="${this.mp4}" type="video/mp4"/>
           </video>
-        ${!disableInnerShadow ? `</div>` : ''}
+        ${!noContainer ? `</div>` : ''}
     `;
   }
 }
diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts
index 4475c9e..1422fdd 100644
--- a/src/page/background/background.html.ts
+++ b/src/page/background/background.html.ts
@@ -1,6 +1,7 @@
-import './background.scss';
 import { html } from '../../framework/model/misc';
 
+import './background.scss';
+
 export const generate = (): html => `
     <canvas id="background"></canvas>
 `;
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index 0e38fae..56bfa8b 100644
--- a/src/page/background/background.ts
+++ b/src/page/background/background.ts
@@ -4,24 +4,29 @@ import { generate } from './background.html';
 import { Animation } from './animation';
 import { Vec3 } from './vec3';
 import { Vec2 } from './vec2';
-import { PageEvent, PageEventType } from '../../framework/events/page-event';
 import { createElement } from '../../framework/helper/create-element';
 import { sum } from '../../framework/helper/sum';
 import { getHeight } from '../../framework/helper/get-height';
+import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event';
+import { OnBodyDimensionsChangedEvent } from '../../framework/events/concrete-events/on-body-dimensions-changed-event';
+import { OnPageThemeChangedEvent } from '../../framework/events/concrete-events/on-page-theme-changed-event';
+import { OptionalEvent } from '../../framework/events/optional-event';
 
 export class PageBackground extends PageElement {
-  private readonly blobs: Array<Blob> = [];
-  private readonly blobSpacing = 325;
-  private readonly minBlobCount = 30;
-  private readonly perspective = 5;
-  private readonly zMin = 10;
-  private readonly zMax = 30;
-  private readonly animationTime = 250;
+  public static readonly BLOB_SPACING = 325;
+  public static readonly MIN_BLOB_COUNT = 30;
+  public static readonly PERSPECTIVE = 5;
+  public static readonly Z_MIN = 10;
+  public static readonly Z_MAX = 30;
+  public static readonly ANIMATION_TIME = 250;
+
   private backgroundSize: Animation<Vec2>;
   private scrollPosition: number = 0;
   private previousTimestamp: DOMHighResTimeStamp = null;
+  private readonly blobs: Array<Blob> = [];
   private readonly canvas: HTMLCanvasElement;
   private readonly ctx: CanvasRenderingContext2D;
+  private parent: PageElement;
 
   public constructor(
     private readonly start: PageElement,
@@ -31,35 +36,40 @@ export class PageBackground extends PageElement {
     super(createElement(generate()));
     this.canvas = this.element as HTMLCanvasElement;
     this.ctx = this.canvas.getContext('2d');
-    Blob.initialize(this.zMin, this.zMax);
   }
 
-  protected handleEvent(event: PageEvent, parent: PageElement) {
-    switch (event.type) {
-      case PageEventType.onLoad:
-        this.bindListeners(parent);
-        break;
-      case PageEventType.onBodyDimensionsChanged:
-        this.resize(parent, event.data?.deltaHeight);
-        break;
-      case PageEventType.pageThemeChanged:
-        Blob.changeTheme(event.data);
-        this.blobs.forEach(b => b.decideColor());
-        break;
-    }
+  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
+    this.parent = event.parent;
+    this.bindListeners();
+    return super.handleOnLoadEvent(event);
   }
 
-  private bindListeners(parent: PageElement) {
-    window.addEventListener('resize', () => this.resize(parent));
+  public handleOnBodyDimensionsChangedEvent(
+    event: OnBodyDimensionsChangedEvent
+  ): OptionalEvent {
+    this.resize(event.deltaHeight);
+    return super.handleOnBodyDimensionsChangedEvent(event);
+  }
+
+  public handleOnPageThemeChangedEvent(
+    event: OnPageThemeChangedEvent
+  ): OptionalEvent {
+    Blob.changeTheme(event.isDark);
+    this.blobs.forEach(b => b.decideColor());
+    return super.handleOnPageThemeChangedEvent(event);
+  }
+
+  private bindListeners() {
+    window.addEventListener('resize', () => this.resize());
     window.addEventListener('load', e => {
-      this.resize(parent);
-      this.redraw(e.timeStamp, parent);
+      this.resize();
+      this.redraw(e.timeStamp);
     });
   }
 
-  private resize(parent: PageElement, heightChange?: number) {
+  private resize(heightChange?: number) {
     this.resizeCanvas();
-    this.resizeBackground(parent, heightChange);
+    this.resizeBackground(heightChange);
   }
 
   private resizeCanvas() {
@@ -67,8 +77,8 @@ export class PageBackground extends PageElement {
     this.canvas.height = this.canvas.clientHeight;
   }
 
-  private resizeBackground(parent: PageElement, heightChange?: number) {
-    const targetWidth = parent.element.clientWidth;
+  private resizeBackground(heightChange?: number) {
+    const targetWidth = this.parent.element.clientWidth;
 
     const siblings: Array<HTMLElement> = this.getSiblings();
     let targetHeight = sum(siblings.map(getHeight));
@@ -81,7 +91,7 @@ export class PageBackground extends PageElement {
     this.backgroundSize = new Animation(
       this.backgroundSize ? this.backgroundSize.value : targetSize,
       targetSize,
-      this.animationTime,
+      PageBackground.ANIMATION_TIME,
       (from: Vec2, to: Vec2, q: number): Vec2 =>
         new Vec2(from.x + q * (to.x - from.x), from.y + q * (to.y - from.y)),
       backgroundSize =>
@@ -90,7 +100,10 @@ export class PageBackground extends PageElement {
             Math.max(
               0,
               offset -
-                ((blob.z - this.zMin) / (this.zMax - this.zMin)) * offset * q
+                ((blob.z - PageBackground.Z_MIN) /
+                  (PageBackground.Z_MAX - PageBackground.Z_MIN)) *
+                  offset *
+                  q
             );
           const topOffset = variableOffset(getHeight(this.start.element), 1);
           const topLeft = this.convertFrom2Dto3D(
@@ -116,14 +129,14 @@ export class PageBackground extends PageElement {
     return [this.start, ...this.inBetween, this.end].map(e => e.element);
   }
 
-  private redraw(timestamp: DOMHighResTimeStamp, parent: PageElement) {
+  private redraw(timestamp: DOMHighResTimeStamp) {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
     const deltaTime = this.getDeltaTime(timestamp);
     this.backgroundSize.step(deltaTime);
     this.blobs.forEach(b => b.step(deltaTime));
 
-    this.scrollPosition = parent.element.scrollTop;
+    this.scrollPosition = this.parent.element.scrollTop;
     const requiredBlobCount = this.requiredBlobCount;
 
     while (requiredBlobCount > this.blobs.length) {
@@ -147,7 +160,7 @@ export class PageBackground extends PageElement {
       }
     });
 
-    window.requestAnimationFrame(timestamp => this.redraw(timestamp, parent));
+    window.requestAnimationFrame(timestamp => this.redraw(timestamp));
   }
 
   private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
@@ -159,7 +172,7 @@ export class PageBackground extends PageElement {
   }
 
   private convertFrom3Dto2D(p: Vec3): Vec2 {
-    const m = this.perspective / (this.perspective + p.z);
+    const m = PageBackground.PERSPECTIVE / (PageBackground.PERSPECTIVE + p.z);
     return new Vec2(
       m * (p.z / 2 + p.x),
       m * (p.z / 2 + p.y - this.scrollPosition)
@@ -171,7 +184,7 @@ export class PageBackground extends PageElement {
     z: number,
     scrollPosition: number = 0
   ): Vec2 {
-    const m = 1 + z / this.perspective;
+    const m = 1 + z / PageBackground.PERSPECTIVE;
     return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
   }
 
@@ -186,10 +199,10 @@ export class PageBackground extends PageElement {
 
   private get requiredBlobCount(): number {
     return Math.max(
-      this.minBlobCount,
+      PageBackground.MIN_BLOB_COUNT,
       Math.round(
         (this.backgroundSize.value.x * this.backgroundSize.value.y) /
-          this.blobSpacing ** 2
+          PageBackground.BLOB_SPACING ** 2
       )
     );
   }
diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts
index ce9ddca..3d6fd83 100644
--- a/src/page/background/blob.ts
+++ b/src/page/background/blob.ts
@@ -3,40 +3,38 @@ import { Vec3 } from './vec3';
 import { mixColors } from '../../framework/helper/mix-colors';
 import { Random } from '../../framework/helper/random';
 import { Animation } from './animation';
+import { PageBackground } from './background';
 
 export class Blob {
-  private static readonly darkColors = ['#2c477a'];
-  private static readonly lightColors = ['#fff9e0', '#ffd6d6'];
-  private static readonly rotation = (-20 / 180) * Math.PI;
-  private static readonly creatorRandom = new Random(51);
+  private static readonly DARK_COLORS = ['#2c477a'];
+  private static readonly LIGHT_COLORS = ['#fff9e0', '#ffd6d6'];
+  private static readonly ROTATION = (-20 / 180) * Math.PI;
+  private static readonly CREATOR_RANDOM = new Random(51);
+
   private static colorPickerRandom = new Random(132);
   private static isDarkThemed = false;
 
-  private static zMin: number;
-  private static zMax: number;
-  public static initialize(zMin: number, zMax: number) {
-    Blob.zMin = zMin;
-    Blob.zMax = zMax;
-  }
-
   public static changeTheme(isDarkThemed: boolean) {
     Blob.colorPickerRandom = new Random(132);
     Blob.isDarkThemed = isDarkThemed;
   }
 
-  public readonly z = Blob.creatorRandom.randomInInterval(Blob.zMin, Blob.zMax);
+  public readonly z = Blob.CREATOR_RANDOM.randomInInterval(
+    PageBackground.Z_MIN,
+    PageBackground.Z_MAX
+  );
   private color: Animation<string>;
 
   private readonly positionQ = new Vec2(
-    Blob.creatorRandom.next,
-    Blob.creatorRandom.next
+    Blob.CREATOR_RANDOM.next,
+    Blob.CREATOR_RANDOM.next
   );
   private _positionScale = new Vec2(0, 0);
   private _positionOffset = new Vec2(0, 0);
 
   private readonly _size = new Vec2(
     140,
-    Blob.creatorRandom.randomInInterval(260, 740)
+    Blob.CREATOR_RANDOM.randomInInterval(260, 740)
   );
 
   public constructor() {
@@ -47,9 +45,10 @@ export class Blob {
     const target = mixColors(
       Blob.isDarkThemed ? '#242638' : '#ffffff',
       Blob.colorPickerRandom.choose(
-        Blob.isDarkThemed ? Blob.darkColors : Blob.lightColors
+        Blob.isDarkThemed ? Blob.DARK_COLORS : Blob.LIGHT_COLORS
       ),
-      (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
+      (this.z - PageBackground.Z_MIN) /
+        (PageBackground.Z_MAX - PageBackground.Z_MIN)
     );
 
     this.color = new Animation<string>(
@@ -87,7 +86,7 @@ export class Blob {
     ctx.save();
 
     ctx.translate(position.x, position.y);
-    ctx.rotate(Blob.rotation);
+    ctx.rotate(Blob.ROTATION);
 
     ctx.beginPath();
     ctx.arc(0, size.x / 2, size.x / 2, Math.PI, 0);
diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/image-viewer/image-viewer.ts
index 9db8e76..a665bb9 100644
--- a/src/page/image-viewer/image-viewer.ts
+++ b/src/page/image-viewer/image-viewer.ts
@@ -1,8 +1,9 @@
 import { PageElement } from '../../framework/page-element';
 
 import { generate } from './image-viewer.html';
-import { PageEvent, PageEventType } from '../../framework/events/page-event';
 import { createElement } from '../../framework/helper/create-element';
+import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event';
+import { OptionalEvent } from '../../framework/events/optional-event';
 
 export class PageImageViewer extends PageElement {
   public constructor() {
@@ -10,20 +11,17 @@ export class PageImageViewer extends PageElement {
     this.element.onclick = () => PageImageViewer.hide(this.element);
   }
 
-  protected handleEvent(event: PageEvent, parent: PageElement) {
-    if (event.type === PageEventType.onLoad) {
-      document.body.addEventListener('keydown', this.handleKeydown.bind(this));
+  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
+    document.body.addEventListener('keydown', this.handleKeydown.bind(this));
 
-      const media = Array.prototype.slice.call(
-        parent.element.querySelectorAll('img')
+    const media = Array.prototype.slice.call(document.querySelectorAll('img'));
+
+    media
+      .filter((e: HTMLElement) => e.parentElement !== this.element)
+      .forEach(
+        (e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this))
       );
-
-      media
-        .filter((e: HTMLElement) => e.parentElement !== this.element)
-        .forEach(
-          (e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this))
-        );
-    }
+    return super.handleOnLoadEvent(event);
   }
 
   private handleClick(event: Event) {
diff --git a/src/page/theme-switcher/theme-switcher.ts b/src/page/theme-switcher/theme-switcher.ts
index d5e7d29..76bacb6 100644
--- a/src/page/theme-switcher/theme-switcher.ts
+++ b/src/page/theme-switcher/theme-switcher.ts
@@ -6,12 +6,13 @@ import {
   turnOnDarkMode,
   turnOnLightMode,
 } from '../../framework/styles/dark-mode/dark-mode';
-import { PageEvent, PageEventType } from '../../framework/events/page-event';
-import { EventBroadcaster } from '../../framework/events/event-broadcaster';
 import {
   turnOffAnimations,
   turnOnAnimations,
 } from '../../framework/styles/animations/animations';
+import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event';
+import { OnPageThemeChangedEvent } from '../../framework/events/concrete-events/on-page-theme-changed-event';
+import { OptionalEvent } from '../../framework/events/optional-event';
 
 export class PageThemeSwitcher extends PageElement {
   private static readonly LOCAL_STORAGE_KEY = 'dark-mode';
@@ -33,10 +34,9 @@ export class PageThemeSwitcher extends PageElement {
     this.element.onchange = this.handleThemeChange.bind(this);
   }
 
-  protected handleEvent(event: PageEvent, parent: EventBroadcaster) {
-    if (event.type === PageEventType.onLoad) {
-      this.handleThemeChange();
-    }
+  public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent {
+    this.handleThemeChange();
+    return super.handleOnLoadEvent(event);
   }
 
   private handleThemeChange() {
@@ -46,11 +46,8 @@ export class PageThemeSwitcher extends PageElement {
     } else {
       turnOnLightMode();
     }
-    this.eventBroadcaster.broadcastEvent({
-      type: PageEventType.pageThemeChanged,
-      data: isDark,
-    });
 
+    this.eventBroadcaster.broadcastEvent(new OnPageThemeChangedEvent(isDark));
     PageThemeSwitcher.saveToLocalStorage(isDark);
   }
 
diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/timeline/timeline-element/timeline-element.ts
index 8613291..faf7784 100644
--- a/src/page/timeline/timeline-element/timeline-element.ts
+++ b/src/page/timeline/timeline-element/timeline-element.ts
@@ -2,8 +2,8 @@ import { TimelineElement } from '../../../model/portfolio';
 import { PageContent } from '../../content/content';
 import { PageElement } from '../../../framework/page-element';
 import { generate } from './timeline-element.html';
-import { PageEventType } from '../../../framework/events/page-event';
 import { createElement } from '../../../framework/helper/create-element';
+import { OnBodyDimensionsChangedEvent } from '../../../framework/events/concrete-events/on-body-dimensions-changed-event';
 
 export class PageTimelineElement extends PageElement {
   private isOpen: boolean;
@@ -46,16 +46,15 @@ export class PageTimelineElement extends PageElement {
   }
 
   private notifyOfHeightChange(deltaHeight: number = undefined) {
-    this.eventBroadcaster?.broadcastEvent({
-      type: PageEventType.onBodyDimensionsChanged,
-      data: { deltaHeight },
-    });
+    this.eventBroadcaster?.broadcastEvent(
+      new OnBodyDimensionsChangedEvent(deltaHeight)
+    );
 
     setTimeout(
       () =>
-        this.eventBroadcaster?.broadcastEvent({
-          type: PageEventType.onBodyDimensionsChanged,
-        }),
+        this.eventBroadcaster?.broadcastEvent(
+          new OnBodyDimensionsChangedEvent()
+        ),
       250
     );
   }