diff --git a/src/contents.js b/src/contents.js index e245ae0..eb087a6 100644 --- a/src/contents.js +++ b/src/contents.js @@ -693,31 +693,52 @@ class Contents { }.bind(this)); } + _getStylesheetNode(key) { + var styleEl; + key = "epubjs-inserted-css-" + (key || ''); + + if(!this.document) return false; + + // Check if link already exists + styleEl = this.document.getElementById(key); + if (!styleEl) { + styleEl = this.document.createElement("style"); + styleEl.id = key; + // Append style element to head + this.document.head.appendChild(styleEl); + } + return styleEl; + } + + /** + * Append stylesheet css + * @param {string} serializedCss + * @param {string} key If the key is the same, the CSS will be replaced instead of inserted + */ + addStylesheetCss(serializedCss, key) { + if(!this.document || !serializedCss) return false; + + var styleEl; + styleEl = this._getStylesheetNode(key); + styleEl.innerHTML = serializedCss; + + return true; + } + /** * Append stylesheet rules to a generate stylesheet * 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) { - var styleEl; + addStylesheetRules(rules, key) { var styleSheet; - var key = "epubjs-inserted-css"; if(!this.document || !rules || rules.length === 0) return; - // Check if link already exists - styleEl = this.document.getElementById("#"+key); - if (!styleEl) { - styleEl = this.document.createElement("style"); - styleEl.id = key; - } - - // Append style element to head - this.document.head.appendChild(styleEl); - // Grab style sheet - styleSheet = styleEl.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 1ec461b..6e37f1d 100644 --- a/src/themes.js +++ b/src/themes.js @@ -82,6 +82,18 @@ class Themes { } } + /** + * Register a theme by passing its css as string + * @param {string} name + * @param {string} css + */ + registerCss (name, css) { + this._themes[name] = { "serialized" : css }; + if (this._injected[name] || name == 'default') { + this.update(name); + } + } + /** * Register a url * @param {string} name @@ -90,7 +102,7 @@ class Themes { registerUrl (name, input) { var url = new Url(input); this._themes[name] = { "url": url.toString() }; - if (this._injected[name]) { + if (this._injected[name] || name == 'default') { this.update(name); } } @@ -103,7 +115,7 @@ class Themes { registerRules (name, rules) { this._themes[name] = { "rules": rules }; // TODO: serialize css rules - if (this._injected[name]) { + if (this._injected[name] || name == 'default') { this.update(name); } } @@ -176,9 +188,10 @@ class Themes { if (theme.url) { contents.addStylesheet(theme.url); } else if (theme.serialized) { - // TODO: handle 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;