mirror of
https://github.com/discourse/discourse.git
synced 2024-11-24 04:31:56 +08:00
Merge pull request #1358 from chrishunt/bump-favcount
Improve readability of count for complex favicons
This commit is contained in:
commit
dca0b6b9b8
40
app/assets/javascripts/external/favcount.js
vendored
40
app/assets/javascripts/external/favcount.js
vendored
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue
Block a user