You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
2.9 KiB
96 lines
2.9 KiB
/*
|
|
Copyright (C) 2013 Gregory Schier <gschier1990@gmail.com>
|
|
Copyright (C) 2013 Martin Zimmermann <info@posativ.org>
|
|
|
|
Inspired by http://codepen.io/gschier/pen/GLvAy
|
|
*/
|
|
define(["app/lib/promise", "app/config"], function(Q, config) {
|
|
|
|
"use strict";
|
|
|
|
// Number of squares width and height
|
|
var GRID = 5;
|
|
|
|
var pad = function(n, width) {
|
|
return n.length >= width ? n : new Array(width - n.length + 1).join("0") + n;
|
|
};
|
|
|
|
/**
|
|
* Fill in a square on the canvas.
|
|
*/
|
|
var fill = function(svg, x, y, padding, size, color) {
|
|
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
|
|
rect.setAttribute("x", padding + x * size);
|
|
rect.setAttribute("y", padding + y * size);
|
|
rect.setAttribute("width", size);
|
|
rect.setAttribute("height", size);
|
|
rect.setAttribute("style", "fill: " + color);
|
|
|
|
svg.appendChild(rect);
|
|
};
|
|
|
|
/**
|
|
* Pick random squares to fill in.
|
|
*/
|
|
var generateIdenticon = function(key, padding, size) {
|
|
|
|
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
svg.setAttribute("version", "1.1");
|
|
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, config["avatar-bg"]);
|
|
|
|
if (typeof key === null) {
|
|
return svg;
|
|
}
|
|
|
|
Q.when(key, function(key) {
|
|
var hash = pad((parseInt(key.substr(-16), 16) % Math.pow(2, 18)).toString(2), 18),
|
|
index = 0;
|
|
|
|
svg.setAttribute("data-hash", key);
|
|
|
|
var i = parseInt(hash.substring(hash.length - 3, hash.length), 2),
|
|
color = config["avatar-fg"][i % config["avatar-fg"].length];
|
|
|
|
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 sight symmetrically
|
|
if (x < Math.floor(GRID/2)) {
|
|
fill(svg, (GRID-1) - x, y, padding, 8, color);
|
|
}
|
|
}
|
|
index++;
|
|
}
|
|
}
|
|
});
|
|
|
|
return svg;
|
|
};
|
|
|
|
var generateBlank = function(height, width) {
|
|
|
|
var blank = parseInt([
|
|
0, 1, 1, 1, 1,
|
|
1, 0, 1, 1, 0,
|
|
1, 1, 1, 1, 1, /* purple: */ 0, 1, 0
|
|
].join(""), 2).toString(16);
|
|
|
|
var el = generateIdenticon(blank, height, width);
|
|
el.setAttribute("className", "blank"); // IE10 does not support classList on SVG elements, duh.
|
|
|
|
return el;
|
|
};
|
|
|
|
return {
|
|
generate: generateIdenticon,
|
|
blank: generateBlank
|
|
};
|
|
});
|