Merge pull request #1353 from chrishunt/favcount-ftw

Use favcount.js v1.0.1

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'),

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);

app/assets/javascripts/external/jquery.faviconNotify.js

@@ -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 || $('<canvas />')[0],
-        img = $('<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(
-          $('<link rel="shortcut icon" type="image/x-icon"/>').attr(
-            'href', canvas.toDataURL('image/png')
-          )
-        );
-      };
-      img.src = iconUrl;
-    }
-  };
-})(jQuery);