Skip to content

o2oa
o2oa

浙江兰德纵横网络技术股份有限公司 / o2oa

通知 337
Star 10
Fork 6
o2oa
o2oa

体验新版 GitCode，发现更多精彩内容 >>

提交 80fe2455 编写于 作者: F fancy
浏览文件
操作

表情聊天

上级 43f3ab27
隐藏空白更改
内联 并排
Showing with 221 addition and 26 deletion
o2web/source/o2_core/o2/xDesktop/WebSocket.js
浏览文件 @ 80fe2455
......@@ -307,9 +307,13 @@ MWF.xDesktop.WebSocket = new Class({
var imBody = data.body;
var jsonBody = imBody.body;
var conversationId = imBody.conversationId;
//todo 目前只有一种text类型
var body = JSON.parse(jsonBody);
var content = "<font style='color: #333; font-weight: bold'>"+data.title+"</font>"+body.body;
var msgBody = body.body; //默认text 文本消息
if (body.type && body.type == "emoji") { //表情 消息
msgBody = "[表情]";
}
var content = "<font style='color: #333; font-weight: bold'>"+data.title+"</font>"+msgBody;
var msg = {
"subject": MWF.LP.desktop.messsage.customMessageTitle,
"content": content
......
o2web/source/x_component_IMV2/$Main/default/chat.html
浏览文件 @ 80fe2455
......@@ -8,7 +8,7 @@
<!-- 聊天操作 -->
<div class="chat-bottom-area" data-o2-element="chatBottomAreaNode">
<div class="chat-bottom-area-tool" data-o2-element="chatBottomAreaToolNode">
<img src="/x_component_IMV2/$Main/default/icons/icon-emoji.png" data-o2-element="chatBottomAreaToolEmojiNode" />
<img src="/x_component_IMV2/$Main/default/icons/icon-emoji.png" data-o2-element="chatBottomAreaToolEmojiNode" data-o2-events="click:showEmojiBox"/>
</div>
<div class="chat-bottom-area-textarea">
<textarea data-o2-element="chatBottomAreaTextareaNode" placeholder="输入消息内容"></textarea>
......
o2web/source/x_component_IMV2/$Main/default/chattest.html
浏览文件 @ 80fe2455
......@@ -46,7 +46,6 @@
bottom: 0px;
background: #ffffff;
width: 100%;
z-index: 100;
}
.chat-bottom-area-tool {
......@@ -325,6 +324,7 @@
<div class="chat-bottom-area-tool">
<img src="./icons/icon-emoji.png" />
</div>
<div class="chat-bottom-area-textarea"><textarea></textarea></div>
<div class="chat-bottom-area-send-space">
<div class="chat-bottom-area-send">
......@@ -332,6 +332,92 @@
</div>
</div>
</div>
<div style="position: absolute;width:630px;height: 260px;left: 5px;bottom: 155px;background-color: #ffffff;border: 1px solid #F1F1F1; padding-top: 8px;border-radius: 8px; box-shadow: 5px 5px #1d1d1d10;z-index: 100;">
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left; margin: 5px;" />
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
<img src="./icons/icon-emoji.png" style="width: 32px;height: 32px; float: left;margin: 5px;"/>
</div>
</body>
</html>
\ No newline at end of file
o2web/source/x_component_IMV2/$Main/default/style.css
浏览文件 @ 80fe2455
......@@ -163,7 +163,25 @@
/* 聊天界面 */
.chat-emoji-box {
position: absolute;
width:630px;
height: 260px;
left: 5px;
bottom: 155px;
background-color: #ffffff;
border: 1px solid #F1F1F1;
padding-top: 8px;
border-radius: 8px;
box-shadow: 5px 5px #1d1d1d10;
z-index: 100;
}
.chat-emoji-img {
width: 32px;
height: 32px;
float: left;
margin: 5px;
}
.chat-title {
height: 30px;
text-align: center;
......@@ -328,7 +346,11 @@
right: -22px;
top: 3px;
}
.chat-content-emoji {
width: 32px;
height: 32px;
margin: 5px;
}
.chat-notice {
clear: both;
font-size: 70%;
......
o2web/source/x_component_IMV2/Main.js
浏览文件 @ 80fe2455
......@@ -23,9 +23,17 @@ MWF.xApplication.IMV2.Main = new Class({
this.conversationNodeItemList = [];
this.conversationId = this.options.conversationId || "";
this.messageList = [];
this.emojiList = [];
//添加87个表情
for (var i=1; i < 88; i++) {
var emoji = {
"key" : i > 9 ? "["+i+"]" : "[0"+i+"]",
"path" : i > 9 ? "/x_component_IMV2/$Main/emotions/im_emotion_"+i+".png" : "/x_component_IMV2/$Main/emotions/im_emotion_0"+i+".png",
};
this.emojiList.push(emoji);
}
},
onQueryClose: function(){
console.log("关闭聊天窗口。。。。");
this.closeListening()
},
loadApplication: function (callback) {
......@@ -78,19 +86,16 @@ MWF.xApplication.IMV2.Main = new Class({
this.tapConv(chat);
}
}
console.log("结束");
},
//分页获取会话的消息列表数据
loadMsgListByConvId: function (page, size, convId) {
var data = { "conversationId": convId };
o2.Actions.load("x_message_assemble_communicate").ImAction.msgListByPaging(page, size, data, function (json) {
var list = json.data;
for (var i = 0; i < list.length; i++) {
this.messageList.push(list[i]);
this._buildMsgNode(list[i], true);
}
console.log("聊天信息添加结束！");
}.bind(this), function (error) {
console.log(error);
}.bind(this), false);
......@@ -106,7 +111,6 @@ MWF.xApplication.IMV2.Main = new Class({
//获取聊天信息
this.messageList = [];
this.loadMsgListByConvId(1, 20, conv.id);
console.log("开始滚动！！！");
var scrollFx = new Fx.Scroll(this.chatContentNode);
scrollFx.toBottom();
}.bind(this));
......@@ -114,17 +118,46 @@ MWF.xApplication.IMV2.Main = new Class({
//点击发送消息
sendMsg: function () {
var text = this.chatBottomAreaTextareaNode.value;
console.log(text);
if (text) {
console.log("发送文本消息");
this.chatBottomAreaTextareaNode.value = "";
this._newAndSendTextMsg(text);
this._newAndSendTextMsg(text, "text");
} else {
console.log("没有消息内容！");
}
},
//点击表情按钮
showEmojiBox: function() {
if(!this.emojiBoxNode) {
this.emojiBoxNode = new Element("div", { "class": "chat-emoji-box" }).inject(this.chatNode);
var _self = this;
for(var i=0; i<this.emojiList.length; i++) {
var emoji = this.emojiList[i];
var emojiNode = new Element("img", {"src": emoji.path, "class": "chat-emoji-img"}).inject(this.emojiBoxNode);
emojiNode.addEvents({
"mousedown": function (ev) {
_self.sendEmojiMsg(this.emoji);
_self.hideEmojiBox();
}.bind({emoji: emoji})
});
}
}
this.emojiBoxNode.setStyle("display", "block");
this.hideFun = this.hideEmojiBox.bind(this);
document.body.addEvent("mousedown", this.hideFun);
},
hideEmojiBox: function() {
//关闭emojiBoxNode
this.emojiBoxNode.setStyle("display", "none");
document.body.removeEvent("mousedown", this.hideFun);
},
//发送表情消息
sendEmojiMsg: function(emoji) {
console.log("发送表情消息");
this._newAndSendTextMsg(emoji.key, "emoji");
},
//点击创建单聊按钮
tapCreateSingleConv: function () {
console.log("click tapCreateSingleConv................");
var form = new MWF.xApplication.IMV2.SingleForm(this, {}, {}, { app: this.app });
form.create()
},
......@@ -154,7 +187,6 @@ MWF.xApplication.IMV2.Main = new Class({
_self.conversationNodeItemList.push(itemNode);
_self.tapConv(newConv);
}
console.log("创建会话 结束。。。。。");
}.bind(this), function (error) {
console.log(error);
}.bind(this))
......@@ -175,10 +207,10 @@ MWF.xApplication.IMV2.Main = new Class({
}
},
//创建文本消息 并发送
_newAndSendTextMsg: function (text) {
_newAndSendTextMsg: function (text, type) {
var distinguishedName = layout.session.user.distinguishedName;
var time = this._currentTime();
var body = { "body": text };
var body = { "body": text, "type": type };
var bodyJson = JSON.stringify(body);
var uuid = (new MWF.widget.UUID).toString();
var textMessage = {
......@@ -215,7 +247,6 @@ MWF.xApplication.IMV2.Main = new Class({
o2.Actions.load("x_message_assemble_communicate").ImAction.myConversationList(function (json) {
if (json.data && json.data instanceof Array) {
var newConList = json.data;
console.log(newConList);
for (var j = 0; j < newConList.length; j++) {
var nCv = newConList[j];
var isNew = true;
......@@ -300,7 +331,18 @@ MWF.xApplication.IMV2.Main = new Class({
var lastNode = new Element("div").inject(receiverBodyNode);
var lastFirstNode = new Element("div", { "class": "chat-left_triangle" }).inject(lastNode);
//text
var lastSecNode = new Element("span", { "text": msgBody.body }).inject(lastNode);
if (msgBody.type == "emoji") { // 表情
var img = "";
for (var i=0; i< this.emojiList.length; i++) {
if (msgBody.body == this.emojiList[i].key) {
img = this.emojiList[i].path;
}
}
new Element("img", {"src": img, "class": "chat-content-emoji"}).inject(lastNode);
}else {//text
new Element("span", { "text": msgBody.body }).inject(lastNode);
}
if(!isTop) {
var scrollFx = new Fx.Scroll(this.chatContentNode);
scrollFx.toBottom();
......@@ -324,8 +366,19 @@ MWF.xApplication.IMV2.Main = new Class({
var nameNode = new Element("div", { "text": name }).inject(receiverBodyNode);
var lastNode = new Element("div").inject(receiverBodyNode);
var lastFirstNode = new Element("div", { "class": "chat-right_triangle" }).inject(lastNode);
//text
var lastSecNode = new Element("span", { "text": msgBody.body }).inject(lastNode);
if (msgBody.type == "emoji") { // 表情
var img = "";
for (var i=0; i< this.emojiList.length; i++) {
if (msgBody.body == this.emojiList[i].key) {
img = this.emojiList[i].path;
}
}
new Element("img", {"src": img, "class": "chat-content-emoji"}).inject(lastNode);
}else {//text
new Element("span", { "text": msgBody.body }).inject(lastNode);
}
if(!isTop) {
var scrollFx = new Fx.Scroll(this.chatContentNode);
scrollFx.toBottom();
......@@ -433,7 +486,8 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
"avatarUrl": avatarDefault,
"title": this.data.title,
"time": "",
"lastMessage": ""
"lastMessage": "",
"lastMessageType": "text"
};
var distinguishedName = layout.session.user.distinguishedName;
if (this.data.type && this.data.type === "single") {
......@@ -461,6 +515,9 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
var time = this.main._friendlyTime(o2.common.toDate(this.data.lastMessage.createTime));
convData.time = time;
}
if (mBody.type) {
convData.lastMessageType = mBody.type;
}
}
this.node = new Element("div", { "class": "item" }).inject(this.container);
this.nodeBaseItem = new Element("div", { "class": "base" }).inject(this.node);
......@@ -470,7 +527,20 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
var bodyUpNode = new Element("div", { "class": "body_up" }).inject(bodyNode);
new Element("div", { "class": "body_title", "text": convData.title }).inject(bodyUpNode);
this.messageTimeNode = new Element("div", { "class": "body_time", "text": convData.time }).inject(bodyUpNode);
this.lastMessageNode = new Element("div", { "class": "body_down", "text": convData.lastMessage }).inject(bodyNode);
if (convData.lastMessageType == "emoji") {
this.lastMessageNode = new Element("div", { "class": "body_down"}).inject(bodyNode);
var imgPath = "";
for(var i = 0; i < this.main.emojiList.length ; i++) {
var emoji = this.main.emojiList[i];
if (emoji.key == convData.lastMessage) {
imgPath = emoji.path;
}
}
new Element("img", {"src": imgPath, "style":"width: 16px;height: 16px;"}).inject(this.lastMessageNode);
}else {
this.lastMessageNode = new Element("div", { "class": "body_down", "text": convData.lastMessage }).inject(bodyNode);
}
var _self = this;
this.node.addEvents({
"click": function () {
......@@ -493,9 +563,23 @@ MWF.xApplication.IMV2.ConversationItem = new Class({
refreshLastMsg: function(lastMessage) {
//目前是text 类型的消息
var jsonbody = lastMessage.body;
var body = JSON.parse(jsonbody);//todo 目前只有一种text类型
var body = JSON.parse(jsonbody);
if(this.lastMessageNode) {
this.lastMessageNode.set('text', body.body);
if (body.type == "emoji") { //表情 消息
var imgPath = "";
for(var i = 0; i < this.main.emojiList.length ; i++) {
var emoji = this.main.emojiList[i];
if (emoji.key == body.body) {
imgPath = emoji.path;
}
}
this.lastMessageNode.empty();
new Element("img", {"src": imgPath, "style":"width: 16px;height: 16px;"}).inject(this.lastMessageNode);
}else { //文本消息
this.lastMessageNode.empty();
this.lastMessageNode.set('text', body.body);
}
}
var time = this.main._friendlyTime(o2.common.toDate(lastMessage.createTime));
if(this.messageTimeNode) {
......@@ -577,7 +661,6 @@ MWF.xApplication.IMV2.SingleForm = new Class({
save: function () {
var data = this.form.getResult(true, null, true, false, true);
if (data) {
console.log(data);
this.app.newConversation(data.person, "single");
this.close();
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或