diff --git a/docs/docs/configuration/client.rst b/docs/docs/configuration/client.rst
index 3cea211..17f3e2a 100644
--- a/docs/docs/configuration/client.rst
+++ b/docs/docs/configuration/client.rst
@@ -10,6 +10,8 @@ preferably in the script tag which embeds the JS:
data-isso-css="true"
data-isso-lang="ru"
data-isso-reply-to-self="false"
+ data-avatar-bg="#f0f0f0"
+ data-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
src="/prefix/js/embed.js">
Furthermore you can override the automatic title detection inside
@@ -44,13 +46,26 @@ data-isso-lang
--------------
Override useragent's preferred language. Currently available: german (de),
-english (en) and french (fr).
+english (en), french (fr), italian (it) and russian (ru).
data-isso-reply-to-self
-----------------------
Set to `true` when spam guard is configured with `reply-to-self = true`.
+data-isso-avatar-bg
+-------------------
+
+Set avatar background color. Any valid CSS color will do.
+
+data-isso-avatar-fg
+-------------------
+
+Set avatar foreground color. Up to 8 colors are possible. The default color
+scheme is based in `this color palette `_.
+Multiple colors must be separated by space. If you use less than eight colors
+and not a multiple of 2, the color distribution is not even.
+
data-isso-id
------------
diff --git a/isso/js/app/config.js b/isso/js/app/config.js
index 1456c40..3ebc5c7 100644
--- a/isso/js/app/config.js
+++ b/isso/js/app/config.js
@@ -4,7 +4,10 @@ define(function() {
var config = {
"css": true,
"lang": (navigator.language || navigator.userLanguage).split("-")[0],
- "reply-to-self": false
+ "reply-to-self": false,
+ "avatar-bg": "#f0f0f0",
+ "avatar-fg": ["#9abf88", "#5698c4", "#e279a3", "#9163b6",
+ "#be5168", "#f19670", "#e4bf80", "#447c69"].join(" ")
};
var js = document.getElementsByTagName("script");
@@ -21,6 +24,9 @@ define(function() {
});
}
+ // split avatar-fg on whitespace
+ config["avatar-fg"] = config["avatar-fg"].split(" ");
+
return config;
});
diff --git a/isso/js/app/lib/identicons.js b/isso/js/app/lib/identicons.js
index 2ce41aa..1dcb567 100644
--- a/isso/js/app/lib/identicons.js
+++ b/isso/js/app/lib/identicons.js
@@ -4,7 +4,7 @@
Inspired by http://codepen.io/gschier/pen/GLvAy
*/
-define(["app/lib/promise"], function(Q) {
+define(["app/lib/promise", "app/config"], function(Q, config) {
"use strict";
@@ -40,7 +40,7 @@ define(["app/lib/promise"], function(Q) {
svg.setAttribute("viewBox", "0 0 " + size + " " + size);
svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
svg.setAttribute("shape-rendering", "crispEdges");
- fill(svg, 0, 0, 0, size + 2*padding, "#F0F0F0");
+ fill(svg, 0, 0, 0, size + 2*padding, config["avatar-bg"]);
if (typeof key === null) {
return svg;
@@ -48,46 +48,20 @@ define(["app/lib/promise"], function(Q) {
Q.when(key, function(key) {
var hash = pad((parseInt(key, 16) % Math.pow(2, 18)).toString(2), 18),
- index = 0, color = null;
+ index = 0;
svg.setAttribute("data-hash", key);
- // via http://colrd.com/palette/19308/
- switch (hash.substring(hash.length - 3, hash.length)) {
- case "000":
- color = "#9abf88";
- break;
- case "001":
- color = "#5698c4";
- break;
- case "010":
- color = "#e279a3";
- break;
- case "011":
- color = "#9163b6";
- break;
- case "100":
- color = "#be5168";
- break;
- case "101":
- color = "#f19670";
- break;
- case "110":
- color = "#e4bf80";
- break;
- case "111":
- color = "#447c69";
- break;
- }
+ var i = parseInt(hash.substring(hash.length - 3, hash.length), 2),
+ color = config["avatar-fg"][i % config["avatar-fg"].length];
- // FILL THE SQUARES
for (var x=0; x