From bb44ea3aa0f2cebf746b8f785bed8a0952872890 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Thu, 11 May 2017 17:00:03 +0800
Subject: [PATCH] add chat message @user function

---
 .../controllers/chat.client.controller.js     | 92 ++++++++++++++++---
 modules/chat/client/less/chat.less            |  9 +-
 .../chat/client/views/chat.client.view.html   | 13 +--
 3 files changed, 89 insertions(+), 25 deletions(-)

diff --git a/modules/chat/client/controllers/chat.client.controller.js b/modules/chat/client/controllers/chat.client.controller.js
index 61594595..3b7bb2a0 100644
--- a/modules/chat/client/controllers/chat.client.controller.js
+++ b/modules/chat/client/controllers/chat.client.controller.js
@@ -5,9 +5,9 @@
     .module('chat')
     .controller('ChatController', ChatController);
 
-  ChatController.$inject = ['$scope', '$state', '$timeout', 'Authentication', 'Socket', '$translate'];
+  ChatController.$inject = ['$scope', '$state', '$timeout', 'Authentication', 'Socket', '$translate', '$sanitize', '$sce'];
 
-  function ChatController($scope, $state, $timeout, Authentication, Socket, $translate) {
+  function ChatController($scope, $state, $timeout, Authentication, Socket, $translate, $sanitize, $sce) {
     var vm = this;
 
     vm.user = Authentication.user;
@@ -91,7 +91,7 @@
     vm.sendMessage = function () {
       // Create a new message object
       var message = {
-        text: vm.messageText
+        text: sanitizeHTML(vm.messageText)
       };
 
       // Emit a 'chatMessage' message event
@@ -101,6 +101,13 @@
       vm.messageText = '';
     };
 
+    function sanitizeHTML(msg, white, black) {
+      if (!white) white = 'b|i|p|u|img';//allowed tags
+      if (!black) black = 'script|object|embed';//complete remove tags
+      var e = new RegExp('(<(' + black + ')[^>]*>.*</\\2>|(?!<[/]?(' + white + ')(\\s[^<]*>|[/]>|>))<[^<>]*>|(?!<[^<>\\s]+)\\s[^</>]+(?=[/>]))', 'gi');
+      return msg.replace(e, '');
+    }
+
     /**
      * initChatView
      * init the view height
@@ -141,32 +148,32 @@
 
     /**
      * onUsersJoin
-     * @param u
+     * @param uobj
      */
-    vm.onUsersJoin = function (u) {
-      vm.users.push(u);
+    vm.onUsersJoin = function (uobj) {
+      vm.users.push(uobj);
 
-      u.text = $translate.instant('CHAT_USER_JOIN');
-      u.text = '*** ' + u.displayName + ' ' + u.text;
-      vm.messages.push(u);
+      uobj.text = $translate.instant('CHAT_USER_JOIN');
+      uobj.text = '*** [@' + uobj.displayName + '] ' + uobj.text;
+      vm.messages.push(uobj);
     };
 
     /**
      * onUsersQuit
-     * @param u
+     * @param uobj
      */
-    vm.onUsersQuit = function (u) {
+    vm.onUsersQuit = function (uobj) {
       var index = -1;
       angular.forEach(vm.users, function (i, x) {
-        if (i.username === u.username) {
+        if (i.username === uobj.username) {
           index = x;
         }
       });
       if (index >= 0) {
         vm.users.splice(index, 1);
-        u.text = $translate.instant('CHAT_USER_QUIT');
-        u.text = '*** ' + u.displayName + ' ' + u.text;
-        vm.messages.push(u);
+        uobj.text = $translate.instant('CHAT_USER_QUIT');
+        uobj.text = '*** [@' + uobj.displayName + '] ' + uobj.text;
+        vm.messages.push(uobj);
       }
     };
 
@@ -182,5 +189,60 @@
         vm.scrollAtBottom = false;
       }
     };
+
+    /**
+     * getMessageText
+     * @param msg
+     * @returns {*}
+     */
+    vm.getMessageText = function (msg) {
+      var newmsg = msg.text;
+
+      var matches = newmsg.match(/\[@(.*?)\]/g);
+      angular.forEach(matches, function (m) {
+        var atu = m.substr(1, m.length - 2);
+        var atulink = makeAtUserLink(atu);
+        newmsg = newmsg.replace(m, atulink);
+      });
+
+      return newmsg || '&nbsp;';
+    };
+
+    /**
+     * makeAtUserLink
+     * @param atu
+     * @returns {string}
+     */
+    function makeAtUserLink(atu) {
+      var s = '';
+      s += '<a href="#" ng-click="vm.atuClicked($event)" title="' + atu + '">';
+      s += atu;
+      s += '</a>';
+      return s;
+    }
+
+    /**
+     * at user link Clicked
+     * @param evt
+     */
+    vm.atuClicked = function (evt) {
+      addAtUserToInput(' [' + evt.currentTarget.innerText + '] ');
+    };
+
+    vm.onUserListItemClicked = function (uitem) {
+      addAtUserToInput(' [@' + uitem.displayName + '] ');
+    };
+
+    vm.onUserImgClicked = function (uname) {
+      addAtUserToInput(' [@' + uname + '] ');
+    };
+    /**
+     * addAtUserToInput
+     * @param atu
+     */
+    function addAtUserToInput(atu) {
+      vm.messageText += atu;
+      angular.element('#messageText').trigger('focus');
+    }
   }
 }());
diff --git a/modules/chat/client/less/chat.less b/modules/chat/client/less/chat.less
index 5595d3bd..e2621bc5 100644
--- a/modules/chat/client/less/chat.less
+++ b/modules/chat/client/less/chat.less
@@ -116,7 +116,7 @@
                         top: 6px;
                     }
                     .chat-message-body {
-                        padding: 6px 10px;
+                        padding: 6px;
                         background-color: lighten(@chat-message-background-default, 2%);
                         border-radius: 3px;
                     }
@@ -166,7 +166,8 @@
                         top: 6px;
                     }
                     .chat-message-body {
-                        padding: 6px 10px;
+                        text-align: left;
+                        padding: 6px;
                         background-color: @chat-message-me-background;
                         border-radius: 3px;
                     }
@@ -230,9 +231,9 @@
         word-wrap: break-word;
         .user-item-wrapper {
             padding-left: 35px;
-            margin: 6px 10px;
+            margin: 6px 6px;
             transition-property: transform, opacity;
-            transition-duration: .6s;
+            transition-duration: .5s;
             transition-timing-function: ease;
             &:hover {
                 /* csslint ignore:start */
diff --git a/modules/chat/client/views/chat.client.view.html b/modules/chat/client/views/chat.client.view.html
index 270324ba..06ff1120 100644
--- a/modules/chat/client/views/chat.client.view.html
+++ b/modules/chat/client/views/chat.client.view.html
@@ -16,13 +16,13 @@
                                 </div>
                             </div>
                             <div ng-class="{'chat-wrapper-me': message.username == vm.user.username, 'chat-wrapper': message.username != vm.user.username}">
-                                <a class="chat-avatar" ng-click="">
-                                    <img title="{{message.displayName}}" ng-src="/{{message.profileImageURL}}">
+                                <a class="chat-avatar" ng-click="vm.onUserImgClicked(message.displayName);">
+                                    <img title="@{{message.displayName}}" ng-src="/{{message.profileImageURL}}">
                                 </a>
 
                                 <div class="chat-message-item">
                                     <div class="chat-message-body">
-                                        <div class="chat-message-body-text" ng-bind-html="message.text"></div>
+                                        <div class="chat-message-body-text" dynamic-html="vm.getMessageText(message);"></div>
                                     </div>
                                 </div>
                             </div>
@@ -47,14 +47,15 @@
         <div class="col-sm-3">
             <div class="chat-users">
                 <div class="user-title">
-                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span>{{'CHAT_USERS_LIST' | translate}}: ({{vm.users.length}})</span>
+                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span>{{'CHAT_USERS_LIST' | translate}}</span>
+                    <span class="pull-right">{{vm.users.length}}</span>
                 </div>
 
                 <div class="user-body">
                     <ul class="list-unstyled">
                         <li ng-repeat="u in vm.users">
-                            <div class="user-item-wrapper">
-                                <a class="user-item-avatar" ng-click="">
+                            <div class="user-item-wrapper" ng-click="vm.onUserListItemClicked(u);">
+                                <a class="user-item-avatar">
                                     <img title="{{u.displayName}}" ng-src="/{{u.profileImageURL}}">
                                 </a>