mirror of
https://github.com/discourse/discourse.git
synced 2025-06-08 00:27:32 +08:00
Merge pull request #1348 from chrishunt/dynamically-png-me
Re-write dynamic favicon javascript
This commit is contained in:
Sam
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 6.4 KiB |
@ -1,226 +1,53 @@
|
|||||||
/**
|
/**
|
||||||
* jQuery Favicon Notify
|
* jQuery Favicon Notify
|
||||||
*
|
*
|
||||||
* Updates the favicon to notify the user of changes. In the original tests I
|
* Updates the favicon with a number to notify the user of changes.
|
||||||
* 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
|
* iconUrl: Url of favicon image or icon
|
||||||
* set meaning that only numerical notifications are possible.
|
* count: Integer count to place above favicon
|
||||||
*
|
*
|
||||||
* Dual licensed under the MIT and GPL licenses:
|
* $.faviconNotify(iconUrl, count)
|
||||||
*
|
*/
|
||||||
* 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($){
|
(function($){
|
||||||
var canvas;
|
$.faviconNotify = function(iconUrl, count){
|
||||||
var bg = '#000000';
|
var canvas = canvas || $('<canvas />')[0],
|
||||||
var fg = '#FFFFFF';
|
img = $('<img />')[0],
|
||||||
var pos = 'br';
|
multiplier, fontSize, context, xOffset, yOffset;
|
||||||
$.faviconNotify = function(icon, num, myPos, myBg, myFg){
|
|
||||||
// Default the positions
|
if (canvas.getContext) {
|
||||||
myPos = myPos || pos;
|
if (count < 1) { count = '' }
|
||||||
myFg = myFg || fg;
|
else if (count < 10) { count = ' ' + count }
|
||||||
myBg = myBg || bg;
|
else if (count > 99) { count = '99' }
|
||||||
// Create a canvas if we need one
|
|
||||||
canvas = canvas || $('<canvas />')[0];
|
img.onload = function () {
|
||||||
if(canvas.getContext){
|
canvas.height = canvas.width = this.width;
|
||||||
// Load the icon
|
multiplier = (this.width / 16);
|
||||||
$('<img />').load(function(e){
|
|
||||||
// Load the icon into the canvas
|
fontSize = multiplier * 11;
|
||||||
canvas.height = canvas.width = 16;
|
xOffset = multiplier;
|
||||||
var ctx = canvas.getContext('2d');
|
yOffset = multiplier * 11;
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
ctx.drawImage(this, 0, 0);
|
context = canvas.getContext('2d');
|
||||||
// We gots num?
|
context.drawImage(this, 0, 0);
|
||||||
if(num !== undefined){
|
context.font = 'bold ' + fontSize + 'px "helvetica", sans-serif';
|
||||||
num = parseFloat(num, 10);
|
|
||||||
// Convert the num into a glyphs array
|
context.fillStyle = '#FFF';
|
||||||
var myGlyphs = [];
|
context.fillText(count, xOffset, yOffset);
|
||||||
if(num > 99){
|
context.fillText(count, xOffset + 2, yOffset);
|
||||||
myGlyphs.push(glyphs['LOTS']);
|
context.fillText(count, xOffset, yOffset + 2);
|
||||||
} else {
|
context.fillText(count, xOffset + 2, yOffset + 2);
|
||||||
num = num.toString().split('');
|
|
||||||
$.each(num, function(k,v){
|
context.fillStyle = '#000';
|
||||||
myGlyphs.push(glyphs[v]);
|
context.fillText(count, xOffset + 1, yOffset + 1);
|
||||||
});
|
|
||||||
}
|
$('link[rel$=icon]').remove();
|
||||||
if(num>0) {
|
$('head').append(
|
||||||
// Merge the glyphs together
|
$('<link rel="shortcut icon" type="image/x-icon"/>').attr(
|
||||||
var combined = [];
|
'href', canvas.toDataURL('image/png')
|
||||||
var glyphHeight = myGlyphs[0].length;
|
)
|
||||||
$.each(myGlyphs, function(k,v){
|
);
|
||||||
for(y=0; y<glyphHeight; y++){
|
};
|
||||||
// First pass?
|
img.src = iconUrl;
|
||||||
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);
|
})(jQuery);
|
||||||
|
|||||||
Reference in New Issue
Block a user