227 lines
4.8 KiB
JavaScript
227 lines
4.8 KiB
JavaScript
/**
|
|
* jQuery Favicon Notify
|
|
*
|
|
* Updates the favicon to notify the user of changes. In the original tests I
|
|
* had an embedded font collection to allow any charachers - I decided that the
|
|
* ~130Kb and added complexity was overkill. As such it now uses a manual glyph
|
|
* set meaning that only numerical notifications are possible.
|
|
*
|
|
* Dual licensed under the MIT and GPL licenses:
|
|
*
|
|
* http://www.opensource.org/licenses/mit-license.php
|
|
* http://www.gnu.org/licenses/gpl.html
|
|
*
|
|
* @author David King
|
|
* @copyright Copyright (c) 2011 +
|
|
* @url oodavid.com
|
|
*/
|
|
(function($){
|
|
var canvas;
|
|
var bg = '#000000';
|
|
var fg = '#FFFFFF';
|
|
var pos = 'br';
|
|
$.faviconNotify = function(icon, num, myPos, myBg, myFg){
|
|
// Default the positions
|
|
myPos = myPos || pos;
|
|
myFg = myFg || fg;
|
|
myBg = myBg || bg;
|
|
// Create a canvas if we need one
|
|
canvas = canvas || $('<canvas />')[0];
|
|
if(canvas.getContext){
|
|
// Load the icon
|
|
$('<img />').load(function(e){
|
|
// Load the icon into the canvas
|
|
canvas.height = canvas.width = 16;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.drawImage(this, 0, 0);
|
|
// We gots num?
|
|
if(num !== undefined){
|
|
num = parseFloat(num, 10);
|
|
// Convert the num into a glyphs array
|
|
var myGlyphs = [];
|
|
if(num > 99){
|
|
myGlyphs.push(glyphs['LOTS']);
|
|
} else {
|
|
num = num.toString().split('');
|
|
$.each(num, function(k,v){
|
|
myGlyphs.push(glyphs[v]);
|
|
});
|
|
}
|
|
if(num>0) {
|
|
// Merge the glyphs together
|
|
var combined = [];
|
|
var glyphHeight = myGlyphs[0].length;
|
|
$.each(myGlyphs, function(k,v){
|
|
for(y=0; y<glyphHeight; y++){
|
|
// First pass?
|
|
if(combined[y] === undefined) {
|
|
combined[y] = v[y];
|
|
} else {
|
|
// Merge the glyph parts, careful of the boundaries
|
|
var l = combined[y].length;
|
|
if(combined[y][(l-1)] === ' '){
|
|
combined[y] = combined[y].substring(0, (l-1)) + v[y];
|
|
} else {
|
|
combined[y] += v[y].substring(1);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
// Figure out our starting position
|
|
var glyphWidth = combined[0].length;
|
|
var x = (myPos.indexOf('l') !== -1) ? 0 : (16 - glyphWidth);
|
|
var y = (myPos.indexOf('t') !== -1) ? 0 : (16 - glyphHeight);
|
|
// Draw them pixels!
|
|
for(dX=0; dX<glyphWidth; dX++){
|
|
for(dY=0; dY<glyphHeight; dY++){
|
|
var pixel = combined[dY][dX];
|
|
if(pixel !== ' '){
|
|
ctx.fillStyle = (pixel === '@') ? myFg : myBg;
|
|
ctx.fillRect((x+dX), (y+dY), 1, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Update the favicon
|
|
$('link[rel$=icon]').remove();
|
|
$('head').append($('<link rel="shortcut icon" type="image/x-icon"/>').attr('href', canvas.toDataURL('image/png')));
|
|
}).attr('src', icon)
|
|
}
|
|
};
|
|
var glyphs = {
|
|
'0': [
|
|
' --- ',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
'-@- -@-',
|
|
'-@- -@-',
|
|
'-@- -@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
' --- ' ],
|
|
'1': [
|
|
' - ',
|
|
' -@- ',
|
|
'-@@- ',
|
|
' -@- ',
|
|
' -@- ',
|
|
' -@- ',
|
|
' -@- ',
|
|
'-@@@-',
|
|
' --- ' ],
|
|
'2': [
|
|
' --- ',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
' - --@-',
|
|
' -@@- ',
|
|
' -@-- ',
|
|
'-@---- ',
|
|
'-@@@@@-',
|
|
' ----- ' ],
|
|
'3': [
|
|
' --- ',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
' - --@-',
|
|
' -@@- ',
|
|
' - --@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
' --- ' ],
|
|
'4': [
|
|
' -- ',
|
|
' -@@-',
|
|
' -@-@-',
|
|
' -@--@-',
|
|
'-@---@-',
|
|
'-@@@@@-',
|
|
' ----@-',
|
|
' -@-',
|
|
' - ' ],
|
|
'5': [
|
|
' ----- ',
|
|
'-@@@@@-',
|
|
'-@---- ',
|
|
'-@--- ',
|
|
'-@@@@- ',
|
|
' ----@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
' --- ' ],
|
|
'6': [
|
|
' --- ',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
'-@---- ',
|
|
'-@@@@- ',
|
|
'-@---@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
' --- ' ],
|
|
'7': [
|
|
' ----- ',
|
|
'-@@@@@-',
|
|
' ----@-',
|
|
' -@- ',
|
|
' -@- ',
|
|
' -@- ',
|
|
' -@- ',
|
|
' -@- ',
|
|
' - ' ],
|
|
'8': [
|
|
' --- ',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
' --- ' ],
|
|
'9': [
|
|
' --- ',
|
|
' -@@@- ',
|
|
'-@---@-',
|
|
'-@---@-',
|
|
' -@@@@-',
|
|
' ----@-',
|
|
'-@---@-',
|
|
' -@@@- ',
|
|
' --- ' ],
|
|
'!': [
|
|
' - ',
|
|
'-@-',
|
|
'-@-',
|
|
'-@-',
|
|
'-@-',
|
|
'-@-',
|
|
' - ',
|
|
'-@-',
|
|
' - ' ],
|
|
'.': [
|
|
' ',
|
|
' ',
|
|
' ',
|
|
' ',
|
|
' ',
|
|
' ',
|
|
' - ',
|
|
'-@-',
|
|
' - ' ],
|
|
'LOTS': [
|
|
' - -- --- -- ',
|
|
'-@- -@@-@@@--@@-',
|
|
'-@--@--@-@--@- ',
|
|
'-@--@--@-@--@- ',
|
|
'-@--@--@-@- -@- ',
|
|
'-@--@--@-@- -@-',
|
|
'-@--@--@-@----@-',
|
|
'-@@@-@@--@-@@@- ',
|
|
' --- -- - --- '
|
|
]
|
|
};
|
|
})(jQuery);
|