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-04 10:24:07 +01:00
parent 41d4665e49
commit 969ccac690
24 changed files with 236 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/page/about/about.ts
View file

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

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

@ -5,5 +5,4 @@ export const generate = (): html => `
<section id="background-container">
<section id="background"></section>
</section>
<div id="edge-hack"></div>
`;

8
src/page/background/background.scss
View file

@ -2,10 +2,10 @@
@import "../../style/mixins";
#background-container {
position: absolute;
position: fixed;
left: 0;
top: 0;
height: 100%;
height: 100vh;
width: 100%;
z-index: -1;
@ -42,7 +42,3 @@
}
}
}
#edge-hack {
position: fixed;
}

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

@ -1,31 +1,19 @@
import { PageElement } from "../../framework/page-element";
import {
getHeight,
createElement,
randomFactory,
sum,
isChrome
} from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
import { Blob } from "./blob";
import { generate } from "./background.html";
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';
export class PageBackground extends PageElement {
private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 350;
private previousWidth: number;
private previousHeight: number;
private previousScrollPositionToSet: number = 0;
private previousTimestamp: DOMHighResTimeStamp = null;
private readonly baseDeltaTime = (1 / 30) * 1000;
private readonly maxBaseSpeedInPixels = 20;
public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate()));
if (isChrome()) {
this.query("#background").style.transformStyle = "preserve-3d";
}
Blob.initialize(10, 30, 5);
}
@ -38,46 +26,14 @@ export class PageBackground extends PageElement {
}
private bindListeners(parent: PageElement) {
window.addEventListener("resize", () => this.resize(parent));
window.addEventListener("load", () => this.resize(parent));
window.requestAnimationFrame(timestamp =>
this.scrollContainer(timestamp, parent)
);
}
private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) {
const deltaTime = this.getDeltaTime(timestamp);
const scrollPositionToSet = parent.getElement().scrollTop;
const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
this.previousScrollPositionToSet = scrollPositionToSet;
const threshold = 2;
if (deltaScroll > threshold) {
const smoothDeltaScroll =
(deltaScroll / deltaTime) * Math.min(deltaTime, this.baseDeltaTime);
this.getElement().scrollTop += smoothDeltaScroll;
} else {
const error = scrollPositionToSet - this.getElement().scrollTop;
if (Math.abs(error) > threshold) {
this.getElement().scrollTop += Math.min(
error / 4,
this.maxBaseSpeedInPixels,
error
);
}
}
window.requestAnimationFrame(timestamp =>
this.scrollContainer(timestamp, parent)
);
}
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
const deltaTime = this.previousTimestamp
? timestamp - this.previousTimestamp
: 0;
this.previousTimestamp = timestamp;
return deltaTime;
window.addEventListener('resize', () => this.resize(parent));
window.addEventListener('load', () => this.resize(parent));
parent
.getElement()
.addEventListener(
'scroll',
() => (this.getElement().scrollTop = parent.getElement().scrollTop)
);
}
private resize(parent: PageElement, heightChange?: number) {
@ -89,14 +45,8 @@ export class PageBackground extends PageElement {
height += heightChange;
}
if (this.previousHeight === height && this.previousWidth === width) {
return;
}
this.previousHeight = height;
this.previousWidth = width;
this.query("#background").style.width = `${width}px`;
this.query("#background").style.height = `${height}px`;
this.query('#background').style.width = `${width}px`;
this.query('#background').style.height = `${height}px`;
const requiredBlobCount = Math.round(
(width * height) / this.blobSpacing ** 2
@ -104,11 +54,11 @@ export class PageBackground extends PageElement {
while (requiredBlobCount > this.blobs.length) {
const blob = new Blob();
this.query("#background").appendChild(blob.htmlElement);
this.query('#background').appendChild(blob.htmlElement);
this.blobs.push(blob);
}
const random = randomFactory(2662);
const random = new Random(2662);
this.blobs.forEach((b, i) => {
if (i >= requiredBlobCount) {

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

@ -1,14 +1,10 @@
import {
choose,
createElement,
mixColors,
randomFactory,
randomInInterval
} from "../../framework/helper";
import { mixColors } from '../../framework/helper/color-mixer';
import { createElement } from '../../framework/helper/create-element';
import { Random } from '../../framework/helper/random';
export class Blob {
private static readonly creatorRandom = randomFactory(44);
private static readonly colors = ["#fff9e0", "#ffd6d6"];
private static readonly creatorRandom = new Random(44);
private static readonly colors = ['#fff9e0', '#ffd6d6'];
private static zMin: number;
private static zMax: number;
private static perspective: number;
@ -18,26 +14,22 @@ export class Blob {
Blob.perspective = perspective;
}
private readonly z = randomInInterval(
private readonly z = Blob.creatorRandom.randomInInterval(
Blob.zMin,
Blob.zMax,
Blob.creatorRandom
Blob.zMax
);
private readonly element: HTMLElement = createElement("<div></div>");
private readonly element: HTMLElement = createElement('<div></div>');
constructor() {
this.element.style.backgroundColor =
"#" +
mixColors(
"#ffffff",
choose(Blob.colors, Blob.creatorRandom),
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
this.element.style.backgroundColor = mixColors(
'#ffffff',
Blob.creatorRandom.choose(Blob.colors),
(this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
);
this.element.style.zIndex = (-this.z).toString();
this.element.style.height = `${randomInInterval(
this.element.style.height = `${Blob.creatorRandom.randomInInterval(
160,
740,
Blob.creatorRandom
740
)}px`;
}
@ -46,7 +38,7 @@ export class Blob {
}
private randomWithKnownZ(
random: () => number,
random: Random,
viewportSize: number,
scrollSize: number,
startOffset = 0,
@ -67,19 +59,19 @@ export class Blob {
const l =
scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
return randomInInterval(lowerBound, lowerBound + l, random);
return random.randomInInterval(lowerBound, lowerBound + l);
}
public show() {
this.element.style.opacity = "1";
this.element.style.opacity = '1';
}
public hide() {
this.element.style.opacity = "0";
this.element.style.opacity = '0';
}
public transform(
random: () => number,
random: Random,
width: number,
viewportHeight: number,
scrollHeight: number,
@ -98,7 +90,7 @@ export class Blob {
translateZ(${-this.z}px)
rotate(-20deg)
`;
this.element.style["-webkit-transform"] = value;
this.element.style['-webkit-transform'] = value;
this.element.style.transform = value;
}
}

25
src/page/content/content.ts
View file

@ -1,8 +1,9 @@
import { Content, TypedContent } from "../../model/content";
import "./content.scss";
import { PageElement } from "../../framework/page-element";
import { createElement, last } from "../../framework/helper";
import { html } from "../../model/misc";
import { Content, TypedContent } from '../../model/content';
import './content.scss';
import { PageElement } from '../../framework/page-element';
import { createElement } from '../../framework/helper/create-element';
import { html } from '../../model/misc';
import { last } from '../../framework/helper/last';
export class PageContent extends PageElement {
private static isTyped(content): content is TypedContent {
@ -13,10 +14,10 @@ export class PageContent extends PageElement {
element: TypedContent,
disableInnerShadow?: boolean
): html {
if (element.type === "a") {
if (element.type === 'a') {
return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
}
if (element.type === "video") {
if (element.type === 'video') {
return `
<video ${element.options}>
<source src="${element.webm}" type="video/webm"/>
@ -24,19 +25,19 @@ export class PageContent extends PageElement {
</video>
`;
}
if (element.type === "img") {
if (element.type === 'img') {
return `
${!disableInnerShadow ? `<div class="image-container">` : ""}
${!disableInnerShadow ? `<div class="image-container">` : ''}
<img
srcset="${element.image.srcSet}"
src="${last(element.image.images).path}"
alt="${element.alt}"
/>
${!disableInnerShadow ? `</div>` : ""}
${!disableInnerShadow ? `</div>` : ''}
`;
}
throw new Error("Unhandled type.");
throw new Error('Unhandled type.');
}
public constructor(content: Content) {
@ -51,7 +52,7 @@ export class PageContent extends PageElement {
? PageContent.parseTypedContent(element)
: `<p>${element}</p>`
)
.join("\n")}
.join('\n')}
</div>
`)
);

8
src/page/footer/footer.ts
View file

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

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

@ -1,8 +1,8 @@
import { PageElement } from "../../framework/page-element";
import { PageElement } from '../../framework/page-element';
import { generate } from "./image-viewer.html";
import { createElement } from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
import { generate } from './image-viewer.html';
import { PageEvent, PageEventType } from '../../framework/page-event';
import { createElement } from '../../framework/helper/create-element';
export class PageImageViewer extends PageElement {
public constructor() {
@ -17,16 +17,16 @@ export class PageImageViewer extends PageElement {
return;
}
document.body.addEventListener("keydown", this.handleKeydown.bind(this));
document.body.addEventListener('keydown', this.handleKeydown.bind(this));
const images = Array.prototype.slice.call(
parent.getElement().querySelectorAll("img")
parent.getElement().querySelectorAll('img')
);
images
.filter(
(img: HTMLImageElement) =>
img.parentElement !== this.getElement() &&
!img.classList.contains("no-open")
!img.classList.contains('no-open')
)
.forEach(
(img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this))
@ -35,22 +35,22 @@ export class PageImageViewer extends PageElement {
private handleClick(event: Event) {
(this.query(
"#photo"
'#photo'
) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
PageImageViewer.show(this.getElement());
}
private handleKeydown(event: KeyboardEvent) {
if (event.key === "Escape") {
if (event.key === 'Escape') {
PageImageViewer.hide(this.getElement());
}
}
private static show(e: HTMLElement) {
e.style.display = "flex";
e.style.display = 'flex';
}
private static hide(e: HTMLElement) {
e.style.display = "none";
e.style.display = 'none';
}
}

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

@ -1,9 +1,9 @@
import { TimelineElement } from "../../../model/portfolio";
import { PageContent } from "../../content/content";
import { PageElement } from "../../../framework/page-element";
import { generate } from "./timeline-element.html";
import { createElement } from "../../../framework/helper";
import { PageEventType } from "../../../framework/page-event";
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/page-event';
import { createElement } from '../../../framework/helper/create-element';
export class PageTimelineElement extends PageElement {
private isOpen;
@ -20,19 +20,19 @@ export class PageTimelineElement extends PageElement {
const content = new PageContent(timelineElement.more);
super([content]);
this.isOpen = false;
this.more = root.querySelector(".more");
this.more = root.querySelector('.more');
this.more.appendChild(content.getElement());
window.addEventListener("resize", this.handleResize.bind(this));
window.addEventListener('resize', this.handleResize.bind(this));
root
.querySelector(".buttons")
.addEventListener("click", this.toggleOpen.bind(this));
.querySelector('.buttons')
.addEventListener('click', this.toggleOpen.bind(this));
} else super();
this.setElement(root);
}
private toggleOpen() {
const showMore = this.query(".show-more") as HTMLElement;
const showLess = this.query(".show-less") as HTMLElement;
const showMore = this.query('.show-more') as HTMLElement;
const showLess = this.query('.show-less') as HTMLElement;
if (this.isOpen) {
PageTimelineElement.show(showMore);
PageTimelineElement.hide(showLess);
@ -49,28 +49,28 @@ export class PageTimelineElement extends PageElement {
private notifyOfHeightChange(deltaHeight: number = undefined) {
this.eventBroadcaster?.broadcastEvent({
type: PageEventType.onBodyDimensionsChanged,
data: { deltaHeight }
data: { deltaHeight },
});
setTimeout(
() =>
this.eventBroadcaster?.broadcastEvent({
type: PageEventType.onBodyDimensionsChanged
type: PageEventType.onBodyDimensionsChanged,
}),
350
);
}
private static hide(element: HTMLElement) {
element.style.opacity = "0";
element.style.opacity = '0';
setTimeout(() => {
element.style.visibility = "hidden";
element.style.visibility = 'hidden';
}, 350);
}
private static show(element: HTMLElement) {
element.style.visibility = "visible";
element.style.opacity = "1";
element.style.visibility = 'visible';
element.style.opacity = '1';
}
private openMore() {
@ -81,13 +81,13 @@ export class PageTimelineElement extends PageElement {
private closeMore() {
const deltaHeight = this.more.scrollHeight;
this.more.style.height = "0";
this.more.style.height = '0';
this.notifyOfHeightChange(-deltaHeight);
}
private handleResize() {
if (this.isOpen) {
this.more.style.height = "auto";
this.more.style.height = 'auto';
setTimeout(this.openMore.bind(this), 200);
}
}

10
src/page/timeline/timeline.ts
View file

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