From b47fe4917e724e3c66afa60e56630b3e8a30eb27 Mon Sep 17 00:00:00 2001 From: FullGreaM Date: Wed, 29 Apr 2026 01:58:22 +0300 Subject: [PATCH] Solved mistake for updating of a style. And.. anything else.. don't remember, and I'm tired, so something like that XD --- frontend/src/main.ts | 67 ++++++++++++++++---------- frontend/src/modules/Gefest/element.ts | 24 +++++++-- frontend/src/modules/Gefest/style.ts | 5 +- frontend/src/styles.ts | 53 +++++++++++--------- 4 files changed, 92 insertions(+), 57 deletions(-) diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 9c09447..3e39084 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -4,12 +4,22 @@ import { DarkStyle, LightStyle, SupportedStyles } from "./styles"; import { ControllerAPI } from "./api/RESTful"; import { NewsFeed } from "./pages/feed/news"; import { AuthenticationPage } from "./pages/auth/auth"; +import { DefaultElement } from "./pages/default-element"; + +/*declare global { + interface Window { + selectedStyle: SupportedStyles; + } +}*/ +const styleLinker : { + selectedStyle: SupportedStyles +} = { + selectedStyle: new LightStyle() +}; // I'll add a dark mode toggle later, but for now let's just use the light style by default -const defaultStyle = new LightStyle(); -const styleMemLink = { - currentStyle: () : SupportedStyles => defaultStyle -}; +//window.selectedStyle = new LightStyle(); +const currentStyle: () => SupportedStyles = () => styleLinker.selectedStyle; { // I hate trash in global scope, so I wrap it in a block const appElement = document.getElementById("app"); @@ -22,51 +32,58 @@ const api : ControllerAPI = new ControllerAPI(); async function authInit() { console.log("User is authenticated"); - const newsFeed = await api.getNews(true) as NewsFeed; - newsFeed.style = styleMemLink.currentStyle; - const appElement = document.getElementById("app"); - if (appElement) - appElement.innerHTML = newsFeed.build(); + return await api.getNews(true) as NewsFeed; } async function logInInit () { - console.log("User is not authenticated"); - const authPage = await api.getAuthRules(true) as AuthenticationPage; - authPage.style = styleMemLink.currentStyle; - const appElement = document.getElementById("app"); - if (appElement) - appElement.innerHTML = authPage.build(); + console.log("User isn't authenticated"); + return await api.getAuthRules(true) as AuthenticationPage; } -async function changeStyleLogic () { +async function changeStyleLogic (activeElement: DefaultElement, navbar: DefaultElement) { const themes : SupportedStyles[] = [ - defaultStyle, + new LightStyle(), new DarkStyle() ]; let choosed = 0; themeToggle.onClick = () => { choosed++; - if (choosed >= themes.length) + let choosedTheme: SupportedStyles | undefined = themes[choosed]; + if (choosedTheme === undefined) { + choosedTheme = themes[0] as SupportedStyles; choosed = 0; + } + console.log('choosedTheme', choosedTheme); - styleMemLink.currentStyle = () => themes[choosed] as SupportedStyles; - GefestEngine.render(); + styleLinker.selectedStyle = choosedTheme; + GefestEngine.render([activeElement.gefestId, navbar.gefestId]); }; } async function main() { - await changeStyleLogic(); // init navbar const navbar = new Navbar(); - navbar.style = styleMemLink.currentStyle; - document.body.innerHTML = "
" + navbar.build(); + navbar.style = currentStyle; + let activeElement: DefaultElement; if (await api.isAuthenticated()) { - await authInit(); + activeElement = await authInit(); } else { - await logInInit(); + activeElement = await logInInit(); } + + const appElement : DefaultElement = new (class extends DefaultElement { + constructor() { + super([ activeElement ]); + this.id = "app"; + } + }); + appElement.style = currentStyle; + + //document.body.innerHTML = appElement.build() + navbar.build(); + document.body.innerHTML = appElement.build(); + await changeStyleLogic(appElement, navbar); } GefestEngine.main(main).catch(error => { diff --git a/frontend/src/modules/Gefest/element.ts b/frontend/src/modules/Gefest/element.ts index eb27699..0d535ec 100644 --- a/frontend/src/modules/Gefest/element.ts +++ b/frontend/src/modules/Gefest/element.ts @@ -151,7 +151,7 @@ export abstract class GefestElement { /** * Adds a class to the element's class list and updates the "class" attribute accordingly. * @param className The class name to add. - */ + */ addClass(className: string): void { this.classList.add(className); this.attributes.class = Array.from(this.classList).join(' '); @@ -160,7 +160,7 @@ export abstract class GefestElement { /** * Removes a class from the element's class list and updates the "class" attribute accordingly. * @param className The class name to remove. - */ + */ removeClass(className: string): void { this.classList.delete(className); this.attributes.class = Array.from(this.classList).join(' '); @@ -221,9 +221,23 @@ export abstract class GefestElement { * @returns The attributes string. */ protected attributesToString (): string { - return Object.entries(this.attributes) - .map(([key, value]) => `${key}="${value}"`) - .join(' '); + let style : GefestStyle | null = null; + if (typeof this.style === 'function') { + style = this.style(); + } else { + style = this.style; + } + + let attributes = Object.assign({}, this.attributes); + if (style instanceof GefestStyle) + attributes.class = [ + attributes.class, + style.getClasses(this).join(" ") + ].join(" "); + + return Object.entries( + attributes + ).map(([key, value]) => `${key}="${value}"`).join(' '); } /** diff --git a/frontend/src/modules/Gefest/style.ts b/frontend/src/modules/Gefest/style.ts index c215635..3d5bd0b 100644 --- a/frontend/src/modules/Gefest/style.ts +++ b/frontend/src/modules/Gefest/style.ts @@ -1,7 +1,6 @@ import { GefestElement } from "./element"; export abstract class GefestStyle { - applyStyle (html: string, element ?: GefestElement): string { - throw new Error('You need to implement the applyStyle method in the child class'); - } + abstract getClasses(element : GefestElement): string[]; + abstract applyStyle (html: string, element ?: GefestElement): string; } \ No newline at end of file diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts index 66e54a8..4f79d35 100644 --- a/frontend/src/styles.ts +++ b/frontend/src/styles.ts @@ -4,63 +4,68 @@ import { Navbar } from "./pages/navbar"; import { isNewsUI, NewsUserInterface } from "./pages/feed/news"; abstract class SkeletonStyle extends GefestStyle { - protected abstract navbar(element: GefestElement): void; - protected abstract newsui(element: GefestElement): void; - protected abstract styleHandle(element: GefestElement): void; + protected abstract navbar(styleClasses: Set, element : GefestElement): void; + protected abstract newsui(styleClasses: Set, element : GefestElement): void; + protected abstract styleHandle(styleClasses: Set, element : GefestElement): void; applyStyle(html: string, element?: GefestElement): string { if (!element) element = GefestElement.fromHTML(html); - //element.addClass("light-mode"); - this.styleHandle(element); - this.navbar(element); - this.newsui(element); return element.build(true); } + getClasses(element: GefestElement): string[] { + const styleClasses : Set = new Set(); + this.styleHandle(styleClasses, element); + + this.navbar(styleClasses, element); + this.newsui(styleClasses, element); + return Array.from(styleClasses); + } } export class DarkStyle extends SkeletonStyle { - newsui(element: GefestElement): void { + newsui(styleClasses: Set, element : GefestElement): void { if (isNewsUI(element)) { - element.removeClass("bg-dark"); - element.addClass("dark-news-ui"); + styleClasses.delete("bg-dark"); + styleClasses.add("dark-news-ui"); } if (element instanceof NewsUserInterface) { - element.removeClass("bg-dark"); + styleClasses.delete("bg-dark"); } } - navbar(element: GefestElement): void { + navbar(styleClasses: Set, element : GefestElement): void { if (element instanceof Navbar) { - element.addClass("dark-navbar"); + styleClasses.add("dark-navbar"); } } - protected styleHandle(element: GefestElement): void { - element.addClass("bg-dark"); - element.addClass("text-light"); + protected styleHandle(styleClasses: Set): void { + styleClasses.add("bg-dark"); + styleClasses.add("text-light"); } } export class LightStyle extends SkeletonStyle { - newsui(element: GefestElement): void { + newsui(styleClasses: Set, element : GefestElement): void { if (isNewsUI(element)) { - element.removeClass("bg-light"); - element.addClass("light-news-ui"); + styleClasses.delete("bg-light"); + styleClasses.add("light-news-ui"); } if (element instanceof NewsUserInterface) { - element.removeClass("bg-light"); + styleClasses.delete("bg-light"); } } - navbar(element: GefestElement): void { + navbar(styleClasses: Set, element : GefestElement): void { //element.addClass("light-navbar"); } - protected styleHandle(element: GefestElement): void { - element.addClass("bg-light"); - element.addClass("text-dark"); + protected styleHandle(styleClasses: Set, element : GefestElement): void { + styleClasses.add("bg-light"); + styleClasses.add("bg-light"); + styleClasses.add("text-dark"); } }