diff --git a/isso/client/app/forms.js b/isso/client/app/forms.js index 85b00a7..008e4d6 100644 --- a/isso/client/app/forms.js +++ b/isso/client/app/forms.js @@ -1,4 +1,4 @@ -define(["lib/HTML", "./logging"], function(HTML, logging) { +define(["lib/HTML", "helper/utils"], function(HTML, utils) { var msgbox = function(defaults) { diff --git a/isso/client/app/isso.js b/isso/client/app/isso.js index 878588c..2db4c5f 100644 --- a/isso/client/app/isso.js +++ b/isso/client/app/isso.js @@ -5,7 +5,7 @@ */ -define(["lib/q", "lib/HTML", "helper/utils", "./api", "./forms", "./logging"], function(Q, HTML, utils, api, forms, logging) { +define(["lib/q", "lib/HTML", "helper/utils", "./api", "./forms", "./logging", "helper/identicons"], function(Q, HTML, utils, api, forms, logging, identicons) { var defaults = { text: "Lorem ipsum ...", author: "Anonymous", @@ -55,7 +55,9 @@ define(["lib/q", "lib/HTML", "helper/utils", "./api", "./forms", "./logging"], f setTimeout(refresh, 60*1000) }; refresh(); - node.query("span.avatar").add("img[width=48 height=48]"); + var canvas = node.query("span.avatar").add("canvas[hash=" + comment.hash + "]"); + canvas.width = canvas.height = 48; + identicons.generate(canvas.getContext('2d'), comment.hash); if (comment.mode == 4) { node.query(".text").add("p").value = " " @@ -167,7 +169,7 @@ define(["lib/q", "lib/HTML", "helper/utils", "./api", "./forms", "./logging"], f var init = function() { - console.log(utils.heading()); + // console.log(utils.heading()); var rootmsgbox = forms.msgbox({}); HTML.query("#isso-thread").add("div#isso-root").add(rootmsgbox); @@ -193,7 +195,6 @@ define(["lib/q", "lib/HTML", "helper/utils", "./api", "./forms", "./logging"], f for (var i in comments) { insert(comments[i]) }}) - .fail(logging.error) } return { diff --git a/isso/client/helper/identicons.js b/isso/client/helper/identicons.js index e69de29..d372ed6 100644 --- a/isso/client/helper/identicons.js +++ b/isso/client/helper/identicons.js @@ -0,0 +1,116 @@ +define(function() { + + // JS Identicon generation via Gregory Schier (http://codepen.io/gschier/pen/GLvAy) + // modified to work with a given seed using Jenkins hashing. + + // Size of a grid square in pixels + var SQUARE = 8; + + // Number of squares width and height + var GRID = 5; + + // Padding on the edge of the canvas in px + var PADDING = SQUARE/2; + + /* Jenkins 18-bit hash */ + var jenkins = function(key) { + var hash = 0; + + for (var i=0; i> 6); + } + + hash += (hash << 3); + hash ^= (hash >> 11); + hash += (hash << 15); + + return (hash >>> 0) % Math.pow(2, 18); + } + + 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 fillBlock = function(x, y, color, ctx) { + ctx.beginPath(); + ctx.rect( + PADDING+x*SQUARE, + PADDING+y*SQUARE, + SQUARE, + SQUARE + ); + ctx.fillStyle = color; + ctx.fill(); + }; + + /** + * Pick random squares to fill in. + */ + var generateIdenticon = function(ctx, key) { + + var hash = pad(jenkins(key).toString(2), 18), + index = 0, color = null; + + // 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; + } + + // FILL CANVAS BG + ctx.beginPath(); + ctx.rect(0, 0, 48, 48); + ctx.fillStyle = '#F0F0F0'; + ctx.fill(); + + // FILL THE SQUARES + for (var x=0; x .isso-comment > .isso-follow-up { margin-left: 64px; } @@ -65,6 +65,10 @@ clear: both; } +span.avatar > canvas { + box-shadow: 0px 0px 2px #888; +} + img:-moz-broken { -moz-force-broken-image-icon: 1; }