discourse/vendor/assets/javascripts/favcount.js

103 lines
2.7 KiB
JavaScript
Raw Normal View History

/*
* favcount.js v1.5.0
* http://chrishunt.co/favcount
* Dynamically updates the favicon with a number.
*
* Copyright 2013, Chris Hunt
* Released under the MIT license
*/
(function(){
function Favcount(icon) {
this.icon = icon;
2014-01-09 07:14:07 +08:00
this.opacity = 0.4;
this.canvas = document.createElement('canvas');
2014-01-09 07:14:07 +08:00
this.font = "Helvetica, Arial, sans-serif";
}
Favcount.prototype.set = function(count) {
var self = this,
img = document.createElement('img');
if (self.canvas.getContext) {
img.crossOrigin = "anonymous";
img.onload = function() {
2014-01-09 07:14:07 +08:00
drawCanvas(self.canvas, self.opacity, self.font, img, normalize(count));
};
img.src = this.icon;
}
2014-01-09 07:14:07 +08:00
};
function normalize(count) {
count = Math.round(count);
if (isNaN(count) || count < 1) {
return '';
} else if (count < 10) {
return ' ' + count;
} else if (count > 99) {
return '99';
} else {
return count;
}
}
2014-01-09 07:14:07 +08:00
function drawCanvas(canvas, opacity, font, img, count) {
var head = document.getElementsByTagName('head')[0],
favicon = document.querySelector('link[rel=icon]'),
newFavicon = document.createElement('link'),
2013-08-19 23:55:38 +08:00
multiplier, fontSize, context, xOffset, yOffset, border, shadow;
2013-08-19 23:55:38 +08:00
// Scale canvas elements based on favicon size
multiplier = img.width / 16;
fontSize = multiplier * 11;
xOffset = multiplier;
yOffset = multiplier * 11;
2013-08-19 23:55:38 +08:00
border = multiplier;
shadow = multiplier * 2;
canvas.height = canvas.width = img.width;
context = canvas.getContext('2d');
2014-01-09 07:14:07 +08:00
context.font = 'bold ' + fontSize + 'px ' + font;
2013-08-19 23:55:38 +08:00
// Draw faded favicon background
2014-01-09 07:14:07 +08:00
if (count) { context.globalAlpha = opacity; }
2013-08-19 23:55:38 +08:00
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);
2013-08-19 23:55:38 +08:00
context.fillText(count, xOffset + border, yOffset);
context.fillText(count, xOffset, yOffset + border);
context.fillText(count, xOffset + border, yOffset + border);
2013-08-19 23:55:38 +08:00
// Draw black count
context.fillStyle = '#000';
2013-08-19 23:55:38 +08:00
context.fillText(count,
xOffset + (border / 2.0),
yOffset + (border / 2.0)
);
2013-08-19 23:55:38 +08:00
// Replace favicon with new favicon
newFavicon.rel = 'icon';
newFavicon.href = canvas.toDataURL('image/png');
if (favicon) { head.removeChild(favicon); }
head.appendChild(newFavicon);
}
this.Favcount = Favcount;
}).call(this);
(function(){
Favcount.VERSION = '1.5.1';
}).call(this);