JavaScript Identicons (awww), closes #8

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) {
 

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 {

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<key.length; ++i) {
+            hash += key.charCodeAt(i);
+            hash += (hash << 10);
+            hash ^= (hash >> 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<Math.ceil(GRID/2); x++) {
+            for (var y=0; y<GRID; y++) {
+
+                if (hash.charAt(index) == "1") {
+                    fillBlock(x, y, color, ctx);
+
+                    // FILL RIGHT SIDE SYMMETRICALLY
+                    if (x < Math.floor(GRID/2)) {
+                        fillBlock((GRID-1) - x, y, color, ctx);
+                    }
+                }
+            index++;
+            }
+        }
+
+        return ctx;
+    };
+
+    return {
+        generate: generateIdenticon,
+        hash: jenkins
+    };
+})

isso/static/style.css

@@ -8,7 +8,7 @@
     margin-top: 18px;
 }
 
-.isso-follow-up {
+#isso-root > .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;
 }