diff --git a/src/contents.js b/src/contents.js index 50d5b39..8b0f064 100644 --- a/src/contents.js +++ b/src/contents.js @@ -676,9 +676,11 @@ class Contents { }.bind(this)); } - _getStylesheetNode() { + _getStylesheetNode(key) { var styleEl; - var key = "epubjs-inserted-css"; + key = "epubjs-inserted-css-" + (key || ''); + + if(!this.document) return false; // Check if link already exists styleEl = this.document.getElementById(key); @@ -694,11 +696,16 @@ class Contents { /** * Append stylesheet css * @param {string} serializedCss + * @param {string} key If the key is the same, the CSS will be replaced instead of inserted */ - addStylesheetSerialized(serializedCss) { + addStylesheetCss(serializedCss, key) { + if(!this.document || !serializedCss) return false; + var styleEl; - styleEl = this._getStylesheetNode(); - styleEl.innerText = serializedCss; + styleEl = this._getStylesheetNode(key); + styleEl.innerHTML = serializedCss; + + return true; } /** @@ -706,14 +713,15 @@ class Contents { * Array: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule * Object: https://github.com/desirable-objects/json-to-css * @param {array | object} rules + * @param {string} key If the key is the same, the CSS will be replaced instead of inserted */ - addStylesheetRules(rules) { + addStylesheetRules(rules, key) { var styleSheet; if(!this.document || !rules || rules.length === 0) return; // Grab style sheet - styleSheet = this._getStylesheetNode().sheet; + styleSheet = this._getStylesheetNode(key).sheet; if (Object.prototype.toString.call(rules) === "[object Array]") { for (var i = 0, rl = rules.length; i < rl; i++) { diff --git a/src/themes.js b/src/themes.js index 7fafcb1..74961a5 100644 --- a/src/themes.js +++ b/src/themes.js @@ -188,9 +188,10 @@ class Themes { if (theme.url) { contents.addStylesheet(theme.url); } else if (theme.serialized) { - contents.addStylesheetSerialized(theme.serialized); + contents.addStylesheetCss(theme.serialized, name); + theme.injected = true; } else if (theme.rules) { - contents.addStylesheetRules(theme.rules); + contents.addStylesheetRules(theme.rules, name); theme.injected = true; } } diff --git a/types/contents.d.ts b/types/contents.d.ts index c64f173..a4c310d 100644 --- a/types/contents.d.ts +++ b/types/contents.d.ts @@ -28,7 +28,9 @@ export default class Contents { addStylesheet(src: string): Promise; - addStylesheetRules(rules: Array | object): Promise; + addStylesheetRules(rules: Array | object, key: string): Promise; + + addStylesheetCss(serializedCss: string, key: string): Promise; cfiFromNode(node: Node, ignoreClass?: string): string; diff --git a/types/themes.d.ts b/types/themes.d.ts index 9fef240..465a127 100644 --- a/types/themes.d.ts +++ b/types/themes.d.ts @@ -14,6 +14,8 @@ export default class Themes { registerThemes( themes: object ): void; + registerCss( name: string, css: string ): void; + registerUrl( name: string, input: string ): void; registerRules( name: string, rules: object ): void;