Permalink
Browse files

Implement options for color and stroke

  • Loading branch information...
1 parent b30d0e3 commit f7b51ef8f3c6fe5ba022edabe2fa1aca7cffd8b0 @makeable committed Oct 26, 2011
Showing with 55 additions and 31 deletions.
  1. +4 −1 README.md
  2. +7 −7 index.html
  3. +44 −23 notificon.js
View
@@ -12,7 +12,10 @@ Due to browser limitations, Favicons can only be changed post-render in Chrome 6
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.
+Notificon can take 2 parameters - Notificon(label, options) where label is the text to overlay, and options can contain:
+favicon: the url of a 16x16 favicon (default current favicon)
+color: Color of the text (default #000000)
+stroke: Stroke/outline colour (default rgba(255,255,255,0.85))
An empty label will clear your favicon to its original state. e.g. Notificon();
View
@@ -1,15 +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.
- -->
+ <!--
+ 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>
+ <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
@@ -31,9 +31,9 @@ or implied, of Matt Williams.
*/
(function(){
-
+
var unsupported = false;
-
+
var checkSupport = function checkSupport() {
if (unsupported) {
return false;
@@ -46,8 +46,25 @@ or implied, of Matt Williams.
return false;
}
return true;
- }
-
+ };
+
+ var mergeDefaultOptions = function mergeDefaultOptions(options) {
+ if (!options) {
+ options = {};
+ }
+ var defaults = {
+ color: "#000000",
+ stroke: "rgba(255,255,255,0.85)",
+ favicon: getExistingFavicon()
+ };
+ for (var key in defaults) {
+ if (!options[key]) {
+ options[key] = defaults[key];
+ }
+ }
+ return options;
+ };
+
var findFaviconTag = function findFaviconTag(notificon) {
var link_tags = document.getElementsByTagName('link');
for (var i=0; i < link_tags.length; i++) {
@@ -59,20 +76,20 @@ or implied, of Matt Williams.
}
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';
@@ -81,13 +98,14 @@ or implied, of Matt Williams.
removeNotificon();
document.getElementsByTagName('head')[0].appendChild(link);
};
-
- var drawLabel = function drawLabel(canvas, label) {
+
+ var drawLabel = function drawLabel(canvas, label, color, stroke) {
var context = canvas.getContext("2d");
context.font = "10px monospace";
+ context.fillStyle = color;
context.textAlign = 'right';
context.textBaseline = "top";
- context.strokeStyle = 'rgba(255,255,255,0.85)';
+ context.strokeStyle = stroke;
context.lineWidth = 4;
context.strokeText(label,16,6);
context.fillText(label,16,6);
@@ -101,38 +119,41 @@ or implied, of Matt Williams.
context.drawImage(img, 0, 0);
return canvas;
};
-
- var createNotificon = function createNotificon(label, favicon) {
+
+ var createNotificon = function createNotificon(label,myOptions) {
if (!checkSupport()) {
return false;
}
- if (!favicon) {
- favicon = getExistingFavicon();
- }
+
+ var options = mergeDefaultOptions(myOptions);
+
var img = document.createElement("img");
- img.src = favicon;
+ img.src = options.favicon;
img.onload = function() {
var canvas = imgToCanvas(img);
if (label) {
- drawLabel(canvas, label);
+ drawLabel(canvas, label, options.color, options.stroke);
}
try {
changeFavicon(canvas);
+ return true;
} catch(e) {
if (console) {
console.log('Notificon: cannot use icons located on a different domain (' + favicon + ')');
+ return false;
}
}
-
};
img.onerror = function() {
if (console) {
- console.log('Notificon: image not found (' + favicon + ')');
+ console.log('Notificon: image not found (' + options.favicon + ')');
+ return false;
}
};
+ return true;
};
-
- this.Notificon = function(label, favicon) {
- createNotificon(label, favicon);
+
+ this.Notificon = function(label, options) {
+ createNotificon(label, options);
};
-})();
+})();

0 comments on commit f7b51ef

Please sign in to comment.