/*
|
|
@Name: layui WebIM 1.0.0
|
@Author：贤心
|
@Date: 2014-04-25
|
@Blog: http://sentsin.com
|
|
*/
|
$(document).ready(function(){
|
|
|
var config = {
|
msgurl: url+'/iim/mailBox/list',
|
chatlogurl: url+'/iim/chatHistory?userid1='+currentId+"&userid2=",
|
aniTime: 200,
|
right: -232,
|
api: {
|
friend: url+'/iim/contact/friend', //好友列表接口
|
group: url+'/iim/contact/group', //群组列表接口
|
chatlog: url+'/iim/contact/chatLog', //聊天记录接口
|
groups: url+'/iim/contact/groups', //群组成员接口
|
sendurl: '' //发送消息接口
|
},
|
user: { //当前用户信息
|
id:currentId,
|
name: currentName,
|
face: currentFace
|
},
|
|
//自动回复内置文案，也可动态读取数据库配置
|
autoReplay: [
|
'您好，我现在有事不在，一会再和您联系。',
|
'你没发错吧？',
|
'洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！',
|
'你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。',
|
'我正在拉磨，没法招呼您，因为我们家毛驴去动物保护协会把我告了，说我剥夺它休产假的权利。',
|
'<（@￣︶￣@）>',
|
'你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
|
'主人正在开机自检，键盘鼠标看好机会出去凉快去了，我是他的电冰箱，我打字比较慢，你慢慢说，别急……',
|
'(*^__^*) 嘻嘻，是贤心吗？'
|
],
|
|
|
chating: {},
|
hosts: (function(){
|
var dk = location.href.match(/\:\d+/);
|
dk = dk ? dk[0] : '';
|
return 'http://' + document.domain + dk + '/';
|
})(),
|
json: function(url, data, callback, error){
|
return $.ajax({
|
type: 'POST',
|
url: url,
|
data: data,
|
dataType: 'json',
|
success: callback,
|
error: error
|
});
|
},
|
stopMP: function(e){
|
e ? e.stopPropagation() : e.cancelBubble = true;
|
}
|
}, dom = [$(window), $(document), $('html'), $('body')], xxim = {};
|
|
//主界面tab
|
xxim.tabs = function(index){
|
var node = xxim.node;
|
node.tabs.eq(index).addClass('xxim_tabnow').siblings().removeClass('xxim_tabnow');
|
node.list.eq(index).show().siblings('.xxim_list').hide();
|
if(node.list.eq(index).find('li').length === 0){
|
xxim.getDates(index);
|
}
|
};
|
|
//节点
|
xxim.renode = function(){
|
var node = xxim.node = {
|
tabs: $('#xxim_tabs>span'),
|
list: $('.xxim_list'),
|
online: $('.xxim_online'),
|
setonline: $('.xxim_setonline'),
|
onlinetex: $('#xxim_onlinetex'),
|
xximon: $('#xxim_on'),
|
layimFooter: $('#xxim_bottom'),
|
xximHide: $('#xxim_hide'),
|
xximSearch: $('#xxim_searchkey'),
|
searchMian: $('#xxim_searchmain'),
|
closeSearch: $('#xxim_closesearch'),
|
layimMin: $('#layim_min')
|
};
|
};
|
|
//主界面缩放
|
xxim.expend = function(){
|
var node = xxim.node;
|
if(xxim.layimNode.attr('state') !== '1'){
|
xxim.layimNode.stop().animate({right: config.right}, config.aniTime, function(){
|
node.xximon.addClass('xxim_off');
|
try{
|
localStorage.layimState = 1;
|
}catch(e){}
|
xxim.layimNode.attr({state: 1});
|
node.layimFooter.addClass('xxim_expend').stop().animate({marginLeft: config.right}, config.aniTime/2);
|
node.xximHide.addClass('xxim_show');
|
});
|
} else {
|
xxim.layimNode.stop().animate({right: 1}, config.aniTime, function(){
|
node.xximon.removeClass('xxim_off');
|
try{
|
localStorage.layimState = 2;
|
}catch(e){}
|
xxim.layimNode.removeAttr('state');
|
node.layimFooter.removeClass('xxim_expend');
|
node.xximHide.removeClass('xxim_show');
|
});
|
node.layimFooter.stop().animate({marginLeft: 0}, config.aniTime);
|
}
|
};
|
|
//初始化窗口格局
|
xxim.layinit = function(){
|
var node = xxim.node;
|
|
//主界面
|
try{
|
/*
|
if(!localStorage.layimState){
|
config.aniTime = 0;
|
localStorage.layimState = 1;
|
}
|
*/
|
if(localStorage.layimState === '1'){
|
xxim.layimNode.attr({state: 1}).css({right: config.right});
|
node.xximon.addClass('xxim_off');
|
node.layimFooter.addClass('xxim_expend').css({marginLeft: config.right});
|
node.xximHide.addClass('xxim_show');
|
}
|
}catch(e){
|
//layIM.msg(e.message, 5, -1);
|
}
|
};
|
|
//聊天窗口
|
xxim.popchat = function(param){
|
var node = xxim.node, log = {};
|
|
log.success = function(layero){
|
layIM.setMove();
|
|
xxim.chatbox = layero.find('#layim_chatbox');
|
log.chatlist = xxim.chatbox.find('.layim_chatmore>ul');
|
|
log.chatlist.html('<li data-id="'+ param.id +'" type="'+ param.type +'" id="layim_user'+ param.type + param.id +'"><span>'+ param.name +'</span><em>×</em></li>')
|
xxim.tabchat(param, xxim.chatbox);
|
|
//最小化聊天窗
|
xxim.chatbox.find('.layer_setmin').on('click', function(){
|
var indexs = layero.attr('times');
|
layero.hide();
|
node.layimMin.text(xxim.nowchat.name).show();
|
});
|
|
//关闭窗口
|
xxim.chatbox.find('.layim_close').on('click', function(){
|
var indexs = layero.attr('times');
|
layIM.close(indexs);
|
xxim.chatbox = null;
|
config.chating = {};
|
config.chatings = 0;
|
});
|
|
//关闭某个聊天
|
log.chatlist.on('mouseenter', 'li', function(){
|
$(this).find('em').show();
|
}).on('mouseleave', 'li', function(){
|
$(this).find('em').hide();
|
});
|
log.chatlist.on('click', 'li em', function(e){
|
var parents = $(this).parent(), dataType = parents.attr('type');
|
var dataId = parents.attr('data-id'), index = parents.index();
|
var chatlist = log.chatlist.find('li'), indexs;
|
|
config.stopMP(e);
|
|
delete config.chating[dataType + dataId];
|
config.chatings--;
|
|
parents.remove();
|
$('#layim_area'+ dataType + dataId).remove();
|
if(dataType === 'group'){
|
$('#layim_group'+ dataType + dataId).remove();
|
}
|
|
if(parents.hasClass('layim_chatnow')){
|
if(index === config.chatings){
|
indexs = index - 1;
|
} else {
|
indexs = index + 1;
|
}
|
xxim.tabchat(config.chating[chatlist.eq(indexs).attr('type') + chatlist.eq(indexs).attr('data-id')]);
|
}
|
|
if(log.chatlist.find('li').length === 1){
|
log.chatlist.parent().hide();
|
}
|
});
|
|
//聊天选项卡------------ 切换聊天人员
|
log.chatlist.on('click', 'li', function(){
|
var othis = $(this), dataType = othis.attr('type'), dataId = othis.attr('data-id');
|
var layimli = document.getElementById("layim_user"+dataType + dataId);
|
hightLight.stopTwinkle(layimli);
|
xxim.tabchat(config.chating[dataType + dataId]);
|
});
|
|
//发送热键切换
|
log.sendType = $('#layim_sendtype'), log.sendTypes = log.sendType.find('span');
|
$('#layim_enter').on('click', function(e){
|
config.stopMP(e);
|
log.sendType.show();
|
});
|
log.sendTypes.on('click', function(){
|
log.sendTypes.find('i').text('')
|
$(this).find('i').text('√');
|
});
|
|
xxim.transmit();
|
};
|
|
log.html = '<div class="layim_chatbox" id="layim_chatbox">'
|
+'<h6>'
|
+'<span class="layim_move"></span>'
|
+' <a class="layim_face" ><img src="'+ param.face +'" href="#"></a>'
|
+' <a class="layim_names">'+ param.name +'</a>'
|
+' <span class="layim_rightbtn">'
|
+' <i class="layer_setmin">—</i>'
|
+' <i class="layim_close">×</i>'
|
+' </span>'
|
+'</h6>'
|
+'<div class="layim_chatmore" id="layim_chatmore">'
|
+' <ul class="layim_chatlist"></ul>'
|
+'</div>'
|
+'<div class="layim_groups" id="layim_groups"></div>'
|
+'<div class="layim_chat">'
|
+' <div class="layim_chatarea" id="layim_chatarea">'
|
+' <ul class="layim_chatview layim_chatthis" id="layim_area'+ param.type + param.id +'"></ul>'
|
+' </div>'
|
+' <div class="layim_tool">'
|
+' <i class="layim_addface fa fa-meh-o" title="发送表情"></i>'
|
+' <a href="javascript:;"><i class="layim_addimage fa fa-picture-o" title="上传图片"></i></a>'
|
+' <a href="javascript:;"><i class="layim_addfile fa fa-paperclip" title="上传附件"></i></a>'
|
+' <a href="#" class="layim_seechatlog"><i class="fa fa-comment-o"></i>聊天记录</a>'
|
+' </div>'
|
+' <textarea class="layim_write" id="layim_write"></textarea>'
|
+' <div class="layim_send">'
|
+' <div class="layim_sendbtn" id="layim_sendbtn">发送<span class="layim_enter" id="layim_enter"><em class="layim_zero"></em></span></div>'
|
+' <div class="layim_sendtype" id="layim_sendtype">'
|
+' <span><i>√</i>按Enter键发送</span>'
|
+' <span><i></i>按Ctrl+Enter键发送</span>'
|
+' </div>'
|
+' </div>'
|
+'</div>'
|
+'</div>';
|
|
if(config.chatings < 1){
|
$.layIM({
|
type: 1,
|
border: [0],
|
title: false,
|
shade: [0],
|
area: ['620px', '493px'],
|
move: '.layim_chatbox .layim_move',
|
moveType: 1,
|
closeBtn: false,
|
offset: [(($(window).height() - 493)/2)+'px', ''],
|
page: {
|
html: log.html
|
}, success: function(layero){
|
log.success(layero);
|
}
|
})
|
} else {
|
log.chatmore = xxim.chatbox.find('#layim_chatmore');
|
log.chatarea = xxim.chatbox.find('#layim_chatarea');
|
|
log.chatmore.show();
|
|
log.chatmore.find('ul>li').removeClass('layim_chatnow');
|
log.chatmore.find('ul').append('<li data-id="'+ param.id +'" type="'+ param.type +'" id="layim_user'+ param.type + param.id +'" class="layim_chatnow"><span>'+ param.name +'</span><em>×</em></li>');
|
|
log.chatarea.find('.layim_chatview').removeClass('layim_chatthis');
|
log.chatarea.append('<ul class="layim_chatview layim_chatthis" id="layim_area'+ param.type + param.id +'"></ul>');
|
|
xxim.tabchat(param);
|
}
|
|
//群组
|
log.chatgroup = xxim.chatbox.find('#layim_groups');
|
if(param.type === 'group'){
|
log.chatgroup.find('ul').removeClass('layim_groupthis');
|
log.chatgroup.append('<ul class="layim_groupthis" id="layim_group'+ param.type + param.id +'"></ul>');
|
xxim.getGroups(param);
|
}
|
//点击群员切换聊天窗
|
log.chatgroup.on('click', 'ul>li', function(){
|
xxim.popchatbox($(this));
|
});
|
};
|
|
|
//定位到某个聊天队列
|
xxim.tabchat = function(param){
|
var node = xxim.node, log = {}, keys = param.type + param.id;
|
xxim.nowchat = param;
|
|
xxim.chatbox.find('#layim_user'+ keys).addClass('layim_chatnow').siblings().removeClass('layim_chatnow');
|
xxim.chatbox.find('#layim_area'+ keys).addClass('layim_chatthis').siblings().removeClass('layim_chatthis');
|
xxim.chatbox.find('#layim_group'+ keys).addClass('layim_groupthis').siblings().removeClass('layim_groupthis');
|
|
xxim.chatbox.find('.layim_face>img').attr('src', param.face);
|
xxim.chatbox.find('.layim_face, .layim_names').attr('onclick','top.openTab("'+ param.href +'","通讯录", false)');
|
xxim.chatbox.find('.layim_names').text(param.name);
|
|
//xxim.chatbox.find('.layim_seechatlog').attr('href', config.chatlogurl + param.id);
|
xxim.chatbox.find('.layim_seechatlog').attr('onclick', "popchatLog('"+config.chatlogurl+param.id+"')");
|
|
log.groups = xxim.chatbox.find('.layim_groups');
|
if(param.type === 'group'){
|
log.groups.show();
|
} else {
|
log.groups.hide();
|
}
|
|
$('#layim_write').focus();
|
|
};
|
|
|
//弹出聊天窗
|
xxim.popchatbox = function(othis){
|
var node = xxim.node, dataId = othis.attr('data-id'), param = {
|
id: dataId, //用户ID
|
type: othis.attr('type'),
|
name: othis.find('.xxim_onename').text(), //用户名
|
face: othis.find('.xxim_oneface').attr('src'), //用户头像
|
href: url+'/iim/contact/index?name=' + encodeURIComponent(othis.find('.xxim_onename').text().substring(0,othis.find('.xxim_onename').text().length-4)) //用户主页
|
}, key = param.type + dataId;
|
if(!config.chating[key]){
|
xxim.popchat(param);
|
config.chatings++;
|
} else {
|
xxim.tabchat(param);
|
}
|
config.chating[key] = param;
|
|
var chatbox = $('#layim_chatbox');
|
if(chatbox[0]){
|
node.layimMin.hide();
|
chatbox.parents('.xubox_layer').show();
|
}
|
|
};
|
|
|
|
//请求群员
|
xxim.getGroups = function(param){
|
var keys = param.type + param.id, str = '',
|
groupss = xxim.chatbox.find('#layim_group'+ keys);
|
groupss.addClass('loading');
|
config.json(config.api.groups, {}, function(datas){
|
if(datas.status === 1){
|
var ii = 0, lens = datas.data.length;
|
if(lens > 0){
|
for(; ii < lens; ii++){
|
str += '<li data-id="'+ datas.data[ii].id +'" type="one"><img src="'+ datas.data[ii].face +'" class="xxim_oneface"><span class="xxim_onename">'+ datas.data[ii].name +'</span></li>';
|
}
|
} else {
|
str = '<li class="layim_errors">没有群员</li>';
|
}
|
|
} else {
|
str = '<li class="layim_errors">'+ datas.msg +'</li>';
|
}
|
groupss.removeClass('loading');
|
groupss.html(str);
|
}, function(){
|
groupss.removeClass('loading');
|
groupss.html('<li class="layim_errors">请求异常</li>');
|
});
|
};
|
|
//发送函数;
|
//var node;
|
var log = {
|
node:'',
|
// node : xxim.node,
|
// node.sendbtn : $('#layim_sendbtn'),
|
// node.imwrite = $('#layim_write'),
|
//发送
|
send:function(){
|
var data = {
|
content: log.node.imwrite.val(),
|
id: xxim.nowchat.id,
|
sign_key: '', //密匙
|
_: +new Date
|
};
|
|
//当前窗口句柄
|
var keys = xxim.nowchat.type + xxim.nowchat.id;
|
|
var layimli = document.getElementById("layim_user"+keys);
|
hightLight.stopTwinkle(layimli);
|
if(data.content.replace(/\s/g, '') === ''){
|
layIM.tips('说点啥呗！', '#layim_write', 2);
|
this.node.imwrite.focus();
|
} else {
|
|
|
|
|
log.imarea = xxim.chatbox.find('#layim_area'+ keys);//定位聊天窗口
|
log.imarea.append(log.html({//我发送的消息
|
time: xxim.time(),
|
name: config.user.name,
|
face: config.user.face,
|
content: data.content
|
}, 'me'));
|
xxim.socket.send(data.content);
|
log.node.imwrite.val('').focus();
|
log.imarea.scrollTop(log.imarea[0].scrollHeight);
|
|
// setTimeout(function(){
|
// log.imarea.append(log.html({//对面的回复
|
// time: '2014-04-26 0:38',
|
// name: xxim.nowchat.name,
|
// face: xxim.nowchat.face,
|
// content: config.autoReplay[(Math.random()*config.autoReplay.length) | 0]
|
// }));
|
// log.imarea.scrollTop(log.imarea[0].scrollHeight);
|
// }, 500);
|
|
/*
|
that.json(config.api.sendurl, data, function(datas){
|
|
});
|
*/
|
}
|
|
},
|
|
|
//聊天模版
|
html : function(param, type){
|
return '<li class="'+ (type === 'me' ? 'layim_chateme' : '') +'">'
|
+'<div class="layim_chatuser">'
|
+ function(){
|
if(type === 'me'){
|
return '<span class="layim_chattime">'+ param.time +'</span>'
|
+'<span class="layim_chatname">'+ param.name +'</span>'
|
+'<img src="'+ param.face +'" >';
|
} else {
|
return '<img src="'+ param.face +'" >'
|
+'<span class="layim_chatname">'+ param.name +'</span>'
|
+'<span class="layim_chattime">'+ param.time +'</span>';
|
}
|
}()
|
+'</div>'
|
+'<div class="layim_chatsay">'+ param.content +'<em class="layim_zero"></em></div>'
|
+'</li>';
|
}
|
|
|
|
}
|
//消息传输
|
xxim.transmit = function(){
|
var node = xxim.node;
|
node.sendbtn = $('#layim_sendbtn');
|
node.imwrite = $('#layim_write');
|
log.node = node;
|
|
node.sendbtn.on('click', log.send);
|
|
node.imwrite.keyup(function(e){
|
if(e.keyCode === 13){
|
log.send();
|
}
|
});
|
};
|
|
//得到当前时间字符串，格式为：YYYY-MM-DD HH:MM:SS
|
xxim.time=function()
|
{
|
var now = new Date();
|
|
var year = now.getFullYear(); //年
|
var month = now.getMonth() + 1; //月
|
var day = now.getDate(); //日
|
|
var hh = now.getHours(); //时
|
var mm = now.getMinutes(); //分
|
var ss=now.getSeconds(); //秒
|
|
var clock = year + "-";
|
|
if(month < 10) clock += "0";
|
clock += month + "-";
|
|
if(day < 10) clock += "0";
|
clock += day + " ";
|
|
if(hh < 10) clock += "0";
|
clock += hh + ":";
|
|
if (mm < 10) clock += '0';
|
clock += mm+ ":";
|
|
if (ss < 10) clock += '0';
|
clock += ss;
|
|
return(clock);
|
}
|
|
|
//更新在线用户信息
|
xxim.updateOnlineStatus=function(arra)//更新在线用户信息
|
{
|
$("ul.xxim_chatlist li").each(function(){//状态还原
|
var span = $(this).find("span");
|
var text=span.text();
|
var dataId = $(this).attr("data-id");
|
if(text.indexOf("(")>=0){
|
text = text.substring(0,text.indexOf("("));
|
}
|
if((','+arra+",").indexOf(','+dataId+',')>=0){
|
|
span.html(text +"(<font color='green'>在线</font>)");
|
var $one_li = $(this).parent().find("li:eq(0)"); // 获取<ul>节点中第一个<li>元素节点
|
$(this).insertBefore($one_li); //移动节点
|
}else{
|
|
span.html(text+"(<font color='color'>离线</font>)");
|
}
|
});
|
}
|
|
//websocket 发送消息
|
xxim.socket = {
|
webSocket:"",
|
|
init:function(){
|
if (!window.WebSocket){
|
alert("你的浏览器不支持websocket，请升级到IE10以上浏览器，或者使用谷歌、火狐、360浏览器。");
|
}
|
webSocket = new WebSocket(wsServer);
|
webSocket.onerror = function(event) {
|
alert("websockt连接发生错误，请刷新页面重试!")
|
};
|
|
webSocket.onopen = function(event) {
|
// webSocket.send("_online_user_"+currentId);
|
};
|
|
webSocket.onmessage = function(event) {
|
|
|
var data = event.data;
|
|
if(data.indexOf("_online_all_status_")>=0){
|
var dd = data.substring("_online_all_status_".length);
|
xxim.updateOnlineStatus(eval('('+dd+')').body.data);
|
}
|
|
if(data.indexOf('_sys_')>=0){//系统通知
|
|
//当前窗口句柄
|
var keys = xxim.nowchat.type + xxim.nowchat.id;
|
var imarea = xxim.chatbox.find('#layim_area'+ keys);//定位聊天窗口
|
imarea.append(log.html({//对面的回复
|
time: xxim.time(),
|
name: "系统",
|
face: 'static/layer-v2.0/layim/notify.png',
|
content: "系统通知："+data.substring("_sys_".length)
|
}));
|
imarea.scrollTop(imarea[0].scrollHeight);
|
return;
|
|
}
|
if(data.indexOf('_msg_')>=0){//聊天信息
|
var arra = data.split("_msg_");
|
var li = $("ul.xxim_chatlist li[data-id="+arra[0]+"]:first");
|
var type = li.attr("type");
|
var face = li.find("img").attr("src");
|
var name = li.find("span").text();
|
|
var keys = type + arra[0];
|
|
if(xxim.chatbox == undefined || document.getElementById("layim_user"+keys) == undefined){// 聊天窗口没有弹出
|
xxim.popchatbox( $("ul.xxim_chatlist li[data-id="+arra[0]+"]:first"));//弹出聊天窗口
|
|
}
|
|
//只有窗口弹出时才能获得
|
var imarea = xxim.chatbox.find('#layim_area'+ keys);//定位聊天窗口
|
var layimli = document.getElementById("layim_user"+keys); //获取聊天窗口句柄
|
|
|
hightLight.highLight(layimli);
|
|
var time;
|
if(arra.length==4){//读取的聊天记录的时间
|
time = arra[3];
|
}else{
|
time = xxim.time();//当前时间
|
|
}
|
|
imarea.append(log.html({//对面的回复
|
time: time,
|
name: name,
|
face: face,
|
content: arra[2]
|
}));
|
imarea.scrollTop(imarea[0].scrollHeight);
|
}
|
};
|
|
|
},
|
|
send:function(data){
|
|
this.waitForConnection(function () {//连接建立才能发送消息
|
webSocket.send(currentId+"_msg_"+xxim.nowchat.id+"_msg_"+data);
|
}, 500);
|
|
|
|
}
|
,
|
|
sendData:function(data){
|
this.waitForConnection(function () {
|
webSocket.send(data);
|
}, 500);
|
},
|
|
|
waitForConnection : function (callback, interval) {//判断连接是否建立
|
|
if (webSocket.readyState === 1) {
|
callback();
|
} else {
|
var that = this;
|
setTimeout(function () {
|
that.waitForConnection(callback, interval);
|
}, interval);
|
}
|
}
|
|
|
|
}
|
|
//消息来时高亮显示
|
var hightLight={
|
|
addClass:function(elem,classString){
|
if(typeof(elem)=="string")
|
var obj = document.getElementById(elem);
|
else if(typeof(elem)=="object")
|
var obj = elem;
|
obj.className = obj.className + " "+classString;
|
|
},
|
removeClass:function(elem,classString){
|
if(typeof(elem)=="string")
|
var obj = document.getElementById(elem);
|
else if(typeof(elem)=="object")
|
var obj = elem;
|
|
obj.className = obj.className.replace(classString,"")
|
},
|
hasClass:function(elem,classString){
|
if (typeof(elem)=="string"){
|
var obj = document.getElementById(elem);
|
}else if(typeof(elem)=="object"){
|
var obj = elem;
|
}
|
if (obj.className.indexOf(classString)!=-1){
|
|
return true;
|
|
}else{
|
|
return false;
|
|
}
|
} ,
|
|
twinkle:function(objBox){
|
this.hasClass(objBox,"highLight")?this.removeClass(objBox,"highLight"):this.addClass(objBox,"highLight");
|
},
|
|
highLight:function(obj){
|
if (obj.highlightHandel!=null)
|
return;
|
obj.highlightHandel = setInterval(function(){hightLight.twinkle(obj)},250);
|
},
|
|
|
|
stopTwinkle:function (obj){
|
clearInterval(obj.highlightHandel);
|
this.removeClass(obj,"highLight");
|
obj.highlightHandel = undefined;
|
}
|
|
|
|
}
|
|
|
|
|
//事件
|
xxim.event = function(){
|
var node = xxim.node;
|
|
//主界面tab
|
node.tabs.eq(0).addClass('xxim_tabnow');
|
node.tabs.on('click', function(){
|
var othis = $(this), index = othis.index();
|
xxim.tabs(index);
|
});
|
|
//列表展收
|
node.list.on('click', 'h5', function(){
|
var othis = $(this), chat = othis.siblings('.xxim_chatlist'), parentss = othis.find("i");
|
if(parentss.hasClass('fa-caret-down')){
|
chat.hide();
|
parentss.attr('class','fa fa-caret-right');
|
} else {
|
chat.show();
|
parentss.attr('class','fa fa-caret-down');
|
}
|
});
|
|
//设置在线隐身
|
node.online.on('click', function(e){
|
config.stopMP(e);
|
node.setonline.show();
|
});
|
node.setonline.find('span').on('click', function(e){
|
var index = $(this).index();
|
config.stopMP(e);
|
if(index === 0){
|
node.onlinetex.html('在线');
|
node.online.removeClass('xxim_offline');
|
xxim.socket.sendData("_online_user_"+currentId);//用户上线
|
} else if(index === 1) {
|
node.onlinetex.html('隐身');
|
node.online.addClass('xxim_offline');
|
xxim.socket.sendData("_leave_user_"+currentId);//用户下线
|
}
|
node.setonline.hide();
|
});
|
|
node.xximon.on('click', xxim.expend);
|
node.xximHide.on('click', xxim.expend);
|
|
//搜索
|
node.xximSearch.keyup(function(){
|
var val = $(this).val().replace(/\s/g, '');
|
if(val !== ''){
|
node.searchMian.show();
|
node.closeSearch.show();
|
// 此处的搜索ajax参考xxim.getDates
|
xxim.searchDates(val);
|
// node.list.eq(3).html('<li class="xxim_errormsg">没有符合条件的结果</li>');
|
} else {
|
node.searchMian.hide();
|
node.closeSearch.hide();
|
}
|
});
|
node.closeSearch.on('click', function(){
|
$(this).hide();
|
node.searchMian.hide();
|
node.xximSearch.val('').focus();
|
});
|
|
//弹出聊天窗
|
config.chatings = 0;
|
node.list.on('click', '.xxim_childnode', function(){
|
var othis = $(this);
|
xxim.popchatbox(othis);
|
});
|
|
//点击最小化栏
|
node.layimMin.on('click', function(){
|
$(this).hide();
|
$('#layim_chatbox').parents('.xubox_layer').show();
|
});
|
|
|
//document事件
|
dom[1].on('click', function(){
|
node.setonline.hide();
|
$('#layim_sendtype').hide();
|
});
|
};
|
|
//检索人员
|
xxim.searchDates = function(name){
|
var node = xxim.node, myf = node.list.eq(3);
|
myf.addClass('loading');
|
config.json(config.api.friend, {}, function(datas){
|
if(datas.status === 1){
|
var i = 0, myflen = datas.data.length, str = '', item;
|
var num=0;
|
if(myflen > 1){
|
str += '<li data-id="'+ datas.data[i].id +'" class="xxim_parentnode">'
|
+'<h5><i class="fa fa-caret-down"></i><span class="xxim_parentname">'+ '联系人' +'</span></h5>'
|
+'<ul class="xxim_chatlist" style="display: block;">';
|
for(; i < myflen; i++){
|
|
item = datas.data[i].item;
|
for(var j = 0; j < item.length; j++){
|
if(item[j].name.indexOf(name)>=0){
|
str += '<li data-id="'+ item[j].id +'" class="xxim_childnode" type="'+ 'one' +'"><img src="'+ item[j].face +'" class="xxim_oneface"><span class="xxim_onename">'+ item[j].name +'</span></li>';
|
num++;
|
}
|
}
|
|
}
|
str += '</ul></li>';
|
if(num > 0){
|
myf.html(str);
|
}else{
|
|
myf.html('<li class="xxim_errormsg">没有任何数据</li>');
|
}
|
} else {
|
myf.html('<li class="xxim_errormsg">没有任何数据</li>');
|
}
|
myf.removeClass('loading');
|
} else {
|
myf.html('<li class="xxim_errormsg">'+ datas.msg +'</li>');
|
}
|
}, function(){
|
myf.html('<li class="xxim_errormsg">请求失败</li>');
|
myf.removeClass('loading');
|
});
|
};
|
//请求列表数据
|
xxim.getDates = function(index){
|
var api = [config.api.friend, config.api.group, config.api.chatlog],
|
node = xxim.node, myf = node.list.eq(index);
|
myf.addClass('loading');
|
config.json(api[index], {}, function(datas){
|
if(datas.status === 1){
|
var i = 0, myflen = datas.data.length, str = '', item;
|
if(myflen > 1){
|
if(index !== 2){
|
for(; i < myflen; i++){
|
str += '<li data-id="'+ datas.data[i].id +'" class="xxim_parentnode">'
|
+'<h5><i class="fa fa-caret-right"></i><span class="xxim_parentname">'+ datas.data[i].name +'</span><em class="xxim_nums">（'+ datas.data[i].nums +'）</em></h5>'
|
+'<ul class="xxim_chatlist">';
|
item = datas.data[i].item;
|
for(var j = 0; j < item.length; j++){
|
str += '<li data-id="'+ item[j].id +'" class="xxim_childnode" type="'+ (index === 0 ? 'one' : 'group') +'"><img src="'+ item[j].face +'" class="xxim_oneface"><span class="xxim_onename">'+ item[j].name +'</span></li>';
|
}
|
str += '</ul></li>';
|
}
|
} else {
|
str += '<li class="xxim_liston">'
|
+'<ul class="xxim_chatlist">';
|
for(; i < myflen; i++){
|
str += '<li data-id="'+ datas.data[i].id +'" class="xxim_childnode" type="one"><img src="'+ datas.data[i].face +'" class="xxim_oneface"><span class="xxim_onename">'+ datas.data[i].name +'</span><em class="xxim_time">'+ datas.data[i].time +'</em></li>';
|
}
|
str += '</ul></li>';
|
}
|
myf.html(str);
|
} else {
|
myf.html('<li class="xxim_errormsg">没有任何数据</li>');
|
}
|
myf.removeClass('loading');
|
xxim.socket.sendData("_online_user_"+currentId);//用户上线; //手动调用一次更新用户在线信息。
|
} else {
|
myf.html('<li class="xxim_errormsg">'+ datas.msg +'</li>');
|
}
|
}, function(){
|
myf.html('<li class="xxim_errormsg">请求失败</li>');
|
myf.removeClass('loading');
|
});
|
};
|
|
//渲染骨架
|
xxim.view = (function(){
|
var xximNode = xxim.layimNode = $('<div id="xximmm" class="xxim_main">'
|
+'<div class="xxim_top" id="xxim_top">'
|
+' <div class="xxim_search"><i class="fa fa-search"></i><input id="xxim_searchkey" /><span id="xxim_closesearch">×</span></div>'
|
+' <div class="xxim_tabs" id="xxim_tabs"><span class="xxim_tabfriend" title="好友"><i class="fa fa-user"></i></span><span class="xxim_tabgroup" title="群组"><i class="fa fa-users"></i></span><span class="xxim_latechat" title="最近聊天"><i class="fa fa-clock-o"></i></span></div>'
|
+' <ul class="xxim_list" style="display:block"></ul>'
|
+' <ul class="xxim_list"></ul>'
|
+' <ul class="xxim_list"></ul>'
|
+' <ul class="xxim_list xxim_searchmain" id="xxim_searchmain"></ul>'
|
+'</div>'
|
+'<ul class="xxim_bottom" id="xxim_bottom">'
|
+'<li class="xxim_online" id="xxim_online">'
|
+'<i class="xxim_nowstate fa fa-check-circle"></i><span id="xxim_onlinetex">在线</span>'
|
+'<div class="xxim_setonline">'
|
+'<span><i class="fa fa-check-circle"></i>在线</span>'
|
+'<span class="xxim_setoffline"><i class="fa fa-check-circle"></i>隐身</span>'
|
+'</div>'
|
+'</li>'
|
+'<li class="xxim_mymsg" id="xxim_mymsg" title="我的私信"><i class="fa fa-comment"></i><a onclick=\'top.openTab("'+config.msgurl+'","信箱", false)\''+'></a></li>'
|
+'<li class="xxim_seter" id="xxim_seter" title="设置">'
|
+'<i class="fa fa-gear"></i>'
|
+'<div>'
|
|
+'</div>'
|
+'</li>'
|
+'<li class="xxim_hide" id="xxim_hide"><i class="fa fa-exchange"></i></li>'
|
+'<li id="xxim_on" class="xxim_icon xxim_on fa fa-ellipsis-v"></li>'
|
+'<div class="layim_min" id="layim_min"></div>'
|
+'</ul>'
|
+'</div>');
|
dom[3].append(xximNode);
|
xxim.socket.init();//启动websocket
|
xxim.renode();
|
xxim.getDates(0);
|
xxim.event();
|
xxim.layinit();
|
|
}());
|
|
});
|
|
|
//弹出聊天记录窗口
|
function popchatLog(url){
|
//iframe窗
|
top.layer.open({
|
type: 2,
|
title: '聊天记录',
|
shadeClose: true,
|
shade: false,
|
maxmin: true, //开启最大化最小化按钮
|
area: ['1100px', '650px'],
|
content: url
|
});
|
|
|
}
|
