From c3b6e0319ed0fc940a38ad95844b4369e6b40e24 Mon Sep 17 00:00:00 2001 From: Martin Zimmermann Date: Tue, 29 Oct 2013 16:58:38 +0100 Subject: [PATCH] use SVG to render identicon so the browser can auto-resize the image Temporary fix for websites with small width, where the identicon overlaps with the textarea field. --- isso/css/isso.scss | 6 +++-- isso/js/app/isso.js | 12 ++++----- isso/js/app/lib/identicons.js | 51 ++++++++++++++++------------------- isso/js/app/text/comment.html | 2 +- isso/js/app/text/postbox.html | 2 +- 5 files changed, 35 insertions(+), 38 deletions(-) diff --git a/isso/css/isso.scss b/isso/css/isso.scss index 89c2470..124f6be 100644 --- a/isso/css/isso.scss +++ b/isso/css/isso.scss @@ -52,8 +52,9 @@ a { > div.avatar { @include span-columns(1 of 11); - > canvas { + > svg { @include isso-shadow; + max-height: 48px; } } @@ -151,8 +152,9 @@ a { > .avatar { @include span-columns(1 of 11); - > canvas { + > svg { @include isso-shadow; + max-height: 48px; } } diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js index 67d4ebb..9c3c685 100644 --- a/isso/js/app/isso.js +++ b/isso/js/app/isso.js @@ -12,13 +12,13 @@ define(["app/text/html", "app/dom", "app/utils", "app/api", "app/markup", "app/i var el = $.htmlify(Mark.up(templates["postbox"])); // add a default identicon to not waste CPU cycles - $(".avatar > canvas", el).replace(lib.identicons.blank(48, 48)); + $(".avatar > svg", el).replace(lib.identicons.blank(4, 48)); // on text area focus, generate identicon from IP address $(".textarea-wrapper > textarea", el).on("focus", function() { - if ($(".avatar canvas", el).classList.contains("blank")) { - $(".avatar canvas", el).replace( - lib.identicons.generate(lib.pbkdf2(api.remote_addr, api.salt, 1000, 6), 48, 48)); + if ($(".avatar svg", el).classList.contains("blank")) { + $(".avatar svg", el).replace( + lib.identicons.generate(lib.pbkdf2(api.remote_addr, api.salt, 1000, 6), 4, 48)); } }); @@ -31,7 +31,7 @@ define(["app/text/html", "app/dom", "app/utils", "app/api", "app/markup", "app/i active = setTimeout(function() { lib.pbkdf2($(".input-wrapper > [type=email]", el).value || api.remote_addr, api.salt, 1000, 6) .then(function(rv) { - $(".avatar canvas", el).replace(lib.identicons.generate(rv, 48, 48)); + $(".avatar svg", el).replace(lib.identicons.generate(rv, 4, 48)); }); }, 200); }, false); @@ -96,7 +96,7 @@ define(["app/text/html", "app/dom", "app/utils", "app/api", "app/markup", "app/i setTimeout(refresh, 60*1000); }; refresh(); - $("div.avatar > canvas", el).replace(lib.identicons.generate(comment.hash, 48, 48)); + $("div.avatar > svg", el).replace(lib.identicons.generate(comment.hash, 4, 48)); var entrypoint; if (comment.parent === null) { diff --git a/isso/js/app/lib/identicons.js b/isso/js/app/lib/identicons.js index 5ab0423..6507f09 100644 --- a/isso/js/app/lib/identicons.js +++ b/isso/js/app/lib/identicons.js @@ -12,7 +12,6 @@ define(["q"], function(Q) { var GRID = 5; // Padding on the edge of the canvas in px - var PADDING = 4; var pad = function(n, width) { return n.length >= width ? n : new Array(width - n.length + 1).join("0") + n; @@ -21,43 +20,39 @@ define(["q"], function(Q) { /** * 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(); + 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, height, width) { - - var canvas = document.createElement("canvas"), - ctx = canvas.getContext("2d"); - canvas.width = width; - canvas.height = height; + var generateIdenticon = function(key, padding, size) { - // FILL CANVAS BG - ctx.beginPath(); - ctx.rect(0, 0, height, width); - ctx.fillStyle = '#F0F0F0'; - ctx.fill(); + 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, "#F0F0F0"); if (typeof key === null) { - return canvas; + return svg; } Q.when(key, function(key) { var hash = pad((parseInt(key, 16) % Math.pow(2, 18)).toString(2), 18), index = 0, color = null; - canvas.setAttribute("data-hash", key); + svg.setAttribute("data-hash", key); // via http://colrd.com/palette/19308/ switch (hash.substring(hash.length - 3, hash.length)) { @@ -92,11 +87,11 @@ define(["q"], function(Q) { for (var y=0; y
- +
diff --git a/isso/js/app/text/postbox.html b/isso/js/app/text/postbox.html index 4ee9b48..a72f71f 100644 --- a/isso/js/app/text/postbox.html +++ b/isso/js/app/text/postbox.html @@ -1,6 +1,6 @@
- +