Favicon unread count

app/assets/javascripts/application.js

@@ -31,6 +31,46 @@ function getMarkedOrCurrentRows() {
   return hasMarkedRows() ? getMarkedRows() : getCurrentRow()
 }
 
+function updateFavicon() {
+  $.get( "/notifications/unread_count", function(data) {
+    var unread_count = data["count"];
+    if ( unread_count > 0 ) {
+      var old_link = document.getElementById('favicon-count');
+      if ( old_link ) {
+        $(old_link).remove();
+      }
+
+      var canvas = document.createElement('canvas'),
+        ctx,
+        img = document.createElement('img'),
+        link = document.getElementById('favicon').cloneNode(true),
+        txt = unread_count + '';
+
+      link.id = "favicon-count";
+
+      if (canvas.getContext) {
+        canvas.height = canvas.width = 16;
+        ctx = canvas.getContext('2d');
+        img.onload = function () {
+          ctx.drawImage(this, 0, 0);
+
+          ctx.fillStyle = '#f93e00';
+          var width = ctx.measureText(txt).width;
+          ctx.fillRect(0, 0, width+2, 12);
+
+          ctx.font = 'bold 10px "helvetica", sans-serif';
+          ctx.fillStyle = '#fff';
+          ctx.fillText(txt, 1, 10);
+
+          link.href = canvas.toDataURL('image/png');
+          document.body.appendChild(link);
+        };
+        img.src = "/favicon-16x16.png";
+      }
+    }
+  });
+}
+
 document.addEventListener("turbolinks:load", function() {
   $('button.archive_selected, button.unarchive_selected').click(toggleArchive);
   $('button.mute_selected').click(mute);
@@ -66,6 +106,8 @@ document.addEventListener("turbolinks:load", function() {
   })
 
   $('[data-toggle="tooltip"]').tooltip()
+
+  updateFavicon()
 });
 
 document.addEventListener("turbolinks:before-cache", function() {
@@ -148,11 +190,14 @@ function markReadSelected() {
   var rows = getMarkedOrCurrentRows();
   $.post("/notifications/mark_read_selected", {'id[]': getIdsFromRows(rows)}).done(function () {
     rows.removeClass('active');
+    updateFavicon();
   })
 }
 
 function markRead(id) {
-  $.get( "/notifications/"+id+"/mark_read");
+  $.get( "/notifications/"+id+"/mark_read", function() {
+    updateFavicon();
+  });
   $('#notification-'+id).removeClass('active');
 }
 

app/controllers/notifications_controller.rb

@@ -31,6 +31,12 @@ def index
     @notifications = scope.newest.page(page).per(per_page)
   end
 
+  def unread_count
+    scope = current_user.notifications
+    count = scope.inbox.distinct.group(:unread).count.fetch(true){ 0 }
+    render json: { 'count': count }
+  end
+
   def mute_selected
     notifications = current_user.notifications.where(id: params[:id])
     notifications.each do |notification|

app/views/layouts/application.html.erb

@@ -16,7 +16,7 @@
     <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link id="favicon" rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

config/routes.rb

@@ -16,6 +16,7 @@
       post :sync
       post :mute_selected
       post :mark_read_selected
+      get :unread_count
     end
 
     member do