Dynamic favicon showing the number of unread articles

https://github.com/marienfressinaud/FreshRSS/issues/539
Works in Firefox 32 and Opera 12. Does not work in IE 11 but without
error.
We should test if icons still work in many contexts such as placing a
shortcut on the desktop of various platforms.

3 files changed, 35 insertions, 2 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 901b17d92..33cb810c4 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -2,8 +2,9 @@
 
 ## 2014-08-xx FreshRSS 0.7.4
 
-* New options
+* UI
 	* Hide categories/feeds with unread articles when showing only unread articles
+	* Dynamic favicon showing the number of unread articles
 * Statistics
 	* New page with article repartition
 	* Improvements
diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml
index d2e1e4b3b..96a88d245 100644
--- a/app/layout/layout.phtml
+++ b/app/layout/layout.phtml
@@ -16,7 +16,7 @@
 ?>
 		<link id="prefetch" rel="next prefetch" href="<?php echo Minz_Url::display(array('c' => Minz_Request::controllerName(), 'a' => Minz_Request::actionName(), 'params' => $params)); ?>" />
 <?php } ?>
-		<link rel="shortcut icon" type="image/x-icon" sizes="16x16 64x64" href="<?php echo Minz_Url::display('/favicon.ico'); ?>" />
+		<link rel="shortcut icon" id="favicon" type="image/x-icon" sizes="16x16 64x64" href="<?php echo Minz_Url::display('/favicon.ico'); ?>" />
 		<link rel="icon msapplication-TileImage apple-touch-icon" type="image/png" sizes="256x256" href="<?php echo Minz_Url::display('/themes/icons/favicon-256.png'); ?>" />
 <?php
 	if (isset($this->url)) {
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 5d7d60a35..6876a9995 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -160,6 +160,7 @@ function mark_read(active, only_not_read) {
 		$r.find('.icon').replaceWith(data.icon);
 
 		incUnreadsFeed(active, feed_id, inc);
+		faviconNbUnread();
 
 		pending_feeds.splice(index_pending, 1);
 	});
@@ -793,6 +794,7 @@ function refreshUnreads() {
 				$('#new-article').show();
 			};
 		});
+		faviconNbUnread();
 	});
 }
 
@@ -1065,6 +1067,35 @@ function init_password_observers() {
 	});
 }
 
+function faviconNbUnread(n) {
+	if (typeof n === 'undefined') {
+		n = parseInt($('.category.all>a').attr('data-unread'));
+	}
+	//http://remysharp.com/2010/08/24/dynamic-favicons/
+	var canvas = document.createElement('canvas'),
+		link = document.getElementById('favicon').cloneNode(true);
+	if (canvas.getContext && link) {
+		canvas.height = canvas.width = 16;
+		var img = document.createElement('img');
+		img.onload = function () {
+			var ctx = canvas.getContext('2d'),
+				text = n < 100 ? n : '99+';
+			ctx.drawImage(this, 0, 0);
+			if (n > 0) {
+				ctx.font = 'bold 9px "Arial", sans-serif';
+				ctx.fillStyle = 'rgba(255, 255, 255, 127)';
+				ctx.fillRect(0, 8, 1 + ctx.measureText(text).width, 7);
+				ctx.fillStyle = '#F00';
+				ctx.fillText(text, 0, 16);
+			}
+			link.href = canvas.toDataURL('image/png');
+			$('link[rel~=icon]').remove();
+			document.head.appendChild(link);
+		};
+		img.src = '../favicon.ico';
+	}
+}
+
 function init_all() {
 	if (!(window.$ && window.url_freshrss && ((!full_lazyload) || $.fn.lazyload))) {
 		if (window.console) {
@@ -1092,6 +1123,7 @@ function init_all() {
 		init_stream($stream);
 		init_nav_entries();
 		init_shortcuts();
+		faviconNbUnread();
 		init_print_action();
 		window.setInterval(refreshUnreads, 120000);
 	} else {