From b3c2e2913004aa777c8447ba448a1c2128d8d4b4 Mon Sep 17 00:00:00 2001
From: Anton Sulaev <a.sulaev@corp.mail.ru>
Date: Mon, 23 Jul 2018 19:04:59 +0300
Subject: [PATCH] chat: add blinking title on new message

---
 static/html/joinchat.html   |  1 +
 static/js/chat/chat.js      |  3 +++
 static/js/lib/blinktitle.js | 47 +++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100755 static/js/lib/blinktitle.js

diff --git a/static/html/joinchat.html b/static/html/joinchat.html
index bd6c85f..d91ed2b 100644
--- a/static/html/joinchat.html
+++ b/static/html/joinchat.html
@@ -54,6 +54,7 @@
 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/md5.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
+<script src="/js/lib/blinktitle.js"></script>
 <script src="/js/chat/chat.js"></script>
 </body>
 </html>
diff --git a/static/js/chat/chat.js b/static/js/chat/chat.js
index c72447b..7d42b06 100644
--- a/static/js/chat/chat.js
+++ b/static/js/chat/chat.js
@@ -46,6 +46,9 @@ new Vue({
     },
     methods: {
         addmsg: function(msg){
+            if (document.hidden) {
+                blinkTitle("TechnoChat", "New message!", 1200, true);
+            }
             this.chatContent += '<div class="chip" >'
                 + '<img src="' + this.roboHash(msg.username) + '">' // Avatar
                 + msg.username
diff --git a/static/js/lib/blinktitle.js b/static/js/lib/blinktitle.js
new file mode 100755
index 0000000..23e063c
--- /dev/null
+++ b/static/js/lib/blinktitle.js
@@ -0,0 +1,47 @@
+var hold = "";
+
+function blinkTitle(msg1, msg2, delay, isFocus, timeout) {
+    if (isFocus == null) {
+        isFocus = false;
+    }
+    if (timeout == null) {
+        timeout = false;
+    }
+    if(timeout){
+        setTimeout(blinkTitleStop, timeout);
+    }
+    document.title = msg1;
+    if (isFocus == false) {
+        hold = window.setInterval(function() {
+            if (document.title == msg1) {
+                document.title = msg2;
+            } else {
+                document.title = msg1;
+            }
+        }, delay);
+    }
+    if (isFocus == true) {
+        var onPage = false;
+        window.onfocus = function() {
+            onPage = true;
+        };
+        // window.onblur = function() {
+        //     onPage = false;
+        // };
+        hold = window.setInterval(function() {
+            if (onPage == false) {
+                if (document.title == msg1) {
+                    document.title = msg2;
+                } else {
+                    document.title = msg1;
+                }
+            } else {
+                document.title = msg1
+            }
+        }, delay);
+    }
+}
+
+function blinkTitleStop() {
+    clearInterval(hold);
+}