Added fallback to changing browser title for safari and ie

djnet00 · Jan 30, 2012 · a24fd71 · a24fd71
1 parent d6df617
commit a24fd71
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -20,13 +20,15 @@ Tinycon can take a range of options to customise the look
 * font: a css string to use for the fontface (recommended to leave this)
 * colour: the foreground font colour
 * background: the alert bubble background colour
+* fallback: should we fallback to a number in brackets for browser that dont support canvas/dynamic favicons
 
         Tinycon.setOptions({
           	width: 7,
 			height: 9,
 			font: '10px arial',
 			colour: '#ffffff',
-			background: '#549A2F'
+			background: '#549A2F',
+			fallback: true
         });
 
 

diff --git a/examples/index.html b/examples/index.html
@@ -1,7 +1,8 @@
 <html>
 	<head>
 		<link rel="icon" href="/favicon.ico">
-
+		<title>Tinycon</title>
+
 		<script src="../tinycon.js"></script>
 		<script>
 			var count = 0;

diff --git a/tinycon.js b/tinycon.js
@@ -11,6 +11,7 @@
 	var Tinycon = {};
 	var currentFavicon = null;
 	var originalFavicon = null;
+	var originalTitle = document.title;
 	var faviconImage = null;
 	var canvas = null;
 	var options = {};
@@ -19,7 +20,8 @@
 		height: 9,
 		font: '10px arial',
 		colour: '#ffffff',
-		background: '#F03D25'
+		background: '#F03D25',
+		fallback: true
 	};
 
 	var ua = function(browser){
@@ -28,7 +30,10 @@
 	};
 
 	var browser = {
-		webkit: ua('chrome') || ua('safari')
+		chrome: ua('chrome'),
+		webkit: ua('chrome') || ua('safari'),
+		safari: ua('safari') && !ua('chrome'),
+		mozilla: ua('mozilla') && !ua('chrome') && !ua('safari')
 	};
 
 	// private
@@ -93,8 +98,11 @@
 	};
 
 	var drawFavicon = function(num, colour) {
-		// check support
-		if (!getCanvas().getContext) return;
+
+		// fallback to updating the browser title if unsupported
+		if (!getCanvas().getContext || (!browser.chrome && !browser.mozilla)) {
+			return updateTitle(num);
+		}
 
 		var context = getCanvas().getContext("2d");
 		var colour = colour || '#000000';
@@ -119,6 +127,17 @@
 		faviconImage.src = getCurrentFavicon();
 	};
 
+	var updateTitle = function(num) {
+
+		if (options.fallback) {
+			if (num > 0) {
+				document.title = '('+num+') ' + originalTitle;
+			} else {
+				document.title = originalTitle;
+			}
+		}
+	};
+
 	var drawBubble = function(context, num, colour) {
 
 		// bubble needs to be larger for double digits