Permalink
Browse files

Pushed to github

  • Loading branch information...
1 parent c999dfd commit f29d8744f4c97f3315443194c6d377128488dffa @makeable committed Oct 1, 2011
Showing with 141 additions and 0 deletions.
  1. +25 −0 LICENSE.txt
  2. +14 −0 README.md
  3. BIN favicon.ico
  4. +15 −0 index.html
  5. +87 −0 notificon.js
View
25 LICENSE.txt
@@ -0,0 +1,25 @@
+Copyright (c) 2011 Matt Williams <matt@makeable.co.uk>. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are
+permitted provided that the following conditions are met:
+
+ 1. Redistributions of source code must retain the above copyright notice, this list of
+ conditions and the following disclaimer.
+
+ 2. Redistributions in binary form must reproduce the above copyright notice, this list
+ of conditions and the following disclaimer in the documentation and/or other materials
+ provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY MATT WILLIAMS ''AS IS'' AND ANY EXPRESS OR IMPLIED
+WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MATT WILLIAMS OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+The views and conclusions contained in the software and documentation are those of the
+authors and should not be interpreted as representing official policies, either expressed
+or implied, of Matt Williams.
View
14 README.md
@@ -0,0 +1,14 @@
+# Notificon :: _Client-side favicon notifications._
+Notificon is a BSD licensed javascript class for providing client-side favicon notifications.
+Instead of requiring a number of favicons be created and served up to the client, you can specify a label and a favicon (default being the current favicon) and it will generate a favicon notification.
+
+## Basic Usage
+1) Include the notificon.js in your page
+2) Call Notificon(12) to overlay the number 12 on your favicon.
+
+## Advance Usage
+Notificon can take 2 parameters - Notificon(label, favicon_url) where label is the text to overlay, and favicon_url is the url of a 16x16 favicon.
+
+An empty label will clear your favicon to its original state. e.g. Notificon();
+
+Favicon_url defaults to your primary favicon (if specified in head, or with fallback to /favicon.ico)
View
BIN favicon.ico
Binary file not shown.
View
15 index.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+ <!--
+ Notificon example
+ n.b. In this example, the favicon is specified in the head as a data uri to avoid browser security restrictions and allow a direct example.
+ -->
+ <link type="image/x-icon" rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABQklEQVQ4EWP8//8/AzK49fjC/5uPLzA8f/sAWZhBmF+CQVfRgkFN1oARWYIRZsDnbx/+7zqzguHtxxcMbKwcDMJ8EsjqwOwv3z+A5RwMAkDyYIPABoA0rz00g+HX7x9ghZLCCgy+VgkYBpy9dYDh7M0DYENA8iBDmECqQDbDNGPowiIAUrvzNFjPfxaQn0HOxgeAahg+A53/7M0DuLIv3z4wXL5/goEFFGCEALZABekBibOghzY2w0AxAAJvP71A8SrIFeAwwKYJWcxK2wMcqNhihigDkA1DZ7OgC2DjH7u6A5w+QF5AB0ygOCcEQLEECiv0qObhEmBgUpc1IKQfpzxILxMobcNCGadKLBIg243VHCAp0c0kApw8sajDKgTKK+6mEWA5rJmJF2g60GVwzeCUCIxzEAC5FiMzwVUCGaRmZwCgIJ5wJzn5GgAAAABJRU5ErkJggg==">
+ <script src="notificon.js" type="text/javascript" charset="utf-8"></script>
+</head>
+<body>
+ <p>
+ Label: <input type="text" name="label" id="label" size="2" maxlength="2"><button onClick="Notificon(document.getElementById('label').value)">Change</button>
+ </p>
+</body>
+</html>
View
87 notificon.js
@@ -0,0 +1,87 @@
+(function(){
+
+ var findFaviconTag = function findFaviconTag(notificon) {
+ var link_tags = document.getElementsByTagName('link');
+ for (var i=0; i < link_tags.length; i++) {
+ if (notificon && (/\bnotificon\b/i).test(link_tags[i].getAttribute('rel'))) {
+ return link_tags[i];
+ } else if (!notificon && (/\bicon\b/i).test(link_tags[i].getAttribute('rel'))) {
+ return link_tags[i];
+ }
+ }
+ return false;
+ };
+
+ var getExistingFavicon = function getExistingFavicon() {
+ var favicon = findFaviconTag();
+ return favicon ? favicon.getAttribute('href') : '/favicon.ico';
+ };
+
+ var removeNotificon = function removeNotificon() {
+ var notificon = findFaviconTag(true);
+ if (notificon) {
+ notificon.parentNode.removeChild(notificon);
+ removeNotificon();
+ }
+ };
+
+ var changeFavicon = function changeFavicon(canvas) {
+ var link = document.createElement('link');
+ link.type = 'image/x-icon';
+ link.rel = 'icon notificon';
+ link.href = canvas.toDataURL("image/png");
+ removeNotificon();
+ document.getElementsByTagName('head')[0].appendChild(link);
+ };
+
+ var drawLabel = function drawLabel(canvas, label) {
+ var context = canvas.getContext("2d");
+ context.font = "10px monospace";
+ context.textAlign = 'right';
+ context.textBaseline = "top";
+ context.strokeStyle = 'rgba(255,255,255,0.85)';
+ context.lineWidth = 4;
+ context.strokeText(label,16,6);
+ context.fillText(label,16,6);
+ };
+
+ var imgToCanvas = function imgToCanvas(img) {
+ var canvas = document.createElement("canvas");
+ canvas.width = img.width;
+ canvas.height = img.height;
+ var context = canvas.getContext("2d");
+ context.drawImage(img, 0, 0);
+ return canvas;
+ };
+
+ var createNotificon = function createNotificon(label, favicon) {
+ if (!favicon) {
+ favicon = getExistingFavicon();
+ }
+ var img = document.createElement("img");
+ img.src = favicon;
+ img.onload = function() {
+ var canvas = imgToCanvas(img);
+ if (label) {
+ drawLabel(canvas, label);
+ }
+ try {
+ changeFavicon(canvas);
+ } catch(e) {
+ if (console) {
+ console.log('Notificon: cannot use icons located on a different domain (' + favicon + ')');
+ }
+ }
+
+ };
+ img.onerror = function() {
+ if (console) {
+ console.log('Notificon: image not found (' + favicon + ')');
+ }
+ };
+ };
+
+ this.Notificon = function(label, favicon) {
+ createNotificon(label, favicon);
+ };
+})();

0 comments on commit f29d874

Please sign in to comment.