chat: add blinking title on new message

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>

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

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);
+}