-
Notifications
You must be signed in to change notification settings - Fork 3
/
rdb-styler.js
57 lines (46 loc) · 1.64 KB
/
rdb-styler.js
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
/**
* This module merges the default with config style and creates a styesheet
* with the certain css rules. We create a stylesheet instead of applying it
* to the elements via js, because we don't want to wait until the components
* got loaded.
*
*/
var dom = require('rdbutils').dom;
var merge = require('merge');
var fontLoader = require('./rdb-font-loader');
var defaultStyle = require('rdbDefault').style;
/*
* Merges the default with config style and creates a styesheet with the certain
* css rules.
*
* @param {object} newStyle Custom Style object
*/
module.exports.applyStyles = function(newStyle){
var style = merge(defaultStyle, newStyle);
createStylesheet(style);
fontLoader.loadFont(style.fontName);
}
function createStylesheet(style){
// TODO: is there a better way to apply the styles?!
var stylesheet = dom.create('style');
stylesheet.type = 'text/css';
stylesheet.innerHTML = [
getCSSRule('.rdb-title', style.titlebg, style.titlecol),
getCSSRule('.rdb-sidebar a', style.sidebarbg, style.sidebarcol),
getCSSRule('.rdb-sidebar', style.sidebarbg, style.sidebarcol),
getCSSRule('body', style.boardbg, style.boardcol),
getCSSRule('.rdb-widget-content', style.widgetbg, style.widgetcol)
].join('');
dom.get('head').appendChild(stylesheet);
}
/**
* Helper method to create CSS Rule.
*
* @param {string} selector Name of the selector.
* @param {string} bg Value of the background style
* @param {string} col Value of the color style
* @returns {string} CSS Rule
*/
function getCSSRule(selector, bg, col){
return selector + '{ color :' + col + '; background: ' + bg + ';}';
}