Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1358 from chrishunt/bump-favcount 

Improve readability of count for complex favicons
This commit is contained in:
Sam 2013-08-19 14:58:57 -07:00
parent 60c740e16e 53f011e89e
commit dca0b6b9b8
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/javascripts/external/favcount.js vendored
View File

@ -1,5 +1,5 @@
/* /*
* favcount.js v1.0.1 * favcount.js v1.1.0
* http://chrishunt.co/favcount * http://chrishunt.co/favcount
* Dynamically updates the favicon with a number. * Dynamically updates the favicon with a number.
* *
@ -43,34 +43,48 @@
function drawCanvas(canvas, img, count) { function drawCanvas(canvas, img, count) {
var head = document.getElementsByTagName('head')[0], var head = document.getElementsByTagName('head')[0],
favicon = document.createElement('link'), favicon = document.createElement('link'),
multiplier, fontSize, context, xOffset, yOffset; multiplier, fontSize, context, xOffset, yOffset, border, shadow;
favicon.rel = 'icon'; favicon.rel = 'icon';
// Scale the canvas based on favicon size // Scale canvas elements based on favicon size
multiplier = img.width / 16; multiplier = img.width / 16;
fontSize = multiplier * 11; fontSize = multiplier * 11;
xOffset = multiplier; xOffset = multiplier;
yOffset = multiplier * 11; yOffset = multiplier * 11;
border = multiplier;
shadow = multiplier * 2;
canvas.height = canvas.width = img.width; canvas.height = canvas.width = img.width;
context = canvas.getContext('2d'); context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
context.font = 'bold ' + fontSize + 'px "helvetica", sans-serif'; 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.fillStyle = '#FFF';
context.fillText(count, xOffset, yOffset); context.fillText(count, xOffset, yOffset);
context.fillText(count, xOffset + 2, yOffset); context.fillText(count, xOffset + border, yOffset);
context.fillText(count, xOffset, yOffset + 2); context.fillText(count, xOffset, yOffset + border);
context.fillText(count, xOffset + 2, yOffset + 2); context.fillText(count, xOffset + border, yOffset + border);
// Draw count in foreground // Draw black count
context.fillStyle = '#000'; 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'); favicon.href = canvas.toDataURL('image/png');
head.removeChild(document.querySelector('link[rel=icon]')); head.removeChild(document.querySelector('link[rel=icon]'));
head.appendChild(favicon); head.appendChild(favicon);
@ -80,5 +94,5 @@
}).call(this); }).call(this);
(function(){ (function(){
Favcount.VERSION = '1.0.1'; Favcount.VERSION = '1.1.0';
}).call(this); }).call(this);