From 33051841f589014de4e7e7e60893161bdde731cd Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Sun, 25 Sep 2022 21:24:32 +0200 Subject: [PATCH] Refactor --- src/helper/create-element.ts | 8 -------- src/page/background/background.ts | 3 +-- src/page/header/header.ts | 19 ++++++++----------- .../header/theme-switcher/theme-switcher.ts | 3 +-- src/page/image-viewer/image-viewer.ts | 3 +-- src/page/main/main.ts | 6 +++--- src/page/page-element.ts | 18 ++++++++++++++---- src/page/preview/preview.ts | 3 +-- src/page/timeline-element/timeline-element.ts | 5 ++--- src/page/video/video.ts | 3 +-- 10 files changed, 32 insertions(+), 39 deletions(-) delete mode 100644 src/helper/create-element.ts diff --git a/src/helper/create-element.ts b/src/helper/create-element.ts deleted file mode 100644 index 80f88b7..0000000 --- a/src/helper/create-element.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { html } from '../types/html'; - -export const createElement = (from: html): HTMLElement => { - // won't work for all elements, eg.: - const element: HTMLElement = document.createElement('div'); - element.innerHTML = from; - return element.firstElementChild as HTMLElement; -}; diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 99d22cd..74ef813 100644 --- a/src/page/background/background.ts +++ b/src/page/background/background.ts @@ -1,4 +1,3 @@ -import { createElement } from '../../helper/create-element'; import { getHeight } from '../../helper/get-height'; import { mix } from '../../helper/mix'; import { Random } from '../../helper/random'; @@ -27,7 +26,7 @@ export class Background extends PageElement { private readonly topOffsetElementCount: number, private readonly bottomOffsetElementCount: number ) { - super(createElement(generate())); + super(generate()); } protected initialize() { diff --git a/src/page/header/header.ts b/src/page/header/header.ts index a7afb2a..bfb45ae 100644 --- a/src/page/header/header.ts +++ b/src/page/header/header.ts @@ -1,4 +1,3 @@ -import { createElement } from '../../helper/create-element'; import { ResponsiveImage } from '../../types/responsive-image'; import { Image } from '../image-viewer/image/image.html'; import { PageElement } from '../page-element'; @@ -18,16 +17,14 @@ export class Header extends PageElement { about: Array; }) { super( - createElement( - generate({ - name, - about, - photo: Image({ - image, - alt: imageAltText, - }), - }) - ) + generate({ + name, + about, + photo: Image({ + image, + alt: imageAltText, + }), + }) ); this.attachElement(new ThemeSwitcher()); } diff --git a/src/page/header/theme-switcher/theme-switcher.ts b/src/page/header/theme-switcher/theme-switcher.ts index 0ee28a0..b75835c 100644 --- a/src/page/header/theme-switcher/theme-switcher.ts +++ b/src/page/header/theme-switcher/theme-switcher.ts @@ -1,4 +1,3 @@ -import { createElement } from '../../../helper/create-element'; import { PageElement } from '../../page-element'; import { generate } from './theme-switcher.html'; @@ -6,7 +5,7 @@ export class ThemeSwitcher extends PageElement { private static readonly localStorageKey = 'dark-mode'; public constructor() { - super(createElement(generate())); + super(generate()); const storedIsDark = ThemeSwitcher.loadFromLocalStorage(); const isDark = storedIsDark ?? isSystemLevelDarkModeEnabled(); diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/image-viewer/image-viewer.ts index 2d667b8..63bfdb4 100644 --- a/src/page/image-viewer/image-viewer.ts +++ b/src/page/image-viewer/image-viewer.ts @@ -1,10 +1,9 @@ -import { createElement } from '../../helper/create-element'; import { PageElement } from '../page-element'; import { generate } from './image-viewer.html'; export class ImageViewer extends PageElement { public constructor() { - super(createElement(generate())); + super(generate()); document.body.addEventListener('click', (event: MouseEvent) => { const element = event.target as HTMLElement; diff --git a/src/page/main/main.ts b/src/page/main/main.ts index f33e4db..c1a2f3c 100644 --- a/src/page/main/main.ts +++ b/src/page/main/main.ts @@ -1,13 +1,13 @@ -import { createElement } from '../../helper/create-element'; import { PageElement } from '../page-element'; import { generate } from './main.html'; export class Main extends PageElement { constructor(...children: Array) { const actualChildren = children.map((c) => - c instanceof PageElement ? c : new PageElement(createElement(c)) + c instanceof PageElement ? c : new PageElement(c) ); - super(createElement(generate()), actualChildren); + + super(generate(), actualChildren); actualChildren.forEach((c) => this.attachElement(c)); } } diff --git a/src/page/page-element.ts b/src/page/page-element.ts index bae0ea1..e6a7afb 100644 --- a/src/page/page-element.ts +++ b/src/page/page-element.ts @@ -1,8 +1,11 @@ +import { html } from '../types/html'; + export class PageElement { - public constructor( - public readonly htmlRoot: HTMLElement, - protected children: Array = [] - ) {} + public readonly htmlRoot: HTMLElement; + + public constructor(content: html, protected children: Array = []) { + this.htmlRoot = PageElement.createElement(content); + } public attachToDOM(target: HTMLElement) { target.appendChild(this.htmlRoot); @@ -27,4 +30,11 @@ export class PageElement { old.parentElement!.replaceChild(element.htmlRoot, old); this.children.push(element); } + + private static createElement(from: html): HTMLElement { + // won't work for all elements, eg.: + const element: HTMLElement = document.createElement('div'); + element.innerHTML = from; + return element.firstElementChild as HTMLElement; + } } diff --git a/src/page/preview/preview.ts b/src/page/preview/preview.ts index 768d459..06ae013 100644 --- a/src/page/preview/preview.ts +++ b/src/page/preview/preview.ts @@ -1,11 +1,10 @@ -import { createElement } from '../../helper/create-element'; import { ResponsiveImage } from '../../types/responsive-image'; import { PageElement } from '../page-element'; import { generate } from './preview.html'; export class Preview extends PageElement { public constructor(poster: ResponsiveImage, private readonly url: string, alt: string) { - super(createElement(generate({ poster, alt }))); + super(generate({ poster, alt })); this.url += '?portfolioView'; this.query('.start-button').addEventListener('click', this.loadContent.bind(this)); } diff --git a/src/page/timeline-element/timeline-element.ts b/src/page/timeline-element/timeline-element.ts index 1d65114..fee5bb2 100644 --- a/src/page/timeline-element/timeline-element.ts +++ b/src/page/timeline-element/timeline-element.ts @@ -1,4 +1,3 @@ -import { createElement } from '../../helper/create-element'; import { titleToFragment } from '../../helper/title-to-fragment'; import { PageElement } from '../page-element'; import { TimelineElementParameters } from './timeline-element-parameters'; @@ -13,7 +12,7 @@ export class TimelineElement extends PageElement { private readonly showMore: string, private readonly showLess: string ) { - super(createElement(generate(timelineElement, showMore))); + super(generate(timelineElement, showMore)); this.more = this.query('.more'); addEventListener('resize', this.handleResize.bind(this)); @@ -23,7 +22,7 @@ export class TimelineElement extends PageElement { '.figure', timelineElement.figure instanceof PageElement ? timelineElement.figure - : new PageElement(createElement(timelineElement.figure)) + : new PageElement(timelineElement.figure) ); } diff --git a/src/page/video/video.ts b/src/page/video/video.ts index acd34ad..aa6c5e3 100644 --- a/src/page/video/video.ts +++ b/src/page/video/video.ts @@ -1,11 +1,10 @@ -import { createElement } from '../../helper/create-element'; import { PageElement } from '../page-element'; import { VideoParameters } from './video-parameters'; import { generate } from './video.html'; export class Video extends PageElement { public constructor(options: VideoParameters) { - super(createElement(generate(options))); + super(generate(options)); this.query('.start-button').addEventListener('click', this.startVideo.bind(this)); }