first commit, maybe the last too

oodavid · Sep 12, 2011 · af13dc5 · af13dc5
commit af13dc5
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 0 deletions.
diff --git a/favicon.ico b/favicon.ico
diff --git a/flask.png b/flask.png
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<html>
+<head>
+	<title>jQuery Favicon Notifier</title>
+	<script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
+	<script type="text/javascript" src="jquery.faviconNotify.js"></script>
+</head>
+<body>
+	<h1>jQuery Favicon Notifier</h1>
+	<p>A super simple plugin that renders a notification number to the favicon. You can set:</p>
+	<ul>
+		<li>the number</li>
+		<li>the position</li>
+		<li>the icon (any image type)</li>
+		<li>text and text-outline colors</li>
+	</ul>
+	<h2>Demoo!</h2>
+	<button onclick="$.faviconNotify('favicon.ico', Math.ceil(Math.random()*100));">Random number (keep clicking!)</button>
+	<button onclick="$.faviconNotify('favicon.ico', 100);">More than 99</button>
+	<button onclick="$.faviconNotify('favicon.ico', 0);">Zero</button>
+	<button onclick="$.faviconNotify('favicon.ico');">Reset the icon</button>
+	<button onclick="$.faviconNotify('favicon.ico', 12, 'tr');">Top Right</button>
+	<button onclick="$.faviconNotify('favicon.ico', 56, 'tl');">Top Left</button>
+	<button onclick="$.faviconNotify('favicon.ico', 45, 'bl');">Bottom Left</button>
+	<button onclick="$.faviconNotify('favicon.ico', 34, 'br');">Bottom Right</button>
+	<button onclick="$.faviconNotify('favicon.ico', 34, 'br', '#FFFFFF', '#000000');">Custom colors (inverted)</button>
+	<button onclick="$.faviconNotify('favicon.ico', 67, 'br', '#123456', '#ABCDEF');">Custom colors</button>
+	<button onclick="$.faviconNotify('favicon.ico', 78, 'br', '#000000', '#FFAAAA');">Custom colors</button>
+	<button onclick="$.faviconNotify('flask.png', 4, 'tr', '#FFFFFF', '#000000');">Different icon (flask, png)</button>
+	<button onclick="$.faviconNotify('pill.png', 9, 'br', '#FFFFFF', '#000000');">Different icon (pill, png)</button>
+	<p><a href="https://github.com/oodavid/jQuery-Favicon-Notifier">Grab the sources and whatnot on github</a></p>
+</body>
+</html>
diff --git a/jquery.faviconNotify.js b/jquery.faviconNotify.js
@@ -0,0 +1,205 @@
+/**
+ * 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';
+	var glyphs	= [
+		[
+			'  ---  ',
+			' -@@@- ',
+			'-@---@-',
+			'-@- -@-',
+			'-@- -@-',
+			'-@- -@-',
+			'-@---@-',
+			' -@@@- ',
+			'  ---  '
+		],[
+			'  -  ',
+			' -@- ',
+			'-@@- ',
+			' -@- ',
+			' -@- ',
+			' -@- ',
+			' -@- ',
+			'-@@@-',
+			' --- '
+		],[
+			'  ---  ',
+			' -@@@- ',
+			'-@---@-',
+			' - --@-',
+			'  -@@- ',
+			' -@--  ',
+			'-@---- ',
+			'-@@@@@-',
+			' ----- '
+		],[
+			'  ---  ',
+			' -@@@- ',
+			'-@---@-',
+			' - --@-',
+			'  -@@- ',
+			' - --@-',
+			'-@---@-',
+			' -@@@- ',
+			'  ---  '
+		],[
+			'    -- ',
+			'   -@@-',
+			'  -@-@-',
+			' -@--@-',
+			'-@---@-',
+			'-@@@@@-',
+			' ----@-',
+			'    -@-',
+			'     - '
+		],[
+			' ----- ',
+			'-@@@@@-',
+			'-@---- ',
+			'-@---  ',
+			'-@@@@- ',
+			' ----@-',
+			'-@---@-',
+			' -@@@- ',
+			'  ---  '
+		],[
+			'  ---  ',
+			' -@@@- ',
+			'-@---@-',
+			'-@---- ',
+			'-@@@@- ',
+			'-@---@-',
+			'-@---@-',
+			' -@@@- ',
+			'  ---  '
+		],[
+			' ----- ',
+			'-@@@@@-',
+			' ----@-',
+			'   -@- ',
+			'   -@- ',
+			'  -@-  ',
+			'  -@-  ',
+			'  -@-  ',
+			'   -   '
+		],[
+			'  ---  ',
+			' -@@@- ',
+			'-@---@-',
+			'-@---@-',
+			' -@@@- ',
+			'-@---@-',
+			'-@---@-',
+			' -@@@- ',
+			'  ---  '
+		],[
+			'  ---  ',
+			' -@@@- ',
+			'-@---@-',
+			'-@---@-',
+			' -@@@@-',
+			' ----@-',
+			'-@---@-',
+			' -@@@- ',
+			'  ---  '
+		],[
+			' - ',
+			'-@-',
+			'-@-',
+			'-@-',
+			'-@-',
+			'-@-',
+			' - ',
+			'-@-',
+			' - '
+		]
+	];
+	$.faviconNotify = function(icon, num, myPos, myBg, myFg){
+		// Use the correct options
+		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 favicon and manipulate it once it's loaded
+			var img = $('<img />')[0];
+			img.onload = function () {
+				// Get the canvas ready and fill with the original icon
+				canvas.height = canvas.width = 16;
+				var ctx = canvas.getContext('2d');
+				ctx.drawImage(this, 0, 0);
+				// We gots num?
+				if(num != undefined){
+					// Convert the num into a glyphs array
+					if(num > 99){
+						var myGlyphs = [glyphs[9], glyphs[9], glyphs[10]];
+					} else {
+						var myGlyphs = [];
+						num = num.toString();
+						$.each(num, function(k,v){
+							myGlyphs.push(glyphs[v]);
+						});
+					}
+					// 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]').replaceWith('');
+				$('head').append($('<link rel="shortcut icon" type="image/x-icon"/>').attr('href', canvas.toDataURL('image/png')));
+			};
+			img.src = icon;
+		}
+	};
+
+})(jQuery);
diff --git a/pill.png b/pill.png