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

Simplify names & improve HTML semantics

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-25 16:20:40 +02:00
parent 674cf4223b
commit ec804f2319
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
31 changed files with 84 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { sum } from '../../helper/sum';
import { PageElement } from '../page-element';
import { generate } from './background.html';
export class PageBackground extends PageElement {
export class Background extends PageElement {
private static readonly perspective = 5;
private static readonly zMin = 6;
private static readonly zMax = 50;
@ -22,11 +22,11 @@ export class PageBackground extends PageElement {
for (let i = 0; i < Math.max(30, window.innerWidth / 10); i++) {
const blob = document.createElement('div');
const z = this.random.inInterval(PageBackground.zMin, PageBackground.zMax);
const z = this.random.inInterval(Background.zMin, Background.zMax);
blob.style.zIndex = (-z).toFixed(0);
blob.style.opacity = (
1 -
(z - PageBackground.zMin) / (PageBackground.zMax - PageBackground.zMin)
(z - Background.zMin) / (Background.zMax - Background.zMin)
).toString();
blob.style.height = `${this.random.inInterval(360, 740)}px`;
this.blobs.push(blob);
@ -85,36 +85,36 @@ export class PageBackground extends PageElement {
height: number
): [number, number] {
const farTop = -(
((this.windowHeight / 2 - topOffset) / PageBackground.perspective) *
(PageBackground.zMax + PageBackground.perspective) -
((this.windowHeight / 2 - topOffset) / Background.perspective) *
(Background.zMax + Background.perspective) -
this.windowHeight / 2
);
const farBottom = Math.min(
((this.windowHeight / 2 - bottomOffset) / PageBackground.perspective) *
(PageBackground.zMax + PageBackground.perspective) -
((this.windowHeight / 2 - bottomOffset) / Background.perspective) *
(Background.zMax + Background.perspective) -
this.windowHeight / 2 +
this.contentHeight,
this.contentHeight - height
);
const endXSpan =
((this.windowWidth / PageBackground.perspective) *
(PageBackground.zMax + PageBackground.perspective)) /
((this.windowWidth / Background.perspective) *
(Background.zMax + Background.perspective)) /
2;
return [
this.random.inInterval(
mix(0, -(endXSpan - this.windowWidth / 2), z / PageBackground.zMax),
mix(0, -(endXSpan - this.windowWidth / 2), z / Background.zMax),
mix(
this.windowWidth,
this.windowWidth + endXSpan - this.windowWidth / 2,
z / PageBackground.zMax
z / Background.zMax
)
),
this.random.inInterval(
mix(topOffset, farTop, z / PageBackground.zMax),
mix(this.contentHeight - bottomOffset, farBottom, z / PageBackground.zMax)
mix(topOffset, farTop, z / Background.zMax),
mix(this.contentHeight - bottomOffset, farBottom, z / Background.zMax)
),
];
}

2
src/page/footer/footer.html.ts
View file

@ -13,7 +13,7 @@ export const Footer = ({
links: Array<html>;
lastEditText: string;
}): html => `
<footer id="footer">
<footer id="contact">
<h2>${title}</h2>
<div class="links">

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

@ -1,6 +1,6 @@
@use '../../style/mixins' as *;
#footer {
#contact {
text-align: center;
margin-top: var(--large-margin);

3
src/page/header/header.scss
View file

@ -50,7 +50,8 @@
$img-size: 190px;
width: var(--body-width);
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto 0 auto;
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
auto;
position: relative;
border-radius: var(--border-radius);

6
src/page/header/header.ts
View file

@ -3,9 +3,9 @@ import { ResponsiveImage } from '../../types/responsive-image';
import { Image } from '../image-viewer/image/image.html';
import { PageElement } from '../page-element';
import { generate } from './header.html';
import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
import { ThemeSwitcher } from './theme-switcher/theme-switcher';
export class PageHeader extends PageElement {
export class Header extends PageElement {
public constructor({
name,
image,
@ -30,6 +30,6 @@ export class PageHeader extends PageElement {
})
)
);
this.attachElement(new PageThemeSwitcher());
this.attachElement(new ThemeSwitcher());
}
}

13
src/page/header/theme-switcher/theme-switcher.ts
View file

@ -2,13 +2,13 @@ import { createElement } from '../../../helper/create-element';
import { PageElement } from '../../page-element';
import { generate } from './theme-switcher.html';
export class PageThemeSwitcher extends PageElement {
export class ThemeSwitcher extends PageElement {
private static readonly localStorageKey = 'dark-mode';
public constructor() {
super(createElement(generate()));
const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
const storedIsDark = ThemeSwitcher.loadFromLocalStorage();
const isDark = storedIsDark ?? isSystemLevelDarkModeEnabled();
if (isDark) {
@ -31,19 +31,16 @@ export class PageThemeSwitcher extends PageElement {
turnOnLightMode();
}
PageThemeSwitcher.saveToLocalStorage(isDark);
ThemeSwitcher.saveToLocalStorage(isDark);
}
private static saveToLocalStorage(darkModeEnabled: boolean) {
localStorage?.setItem(
PageThemeSwitcher.localStorageKey,
JSON.stringify(darkModeEnabled)
);
localStorage?.setItem(ThemeSwitcher.localStorageKey, JSON.stringify(darkModeEnabled));
}
private static loadFromLocalStorage(): boolean | null {
try {
return JSON.parse(localStorage!.getItem(PageThemeSwitcher.localStorageKey)!);
return JSON.parse(localStorage!.getItem(ThemeSwitcher.localStorageKey)!);
} catch {
return null;
}

6
src/page/image-viewer/image-viewer.html.ts
View file

@ -3,8 +3,8 @@ import { html } from '../../types/html';
import './image-viewer.scss';
export const generate = (): html => `
<section id="image-viewer">
<div id="image-viewer">
<img height="0" width="0" image-viewer-ignore />
<div tabindex="2" id="cancel">${cancel}</div>
</section>
<button id="cancel">${cancel}</button>
</div>
`;

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

@ -26,6 +26,8 @@
}
#cancel {
background: none;
border: none;
@include image-button(var(--large-icon-size));
@include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
position: absolute;

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

@ -2,7 +2,7 @@ import { createElement } from '../../helper/create-element';
import { PageElement } from '../page-element';
import { generate } from './image-viewer.html';
export class PageImageViewer extends PageElement {
export class ImageViewer extends PageElement {
public constructor() {
super(createElement(generate()));

6
src/page/timeline/timeline-element/timeline-element-parameters.ts → src/page/timeline-element/timeline-element-parameters.ts
View file

@ -1,6 +1,6 @@
import { html } from '../../../types/html';
import { Preview } from '../../preview/preview';
import { Video } from '../../video/video';
import { html } from '../../types/html';
import { Preview } from '../preview/preview';
import { Video } from '../video/video';
export interface TimelineElementParameters {
date: string;

15
src/page/timeline/timeline-element/timeline-element.html.ts → src/page/timeline-element/timeline-element.html.ts
View file

@ -1,6 +1,6 @@
import info from '../../../../static/icons/info.svg';
import { titleToFragment } from '../../../helper/title-to-fragment';
import { html } from '../../../types/html';
import info from '../../../static/icons/info.svg';
import { titleToFragment } from '../../helper/title-to-fragment';
import { html } from '../../types/html';
import { TimelineElementParameters } from './timeline-element-parameters';
import './timeline-element.scss';
@ -8,7 +8,7 @@ export const generate = (
{ date, title, description, more, links }: TimelineElementParameters,
showMore: string
): html => `
<section id="${titleToFragment(title)}" class="timeline-element">
<article id="${titleToFragment(title)}" class="timeline-element">
<div class="line-container">
<div class="line"></div>
<p class="date">${date}</p>
@ -33,15 +33,16 @@ export const generate = (
<div class="buttons">
${
more &&
`<div tabindex=0 class="info-button">
more
? `<div tabindex=0 class="info-button">
<div class="svg-container">${info}</div>
<p>${showMore}</p>
</div>`
: ''
}
${links.join('')}
</div>
</div>
</div>
</section>
</article>
`;

2
src/page/timeline/timeline-element/timeline-element.scss → src/page/timeline-element/timeline-element.scss
View file

@ -1,4 +1,4 @@
@use '../../../style/mixins' as *;
@use '../../style/mixins' as *;
@mixin q-dependent-line-container($q) {
.line {

6
src/page/timeline/timeline-element/timeline-element.ts → src/page/timeline-element/timeline-element.ts
View file

@ -1,9 +1,9 @@
import { createElement } from '../../../helper/create-element';
import { PageElement } from '../../page-element';
import { createElement } from '../../helper/create-element';
import { PageElement } from '../page-element';
import { TimelineElementParameters } from './timeline-element-parameters';
import { generate } from './timeline-element.html';
export class PageTimelineElement extends PageElement {
export class TimelineElement extends PageElement {
private isOpen = false;
private more: HTMLElement;

6
src/page/timeline/timeline.html.ts
View file

@ -1,6 +0,0 @@
import { html } from '../../types/html';
import './timeline.scss';
export const generate = (): html => `
<div id="timeline"></div>
`;

7
src/page/timeline/timeline.scss
View file

@ -1,7 +0,0 @@
@use '../../style/mixins' as *;
@include on-large-screen {
#timeline > :first-child {
margin-top: var(--large-margin);
}
}

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

@ -1,22 +0,0 @@
import { createElement } from '../../helper/create-element';
import { PageElement } from '../page-element';
import { PageTimelineElement } from './timeline-element/timeline-element';
import { TimelineElementParameters } from './timeline-element/timeline-element-parameters';
import { generate } from './timeline.html';
export class PageTimeline extends PageElement {
public constructor({
elements,
showMoreText,
showLessText,
}: {
showMoreText: string;
showLessText: string;
elements: Array<TimelineElementParameters>;
}) {
super(createElement(generate()));
elements.forEach((e) =>
this.attachElement(new PageTimelineElement(e, showMoreText, showLessText))
);
}
}