From dc86d30eb20e61fd2149a8a26d146c4173434b4c Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Tue, 17 Nov 2020 20:52:59 +0100 Subject: [PATCH] Remove "framework" --- .vscode/settings.json | 7 +++ custom.d.ts | 25 +++------ .../on-body-dimensions-changed-event.ts | 0 .../on-event-broadcaster-changed-event.ts | 0 .../events/concrete-events/on-load-event.ts | 2 +- .../on-page-theme-changed-event.ts | 0 .../events/event-broadcaster.ts | 2 +- src/{framework => }/events/event-handler.ts | 0 src/{framework => }/events/event.ts | 0 src/{framework => }/events/optional-event.ts | 0 src/framework/container-page.ts | 15 ------ src/framework/framework.scss | 1 - src/framework/helper/last.ts | 2 - src/framework/page-element.ts | 39 -------------- .../primitives/implementations/anchor.ts | 17 ------- .../primitives/implementations/image.ts | 33 ------------ .../primitives/implementations/text.ts | 10 ---- .../primitives/implementations/video.ts | 21 -------- src/framework/primitives/primitive.ts | 5 -- src/framework/styles/index.scss | 3 -- src/framework/styles/wrapper.scss | 15 ------ src/{framework => }/helper/create-element.ts | 2 +- src/{framework => }/helper/get-height.ts | 0 src/helper/last.ts | 2 + src/{framework => }/helper/mix-colors.ts | 0 .../polyfills.ts => helper/polyfill-imul.ts} | 2 +- src/{framework => }/helper/random.ts | 4 +- src/{framework => }/helper/sum.ts | 0 src/index.ts | 11 ++-- src/page/about/about.html.ts | 8 +-- src/page/about/about.ts | 16 +++--- src/page/background/background.html.ts | 3 +- src/page/background/background.ts | 29 +++++------ src/page/background/blob.ts | 4 +- src/page/basics/anchor/anchor.html.ts | 10 ++++ src/page/basics/anchor/anchor.scss | 3 ++ src/page/basics/anchor/anchor.ts | 10 ++++ src/page/basics/image/image.html.ts | 25 +++++++++ src/page/basics/image/image.scss | 0 src/page/basics/image/image.ts | 24 +++++++++ src/page/basics/text/text.html.ts | 6 +++ src/page/basics/text/text.scss | 4 ++ src/page/basics/text/text.ts | 9 ++++ src/page/basics/video/video.html.ts | 24 +++++++++ src/page/basics/video/video.scss | 0 src/page/basics/video/video.ts | 16 ++++++ src/page/body/body.ts | 13 +++++ src/page/content/content.html.ts | 10 ++-- src/page/content/content.ts | 9 ++-- src/page/footer/footer.html.ts | 4 +- src/page/footer/footer.ts | 6 +-- src/page/image-viewer/image-viewer.html.ts | 2 +- src/page/image-viewer/image-viewer.ts | 16 +++--- src/page/page-element.ts | 51 +++++++++++++++++++ .../theme-switcher/theme-switcher.html.ts | 3 +- src/page/theme-switcher/theme-switcher.ts | 29 +++++------ .../timeline-element/timeline-element.html.ts | 12 ++--- .../timeline-element/timeline-element.ts | 29 ++++++----- src/page/timeline/timeline.html.ts | 2 +- src/page/timeline/timeline.ts | 14 ++--- src/portfolio.ts | 22 ++++---- .../animations/animations.scss | 0 .../styles => style}/animations/animations.ts | 0 .../styles => style}/dark-mode/dark-mode.scss | 0 .../styles => style}/dark-mode/dark-mode.ts | 0 src/style/mixins.scss | 14 ++++- src/style/vars.scss | 4 +- src/styles.scss | 23 +++------ src/types/html.ts | 1 + src/{model => types}/portfolio.ts | 14 ++--- .../misc.ts => types/responsive-image.ts} | 4 +- src/types/url.ts | 1 + 72 files changed, 359 insertions(+), 333 deletions(-) create mode 100644 .vscode/settings.json rename src/{framework => }/events/concrete-events/on-body-dimensions-changed-event.ts (100%) rename src/{framework => }/events/concrete-events/on-event-broadcaster-changed-event.ts (100%) rename src/{framework => }/events/concrete-events/on-load-event.ts (86%) rename src/{framework => }/events/concrete-events/on-page-theme-changed-event.ts (100%) rename src/{framework => }/events/event-broadcaster.ts (65%) rename src/{framework => }/events/event-handler.ts (100%) rename src/{framework => }/events/event.ts (100%) rename src/{framework => }/events/optional-event.ts (100%) delete mode 100644 src/framework/container-page.ts delete mode 100644 src/framework/framework.scss delete mode 100644 src/framework/helper/last.ts delete mode 100644 src/framework/page-element.ts delete mode 100644 src/framework/primitives/implementations/anchor.ts delete mode 100644 src/framework/primitives/implementations/image.ts delete mode 100644 src/framework/primitives/implementations/text.ts delete mode 100644 src/framework/primitives/implementations/video.ts delete mode 100644 src/framework/primitives/primitive.ts delete mode 100644 src/framework/styles/index.scss delete mode 100644 src/framework/styles/wrapper.scss rename src/{framework => }/helper/create-element.ts (86%) rename src/{framework => }/helper/get-height.ts (100%) create mode 100644 src/helper/last.ts rename src/{framework => }/helper/mix-colors.ts (100%) rename src/{framework/helper/polyfills.ts => helper/polyfill-imul.ts} (96%) rename src/{framework => }/helper/random.ts (87%) rename src/{framework => }/helper/sum.ts (100%) create mode 100644 src/page/basics/anchor/anchor.html.ts create mode 100644 src/page/basics/anchor/anchor.scss create mode 100644 src/page/basics/anchor/anchor.ts create mode 100644 src/page/basics/image/image.html.ts create mode 100644 src/page/basics/image/image.scss create mode 100644 src/page/basics/image/image.ts create mode 100644 src/page/basics/text/text.html.ts create mode 100644 src/page/basics/text/text.scss create mode 100644 src/page/basics/text/text.ts create mode 100644 src/page/basics/video/video.html.ts create mode 100644 src/page/basics/video/video.scss create mode 100644 src/page/basics/video/video.ts create mode 100644 src/page/body/body.ts create mode 100644 src/page/page-element.ts rename src/{framework/styles => style}/animations/animations.scss (100%) rename src/{framework/styles => style}/animations/animations.ts (100%) rename src/{framework/styles => style}/dark-mode/dark-mode.scss (100%) rename src/{framework/styles => style}/dark-mode/dark-mode.ts (100%) create mode 100644 src/types/html.ts rename src/{model => types}/portfolio.ts (58%) rename src/{framework/model/misc.ts => types/responsive-image.ts} (78%) create mode 100644 src/types/url.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..181c5f1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "cSpell.words": [ + "andras", + "schmelczer", + "webm" + ] +} \ No newline at end of file diff --git a/custom.d.ts b/custom.d.ts index 6ce532e..b707078 100644 --- a/custom.d.ts +++ b/custom.d.ts @@ -1,56 +1,45 @@ declare module '*.svg' { - import { url } from 'src/framework/model/misc'; + import { url } from 'src/types/url'; const content: url; export default content; } declare module '*.png' { - import { ResponsiveImage } from 'src/framework/model/misc'; + import { ResponsiveImage } from 'src/types/responsive-image'; const content: ResponsiveImage; export default content; } declare module '*.jpg' { - import { ResponsiveImage } from 'src/framework/model/misc'; + import { ResponsiveImage } from 'src/types/responsive-image'; const content: ResponsiveImage; export default content; } declare module '*.jpeg' { - import { ResponsiveImage } from 'src/framework/model/misc'; + import { ResponsiveImage } from 'src/types/responsive-image'; const content: ResponsiveImage; export default content; } -declare module '*.gif' { - import { url } from 'src/framework/model/misc'; - const content: url; - export default content; -} - declare module '*.mp4' { - import { url } from 'src/framework/model/misc'; + import { url } from 'src/types/url'; const content: url; export default content; } declare module '*.webm' { - import { url } from 'src/framework/model/misc'; + import { url } from 'src/types/url'; const content: url; export default content; } declare module '*.pdf' { - import { url } from 'src/framework/model/misc'; + import { url } from 'src/types/url'; const content: url; export default content; } -declare module '*.txt' { - const content: string; - export default content; -} - declare module '*.html' { const content: string; export default content; diff --git a/src/framework/events/concrete-events/on-body-dimensions-changed-event.ts b/src/events/concrete-events/on-body-dimensions-changed-event.ts similarity index 100% rename from src/framework/events/concrete-events/on-body-dimensions-changed-event.ts rename to src/events/concrete-events/on-body-dimensions-changed-event.ts diff --git a/src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts b/src/events/concrete-events/on-event-broadcaster-changed-event.ts similarity index 100% rename from src/framework/events/concrete-events/on-event-broadcaster-changed-event.ts rename to src/events/concrete-events/on-event-broadcaster-changed-event.ts diff --git a/src/framework/events/concrete-events/on-load-event.ts b/src/events/concrete-events/on-load-event.ts similarity index 86% rename from src/framework/events/concrete-events/on-load-event.ts rename to src/events/concrete-events/on-load-event.ts index 7bf1558..1be1eb0 100644 --- a/src/framework/events/concrete-events/on-load-event.ts +++ b/src/events/concrete-events/on-load-event.ts @@ -1,7 +1,7 @@ import { Event } from '../event'; import { EventHandler } from '../event-handler'; -import { PageElement } from '../../page-element'; import { OptionalEvent } from '../optional-event'; +import { PageElement } from '../../page/page-element'; export class OnLoadEvent implements Event { public constructor(public parent: PageElement) {} diff --git a/src/framework/events/concrete-events/on-page-theme-changed-event.ts b/src/events/concrete-events/on-page-theme-changed-event.ts similarity index 100% rename from src/framework/events/concrete-events/on-page-theme-changed-event.ts rename to src/events/concrete-events/on-page-theme-changed-event.ts diff --git a/src/framework/events/event-broadcaster.ts b/src/events/event-broadcaster.ts similarity index 65% rename from src/framework/events/event-broadcaster.ts rename to src/events/event-broadcaster.ts index e81be26..e4d943d 100644 --- a/src/framework/events/event-broadcaster.ts +++ b/src/events/event-broadcaster.ts @@ -1,5 +1,5 @@ import { Event } from './event'; export interface EventBroadcaster { - broadcastEvent(event: Event); + broadcastEvent(event: Event): void; } diff --git a/src/framework/events/event-handler.ts b/src/events/event-handler.ts similarity index 100% rename from src/framework/events/event-handler.ts rename to src/events/event-handler.ts diff --git a/src/framework/events/event.ts b/src/events/event.ts similarity index 100% rename from src/framework/events/event.ts rename to src/events/event.ts diff --git a/src/framework/events/optional-event.ts b/src/events/optional-event.ts similarity index 100% rename from src/framework/events/optional-event.ts rename to src/events/optional-event.ts diff --git a/src/framework/container-page.ts b/src/framework/container-page.ts deleted file mode 100644 index 8300d48..0000000 --- a/src/framework/container-page.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { PageElement } from './page-element'; -import { OnEventBroadcasterChangedEvent } from './events/concrete-events/on-event-broadcaster-changed-event'; -import { OnLoadEvent } from './events/concrete-events/on-load-event'; - -export class ContainerPage extends PageElement { - public constructor(rootElement: HTMLElement, children: Array) { - children.filter(e => e.element).forEach(e => rootElement.appendChild(e.element)); - super(rootElement, children); - } - - public setAsMain() { - this.broadcastEvent(new OnEventBroadcasterChangedEvent(this)); - this.broadcastEvent(new OnLoadEvent(this)); - } -} diff --git a/src/framework/framework.scss b/src/framework/framework.scss deleted file mode 100644 index 5f1962b..0000000 --- a/src/framework/framework.scss +++ /dev/null @@ -1 +0,0 @@ -@forward "styles/index"; diff --git a/src/framework/helper/last.ts b/src/framework/helper/last.ts deleted file mode 100644 index 4072ea6..0000000 --- a/src/framework/helper/last.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const last = (list: ArrayLike): T => - list.length >= 1 ? list[list.length - 1] : undefined; diff --git a/src/framework/page-element.ts b/src/framework/page-element.ts deleted file mode 100644 index 4a76e89..0000000 --- a/src/framework/page-element.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { EventBroadcaster } from './events/event-broadcaster'; -import { EventHandler } from './events/event-handler'; -import { OnEventBroadcasterChangedEvent } from './events/concrete-events/on-event-broadcaster-changed-event'; -import { Event } from './events/event'; -import { OnLoadEvent } from './events/concrete-events/on-load-event'; -import { OptionalEvent } from './events/optional-event'; - -export abstract class PageElement extends EventHandler implements EventBroadcaster { - protected eventBroadcaster: EventBroadcaster; - - protected constructor( - public readonly element?: HTMLElement, - private readonly children: Array = [] - ) { - super(); - } - - public broadcastEvent(event: Event) { - event = this.handle(event); - if (event) { - this.children.forEach(c => c.broadcastEvent(event)); - } - } - - public handleOnEventBroadcasterChangedEvent( - event: OnEventBroadcasterChangedEvent - ): OptionalEvent { - this.eventBroadcaster = event.broadcaster; - return super.handleOnEventBroadcasterChangedEvent(event); - } - - public handleOnLoadEvent(_: OnLoadEvent): OptionalEvent { - return super.handleOnLoadEvent(new OnLoadEvent(this)); - } - - protected query(query: string): HTMLElement | null { - return this.element?.querySelector(query); - } -} diff --git a/src/framework/primitives/implementations/anchor.ts b/src/framework/primitives/implementations/anchor.ts deleted file mode 100644 index bf5192e..0000000 --- a/src/framework/primitives/implementations/anchor.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { Primitive } from '../primitive'; -import { html, url } from '../../model/misc'; - -export class Anchor implements Primitive { - public constructor(private readonly href: url, private readonly text: string) {} - - public toHTML(): html { - return ` - ${this.text} -
- `; - } -} diff --git a/src/framework/primitives/implementations/image.ts b/src/framework/primitives/implementations/image.ts deleted file mode 100644 index acc4623..0000000 --- a/src/framework/primitives/implementations/image.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Primitive } from '../primitive'; -import { html, ResponsiveImage } from '../../model/misc'; -import { last } from '../../helper/last'; - -export class Image implements Primitive { - private static readonly IMAGE_SCREEN_RATIO = 0.8; - public constructor( - private readonly image: ResponsiveImage, - private readonly alt: string - ) {} - - public toHTML(container = false): html { - return ` - ${container ? `
` : ''} - ${this.alt} - ${container ? `
` : ''} - `; - } - - private getSizes(): string { - return ( - this.image.images - .slice(0, -1) - .map(d => `(max-width: ${d.width / Image.IMAGE_SCREEN_RATIO}px) ${d.width}px,`) - .join('\n') + `\n${last(this.image.images).width}px` - ); - } -} diff --git a/src/framework/primitives/implementations/text.ts b/src/framework/primitives/implementations/text.ts deleted file mode 100644 index 07f9b13..0000000 --- a/src/framework/primitives/implementations/text.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Primitive } from '../primitive'; -import { html } from '../../model/misc'; - -export class Text implements Primitive { - public constructor(private readonly text: string) {} - - public toHTML(): html { - return `

${this.text}

`; - } -} diff --git a/src/framework/primitives/implementations/video.ts b/src/framework/primitives/implementations/video.ts deleted file mode 100644 index 32ab7dc..0000000 --- a/src/framework/primitives/implementations/video.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Primitive } from '../primitive'; -import { url } from '../../model/misc'; - -export class Video implements Primitive { - public constructor( - private readonly poster: url, - private readonly mp4: url, - private readonly webm: url, - private readonly options?: string - ) {} - public toHTML(container = false): string { - return ` - ${container ? `
` : ''} - - ${container ? `
` : ''} - `; - } -} diff --git a/src/framework/primitives/primitive.ts b/src/framework/primitives/primitive.ts deleted file mode 100644 index a9339a7..0000000 --- a/src/framework/primitives/primitive.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { html } from '../model/misc'; - -export interface Primitive { - toHTML(): html; -} diff --git a/src/framework/styles/index.scss b/src/framework/styles/index.scss deleted file mode 100644 index 7132217..0000000 --- a/src/framework/styles/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@forward 'animations/animations'; -@forward 'dark-mode/dark-mode'; -@forward 'wrapper'; diff --git a/src/framework/styles/wrapper.scss b/src/framework/styles/wrapper.scss deleted file mode 100644 index 7f31213..0000000 --- a/src/framework/styles/wrapper.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use 'dark-mode/dark-mode' as *; - -$breakpoint-width: 925px !default; - -@mixin on-small-screen() { - @media (max-width: $breakpoint-width - 1px) { - @content; - } -} - -@mixin on-large-screen() { - @media (min-width: $breakpoint-width) { - @content; - } -} diff --git a/src/framework/helper/create-element.ts b/src/helper/create-element.ts similarity index 86% rename from src/framework/helper/create-element.ts rename to src/helper/create-element.ts index c5978e2..80f88b7 100644 --- a/src/framework/helper/create-element.ts +++ b/src/helper/create-element.ts @@ -1,4 +1,4 @@ -import { html } from '../model/misc'; +import { html } from '../types/html'; export const createElement = (from: html): HTMLElement => { // won't work for all elements, eg.: diff --git a/src/framework/helper/get-height.ts b/src/helper/get-height.ts similarity index 100% rename from src/framework/helper/get-height.ts rename to src/helper/get-height.ts diff --git a/src/helper/last.ts b/src/helper/last.ts new file mode 100644 index 0000000..d632e57 --- /dev/null +++ b/src/helper/last.ts @@ -0,0 +1,2 @@ +export const last = (list: ArrayLike): T | undefined => + list.length >= 1 ? list[list.length - 1] : undefined; diff --git a/src/framework/helper/mix-colors.ts b/src/helper/mix-colors.ts similarity index 100% rename from src/framework/helper/mix-colors.ts rename to src/helper/mix-colors.ts diff --git a/src/framework/helper/polyfills.ts b/src/helper/polyfill-imul.ts similarity index 96% rename from src/framework/helper/polyfills.ts rename to src/helper/polyfill-imul.ts index e1113a1..fcf187f 100644 --- a/src/framework/helper/polyfills.ts +++ b/src/helper/polyfill-imul.ts @@ -1,4 +1,4 @@ -export const addImul = () => { +export const polyfillImul = () => { // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul if (!Math.imul) Math.imul = function(opA, opB) { diff --git a/src/framework/helper/random.ts b/src/helper/random.ts similarity index 87% rename from src/framework/helper/random.ts rename to src/helper/random.ts index d2b1028..7b3b068 100644 --- a/src/framework/helper/random.ts +++ b/src/helper/random.ts @@ -1,8 +1,8 @@ -import { addImul } from './polyfills'; +import { polyfillImul } from './polyfill-imul'; export class Random { public constructor(private seed: number) { - addImul(); + polyfillImul(); } public get next(): number { diff --git a/src/framework/helper/sum.ts b/src/helper/sum.ts similarity index 100% rename from src/framework/helper/sum.ts rename to src/helper/sum.ts diff --git a/src/index.ts b/src/index.ts index f16d793..e9c2f93 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,16 +2,9 @@ import './static/no-change/favicon.ico'; import './static/no-change/og-image.jpg'; import './static/no-change/robots.txt'; import './static/no-change/404.html'; - import './styles.scss'; import { create } from './portfolio'; -const initialize = () => { - create(); - addSupportForTabNavigation(); - removeUnnecessaryOutlines(); -}; - const addSupportForTabNavigation = () => (document.onkeydown = e => { if (e.key === ' ') { @@ -25,4 +18,6 @@ const removeUnnecessaryOutlines = () => (e.target as HTMLElement)?.blur(); }); -initialize(); +create(); +addSupportForTabNavigation(); +removeUnnecessaryOutlines(); diff --git a/src/page/about/about.html.ts b/src/page/about/about.html.ts index 8117d86..02ad206 100644 --- a/src/page/about/about.html.ts +++ b/src/page/about/about.html.ts @@ -1,11 +1,11 @@ -import { Header } from '../../model/portfolio'; -import { html } from '../../framework/model/misc'; +import { Header } from '../../types/portfolio'; import './about.scss'; +import { html } from '../../types/html'; -export const generate = ({ name, picture }: Header): html => ` +export const generate = ({ name }: Header): html => `
- ${picture.toHTML()} +

${name}

diff --git a/src/page/about/about.ts b/src/page/about/about.ts index 44ec409..7990763 100644 --- a/src/page/about/about.ts +++ b/src/page/about/about.ts @@ -1,16 +1,16 @@ import { PageContent } from '../content/content'; -import { Header } from '../../model/portfolio'; +import { Header } from '../../types/portfolio'; import { generate } from './about.html'; -import { createElement } from '../../framework/helper/create-element'; -import { ContainerPage } from '../../framework/container-page'; +import { createElement } from '../../helper/create-element'; import { PageThemeSwitcher } from '../theme-switcher/theme-switcher'; +import { PageElement } from '../page-element'; -export class PageHeader extends ContainerPage { +export class PageHeader extends PageElement { public constructor(header: Header) { - super(createElement(generate(header)), [ - new PageContent(header.about), - new PageThemeSwitcher(), - ]); + super(createElement(generate(header))); + this.attachElementByReplacing('.picture', header.picture); + this.attachElement(new PageContent(header.about)); + this.attachElement(new PageThemeSwitcher()); } } diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts index 1422fdd..4a6d521 100644 --- a/src/page/background/background.html.ts +++ b/src/page/background/background.html.ts @@ -1,6 +1,5 @@ -import { html } from '../../framework/model/misc'; - import './background.scss'; +import { html } from '../../types/html'; export const generate = (): html => ` diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 2c806c5..a7287c7 100644 --- a/src/page/background/background.ts +++ b/src/page/background/background.ts @@ -1,16 +1,16 @@ -import { PageElement } from '../../framework/page-element'; +import { PageElement } from '../page-element'; import { Blob } from './blob'; import { generate } from './background.html'; import { Animation } from './animation'; import { Vec3 } from './vec3'; import { Vec2 } from './vec2'; -import { createElement } from '../../framework/helper/create-element'; -import { sum } from '../../framework/helper/sum'; -import { getHeight } from '../../framework/helper/get-height'; -import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event'; -import { OnBodyDimensionsChangedEvent } from '../../framework/events/concrete-events/on-body-dimensions-changed-event'; -import { OnPageThemeChangedEvent } from '../../framework/events/concrete-events/on-page-theme-changed-event'; -import { OptionalEvent } from '../../framework/events/optional-event'; +import { createElement } from '../../helper/create-element'; +import { sum } from '../../helper/sum'; +import { getHeight } from '../../helper/get-height'; +import { OnLoadEvent } from '../../events/concrete-events/on-load-event'; +import { OptionalEvent } from '../../events/optional-event'; +import { OnBodyDimensionsChangedEvent } from '../../events/concrete-events/on-body-dimensions-changed-event'; +import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event'; export class PageBackground extends PageElement { public static readonly BLOB_SPACING = 325; @@ -34,7 +34,7 @@ export class PageBackground extends PageElement { private readonly end: PageElement ) { super(createElement(generate())); - this.canvas = this.element as HTMLCanvasElement; + this.canvas = this.htmlRoot as HTMLCanvasElement; this.ctx = this.canvas.getContext('2d'); } @@ -89,7 +89,7 @@ export class PageBackground extends PageElement { } private resizeBackground(heightChange?: number) { - const targetWidth = this.parent.element.clientWidth; + const targetWidth = this.parent.htmlRoot.clientWidth; const siblings: Array = this.getSiblings(); let targetHeight = sum(siblings.map(getHeight)); @@ -116,11 +116,10 @@ export class PageBackground extends PageElement { offset * q ); - const topOffset = variableOffset(getHeight(this.start.element), 1); + const topOffset = variableOffset(getHeight(this.start.htmlRoot), 1); const topLeft = this.convertFrom2Dto3D(new Vec2(0, topOffset), blob.z); - const bottomOffset = variableOffset(getHeight(this.end.element), 0.2); - + const bottomOffset = variableOffset(getHeight(this.end.htmlRoot), 0.2); const bottomRight = this.convertFrom2Dto3D( new Vec2(this.canvas.width, this.canvas.height - bottomOffset), blob.z, @@ -134,7 +133,7 @@ export class PageBackground extends PageElement { } private getSiblings(): Array { - return [this.start, ...this.inBetween, this.end].map(e => e.element); + return [this.start, ...this.inBetween, this.end].map(e => e.htmlRoot); } private redraw(timestamp: DOMHighResTimeStamp) { @@ -144,7 +143,7 @@ export class PageBackground extends PageElement { this.backgroundSize.step(deltaTime); this.blobs.forEach(b => b.step(deltaTime)); - this.scrollPosition = this.parent.element.scrollTop; + this.scrollPosition = this.parent.htmlRoot.scrollTop; this.blobs.sort((b1, b2) => b2.z - b1.z); diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts index 3ab1800..5a1f5ec 100644 --- a/src/page/background/blob.ts +++ b/src/page/background/blob.ts @@ -1,7 +1,7 @@ import { Vec2 } from './vec2'; import { Vec3 } from './vec3'; -import { mixColors } from '../../framework/helper/mix-colors'; -import { Random } from '../../framework/helper/random'; +import { mixColors } from '../../helper/mix-colors'; +import { Random } from '../../helper/random'; import { Animation } from './animation'; import { PageBackground } from './background'; diff --git a/src/page/basics/anchor/anchor.html.ts b/src/page/basics/anchor/anchor.html.ts new file mode 100644 index 0000000..d38f780 --- /dev/null +++ b/src/page/basics/anchor/anchor.html.ts @@ -0,0 +1,10 @@ +import './anchor.scss'; +import { html } from '../../../types/html'; + +export const generate = ({ href, text }: { href: string; text: string }): html => ` + ${text} +
+`; diff --git a/src/page/basics/anchor/anchor.scss b/src/page/basics/anchor/anchor.scss new file mode 100644 index 0000000..6d26e85 --- /dev/null +++ b/src/page/basics/anchor/anchor.scss @@ -0,0 +1,3 @@ +.primitive-anchor { + margin-top: var(--line-height); +} diff --git a/src/page/basics/anchor/anchor.ts b/src/page/basics/anchor/anchor.ts new file mode 100644 index 0000000..307b056 --- /dev/null +++ b/src/page/basics/anchor/anchor.ts @@ -0,0 +1,10 @@ +import { PageElement } from '../../page-element'; +import { createElement } from '../../../helper/create-element'; +import { generate } from './anchor.html'; +import { url } from '../../../types/url'; + +export class Anchor extends PageElement { + public constructor(href: url, text: string) { + super(createElement(generate({ href, text }))); + } +} diff --git a/src/page/basics/image/image.html.ts b/src/page/basics/image/image.html.ts new file mode 100644 index 0000000..6b33b43 --- /dev/null +++ b/src/page/basics/image/image.html.ts @@ -0,0 +1,25 @@ +import './image.scss'; +import { last } from '../../../helper/last'; +import { ResponsiveImage } from '../../../types/responsive-image'; +import { html } from '../../../types/html'; + +export const generate = ({ + sizes, + image, + alt, + container, +}: { + sizes: string; + image: ResponsiveImage; + alt: string; + container: boolean; +}): html => ` + ${container ? `
` : ''} + ${alt} + ${container ? `
` : ''} +`; diff --git a/src/page/basics/image/image.scss b/src/page/basics/image/image.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/page/basics/image/image.ts b/src/page/basics/image/image.ts new file mode 100644 index 0000000..64048b4 --- /dev/null +++ b/src/page/basics/image/image.ts @@ -0,0 +1,24 @@ +import { PageElement } from '../../page-element'; +import { createElement } from '../../../helper/create-element'; +import { generate } from './image.html'; +import { last } from '../../../helper/last'; +import { ResponsiveImage } from '../../../types/responsive-image'; + +export class Image extends PageElement { + private static readonly imageScreenRatio = 0.8; + + public constructor(image: ResponsiveImage, alt: string, container = true) { + super( + createElement(generate({ image, alt, container, sizes: Image.getSizes(image) })) + ); + } + + private static getSizes(image: ResponsiveImage): string { + return ( + image.images + .slice(0, -1) + .map(d => `(max-width: ${d.width / Image.imageScreenRatio}px) ${d.width}px,`) + .join('\n') + `\n${last(image.images).width}px` + ); + } +} diff --git a/src/page/basics/text/text.html.ts b/src/page/basics/text/text.html.ts new file mode 100644 index 0000000..6133c67 --- /dev/null +++ b/src/page/basics/text/text.html.ts @@ -0,0 +1,6 @@ +import './text.scss'; +import { html } from '../../../types/html'; + +export const generate = (text: string): html => ` +

${text}

+`; diff --git a/src/page/basics/text/text.scss b/src/page/basics/text/text.scss new file mode 100644 index 0000000..851b58e --- /dev/null +++ b/src/page/basics/text/text.scss @@ -0,0 +1,4 @@ +.primitive-text { + text-align: left; + margin-top: var(--line-height); +} diff --git a/src/page/basics/text/text.ts b/src/page/basics/text/text.ts new file mode 100644 index 0000000..c64c422 --- /dev/null +++ b/src/page/basics/text/text.ts @@ -0,0 +1,9 @@ +import { PageElement } from '../../page-element'; +import { createElement } from '../../../helper/create-element'; +import { generate } from './text.html'; + +export class Text extends PageElement { + public constructor(text: string) { + super(createElement(generate(text))); + } +} diff --git a/src/page/basics/video/video.html.ts b/src/page/basics/video/video.html.ts new file mode 100644 index 0000000..53fec91 --- /dev/null +++ b/src/page/basics/video/video.html.ts @@ -0,0 +1,24 @@ +import './video.scss'; +import { url } from '../../../types/url'; +import { html } from '../../../types/html'; + +export const generate = ({ + poster, + options, + webm, + mp4, + container, +}: { + poster: url; + options: string; + webm: url; + mp4: url; + container: boolean; +}): html => ` + ${container ? `
` : ''} + + ${container ? `
` : ''} +`; diff --git a/src/page/basics/video/video.scss b/src/page/basics/video/video.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/page/basics/video/video.ts b/src/page/basics/video/video.ts new file mode 100644 index 0000000..a826e19 --- /dev/null +++ b/src/page/basics/video/video.ts @@ -0,0 +1,16 @@ +import { PageElement } from '../../page-element'; +import { createElement } from '../../../helper/create-element'; +import { generate } from './video.html'; +import { url } from '../../../types/url'; + +export class Video extends PageElement { + public constructor( + poster: url, + mp4: url, + webm: url, + options?: string, + container = true + ) { + super(createElement(generate({ poster, mp4, webm, options, container }))); + } +} diff --git a/src/page/body/body.ts b/src/page/body/body.ts new file mode 100644 index 0000000..a2fdb75 --- /dev/null +++ b/src/page/body/body.ts @@ -0,0 +1,13 @@ +import { PageElement } from '../page-element'; +import { OnLoadEvent } from '../../events/concrete-events/on-load-event'; +import { OnEventBroadcasterChangedEvent } from '../../events/concrete-events/on-event-broadcaster-changed-event'; + +export class Body extends PageElement { + constructor(root: HTMLElement, children: Array) { + super(root); + children.forEach(c => this.attachElement(c)); + + this.broadcastEvent(new OnEventBroadcasterChangedEvent(this)); + this.broadcastEvent(new OnLoadEvent(this)); + } +} diff --git a/src/page/content/content.html.ts b/src/page/content/content.html.ts index a7f59fe..bfb1054 100644 --- a/src/page/content/content.html.ts +++ b/src/page/content/content.html.ts @@ -1,10 +1,6 @@ -import { Content } from '../../model/portfolio'; -import { html } from '../../framework/model/misc'; - import './content.scss'; +import { html } from '../../types/html'; -export const generate = (content: Content): html => ` -
- ${content.map(element => element.toHTML()).join('\n')} -
+export const generate = (): html => ` +
`; diff --git a/src/page/content/content.ts b/src/page/content/content.ts index 2a0b163..6cfc811 100644 --- a/src/page/content/content.ts +++ b/src/page/content/content.ts @@ -1,10 +1,11 @@ -import { PageElement } from '../../framework/page-element'; -import { createElement } from '../../framework/helper/create-element'; -import { Content } from '../../model/portfolio'; +import { createElement } from '../../helper/create-element'; +import { Content } from '../../types/portfolio'; import { generate } from './content.html'; +import { PageElement } from '../page-element'; export class PageContent extends PageElement { public constructor(content: Content) { - super(createElement(generate(content))); + super(createElement(generate())); + content.forEach(c => this.attachElement(c)); } } diff --git a/src/page/footer/footer.html.ts b/src/page/footer/footer.html.ts index 0e0de16..76c92d4 100644 --- a/src/page/footer/footer.html.ts +++ b/src/page/footer/footer.html.ts @@ -1,7 +1,7 @@ -import { Footer } from '../../model/portfolio'; -import { html } from '../../framework/model/misc'; +import { Footer } from '../../types/portfolio'; import './footer.scss'; +import { html } from '../../types/html'; export const generate = ({ title, diff --git a/src/page/footer/footer.ts b/src/page/footer/footer.ts index b4b3eb3..1086e40 100644 --- a/src/page/footer/footer.ts +++ b/src/page/footer/footer.ts @@ -1,8 +1,8 @@ -import { Footer } from '../../model/portfolio'; -import { PageElement } from '../../framework/page-element'; +import { Footer } from '../../types/portfolio'; +import { PageElement } from '../page-element'; import { generate } from './footer.html'; -import { createElement } from '../../framework/helper/create-element'; +import { createElement } from '../../helper/create-element'; export class PageFooter extends PageElement { constructor(footer: Footer) { diff --git a/src/page/image-viewer/image-viewer.html.ts b/src/page/image-viewer/image-viewer.html.ts index 42c6cad..feab342 100644 --- a/src/page/image-viewer/image-viewer.html.ts +++ b/src/page/image-viewer/image-viewer.html.ts @@ -1,7 +1,7 @@ -import { html } from '../../framework/model/misc'; import cancel from '../../static/icons/cancel.svg'; import './image-viewer.scss'; +import { html } from '../../types/html'; export const generate = (): html => `
diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/image-viewer/image-viewer.ts index be58f82..d5fbec8 100644 --- a/src/page/image-viewer/image-viewer.ts +++ b/src/page/image-viewer/image-viewer.ts @@ -1,14 +1,14 @@ -import { PageElement } from '../../framework/page-element'; +import { PageElement } from '../page-element'; import { generate } from './image-viewer.html'; -import { createElement } from '../../framework/helper/create-element'; -import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event'; -import { OptionalEvent } from '../../framework/events/optional-event'; +import { createElement } from '../../helper/create-element'; +import { OnLoadEvent } from '../../events/concrete-events/on-load-event'; +import { OptionalEvent } from '../../events/optional-event'; export class PageImageViewer extends PageElement { public constructor() { super(createElement(generate())); - this.element.onclick = () => PageImageViewer.hide(this.element); + this.htmlRoot.onclick = () => PageImageViewer.hide(this.htmlRoot); } public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent { @@ -17,7 +17,7 @@ export class PageImageViewer extends PageElement { const media = Array.prototype.slice.call(document.querySelectorAll('img')); media - .filter((e: HTMLElement) => e.parentElement !== this.element) + .filter((e: HTMLElement) => e.parentElement !== this.htmlRoot) .forEach((e: HTMLImageElement) => (e.onclick = this.handleClick.bind(this))); return super.handleOnLoadEvent(event); } @@ -29,12 +29,12 @@ export class PageImageViewer extends PageElement { const element: HTMLImageElement = new Image(); element.src = (event.target as HTMLImageElement).src; container.appendChild(element); - PageImageViewer.show(this.element); + PageImageViewer.show(this.htmlRoot); } private handleKeydown(event: KeyboardEvent) { if (event.key === 'Escape') { - PageImageViewer.hide(this.element); + PageImageViewer.hide(this.htmlRoot); } } diff --git a/src/page/page-element.ts b/src/page/page-element.ts new file mode 100644 index 0000000..9eebaf8 --- /dev/null +++ b/src/page/page-element.ts @@ -0,0 +1,51 @@ +import { EventHandler } from '../events/event-handler'; +import { EventBroadcaster } from '../events/event-broadcaster'; +import { OnEventBroadcasterChangedEvent } from '../events/concrete-events/on-event-broadcaster-changed-event'; +import { OptionalEvent } from '../events/optional-event'; +import { Event } from '../events/event'; +import { OnLoadEvent } from '../events/concrete-events/on-load-event'; + +export abstract class PageElement extends EventHandler implements EventBroadcaster { + protected eventBroadcaster: EventBroadcaster; + + public constructor( + public readonly htmlRoot?: HTMLElement, + protected children: Array = [] + ) { + super(); + } + + public broadcastEvent(event: Event) { + event = this.handle(event); + if (event) { + this.children.forEach(c => c.broadcastEvent(event)); + } + } + + public handleOnEventBroadcasterChangedEvent( + event: OnEventBroadcasterChangedEvent + ): OptionalEvent { + this.eventBroadcaster = event.broadcaster; + return super.handleOnEventBroadcasterChangedEvent(event); + } + + public handleOnLoadEvent(_: OnLoadEvent): OptionalEvent { + return super.handleOnLoadEvent(new OnLoadEvent(this)); + } + + protected query(query: string): HTMLElement | null { + return this.htmlRoot?.querySelector(query); + } + + protected attachElementByReplacing(query: string, element: PageElement) { + const old = this.query(query); + old.parentElement.replaceChild(element.htmlRoot, old); + + this.children.push(element); + } + + protected attachElement(element: PageElement) { + this.htmlRoot.appendChild(element.htmlRoot); + this.children.push(element); + } +} diff --git a/src/page/theme-switcher/theme-switcher.html.ts b/src/page/theme-switcher/theme-switcher.html.ts index 8251692..eca7cd8 100644 --- a/src/page/theme-switcher/theme-switcher.html.ts +++ b/src/page/theme-switcher/theme-switcher.html.ts @@ -1,6 +1,5 @@ -import { html } from '../../framework/model/misc'; - import './theme-switcher.scss'; +import { html } from '../../types/html'; export const generate = (): html => ` diff --git a/src/page/theme-switcher/theme-switcher.ts b/src/page/theme-switcher/theme-switcher.ts index 013023a..6025717 100644 --- a/src/page/theme-switcher/theme-switcher.ts +++ b/src/page/theme-switcher/theme-switcher.ts @@ -1,21 +1,18 @@ -import { PageElement } from '../../framework/page-element'; -import { createElement } from '../../framework/helper/create-element'; +import { PageElement } from '../page-element'; +import { createElement } from '../../helper/create-element'; import { generate } from './theme-switcher.html'; import { isSystemLevelDarkModeEnabled, turnOnDarkMode, turnOnLightMode, -} from '../../framework/styles/dark-mode/dark-mode'; -import { - turnOffAnimations, - turnOnAnimations, -} from '../../framework/styles/animations/animations'; -import { OnLoadEvent } from '../../framework/events/concrete-events/on-load-event'; -import { OnPageThemeChangedEvent } from '../../framework/events/concrete-events/on-page-theme-changed-event'; -import { OptionalEvent } from '../../framework/events/optional-event'; +} from '../../style/dark-mode/dark-mode'; +import { turnOffAnimations, turnOnAnimations } from '../../style/animations/animations'; +import { OnLoadEvent } from '../../events/concrete-events/on-load-event'; +import { OptionalEvent } from '../../events/optional-event'; +import { OnPageThemeChangedEvent } from '../../events/concrete-events/on-page-theme-changed-event'; export class PageThemeSwitcher extends PageElement { - private static readonly LOCAL_STORAGE_KEY = 'dark-mode'; + private static readonly localStorageKey = 'dark-mode'; public constructor() { super(createElement(generate())); @@ -24,14 +21,14 @@ export class PageThemeSwitcher extends PageElement { const isDark = storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled(); if (isDark) { - (this.element as HTMLInputElement).checked = true; + (this.htmlRoot as HTMLInputElement).checked = true; turnOffAnimations(); turnOnDarkMode(); setTimeout(() => turnOnAnimations(), 0); } else { turnOnLightMode(); } - this.element.onchange = this.handleThemeChange.bind(this); + this.htmlRoot.onchange = this.handleThemeChange.bind(this); } public handleOnLoadEvent(event: OnLoadEvent): OptionalEvent { @@ -40,7 +37,7 @@ export class PageThemeSwitcher extends PageElement { } private handleThemeChange() { - const isDark = (this.element as HTMLInputElement).checked; + const isDark = (this.htmlRoot as HTMLInputElement).checked; if (isDark) { turnOnDarkMode(); } else { @@ -53,14 +50,14 @@ export class PageThemeSwitcher extends PageElement { private static saveToLocalStorage(darkModeEnabled: boolean) { localStorage?.setItem( - PageThemeSwitcher.LOCAL_STORAGE_KEY, + PageThemeSwitcher.localStorageKey, JSON.stringify(darkModeEnabled) ); } private static loadFromLocalStorage(): boolean | null { try { - return JSON.parse(localStorage?.getItem(PageThemeSwitcher.LOCAL_STORAGE_KEY)); + return JSON.parse(localStorage?.getItem(PageThemeSwitcher.localStorageKey)); } catch { return null; } diff --git a/src/page/timeline/timeline-element/timeline-element.html.ts b/src/page/timeline/timeline-element/timeline-element.html.ts index 92ed294..de0cbb8 100644 --- a/src/page/timeline/timeline-element/timeline-element.html.ts +++ b/src/page/timeline/timeline-element/timeline-element.html.ts @@ -1,10 +1,10 @@ -import { TimelineElement } from '../../../model/portfolio'; -import { html } from '../../../framework/model/misc'; +import { TimelineElement } from '../../../types/portfolio'; import './timeline-element.scss'; +import { html } from '../../../types/html'; export const generate = ( - { date, title, figure, description, more, link }: TimelineElement, + { date, title, more }: TimelineElement, showMore: string, showLess: string ): html => ` @@ -15,8 +15,8 @@ export const generate = (

${title}

- ${figure.toHTML(true)} - ${description.toHTML()} +
+
${ more ? ` @@ -28,7 +28,7 @@ export const generate = ( ` : '' } - ${link ? link.toHTML() : ''} +
`; diff --git a/src/page/timeline/timeline-element/timeline-element.ts b/src/page/timeline/timeline-element/timeline-element.ts index faf7784..896fb39 100644 --- a/src/page/timeline/timeline-element/timeline-element.ts +++ b/src/page/timeline/timeline-element/timeline-element.ts @@ -1,9 +1,9 @@ -import { TimelineElement } from '../../../model/portfolio'; +import { TimelineElement } from '../../../types/portfolio'; import { PageContent } from '../../content/content'; -import { PageElement } from '../../../framework/page-element'; +import { PageElement } from '../../page-element'; import { generate } from './timeline-element.html'; -import { createElement } from '../../../framework/helper/create-element'; -import { OnBodyDimensionsChangedEvent } from '../../../framework/events/concrete-events/on-body-dimensions-changed-event'; +import { createElement } from '../../../helper/create-element'; +import { OnBodyDimensionsChangedEvent } from '../../../events/concrete-events/on-body-dimensions-changed-event'; export class PageTimelineElement extends PageElement { private isOpen: boolean; @@ -18,15 +18,23 @@ export class PageTimelineElement extends PageElement { if (timelineElement.more) { const content = new PageContent(timelineElement.more); - super(root, [content]); + super(root); + this.children = [content]; this.isOpen = false; this.more = root.querySelector('.more'); - this.more.appendChild(content.element); + this.more.appendChild(content.htmlRoot); window.addEventListener('resize', this.handleResize.bind(this)); root .querySelector('.buttons') .addEventListener('click', this.toggleOpen.bind(this)); } else super(root); + + this.attachElementByReplacing('.figure', timelineElement.figure); + this.attachElementByReplacing('.description', timelineElement.description); + + if (timelineElement.link) { + this.attachElementByReplacing('.link', timelineElement.link); + } } private toggleOpen() { @@ -46,15 +54,10 @@ export class PageTimelineElement extends PageElement { } private notifyOfHeightChange(deltaHeight: number = undefined) { - this.eventBroadcaster?.broadcastEvent( - new OnBodyDimensionsChangedEvent(deltaHeight) - ); + this.eventBroadcaster?.broadcastEvent(new OnBodyDimensionsChangedEvent(deltaHeight)); setTimeout( - () => - this.eventBroadcaster?.broadcastEvent( - new OnBodyDimensionsChangedEvent() - ), + () => this.eventBroadcaster?.broadcastEvent(new OnBodyDimensionsChangedEvent()), 250 ); } diff --git a/src/page/timeline/timeline.html.ts b/src/page/timeline/timeline.html.ts index 197cb0d..6b5d567 100644 --- a/src/page/timeline/timeline.html.ts +++ b/src/page/timeline/timeline.html.ts @@ -1,5 +1,5 @@ -import { html } from '../../framework/model/misc'; import './timeline.scss'; +import { html } from '../../types/html'; export const generate = (): html => `
diff --git a/src/page/timeline/timeline.ts b/src/page/timeline/timeline.ts index 8f238fd..bd4668f 100644 --- a/src/page/timeline/timeline.ts +++ b/src/page/timeline/timeline.ts @@ -1,14 +1,14 @@ -import { Timeline } from '../../model/portfolio'; +import { Timeline } from '../../types/portfolio'; import { PageTimelineElement } from './timeline-element/timeline-element'; import { generate } from './timeline.html'; -import { createElement } from '../../framework/helper/create-element'; -import { ContainerPage } from '../../framework/container-page'; +import { createElement } from '../../helper/create-element'; +import { PageElement } from '../page-element'; -export class PageTimeline extends ContainerPage { +export class PageTimeline extends PageElement { public constructor({ elements, showMoreText, showLessText }: Timeline) { - super( - createElement(generate()), - elements.map(e => new PageTimelineElement(e, showMoreText, showLessText)) + super(createElement(generate())); + elements.forEach(e => + this.attachElement(new PageTimelineElement(e, showMoreText, showLessText)) ); } } diff --git a/src/portfolio.ts b/src/portfolio.ts index d278132..8ff32d9 100644 --- a/src/portfolio.ts +++ b/src/portfolio.ts @@ -1,13 +1,11 @@ -import { Text } from './framework/primitives/implementations/text'; -import { Image } from './framework/primitives/implementations/image'; -import { Video } from './framework/primitives/implementations/video'; -import { Anchor } from './framework/primitives/implementations/anchor'; import { PageFooter } from './page/footer/footer'; +import { Video } from './page/basics/video/video'; +import { Text } from './page/basics/text/text'; +import { Image } from './page/basics/image/image'; import { PageHeader } from './page/about/about'; import { PageTimeline } from './page/timeline/timeline'; import { PageImageViewer } from './page/image-viewer/image-viewer'; -import { last } from './framework/helper/last'; - +import { last } from './helper/last'; import me from './static/media/me.jpg'; import forexMP4 from './static/media/forex.mp4'; import forexWEBM from './static/media/forex.webm'; @@ -26,15 +24,17 @@ import led from './static/media/led.jpg'; import cvEnglish from './static/cv/cv_andras_schmelczer.pdf'; import ledMP4 from './static/media/led.mp4'; import ledWEBM from './static/media/led.webm'; -import { ContainerPage } from './framework/container-page'; import { PageBackground } from './page/background/background'; +import { Anchor } from './page/basics/anchor/anchor'; + +import { Body } from './page/body/body'; export const create = () => { const page = { imageViewer: new PageImageViewer(), header: new PageHeader({ name: `András Schmelczer`, - picture: new Image(me, `a picture of me`), + picture: new Image(me, `a picture of me`, false), about: [ new Text( `I have always been fascinated by the engineering feats that surround us. @@ -308,12 +308,12 @@ export const create = () => { curiumVitaes: [{ name: `Curriculum vitae`, url: cvEnglish }], email: `andras@schmelczer.dev`, lastEditText: `Last modified on `, - lastEdit: new Date(2020, 9 - 1, 24), // months are 0 indexed + lastEdit: new Date(2020, 11 - 1, 17), // months are 0 indexed }), }; - new ContainerPage(document.body.querySelector('main'), [ + new Body(document.querySelector('main'), [ ...Object.values(page), new PageBackground(page.header, [page.timeline], page.footer), - ]).setAsMain(); + ]); }; diff --git a/src/framework/styles/animations/animations.scss b/src/style/animations/animations.scss similarity index 100% rename from src/framework/styles/animations/animations.scss rename to src/style/animations/animations.scss diff --git a/src/framework/styles/animations/animations.ts b/src/style/animations/animations.ts similarity index 100% rename from src/framework/styles/animations/animations.ts rename to src/style/animations/animations.ts diff --git a/src/framework/styles/dark-mode/dark-mode.scss b/src/style/dark-mode/dark-mode.scss similarity index 100% rename from src/framework/styles/dark-mode/dark-mode.scss rename to src/style/dark-mode/dark-mode.scss diff --git a/src/framework/styles/dark-mode/dark-mode.ts b/src/style/dark-mode/dark-mode.ts similarity index 100% rename from src/framework/styles/dark-mode/dark-mode.ts rename to src/style/dark-mode/dark-mode.ts diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 216bacc..be1150e 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -1,4 +1,16 @@ -@import '../framework/framework'; +$breakpoint-width: 925px !default; + +@mixin on-small-screen() { + @media (max-width: $breakpoint-width - 1px) { + @content; + } +} + +@mixin on-large-screen() { + @media (min-width: $breakpoint-width) { + @content; + } +} @mixin center-children() { display: flex; diff --git a/src/style/vars.scss b/src/style/vars.scss index 69615c9..8fb90ea 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -1,4 +1,6 @@ -@import '../framework/framework'; +@use 'mixins' as *; +@use 'dark-mode/dark-mode' as *; +@use 'animations/animations' as *; :root { --transition-time: 250ms; diff --git a/src/styles.scss b/src/styles.scss index 117bbde..2ef0c73 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,8 @@ @use 'style/vars'; @use 'style/mixins' as *; @use 'style/a'; -@use 'framework/styles/index'; +@use 'style/animations/animations'; +@use 'style/dark-mode/dark-mode'; html { height: 100%; @@ -46,8 +47,7 @@ html { margin: 0; padding: 0; box-sizing: border-box; - transition: background-color linear var(--transition-time), - color var(--transition-time); + transition: background-color linear var(--transition-time), color var(--transition-time); hyphens: auto; } @@ -55,6 +55,7 @@ html { .figure-container { font-size: 0; box-shadow: var(--inset-shadow); + margin-top: var(--line-height); pointer-events: none; cursor: pointer; @@ -68,19 +69,9 @@ html { } } -.primitive-text, -.primitive-anchor, -.figure-container { - margin-top: var(--line-height); -} - -.primitive-text { - text-align: left; -} - body { - padding: env(safe-area-inset-top) env(safe-area-inset-right) - env(safe-area-inset-bottom) env(safe-area-inset-left); + padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) + env(safe-area-inset-left); height: 100%; @@ -100,7 +91,7 @@ body { @include center-children(); } - @include on-large-screen { + @media (hover: hover) { &::-webkit-scrollbar-track, &::-webkit-scrollbar { background-color: transparent; diff --git a/src/types/html.ts b/src/types/html.ts new file mode 100644 index 0000000..52c482a --- /dev/null +++ b/src/types/html.ts @@ -0,0 +1 @@ +export type html = string; diff --git a/src/model/portfolio.ts b/src/types/portfolio.ts similarity index 58% rename from src/model/portfolio.ts rename to src/types/portfolio.ts index dbd0323..f0c6297 100644 --- a/src/model/portfolio.ts +++ b/src/types/portfolio.ts @@ -1,9 +1,9 @@ -import { url } from '../framework/model/misc'; -import { Primitive } from '../framework/primitives/primitive'; -import { Image } from '../framework/primitives/implementations/image'; -import { Anchor } from '../framework/primitives/implementations/anchor'; -import { Video } from '../framework/primitives/implementations/video'; -import { Text } from '../framework/primitives/implementations/text'; +import { Video } from '../page/basics/video/video'; +import { Text } from '../page/basics/text/text'; +import { Image } from '../page/basics/image/image'; +import { Anchor } from '../page/basics/anchor/anchor'; +import { PageElement } from '../page/page-element'; +import { url } from './url'; export interface Portfolio { header: Header; @@ -45,4 +45,4 @@ export interface CV { url: url; } -export type Content = Array; +export type Content = Array; diff --git a/src/framework/model/misc.ts b/src/types/responsive-image.ts similarity index 78% rename from src/framework/model/misc.ts rename to src/types/responsive-image.ts index affee68..489b9a1 100644 --- a/src/framework/model/misc.ts +++ b/src/types/responsive-image.ts @@ -1,6 +1,4 @@ -export type url = string; - -export type html = string; +import { url } from './url'; export type ResponsiveImage = { srcSet: string; diff --git a/src/types/url.ts b/src/types/url.ts new file mode 100644 index 0000000..ca13e58 --- /dev/null +++ b/src/types/url.ts @@ -0,0 +1 @@ +export type url = string;