~sirn/fanboi2

ref: a68873a108d20a6a49a1b6caf374bfb2cf6a94fe fanboi2/assets/app/javascripts/views/theme_selector_view.ts -rw-r--r-- 1.4 KiB
a68873a1Kridsada Thanabulpong Coding style cleanups and setup pre-commit hooks (#42) 3 years ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { VNode, create, diff, patch, h } from "virtual-dom";

export interface ITheme {
    className: string;
    identifier: string;
    name: string;
}

export class ThemeSelectorView {
    constructor(public themes: ITheme[]) {}

    render(currentTheme?: string): VNode {
        return h("div", { className: "js-theme-selector" }, [
            h("span", { className: "js-theme-selector-title" }, ["Theme"]),
            this.renderThemes(currentTheme),
        ]);
    }

    private renderThemes(currentTheme?: string): VNode {
        return h(
            "ul",
            { className: "js-theme-selector-list" },
            this.themes.map((theme: ITheme): VNode => {
                return h("li", { className: "js-theme-selector-list-item" }, [
                    h(
                        "a",
                        {
                            href: "#",
                            dataset: { themeSelectorItem: theme.identifier },
                            className: ThemeSelectorView.getSelectorStateClass(
                                theme.identifier,
                                currentTheme,
                            ),
                        },
                        [theme.name],
                    ),
                ]);
            }),
        );
    }

    static getSelectorStateClass(identifier: string, currentTheme?: string): string {
        return currentTheme && currentTheme == identifier ? "current" : "";
    }
}