diff --git a/.eslintrc b/.eslintrc
index 7801448..97176c0 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -59,7 +59,7 @@
"no-eval": 2,
"no-implied-eval": 2,
"no-new-func": 2,
- "guard-for-in": 2,
+ "guard-for-in": 0,
"eqeqeq": 1,
"no-else-return": 2,
"no-redeclare": 2,
diff --git a/src/components/app.jsx b/src/components/app.jsx
index 54b5818..80167fa 100644
--- a/src/components/app.jsx
+++ b/src/components/app.jsx
@@ -11,6 +11,73 @@ export default class App extends Component {
store: this.props.store
};
+ elementsWithReplaceableCss = {
+ // Tables
+ "thead tr": {"background-color": this.props.config.css["color-table-background"]},
+ "tr[class*=even]": {"background-color": this.props.config.css["color-table-background"]},
+
+ // Purposes
+ "div[class*=purposes_purposeItem]": {
+ "background-color": this.props.config.css["color-secondary"],
+ "color": this.props.config.css["color-text-secondary"]
+ },
+ "div[class*=selectedPurpose]": {
+ "background-color": this.props.config.css["color-primary"],
+ "color": this.props.config.css["color-text-secondary"],
+ },
+
+ // Footer
+ "div[class*=footer_footer]": {
+ "border-top": "3px solid " + this.props.config.css["color-border"],
+ "background-color": this.props.config.css["color-background"]
+ },
+ "div[class*=footerV2_extended]": {"border-top": "3px solid " + this.props.config.css["color-border"]},
+ "div[class*=footerV2_container]": {"background-color": this.props.config.css["color-background"]},
+ "svg": {
+ "background-color": this.props.config.css["color-background"],
+ "fill": this.props.config.css["color-primary"]
+ },
+
+ // Vendors
+ "[class*=active]": {"color": this.props.config.css["color-primary"]},
+
+ // Application wide
+ "div[name^=content]": {
+ "box-shadow": "0 0 0 3px " + this.props.config.css["color-border"],
+ "background-color": this.props.config.css["color-background"]
+ },
+ ":not([name*=ctrl])": {
+ "font-family": this.props.config.css["font-family"]
+ },
+ "[class*=primaryText]": {"color": this.props.config.css["color-text-primary"]},
+ "[class*=secondaryText]": {"color": this.props.config.css["color-text-secondary"]},
+ "a": {"color": this.props.config.css["color-linkColor"]},
+ "span[class*=isSelected] [class*=visualizationGlow]": {"background-color": this.props.config.css["color-primary"]},
+ "span[class*=isSelected] [class*=visualizationContainer]": {"background-color": this.props.config.css["color-primary"]},
+ "[class*=button]": {
+ "color": this.props.config.css["color-background"],
+ "background-color": this.props.config.css["color-primary"],
+ },
+ "[class*=button_invert]": {
+ "color": this.props.config.css["color-primary"],
+ "border": "2px solid " + this.props.config.css["color-primary"],
+ "background-color": this.props.config.css["color-background"]
+ },
+ };
+
+ updateCSSPrefs = () => {
+ const elems = this.elementsWithReplaceableCss;
+ for(let elem in elems) {
+ let cssRules = elems[elem];
+ let selectedEls = document.querySelectorAll(elem) || [];
+ selectedEls.forEach(function(currentEl) {
+ for(let cssProp in cssRules) {
+ currentEl.style[cssProp] = cssRules[cssProp];
+ }
+ })
+ }
+ };
+
onSave = () => {
const { store, notify } = this.props;
store.persist();
@@ -19,7 +86,6 @@ export default class App extends Component {
store.toggleFooterShowing(true);
};
-
updateState = (store) => {
this.setState({ store });
};
@@ -29,8 +95,24 @@ export default class App extends Component {
store.subscribe(this.updateState);
}
- render(props, state) {
+ componentDidMount() {
+ const { store } = this.state;
+ const { config } = this.props;
+
+ if (config.css["custom-font-url"]) {
+ let head = document.head;
+ let link = document.createElement("link");
+ link.type = "text/css";
+ link.rel = "stylesheet";
+ link.href = config.css["custom-font-url"];
+ head.appendChild(link);
+ }
+ store.subscribe(this.updateCSSPrefs);
+ this.updateCSSPrefs();
+ }
+
+ render(props, state) {
const { store } = state;
const { config } = props;
const userLocalization = config.localization[currentLocale];
@@ -41,15 +123,21 @@ export default class App extends Component {
store={store}
localization={userLocalization}
onSave={this.onSave}
+ config={config}
+ updateCSSPrefs={this.updateCSSPrefs}
/>
);
diff --git a/src/components/app.test.js b/src/components/app.test.js
index 0601f17..4c1e941 100644
--- a/src/components/app.test.js
+++ b/src/components/app.test.js
@@ -3,7 +3,7 @@ import { h, render } from 'preact';
import { expect } from 'chai';
import style from './app.less';
import Store from '../lib/store';
-
+import config from '../lib/config';
import App from './app';
describe('App', () => {
@@ -25,14 +25,14 @@ describe('App', () => {
it('should render app content', () => {
- render(, scratch);
+ render(, scratch);
expect(scratch.innerHTML).to.contain(style.gdpr);
});
- it('add a listener to the store to receive updates', () => {
+ it('add listeners to the store to receive updates and to know when to update CSS', () => {
const store = new Store();
- render(, scratch);
- expect(store.listeners.size).to.equal(1);
+ render(, scratch);
+ expect(store.listeners.size).to.equal(2);
});
it('persist state on save', () => {
@@ -44,8 +44,8 @@ describe('App', () => {
let app;
render( app = ref}
/>, scratch);
@@ -62,8 +62,8 @@ describe('App', () => {
let app;
render( {}}
- config={{localization: {}}}
ref={ref => app = ref}
/>, scratch);
@@ -71,4 +71,20 @@ describe('App', () => {
store.selectVendor(1, true);
expect(app.state.store.vendorConsentData.selectedVendorIds).to.deep.equal(new Set([1]));
});
+
+ it('respects css config', () => {
+ const store = new Store();
+ config.update({ css: { 'font-family': 'MonoType' }});
+ let app;
+ render( {}}
+ ref={ref => app = ref}
+ />, scratch);
+
+ expect(app.props.config.css['font-family']).to.equal('MonoType');
+ expect(scratch.style['font-family']).to.equal('MonoType');
+ expect(scratch.innerHTML).to.contain('style="font-family: MonoType;"');
+ });
});
diff --git a/src/components/closebutton/closebutton.jsx b/src/components/closebutton/closebutton.jsx
index 924cce5..a564fb7 100644
--- a/src/components/closebutton/closebutton.jsx
+++ b/src/components/closebutton/closebutton.jsx
@@ -10,6 +10,10 @@ export default class CloseButton extends Component {
hasBorder: true
};
+ componentDidMount() {
+ this.props.updateCSSPrefs();
+ }
+
render(props) {
const {
onClick,
diff --git a/src/components/footer/footer.jsx b/src/components/footer/footer.jsx
index 3756e7a..607daa1 100644
--- a/src/components/footer/footer.jsx
+++ b/src/components/footer/footer.jsx
@@ -27,21 +27,27 @@ export default class Footer extends Component {
showConsentTool();
};
+ componentDidMount() {
+ this.props.updateCSSPrefs();
+ }
+
render(props) {
- const { store, localization } = props;
+ const { store, localization, config, updateCSSPrefs } = props;
const { isFooterShowing } = store;
return (