favicon: added favicon notifications

grunt_config.json

@@ -37,6 +37,7 @@
         "<%= dirs.js.src %>/mousetrap.js",
         "<%= dirs.js.src %>/moment.js",
         "<%= dirs.js.node_modules %>/appenlight-client/appenlight-client.min.js",
+        "<%= dirs.js.node_modules %>/favico.js/favico-0.3.10.min.js",
         "<%= dirs.js.src %>/i18n_utils.js",
         "<%= dirs.js.src %>/deform.js",
         "<%= dirs.js.src %>/plugins/jquery.pjax.js",

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html

@@ -1,8 +1,11 @@
 <link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
 <link rel="import" href="../channelstream-connection/channelstream-connection.html">
+<link rel="import" href="../rhodecode-toast/rhodecode-toast.html">
+<link rel="import" href="../rhodecode-favicon/rhodecode-favicon.html">
 
 <dom-module id="rhodecode-app">
     <template>
+        <rhodecode-favicon></rhodecode-favicon>
         <rhodecode-toast id="notifications"></rhodecode-toast>
         <channelstream-connection
                 id="channelstream-connection"

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js

@@ -6,6 +6,7 @@ var rhodeCodeApp = Polymer({
     attached: function () {
         ccLog.debug('rhodeCodeApp created');
         $.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
+        $.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this));
         $.Topic('/connection_controller/subscribe').subscribe(
             this.subscribeToChannelTopic.bind(this));
         // this event can be used to coordinate plugins to do their
@@ -27,6 +28,10 @@ var rhodeCodeApp = Polymer({
         this.$['notifications'].handleNotification(data);
     },
 
+    faviconUpdate: function (data) {
+        this.$$('rhodecode-favicon').counter = data.count;
+    },
+
     /** opens connection to ws server */
     kickoffChannelstreamPlugin: function (data) {
         ccLog.debug('kickoffChannelstreamPlugin');

rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.html

@@ -0,0 +1,7 @@
+<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
+
+<dom-module id="rhodecode-favicon">
+    <template>
+    </template>
+    <script src="rhodecode-favicon.js"></script>
+</dom-module>

rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js

@@ -0,0 +1,20 @@
+Polymer({
+    is: 'rhodecode-favicon',
+    properties: {
+        favicon: Object,
+        counter: {
+            type: Number,
+            observer: '_handleCounter'
+        }
+    },
+
+    ready: function () {
+        this.favicon = new Favico({
+            type: 'rectangle',
+            animation: 'none'
+        });
+    },
+    _handleCounter: function (newVal, oldVal) {
+        this.favicon.badge(this.counter);
+    }
+});

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js

@@ -13,9 +13,11 @@ Polymer({
     ],
     _changedToasts: function(newValue, oldValue){
         this.$['p-toast'].notifyResize();
+        $.Topic('/favicon/update').publish({count: this.toasts.length});
     },
     dismissNotifications: function(){
         this.$['p-toast'].close();
+        $.Topic('/favicon/update').publish({count: 0});
     },
     handleClosed: function(){
         this.splice('toasts', 0);

rhodecode/public/js/topics_list.txt

@@ -6,3 +6,4 @@
 /connection_controller/subscribe - subscribes user to new channels
 /connection_controller/presence - receives presence change messages
 /connection_controller/channel_update - receives channel states
+/favicon/update - notify state change for favicon