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

quicksave

Browse source
This commit is contained in:
Schmelczer András 2019-12-28 17:21:35 +01:00
parent f74c86f4b1
commit 98160edc72
23 changed files with 226 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/page/about/about.html.ts
View file

@ -7,10 +7,6 @@ export const generate = (
aPictureOf: string
): html => `
<section id="about">
<div class="container">
<header>
<img alt="${aPictureOf} ${name}" src="${picture}"/>
<h1>${name}</h1>
</header>
</div>
<img alt="${aPictureOf} ${name}" src="${picture}"/>
<h1>${name}</h1>
</section>`;

55
src/page/about/about.scss
View file

@ -2,42 +2,33 @@
@import "../../style/vars";
#about {
width: 100%;
backdrop-filter: blur($blur-radius);
padding: $normal-margin;
width: $body-width;
margin-top: $normal-margin;
.container {
width: $body-width;
margin: auto;
h1,
img {
@include title-font();
}
header {
@include center-children();
img {
@include square(4ch);
border-radius: 100%;
margin-right: 1.5ex;
cursor: pointer;
float: left;
}
h1,
img {
@include title-font();
}
img {
@include square(4ch);
border-radius: 100%;
margin-right: 1.5ex;
cursor: pointer;
}
@media (max-width: $breakpoint-width) {
flex-direction: column;
img {
margin: 0 0 $small-margin 0;
}
h1 {
text-align: center;
}
}
@media (max-width: $breakpoint-width) {
flex-direction: column;
img {
margin: 0 0 $small-margin 0;
}
* {
text-align: justify;
h1 {
text-align: center;
}
}
* {
@include main-font();
}
}

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

@ -12,6 +12,6 @@ export class PageHeader extends PageElement {
super([content]);
this.setElement(root);
this.query(".container").appendChild(content.getElement());
root.appendChild(content.getElement());
}
}

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

@ -3,21 +3,26 @@ import "./background.scss";
export const generate = (
count: number,
color?: () => string,
z?: () => number,
color?: (z) => string,
height?: () => number,
isAnimated?: (index) => boolean,
transform?: () => string
): html => `
transform?: (z) => string
): html => {
return `
<section class="background">
${
count > 0
? new Array(count)
.fill(0, 0, count)
.map(_ => z())
.map(
(_, i) => `
<div class="${
isAnimated(i) ? "animated" : ""
}" style="background-color: ${color()}; height: ${height()}px; transform: ${transform()}"
(zValue, i) => `
<div class="${isAnimated(i) ? "animated" : ""}" style="
background-color: ${color(zValue)};
height: ${height()}px;
z-index: ${-zValue};
transform: ${transform(zValue)}"
></div>
`
)
@ -26,3 +31,4 @@ export const generate = (
}
</section>
`;
};

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

@ -18,6 +18,8 @@
top: 0;
width: 160px;
transition: transform $slow-transition-time;
&.animated {
animation: fade-in 1s linear forwards;
@keyframes fade-in {

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

@ -2,94 +2,117 @@ import { PageElement } from "../../framework/page-element";
import { generate } from "./background.html";
import {
choose,
getHeight,
createElement,
randomFactory,
randomInInterval,
sum
sum,
mixColors
} from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
export class PageBackground extends PageElement {
private colors = ["#fff9e077", "#ffd6d677"];
private blobSize = 150; // with margin
private colors = ["#fff9e0", "#ffd6d6"];
private blobSpacing = 200;
private perspective = 5;
private currentRealHeight = 0;
private currentRealWidth = 0;
private currentBlobCount = 0;
public constructor() {
public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate(0)));
}
protected handleEvent(event: PageEvent, parent: PageElement) {
if (event.type === PageEventType.onLoad) {
window.addEventListener("resize", this.resize.bind(this, parent));
window.addEventListener("load", this.resize.bind(this, parent));
this.bindListeners(parent);
} else if (event.type === PageEventType.onBodyDimensionsChanged) {
this.resize(parent);
}
}
private bindListeners(parent: PageElement) {
window.addEventListener("resize", this.resize.bind(this, parent));
window.addEventListener("load", this.resize.bind(this, parent));
}
private resize(parent: PageElement) {
const siblings: Array<HTMLElement> = Array.prototype.slice
.call(parent.getElement().children)
.filter(e => e !== this.getElement());
const width = document.body.clientWidth;
const height = sum(
siblings.map(c => {
const computedStyle = window.getComputedStyle(c);
return (
// ignores margin collapse
c.clientHeight +
parseInt(computedStyle.marginTop) +
parseInt(computedStyle.marginBottom) +
parseInt(computedStyle.borderTopWidth) +
parseInt(computedStyle.borderBottomWidth)
);
})
);
const width = parent.getElement().clientWidth;
const height = sum(siblings.map(getHeight));
if (height > this.currentRealHeight || width > this.currentRealWidth) {
this.currentRealHeight = height;
this.currentRealWidth = width;
const random = randomFactory(44);
const random = randomFactory(46);
const count = Math.round((width * height) / this.blobSize ** 2);
const zMin = 20;
const zMax = 40;
const randomWithKnownZ = (z: number, bound: number): number => {
const l = (bound * (this.perspective + z)) / this.perspective;
return randomInInterval(
-(l / 2 - bound / 2),
l / 2 + bound / 2,
random
);
const count = Math.round((width * height) / this.blobSpacing ** 2);
const randomWithKnownZ = (
z: number,
viewportSize: number,
scrollSize: number,
startOffset = 0,
endOffset = 0
): number => {
const m = 1 + z / this.perspective;
const variableOffset = (offset, q) =>
offset - ((z - zMin) / (zMax - zMin)) * (offset * q);
startOffset = variableOffset(startOffset, 0.6);
endOffset = variableOffset(endOffset, 0.2);
const lowerBound =
viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
const l =
scrollSize -
viewportSize +
(viewportSize - startOffset - endOffset) * m;
return randomInInterval(lowerBound, lowerBound + l, random);
};
this.setElement(
createElement(
generate(
count,
() => choose(this.colors, random),
() => randomInInterval(zMin, zMax, random),
z =>
"#" +
mixColors(
"#ffffff",
choose(this.colors, random),
(z - zMin) / (zMax - zMin)
),
() => randomInInterval(160, 750, random),
i => i >= this.currentBlobCount,
() => {
const z = randomInInterval(-12, -25, random);
return `
translateX(${randomWithKnownZ(-z, width)}px)
translateY(${randomWithKnownZ(-z, height)}px)
translateZ(${z}px)
z => `
translateX(${randomWithKnownZ(z, width, width)}px)
translateY(${randomWithKnownZ(
z,
parent.getElement().clientHeight,
height,
getHeight(this.start.getElement()),
getHeight(this.end.getElement())
)}px)
translateZ(${-z}px)
rotate(-20deg)
`;
}
`
)
)
);
this.currentBlobCount = count;
console.log(count);
}
this.getElement().style.width = `${width}px`;
this.getElement().style.height = `${height}px`;

6
src/page/content/content.scss
View file

@ -1,10 +1,10 @@
@use "../../style/vars";
@import "../../style/vars";
.content {
margin-top: vars.$small-margin;
margin-top: $small-margin;
* {
margin-top: vars.$line-height;
margin-top: $line-height;
}
p {

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

@ -4,10 +4,10 @@
footer#page-footer {
text-align: center;
margin: $small-margin auto 0 auto;
margin: $normal-margin auto 0 auto;
padding: $normal-margin $normal-margin $line-height $normal-margin;
width: 100%;
backdrop-filter: blur($blur-radius);
// backdrop-filter: blur($blur-radius);
h2 {
@include title-font();
@ -16,7 +16,7 @@ footer#page-footer {
ul {
list-style: none;
display: inline-block;
margin-top: $normal-margin;
margin-top: calc(#{$small-margin} / 2 + #{$normal-margin} / 2);
text-align: left;
li {
@ -40,7 +40,7 @@ footer#page-footer {
aside.other {
@include center-children();
margin: $normal-margin auto 0 auto;
margin: calc(2 * #{$normal-margin}) auto 0 auto;
width: $body-width;
h6 {

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

@ -9,7 +9,7 @@ export class PageImageViewer extends PageElement {
super();
const root = createElement(generate());
this.setElement(root);
this.query("#cancel").onclick = () => PageImageViewer.hide(root);
root.onclick = () => PageImageViewer.hide(root);
}
protected handleEvent(event: PageEvent, parent: PageElement) {

10
src/page/index.ts
View file

@ -8,15 +8,19 @@ import { Page } from "../framework/page";
export const create = ({ config, header, timeline, footer }: Portfolio) => {
document.title = header.name;
const pageHeader = new PageHeader(header, config.aPictureOf);
const pageFooter = new PageFooter(footer);
const bg = new PageBackground(pageHeader, pageFooter);
new Page(
[
new PageImageViewer(),
new Page(
[
new PageBackground(),
new PageHeader(header, config.aPictureOf),
pageHeader,
new PageTimeline(timeline, config.showMore, config.showLess),
new PageFooter(footer)
pageFooter,
bg
],
document.body.querySelector("main"),
false