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

Add dark mode

Browse source
This commit is contained in:
Schmelczer András 2020-01-07 21:30:23 +01:00
parent 48a55a4a97
commit 073f087e52
40 changed files with 864 additions and 531 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,6 @@
import { PageElement } from '../../framework/page-element';
import { PageEvent, PageEventType } from '../../framework/page-event';
import { createElement } from '../../framework/helper/create-element';
import { Blob } from './blob';
import { generate } from './background.html';
import { Random } from '../../framework/helper/random';
import { getHeight } from '../../framework/helper/get-height';
import { sum } from '../../framework/helper/sum';
@ -12,7 +10,7 @@ export class PageBackground extends PageElement {
private readonly blobSpacing = 350;
public constructor(private start: PageElement, private end: PageElement) {
super(createElement(generate()));
super();
Blob.initialize(10, 30, 5);
}
@ -21,37 +19,33 @@ export class PageBackground extends PageElement {
this.bindListeners(parent);
} else if (event.type === PageEventType.onBodyDimensionsChanged) {
this.resize(parent, event.data?.deltaHeight);
} else if (event.type === PageEventType.pageThemeChanged) {
Blob.changeTheme(event.data);
this.blobs.forEach(b => b.decideColor());
}
}
private bindListeners(parent: PageElement) {
window.addEventListener('resize', () => this.resize(parent));
window.addEventListener('load', () => this.resize(parent));
parent.element.addEventListener(
'scroll',
() => (this.element.scrollTop = parent.element.scrollTop)
);
}
private resize(parent: PageElement, heightChange?: number) {
const siblings: Array<HTMLElement> = this.getSiblings(parent);
const siblings: Array<HTMLElement> = PageBackground.getSiblings(parent);
const width = parent.element.clientWidth;
const width = document.body.clientWidth;
let height = sum(siblings.map(getHeight));
if (heightChange) {
height += heightChange;
}
this.query('#background').style.width = `${width}px`;
this.query('#background').style.height = `${height}px`;
const requiredBlobCount = Math.round(
(width * height) / this.blobSpacing ** 2
);
while (requiredBlobCount > this.blobs.length) {
const blob = new Blob();
this.query('#background').appendChild(blob.htmlElement);
parent.element.appendChild(blob.htmlElement);
this.blobs.push(blob);
}
@ -74,9 +68,9 @@ export class PageBackground extends PageElement {
});
}
private getSiblings(parent: PageElement): Array<HTMLElement> {
private static getSiblings(parent: PageElement): Array<HTMLElement> {
return Array.prototype.slice
.call(parent.element.children)
.filter(e => e !== this.element);
.filter((e: HTMLElement) => !e.classList.contains('background-element'));
}
}