arno/isso
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

configurable avatar colors

Browse Source 
* data-isso-avatar-bg="#f0f0f0" sets the background color
* data-isso-avatar-fg="#0abf99 #5698c4 etc." sets up to 8 different
  forground colors
This commit is contained in:
Martin Zimmermann 2014-03-10 21:58:31 +01:00
parent c6e9c7eee4
commit 8f293ad435
3 changed files with 29 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/docs/configuration/client.rst
View File

@ -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"></script>
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 <http://colrd.com/palette/19308/>`_.
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
------------

8
isso/js/app/config.js
View File

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

38
isso/js/app/lib/identicons.js
View File

@ -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<Math.ceil(GRID/2); x++) {
for (var y=0; y<GRID; y++) {
if (hash.charAt(index) === "1") {
fill(svg, x, y, padding, 8, color);
// FILL RIGHT SIDE SYMMETRICALLY
// fill right sight symmetrically
if (x < Math.floor(GRID/2)) {
fill(svg, (GRID-1) - x, y, padding, 8, color);
}