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

47
.idea/workspace.xml generated
View file

@ -2,19 +2,29 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/.prettierrc" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/color-mixer.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/get-height.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/last.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/random.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/range.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/framework/helper/sum.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.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.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" 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/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.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/content/content.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.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/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/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.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/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@ -23,9 +33,6 @@
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FavoritesManager">
<favorites_list name="CompiledCV" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
@ -55,15 +62,9 @@
<property name="nodejs_package_manager_path" value="npm" />
<property name="prettierjs.PrettierConfiguration.Package" value="/usr/local/lib/node_modules/prettier" />
<property name="settings.editor.selected.configurable" value="watcher.settings" />
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
<property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
@ -71,6 +72,12 @@
<recent name="C:\Projects\portfolio\CompiledCV\src" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
@ -117,6 +124,8 @@
<workItem from="1577662869335" duration="6536000" />
<workItem from="1577702567470" duration="3227000" />
<workItem from="1577786195424" duration="4310000" />
<workItem from="1578128234878" duration="396000" />
<workItem from="1578128641780" duration="1136000" />
</task>
<servers />
</component>

5
.prettierrc Normal file
View file

@ -0,0 +1,5 @@
{
"trailingComma": "es5",
"tabWidth": 2,
"singleQuote": true
}

98
src/framework/helper.ts
View file

@ -1,98 +0,0 @@
import { html } from "../model/misc";
export const createElement = (from: html): HTMLElement => {
const element: HTMLElement = document.createElement("div");
element.innerHTML = from;
return element.firstElementChild as HTMLElement;
};
export const randomFactory = seed => () =>
((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31;
export const fixedSeedRandom = randomFactory(42);
export const choose = <T>(
list: Array<T>,
random: () => number = fixedSeedRandom
): T => list[randomInInterval(0, list.length, random)];
export const randomInInterval = (
aClosed: number,
bOpen: number,
random: () => number = fixedSeedRandom
): number => Math.floor((bOpen - aClosed) * random()) + aClosed;
export const sum = (list: ArrayLike<number>): number =>
Array.prototype.reduce.call(list, (a, sum) => a + sum, 0);
export const getHeight = (e: HTMLElement): number => {
const computedStyle = window.getComputedStyle(e);
return (
// ignores margin collapse
e.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
};
export const mixColors = (
hexColorA: string,
hexColorB: string,
qA: number
): string => {
const colorA = hexToRGB(normalizeHex(hexColorA));
const colorB = hexToRGB(normalizeHex(hexColorB));
const mixedColor: [number, number, number] = [
colorA[0] * qA + colorB[0] * (1 - qA),
colorA[1] * qA + colorB[1] * (1 - qA),
colorA[2] * qA + colorB[2] * (1 - qA)
];
return RGBToHex(mixedColor);
};
const normalizeHex = (hex: string): string => {
hex = hex.trim();
if (hex.startsWith("#")) {
hex = hex.substr(1);
}
return hex;
};
const hexToRGB = (hex: string): [number, number, number] => {
const [r1, r2, g1, g2, b1, b2] = hex;
return [
Number.parseInt(r1 + r2, 16),
Number.parseInt(g1 + g2, 16),
Number.parseInt(b1 + b2, 16)
];
};
const RGBToHex = (rgb: [number, number, number]): string =>
rgb.map(n => Math.round(n).toString(16)).join("");
export const range = ({
from = 0,
to = Infinity,
step = 1
}: {
from?: number;
to?: number;
step?: number;
}): Iterable<number> => {
return {
*[Symbol.iterator]() {
for (let i = from; i < to; yield i, i += step) {}
}
};
};
export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined;
export const isChrome = (): boolean =>
!!navigator.appVersion.match(/chrome/i) &&
// @ts-ignore
window.webkitRequestFileSystem !== undefined;

41
src/framework/helper/color-mixer.ts Normal file
View file

@ -0,0 +1,41 @@
export const mixColors = (
hexColorA: string,
hexColorB: string,
quantityA: number
): string => {
const colorA = hexToRGB(normalizeHex(hexColorA));
const colorB = hexToRGB(normalizeHex(hexColorB));
const mixedColor: [number, number, number] = [
mix(colorA[0], colorB[0], quantityA),
mix(colorA[1], colorB[1], quantityA),
mix(colorA[2], colorB[2], quantityA),
];
return RGBToHex(mixedColor);
};
const hexToRGB = ([r1, r2, g1, g2, b1, b2]: string): [
number,
number,
number
] => {
return [
Number.parseInt(r1 + r2, 16),
Number.parseInt(g1 + g2, 16),
Number.parseInt(b1 + b2, 16),
];
};
const normalizeHex = (hex: string): string => {
hex = hex.trim();
if (hex.startsWith('#')) {
hex = hex.substr(1);
}
return hex;
};
const mix = (a: number, b: number, q: number): number => a * q + b * (1 - q);
const RGBToHex = (rgb: [number, number, number]): string =>
'#' + rgb.map(n => Math.round(n).toString(16)).join('');

7
src/framework/helper/create-element.ts Normal file
View file

@ -0,0 +1,7 @@
import { html } from '../../model/misc';
export const createElement = (from: html): HTMLElement => {
const element: HTMLElement = document.createElement('div');
element.innerHTML = from;
return element.firstElementChild as HTMLElement;
};

11
src/framework/helper/get-height.ts Normal file
View file

@ -0,0 +1,11 @@
export const getHeight = (e: HTMLElement): number => {
const computedStyle = window.getComputedStyle(e);
return (
// ignores margin collapse
e.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
};

2
src/framework/helper/last.ts Normal file
View file

@ -0,0 +1,2 @@
export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined;

17
src/framework/helper/random.ts Normal file
View file

@ -0,0 +1,17 @@
export class Random {
public constructor(private seed: number) {}
public get next(): number {
return (
((2 ** 31 - 1) & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31
);
}
public choose<T>(list: Array<T>): T {
return list[this.randomInInterval(0, list.length)];
}
public randomInInterval(aClosed: number, bOpen: number): number {
return Math.floor((bOpen - aClosed) * this.next) + aClosed;
}
}

15
src/framework/helper/range.ts Normal file
View file

@ -0,0 +1,15 @@
export const range = ({
from = 0,
to = Infinity,
step = 1,
}: {
from?: number;
to?: number;
step?: number;
}): Iterable<number> => {
return {
*[Symbol.iterator]() {
for (let i = from; i < to; yield i, i += step) {}
},
};
};

2
src/framework/helper/sum.ts Normal file
View file

@ -0,0 +1,2 @@
export const sum = (list: ArrayLike<number>): number =>
Array.prototype.reduce.call(list, (a, sum) => a + sum, 0);

4
src/index.html
View file

@ -18,9 +18,7 @@
</head>
<body>
<main>
<noscript>
<h1>Javascript is required for this website.</h1>
</noscript>
<noscript><h1>Javascript is required for this website.</h1></noscript>
</main>
</body>
</html>

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(

5
src/style/a.scss
View file

@ -13,14 +13,13 @@ a {
$border-shift: 10px;
transition: transform $long-transition-time;
$dot-size: 4px;
&:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: $dot-size;
height: $line-width;
bottom: 0;
z-index: 1;
background: linear-gradient(
@ -37,7 +36,7 @@ a {
display: block;
width: calc(100% + #{$border-shift});
z-index: 0;
border-bottom: $dot-size dotted $accent-color;
border-bottom: $line-width dashed $accent-color;
transition: transform $long-transition-time;
}

4
src/style/vars.scss
View file

@ -13,7 +13,7 @@ $scrollbar-color: #ffd6d6;
$short-transition-time: 220ms;
$long-transition-time: 350ms;
$line-width: 3px;
$border-radius: 15px;
$border-radius: var(--border-radius);
$breakpoint-width: 925px;
$large-margin: var(--large-margin);
@ -36,6 +36,7 @@ $body-width: var(--body-width);
--body-width: 765px;
--shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.075);
--shadow2: 0 0 1px rgba(0, 0, 0, 0.2);
--border-radius: 15px;
@media (max-width: $breakpoint-width) {
--large-margin: 60px;
@ -45,5 +46,6 @@ $body-width: var(--body-width);
--body-width: 90%;
--shadow1: 0 0 10px 2px rgba(0, 0, 0, 0.05);
--shadow2: 0 0 1px rgba(0, 0, 0, 0.125);
--border-radius: 10px;
}
}

1
webpack.config.js
View file

@ -14,6 +14,7 @@ module.exports = {
},
devServer: {
host: "0.0.0.0"
// disableHostCheck: true
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]