simpread/src/service/theme.js at master · hhhcommon/simpread · GitHub

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
console.log( "=== simpread theme load ===" )

const names  = [ "github", "newsprint", "gothic", "engwrite", "octopress", "pixyii", "monospace", "night", "dark" ],
      flag   = "sr-rd-theme-",
      themes = {},
      colors = [
        "251, 251, 251, 1",
        "243, 242, 238, 1",
        "252, 252, 252, 1",
        "252, 245, 237, 1",
        "248, 248, 248, 1",
        "250, 250, 250, 1",
        "245, 245, 245, 1",
        "54,  59,  64,  1",
        "34,  34,  34,  1"
       ];

let curtheme = "";

/**
 * Theme class
 *
 * @class
 */

class Theme {

    /**
     * Theme colors[read]
     *
     * @return {array} theme colors
     */
    get colors() {
        return  colors;
    }

    /**
     * Theme names[read]
     *
     * @return {array} theme name array
     */
    get names() {
        return names;
    }

    /**
     * Current theme name[read]
     *
     * @return {string} theme name
     */
    get theme() {
        return curtheme;
    }

    /**
     * Change theme
     *
     * @param {string} theme name
     */
    Change( theme ) {
        curtheme = theme;
        findThemeStyle( function( name, css, $target ) {
            if ( name == theme )  $target.html( themes[theme] );
            else                  $target.html( `${flag}${name}` + "{}" );
        });
        tocTheme( theme );
    }

    constructor() {
        require( `../assets/css/theme_common.css` );
        names.forEach( name => require( `../assets/css/theme_${name}.css` ) );
        findThemeStyle( ( name, content ) => themes[name] = content );
    }
}

/**
 * Find theme style tag
 *
 * @return {function} param1: theme name; param2: theme css; param3: theme style tag jquery object
 */
function findThemeStyle( callback ) {
    $( "head" ).find( "style" ).map( (index, item) => {
        const $target = $(item),
              css     = $target.text();
        if ( css.startsWith( flag ) ) {
            const arr  = css.replace( flag, "" ).match( /\w+/ ),
                  name = arr[ arr.length - 1 ];
            callback( name, css, $target );
        }
    });
}

/**
 * Change toc <a> style( hacked )
 *
 * @param {string} theme
 */
function tocTheme( theme ) {
    $( "toc outline a" ).removeClass().addClass( "toc-outline-theme-" + theme );
}

const theme = new Theme();

export default theme;