diff --git a/app/assets/javascripts/external/favcount.js b/app/assets/javascripts/external/favcount.js index 5ec64d9092d..6cfe059e995 100644 --- a/app/assets/javascripts/external/favcount.js +++ b/app/assets/javascripts/external/favcount.js @@ -1,5 +1,5 @@ /* - * favcount.js v1.0.1 + * favcount.js v1.1.0 * http://chrishunt.co/favcount * Dynamically updates the favicon with a number. * @@ -43,34 +43,48 @@ function drawCanvas(canvas, img, count) { var head = document.getElementsByTagName('head')[0], favicon = document.createElement('link'), - multiplier, fontSize, context, xOffset, yOffset; + multiplier, fontSize, context, xOffset, yOffset, border, shadow; favicon.rel = 'icon'; - // Scale the canvas based on favicon size + // Scale canvas elements based on favicon size multiplier = img.width / 16; fontSize = multiplier * 11; xOffset = multiplier; yOffset = multiplier * 11; + border = multiplier; + shadow = multiplier * 2; canvas.height = canvas.width = img.width; - context = canvas.getContext('2d'); - context.drawImage(img, 0, 0); context.font = 'bold ' + fontSize + 'px "helvetica", sans-serif'; - // Draw background for contrast + // Draw faded favicon background + if (count) { context.globalAlpha = 0.4; } + context.drawImage(img, 0, 0); + context.globalAlpha = 1.0; + + // Draw white drop shadow + context.shadowColor = '#FFF'; + context.shadowBlur = shadow; + context.shadowOffsetX = 0; + context.shadowOffsetY = 0; + + // Draw white border context.fillStyle = '#FFF'; context.fillText(count, xOffset, yOffset); - context.fillText(count, xOffset + 2, yOffset); - context.fillText(count, xOffset, yOffset + 2); - context.fillText(count, xOffset + 2, yOffset + 2); + context.fillText(count, xOffset + border, yOffset); + context.fillText(count, xOffset, yOffset + border); + context.fillText(count, xOffset + border, yOffset + border); - // Draw count in foreground + // Draw black count context.fillStyle = '#000'; - context.fillText(count, xOffset + 1, yOffset + 1); + context.fillText(count, + xOffset + (border / 2.0), + yOffset + (border / 2.0) + ); - // Replace the favicon + // Replace favicon with new favicon favicon.href = canvas.toDataURL('image/png'); head.removeChild(document.querySelector('link[rel=icon]')); head.appendChild(favicon); @@ -80,5 +94,5 @@ }).call(this); (function(){ - Favcount.VERSION = '1.0.1'; + Favcount.VERSION = '1.1.0'; }).call(this);