diff --git a/index.html b/index.html
index 1c2d0bd..c7ba8dd 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,11 @@
diff --git a/src/constants.ts b/src/constants.ts
index 3f833de..bde299d 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +1,2 @@
+export const THEMES = ["theme-light", "theme-dark"];
export const STRIPE_COLORS = ["stripe-light", "stripe-dark"];
diff --git a/src/main.ts b/src/main.ts
index 12cbc0d..527ad81 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,17 +18,20 @@ if (!form) {
const settings = new SettingsManager(form);
-settings.onTitleChange((data) => {
+settings.onSettingsChange((data) => {
cover.setTitle({
text: data.title,
fontSize: data.fontSize,
});
+
+ cover.setTheme(data.theme);
});
const cover = new SvgBuilder(svg);
cover
+ .setTheme(settings.theme)
.addStripes(STRIPE_COLORS)
.setYear(new Date().getUTCFullYear())
.setLocation("Пермь")
- .setTitle({ text: settings.title, fontSize: 80 });
+ .setTitle({ text: settings.title, fontSize: settings.fontSize });
diff --git a/src/settings.ts b/src/settings.ts
index 46a562f..3ec4c66 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,4 +1,5 @@
type SettingsData = {
+ theme: string;
title: string;
fontSize: number;
};
@@ -10,10 +11,20 @@ interface SettingsChangeHandler {
const DEFAULT_FONT_SIZE = 80;
export class SettingsManager {
+ private readonly themeSelect: HTMLSelectElement;
private readonly textarea: HTMLTextAreaElement;
private readonly fontSizeInput: HTMLInputElement;
constructor(private readonly form: HTMLFormElement) {
+ const themeSelect =
+ this.form.querySelector("select");
+
+ if (!themeSelect) {
+ throw new Error("Cannot find theme select");
+ }
+
+ this.themeSelect = themeSelect;
+
const inputTextArea =
this.form.querySelector("textarea");
@@ -33,20 +44,22 @@ export class SettingsManager {
this.fontSizeInput = fontSizeInput;
}
- onTitleChange(callback: SettingsChangeHandler) {
- this.textarea.addEventListener("input", () => {
+ onSettingsChange(callback: SettingsChangeHandler) {
+ const handler = () => {
callback({
+ theme: this.theme,
title: this.title,
fontSize: this.fontSize,
});
- });
+ };
- this.fontSizeInput.addEventListener("change", () => {
- callback({
- title: this.title,
- fontSize: this.fontSize,
- });
- });
+ this.themeSelect.addEventListener("change", handler);
+ this.textarea.addEventListener("input", handler);
+ this.fontSizeInput.addEventListener("change", handler);
+ }
+
+ get theme() {
+ return this.themeSelect.value;
}
get title() {
diff --git a/src/svg.ts b/src/svg.ts
index be69339..c89c9cb 100644
--- a/src/svg.ts
+++ b/src/svg.ts
@@ -1,3 +1,4 @@
+import { THEMES } from "./constants";
import { randomInt } from "./utils";
type TextOptions = {
@@ -28,20 +29,20 @@ const minVisibleWidth = 20;
export class SvgBuilder {
private readonly nameSpace = "http://www.w3.org/2000/svg";
+ private readonly theme: SVGGraphicsElement;
private readonly title: SVGTextElement;
private readonly stripes: SVGElement;
private readonly year: [SVGTextElement, SVGTextElement];
private readonly location: SVGTextElement;
constructor(private readonly element: SVGElement) {
- const background =
- this.element.querySelector(".background");
+ const theme = this.element.querySelector(".theme");
- if (!background) {
- throw new Error("Cannot find background element");
+ if (!theme) {
+ throw new Error("Cannot find theme element");
}
- this.background = background;
+ this.theme = theme;
const title = this.element.querySelector(".title");
@@ -78,6 +79,14 @@ export class SvgBuilder {
this.location = location;
}
+ setTheme(newTheme: string) {
+ THEMES.forEach((theme) => this.theme.classList.remove(theme));
+
+ this.theme.classList.add(newTheme);
+
+ return this;
+ }
+
setTitle(options: TextOptions) {
const lines = options.text.split("\n");