From b788ab58cf4e1f26b1015d6fa74dd28f45e95dca Mon Sep 17 00:00:00 2001
From: Marcin Lulek <mlulek@rhodecode.com>
Date: Thu, 29 Sep 2016 14:51:05 +0200
Subject: [PATCH] favicon: added favicon notifications

---
 grunt_config.json                             |  1 +
 .../rhodecode-app/rhodecode-app.html          |  3 +++
 .../components/rhodecode-app/rhodecode-app.js |  5 +++++
 .../rhodecode-favicon/rhodecode-favicon.html  |  7 +++++++
 .../rhodecode-favicon/rhodecode-favicon.js    | 20 +++++++++++++++++++
 .../rhodecode-toast/rhodecode-toast.js        |  2 ++
 rhodecode/public/js/topics_list.txt           |  1 +
 7 files changed, 39 insertions(+)
 create mode 100644 rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.html
 create mode 100644 rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js

diff --git a/grunt_config.json b/grunt_config.json
index e089bae5..89f75c5f 100644
--- a/grunt_config.json
+++ b/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",
diff --git a/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html b/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html
index 29c980a3..425ce38a 100644
--- a/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html
+++ b/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"
diff --git a/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js b/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js
index 52ba1d55..1b8d6df2 100644
--- a/rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js
+++ b/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');
diff --git a/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.html b/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.html
new file mode 100644
index 00000000..0161c8ce
--- /dev/null
+++ b/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>
diff --git a/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js b/rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.js
new file mode 100644
index 00000000..7390620a
--- /dev/null
+++ b/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);
+    }
+});
diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
index d468b3d8..ce630091 100644
--- a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
+++ b/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);
diff --git a/rhodecode/public/js/topics_list.txt b/rhodecode/public/js/topics_list.txt
index 641d7dbd..924f91bc 100644
--- a/rhodecode/public/js/topics_list.txt
+++ b/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