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

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