Merge pull request #889 from yellowtree/css_serialized

Implement serialized themes CSS

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++) {

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;
 		}
 	}

types/contents.d.ts

@@ -28,7 +28,9 @@ export default class Contents {
 
     addStylesheet(src: string): Promise<boolean>;
 
-    addStylesheetRules(rules: Array<object> | object): Promise<boolean>;
+    addStylesheetRules(rules: Array<object> | object, key: string): Promise<boolean>;
+
+    addStylesheetCss(serializedCss: string, key: string): Promise<boolean>;
 
     cfiFromNode(node: Node, ignoreClass?: string): string;
 

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;