diff --git a/app/assets/javascripts/discourse.js b/app/assets/javascripts/discourse.js
index b947839b381..2881f7224d1 100644
--- a/app/assets/javascripts/discourse.js
+++ b/app/assets/javascripts/discourse.js
@@ -50,8 +50,8 @@ Discourse = Ember.Application.createWithMixins(Discourse.Ajax, {
faviconChanged: function() {
if(Discourse.User.currentProp('dynamic_favicon')) {
- $.faviconNotify(
- Discourse.SiteSettings.favicon_url, this.get('notifyCount')
+ new Favcount(Discourse.SiteSettings.favicon_url).set(
+ this.get('notifyCount')
);
}
}.observes('notifyCount'),
diff --git a/app/assets/javascripts/external/favcount.js b/app/assets/javascripts/external/favcount.js
new file mode 100644
index 00000000000..5ec64d9092d
--- /dev/null
+++ b/app/assets/javascripts/external/favcount.js
@@ -0,0 +1,84 @@
+/*
+ * favcount.js v1.0.1
+ * http://chrishunt.co/favcount
+ * Dynamically updates the favicon with a number.
+ *
+ * Copyright 2013, Chris Hunt
+ * Released under the MIT license
+ */
+
+(function(){
+ function Favcount(icon) {
+ this.icon = icon;
+ this.canvas = document.createElement('canvas');
+ }
+
+ Favcount.prototype.set = function(count) {
+ var self = this,
+ img = document.createElement('img');
+
+ if (self.canvas.getContext) {
+ img.onload = function() {
+ drawCanvas(self.canvas, img, normalize(count));
+ };
+
+ img.src = this.icon;
+ }
+ }
+
+ function normalize(count) {
+ count = Math.round(count);
+
+ if (isNaN(count) || count < 1) {
+ return '';
+ } else if (count < 10) {
+ return ' ' + count;
+ } else if (count > 99) {
+ return '99';
+ } else {
+ return count;
+ }
+ }
+
+ function drawCanvas(canvas, img, count) {
+ var head = document.getElementsByTagName('head')[0],
+ favicon = document.createElement('link'),
+ multiplier, fontSize, context, xOffset, yOffset;
+
+ favicon.rel = 'icon';
+
+ // Scale the canvas based on favicon size
+ multiplier = img.width / 16;
+ fontSize = multiplier * 11;
+ xOffset = multiplier;
+ yOffset = multiplier * 11;
+
+ canvas.height = canvas.width = img.width;
+
+ context = canvas.getContext('2d');
+ context.drawImage(img, 0, 0);
+ context.font = 'bold ' + fontSize + 'px "helvetica", sans-serif';
+
+ // Draw background for contrast
+ context.fillStyle = '#FFF';
+ context.fillText(count, xOffset, yOffset);
+ context.fillText(count, xOffset + 2, yOffset);
+ context.fillText(count, xOffset, yOffset + 2);
+ context.fillText(count, xOffset + 2, yOffset + 2);
+
+ // Draw count in foreground
+ context.fillStyle = '#000';
+ context.fillText(count, xOffset + 1, yOffset + 1);
+
+ // Replace the favicon
+ favicon.href = canvas.toDataURL('image/png');
+ head.removeChild(document.querySelector('link[rel=icon]'));
+ head.appendChild(favicon);
+ }
+
+ this.Favcount = Favcount;
+}).call(this);
+
+(function(){
+ Favcount.VERSION = '1.0.1';
+}).call(this);
diff --git a/app/assets/javascripts/external/jquery.faviconNotify.js b/app/assets/javascripts/external/jquery.faviconNotify.js
deleted file mode 100644
index 984bd2dd0d3..00000000000
--- a/app/assets/javascripts/external/jquery.faviconNotify.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
-* jQuery Favicon Notify
-*
-* Updates the favicon with a number to notify the user of changes.
-*
-* iconUrl: Url of favicon image or icon
-* count: Integer count to place above favicon
-*
-* $.faviconNotify(iconUrl, count)
-*/
-(function($){
- $.faviconNotify = function(iconUrl, count){
- var canvas = canvas || $('')[0],
- img = $('
')[0],
- multiplier, fontSize, context, xOffset, yOffset;
-
- if (canvas.getContext) {
- if (count < 1) { count = '' }
- else if (count < 10) { count = ' ' + count }
- else if (count > 99) { count = '99' }
-
- img.onload = function () {
- canvas.height = canvas.width = this.width;
- multiplier = (this.width / 16);
-
- fontSize = multiplier * 11;
- xOffset = multiplier;
- yOffset = multiplier * 11;
-
- context = canvas.getContext('2d');
- context.drawImage(this, 0, 0);
- context.font = 'bold ' + fontSize + 'px "helvetica", sans-serif';
-
- context.fillStyle = '#FFF';
- context.fillText(count, xOffset, yOffset);
- context.fillText(count, xOffset + 2, yOffset);
- context.fillText(count, xOffset, yOffset + 2);
- context.fillText(count, xOffset + 2, yOffset + 2);
-
- context.fillStyle = '#000';
- context.fillText(count, xOffset + 1, yOffset + 1);
-
- $('link[rel$=icon]').remove();
- $('head').append(
- $('').attr(
- 'href', canvas.toDataURL('image/png')
- )
- );
- };
- img.src = iconUrl;
- }
- };
-})(jQuery);