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