chat: add blinking title on new message

gibsn · Jul 26, 2018 · cb25ac8 · cb25ac8
1 parent 603ad62
commit cb25ac8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git 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/PageTitleNotification.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
@@ -5,6 +5,12 @@ const EventConnInitOk = 0;
 const EventConnInitNoSuchChat = 1;
 const EventConnInitMaxUsrsReached = 2;
 
+const NewMsgTitle = "New message!";
+
+window.onfocus = function() {
+    pageTitleNotification.off();
+}
+
 new Vue({
     el: '#app',
 
@@ -16,6 +22,8 @@ new Vue({
         okconnected: true, // True if email and username have been filled in
         fail: false,
         name: '',
+        onPage: false,
+        newMessagesNum: 0,
     },
     created: function() {
         var self = this;
@@ -46,6 +54,9 @@ new Vue({
     },
     methods: {
         addmsg: function(msg){
+            if (document.hidden) {
+                pageTitleNotification.on(NewMsgTitle);
+            }
             this.chatContent += '<div class="chip" >'
                 + '<img src="' + this.roboHash(msg.username) + '">' // Avatar
                 + msg.username
@@ -80,4 +91,4 @@ function getParameterByName(name, url) {
     if (!results) return null;
     if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, " "));
-}
+}
diff --git a/static/js/lib/PageTitleNotification.js b/static/js/lib/PageTitleNotification.js