andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Refactor

Browse source
This commit is contained in:
Schmelczer András 2020-01-23 10:08:16 +01:00
parent 86fc18bbc9
commit ce14794eb6
20 changed files with 269 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

50
.idea/workspace.xml generated
View file

@ -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>

11
src/framework/container-page.ts
View file

@ -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));
}
}

11
src/framework/events/concrete-events/on-body-dimensions-changed-event.ts Normal file
View file

@ -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);
}
}

12
src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts Normal file
View file

@ -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);
}
}

12
src/framework/events/concrete-events/on-load-event.ts Normal file
View file

@ -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);
}
}

11
src/framework/events/concrete-events/on-page-theme-changed-event.ts Normal file
View file

@ -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);
}
}

4
src/framework/events/event-broadcaster.ts
View file

@ -1,5 +1,5 @@
import { PageEvent } from './page-event';
import { Event } from './event';
export interface EventBroadcaster {
broadcastEvent(event: PageEvent, parent?: EventBroadcaster);
broadcastEvent(event: Event);
}

34
src/framework/events/event-handler.ts Normal file
View file

@ -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;
}
}

6
src/framework/events/event.ts Normal file
View file

@ -0,0 +1,6 @@
import { EventHandler } from './event-handler';
import { OptionalEvent } from './optional-event';
export interface Event {
accept(handler: EventHandler): OptionalEvent;
}

3
src/framework/events/optional-event.ts Normal file
View file

@ -0,0 +1,3 @@
import { Event } from './event';
export type OptionalEvent = Event | undefined;

11
src/framework/events/page-event.ts
View file

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

38
src/framework/page-element.ts
View file

@ -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);

28
src/framework/primitives/implementations/image.ts
View file

@ -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`
);
}
}

6
src/framework/primitives/implementations/video.ts
View file

@ -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>` : ''}
`;
}
}

3
src/page/background/background.html.ts
View file

@ -1,6 +1,7 @@
import './background.scss';
import { html } from '../../framework/model/misc';
import './background.scss';
export const generate = (): html => `
<canvas id="background"></canvas>
`;

91
src/page/background/background.ts
View file

@ -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
)
);
}

35
src/page/background/blob.ts
View file

@ -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);

24
src/page/image-viewer/image-viewer.ts
View file

@ -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) {

17
src/page/theme-switcher/theme-switcher.ts
View file

@ -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);
}

15
src/page/timeline/timeline-element/timeline-element.ts
View file

@ -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
);
}