diff --git a/src/settings.ts b/src/settings.ts index 88c41fe..68e8890 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -22,59 +22,30 @@ export class SettingsManager { private readonly downloadSvg: HTMLButtonElement; constructor(private readonly form: HTMLFormElement) { - const themeSelect = - this.form.querySelector("#theme"); - - if (!themeSelect) { - throw new Error("Cannot find theme select"); - } - - this.themeSelect = themeSelect; - - const inputTextArea = - this.form.querySelector("textarea"); - - if (!inputTextArea) { - throw new Error("Cannot find text area"); - } - - this.textarea = inputTextArea; - - const fontSizeInput = - this.form.querySelector("#font"); - - if (!fontSizeInput) { - throw new Error("Cannot find font-size input"); - } - - this.fontSizeInput = fontSizeInput; - - const alignSelect = - this.form.querySelector("#align"); - - if (!alignSelect) { - throw new Error("Cannot find align select"); - } - - this.alignSelect = alignSelect; - - const downloadPng = - this.form.querySelector("[name=png]"); - - if (!downloadPng) { - throw new Error("Cannot find download PNG button"); - } - - this.downloadPng = downloadPng; - - const downloadSvg = - this.form.querySelector("[name=svg]"); - - if (!downloadSvg) { - throw new Error("Cannot find download SVG button"); - } - - this.downloadSvg = downloadSvg; + this.themeSelect = this.querySelector( + "#theme", + "Cannot find theme select", + ); + this.textarea = this.querySelector( + "textarea", + "Cannot find text area", + ); + this.fontSizeInput = this.querySelector( + "#font", + "Cannot find font-size input", + ); + this.alignSelect = this.querySelector( + "#align", + "Cannot find align select", + ); + this.downloadPng = this.querySelector( + "[name=png]", + "Cannot find download PNG button", + ); + this.downloadSvg = this.querySelector( + "[name=svg]", + "Cannot find download SVG button", + ); this.form.addEventListener("submit", (event) => event.preventDefault()); } @@ -119,4 +90,17 @@ export class SettingsManager { get textAlign(): TextAlign { return this.alignSelect.value as TextAlign; } + + protected querySelector( + selector: string, + error: string, + ): E { + const element = this.form.querySelector(selector); + + if (!element) { + throw new Error(error); + } + + return element; + } } diff --git a/src/svg.ts b/src/svg.ts index 6d7e828..c395d46 100644 --- a/src/svg.ts +++ b/src/svg.ts @@ -39,29 +39,22 @@ export class SvgBuilder { private readonly location: SVGTextElement; constructor(private readonly element: SVGElement) { - const theme = this.element.querySelector(".theme"); - - if (!theme) { - throw new Error("Cannot find theme element"); - } - - this.theme = theme; - - const title = this.element.querySelector(".title"); - - if (!title) { - throw new Error("Cannot find title element"); - } - - this.title = title; - - const stripes = this.element.querySelector(".stripes"); - - if (!stripes) { - throw new Error("Cannot find stripes element"); - } - - this.stripes = stripes; + this.theme = this.querySelector( + ".theme", + "Cannot find theme element", + ); + this.title = this.querySelector( + ".title", + "Cannot find title element", + ); + this.stripes = this.querySelector( + ".stripes", + "Cannot find stripes element", + ); + this.location = this.querySelector( + ".location", + "Cannot find title element", + ); const [left, right] = this.element.querySelectorAll(".year"); @@ -71,15 +64,6 @@ export class SvgBuilder { } this.year = [left, right]; - - const location = - this.element.querySelector(".location"); - - if (!location) { - throw new Error("Cannot find title element"); - } - - this.location = location; } setTheme(newTheme: string) { @@ -246,4 +230,17 @@ export class SvgBuilder { return rect; } + + protected querySelector( + selector: string, + error: string, + ): E { + const element = this.element.querySelector(selector); + + if (!element) { + throw new Error(error); + } + + return element; + } }