Nemcio/meanTorrent
1
0
Fork 0
mirror of https://github.com/taobataoma/meanTorrent.git synced 2026-01-30 11:09:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

add chat message @user function

Browse Source
This commit is contained in:
OldHawk
2017-05-11 17:00:03 +08:00
parent 49970167b0
commit bb44ea3aa0
3 changed files with 89 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
modules/chat/client/controllers/chat.client.controller.js
View File

@@ -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');
}
}
}());

9
modules/chat/client/less/chat.less
View File

@@ -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 */

13
modules/chat/client/views/chat.client.view.html
View File

@@ -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>