|
|
@ -1,9 +1,9 @@
|
|
|
|
/*!
|
|
|
|
/*!
|
|
|
|
* Tinycon - A small library for manipulating the Favicon
|
|
|
|
* Tinycon - A small library for manipulating the Favicon
|
|
|
|
* Tom Moor, http://tommoor.com
|
|
|
|
* Tom Moor, http://tommoor.com
|
|
|
|
* Copyright (c) 2012 Tom Moor
|
|
|
|
* Copyright (c) 2015 Tom Moor
|
|
|
|
* MIT Licensed
|
|
|
|
* @license MIT Licensed
|
|
|
|
* @version 0.6.1
|
|
|
|
* @version 0.6.4
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
(function(){
|
|
|
|
(function(){
|
|
|
@ -11,7 +11,6 @@
|
|
|
|
var Tinycon = {};
|
|
|
|
var Tinycon = {};
|
|
|
|
var currentFavicon = null;
|
|
|
|
var currentFavicon = null;
|
|
|
|
var originalFavicon = null;
|
|
|
|
var originalFavicon = null;
|
|
|
|
var originalTitle = document.title;
|
|
|
|
|
|
|
|
var faviconImage = null;
|
|
|
|
var faviconImage = null;
|
|
|
|
var canvas = null;
|
|
|
|
var canvas = null;
|
|
|
|
var options = {};
|
|
|
|
var options = {};
|
|
|
@ -20,8 +19,8 @@
|
|
|
|
var defaults = {
|
|
|
|
var defaults = {
|
|
|
|
width: 7,
|
|
|
|
width: 7,
|
|
|
|
height: 9,
|
|
|
|
height: 9,
|
|
|
|
font: 9 * r + 'px arial',
|
|
|
|
font: 10 * r + 'px arial',
|
|
|
|
colour: '#ffffff',
|
|
|
|
color: '#ffffff',
|
|
|
|
background: '#F03D25',
|
|
|
|
background: '#F03D25',
|
|
|
|
fallback: true,
|
|
|
|
fallback: true,
|
|
|
|
crossOrigin: true,
|
|
|
|
crossOrigin: true,
|
|
|
@ -37,7 +36,7 @@
|
|
|
|
}());
|
|
|
|
}());
|
|
|
|
|
|
|
|
|
|
|
|
var browser = {
|
|
|
|
var browser = {
|
|
|
|
ie: ua('msie'),
|
|
|
|
ie: ua('trident'),
|
|
|
|
chrome: ua('chrome'),
|
|
|
|
chrome: ua('chrome'),
|
|
|
|
webkit: ua('chrome') || ua('safari'),
|
|
|
|
webkit: ua('chrome') || ua('safari'),
|
|
|
|
safari: ua('safari') && !ua('chrome'),
|
|
|
|
safari: ua('safari') && !ua('chrome'),
|
|
|
@ -50,7 +49,7 @@
|
|
|
|
var links = document.getElementsByTagName('link');
|
|
|
|
var links = document.getElementsByTagName('link');
|
|
|
|
|
|
|
|
|
|
|
|
for(var i=0, len=links.length; i < len; i++) {
|
|
|
|
for(var i=0, len=links.length; i < len; i++) {
|
|
|
|
if ((links[i].getAttribute('rel') || '').match(/\bicon\b/)) {
|
|
|
|
if ((links[i].getAttribute('rel') || '').match(/\bicon\b/i)) {
|
|
|
|
return links[i];
|
|
|
|
return links[i];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -65,7 +64,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
for(var i=0, len=links.length; i < len; i++) {
|
|
|
|
for(var i=0, len=links.length; i < len; i++) {
|
|
|
|
var exists = (typeof(links[i]) !== 'undefined');
|
|
|
|
var exists = (typeof(links[i]) !== 'undefined');
|
|
|
|
if (exists && (links[i].getAttribute('rel') || '').match(/\bicon\b/)) {
|
|
|
|
if (exists && (links[i].getAttribute('rel') || '').match(/\bicon\b/i)) {
|
|
|
|
head.removeChild(links[i]);
|
|
|
|
head.removeChild(links[i]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -75,7 +74,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
if (!originalFavicon || !currentFavicon) {
|
|
|
|
if (!originalFavicon || !currentFavicon) {
|
|
|
|
var tag = getFaviconTag();
|
|
|
|
var tag = getFaviconTag();
|
|
|
|
originalFavicon = currentFavicon = tag ? tag.getAttribute('href') : '/favicon.ico';
|
|
|
|
currentFavicon = tag ? tag.getAttribute('href') : '/favicon.ico';
|
|
|
|
|
|
|
|
if (!originalFavicon) {
|
|
|
|
|
|
|
|
originalFavicon = currentFavicon;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return currentFavicon;
|
|
|
|
return currentFavicon;
|
|
|
@ -93,6 +95,7 @@
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var setFaviconTag = function(url){
|
|
|
|
var setFaviconTag = function(url){
|
|
|
|
|
|
|
|
if(url){
|
|
|
|
removeFaviconTag();
|
|
|
|
removeFaviconTag();
|
|
|
|
|
|
|
|
|
|
|
|
var link = document.createElement('link');
|
|
|
|
var link = document.createElement('link');
|
|
|
@ -100,13 +103,14 @@
|
|
|
|
link.rel = 'icon';
|
|
|
|
link.rel = 'icon';
|
|
|
|
link.href = url;
|
|
|
|
link.href = url;
|
|
|
|
document.getElementsByTagName('head')[0].appendChild(link);
|
|
|
|
document.getElementsByTagName('head')[0].appendChild(link);
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var log = function(message){
|
|
|
|
var log = function(message){
|
|
|
|
if (window.console) window.console.log(message);
|
|
|
|
if (window.console) window.console.log(message);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var drawFavicon = function(label, colour) {
|
|
|
|
var drawFavicon = function(label, color) {
|
|
|
|
|
|
|
|
|
|
|
|
// fallback to updating the browser title if unsupported
|
|
|
|
// fallback to updating the browser title if unsupported
|
|
|
|
if (!getCanvas().getContext || browser.ie || browser.safari || options.fallback === 'force') {
|
|
|
|
if (!getCanvas().getContext || browser.ie || browser.safari || options.fallback === 'force') {
|
|
|
@ -114,7 +118,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
var context = getCanvas().getContext("2d");
|
|
|
|
var context = getCanvas().getContext("2d");
|
|
|
|
var colour = colour || '#000000';
|
|
|
|
var color = color || '#000000';
|
|
|
|
var src = getCurrentFavicon();
|
|
|
|
var src = getCurrentFavicon();
|
|
|
|
|
|
|
|
|
|
|
|
faviconImage = document.createElement('img');
|
|
|
|
faviconImage = document.createElement('img');
|
|
|
@ -127,7 +131,7 @@
|
|
|
|
context.drawImage(faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, size, size);
|
|
|
|
context.drawImage(faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, size, size);
|
|
|
|
|
|
|
|
|
|
|
|
// draw bubble over the top
|
|
|
|
// draw bubble over the top
|
|
|
|
if ((label + '').length > 0) drawBubble(context, label, colour);
|
|
|
|
if ((label + '').length > 0) drawBubble(context, label, color);
|
|
|
|
|
|
|
|
|
|
|
|
// refresh tag in page
|
|
|
|
// refresh tag in page
|
|
|
|
refreshFavicon();
|
|
|
|
refreshFavicon();
|
|
|
@ -145,6 +149,14 @@
|
|
|
|
var updateTitle = function(label) {
|
|
|
|
var updateTitle = function(label) {
|
|
|
|
|
|
|
|
|
|
|
|
if (options.fallback) {
|
|
|
|
if (options.fallback) {
|
|
|
|
|
|
|
|
// Grab the current title that we can prefix with the label
|
|
|
|
|
|
|
|
var originalTitle = document.title;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Strip out the old label if there is one
|
|
|
|
|
|
|
|
if (originalTitle[0] === '(') {
|
|
|
|
|
|
|
|
originalTitle = originalTitle.slice(originalTitle.indexOf(' '));
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if ((label + '').length > 0) {
|
|
|
|
if ((label + '').length > 0) {
|
|
|
|
document.title = '(' + label + ') ' + originalTitle;
|
|
|
|
document.title = '(' + label + ') ' + originalTitle;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -153,7 +165,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var drawBubble = function(context, label, colour) {
|
|
|
|
var drawBubble = function(context, label, color) {
|
|
|
|
|
|
|
|
|
|
|
|
// automatic abbreviation for long (>2 digits) numbers
|
|
|
|
// automatic abbreviation for long (>2 digits) numbers
|
|
|
|
if (typeof label == 'number' && label > 99 && options.abbreviate) {
|
|
|
|
if (typeof label == 'number' && label > 99 && options.abbreviate) {
|
|
|
@ -199,7 +211,7 @@
|
|
|
|
context.stroke();
|
|
|
|
context.stroke();
|
|
|
|
|
|
|
|
|
|
|
|
// label
|
|
|
|
// label
|
|
|
|
context.fillStyle = options.colour;
|
|
|
|
context.fillStyle = options.color;
|
|
|
|
context.textAlign = "right";
|
|
|
|
context.textAlign = "right";
|
|
|
|
context.textBaseline = "top";
|
|
|
|
context.textBaseline = "top";
|
|
|
|
|
|
|
|
|
|
|
@ -240,6 +252,11 @@
|
|
|
|
Tinycon.setOptions = function(custom){
|
|
|
|
Tinycon.setOptions = function(custom){
|
|
|
|
options = {};
|
|
|
|
options = {};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// account for deprecated UK English spelling
|
|
|
|
|
|
|
|
if (custom.colour) {
|
|
|
|
|
|
|
|
custom.color = custom.colour;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
for(var key in defaults){
|
|
|
|
for(var key in defaults){
|
|
|
|
options[key] = custom.hasOwnProperty(key) ? custom[key] : defaults[key];
|
|
|
|
options[key] = custom.hasOwnProperty(key) ? custom[key] : defaults[key];
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -252,16 +269,19 @@
|
|
|
|
return this;
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
Tinycon.setBubble = function(label, colour) {
|
|
|
|
Tinycon.setBubble = function(label, color) {
|
|
|
|
label = label || '';
|
|
|
|
label = label || '';
|
|
|
|
drawFavicon(label, colour);
|
|
|
|
drawFavicon(label, color);
|
|
|
|
return this;
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
Tinycon.reset = function(){
|
|
|
|
Tinycon.reset = function(){
|
|
|
|
|
|
|
|
currentFavicon = originalFavicon;
|
|
|
|
setFaviconTag(originalFavicon);
|
|
|
|
setFaviconTag(originalFavicon);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
Tinycon.setOptions(defaults);
|
|
|
|
Tinycon.setOptions(defaults);
|
|
|
|
|
|
|
|
|
|
|
|
window.Tinycon = Tinycon;
|
|
|
|
window.Tinycon = Tinycon;
|
|
|
|
|
|
|
|
|
|
|
|
})();
|
|
|
|
})();
|