334 lines
12 KiB
JavaScript
334 lines
12 KiB
JavaScript
define(function (require, exports, module) {
|
||
var EventObject = require("../../platform/EventObject.js");
|
||
var ep = require("../../platform/extensionPort.js");
|
||
var port = ep.port;
|
||
var mp = require("../widget_message_popup.js");
|
||
var sessMgr = require("../../account/sessionMgr.js");
|
||
var param = require("../../data.js");
|
||
var page = $("#chat_container");
|
||
var user = sessMgr.current;
|
||
var utility = require("../../utility.js");
|
||
|
||
sessMgr.on("sessionChanged", function () {
|
||
user = sessMgr.current;
|
||
});
|
||
|
||
var RoomSession = function () {
|
||
EventObject.apply(this);
|
||
var that = this;
|
||
var room;
|
||
var chatListContainer = page.find("article.chat-items");
|
||
var chatListContainerDom = chatListContainer[0];
|
||
var roomStateTemplate = $("#chat_connect_server").doT();
|
||
var roomSystemNoticeTemplate = $("#chat_sys_alert").doT();
|
||
var chatMsgItem = $("#chat_msg_item").doT();
|
||
|
||
//init pic send.
|
||
var fileReader = new FileReader();
|
||
fileReader.onload = function (fe) {
|
||
that.sendMsg({
|
||
color: user.options.chatColor,
|
||
text: "[贴图]",
|
||
target: []
|
||
}, fe.target.result);
|
||
};
|
||
|
||
this.sendPic = function (file) {
|
||
if (!/^image\//i.test(file.type) || file.size > 100 * 1024) {
|
||
mp.showMessagePopup("error", "只能发送小于100K的图片哦！");
|
||
return;
|
||
}
|
||
fileReader.readAsDataURL(file);
|
||
};
|
||
|
||
this.clearConnectingState = function () {
|
||
chatListContainer.find(".chat-state").remove();
|
||
};
|
||
this.enterRoom = function (targetRoom) {
|
||
if (targetRoom === room)
|
||
return;
|
||
room = targetRoom;
|
||
|
||
//UI
|
||
$("#chat_frame>section").removeClass("chat-page-current");
|
||
page.addClass("chat-page-current");
|
||
page.find(">header>span:eq(0)").html(room.name);
|
||
chatListContainer.empty();
|
||
that.refreshOnlineCount();
|
||
page.find("button.button-primary").prop("disabled", true);
|
||
|
||
that.fireEvent("enterRoom");
|
||
if (!room.url) {
|
||
that.appendMessageItem(roomStateTemplate({ state: "connecting", stateIcon: "fa-spin fa-spinner", msg: "正在获得房间地址..." }));
|
||
$.post(param.chatServerGetAddressApi, { roomId: room.id }, "json").done(function (result) {
|
||
if (!result.url) {
|
||
that.clearConnectingState();
|
||
that.appendMessageItem(roomStateTemplate({ state: "disconnect", stateIcon: "fa-times", msg: "无法进入房间，请重试。", exinfo: "<a href='javascript:;' class='chat-frame-reconnect'>重新连接</a>" }));
|
||
that.exitRoom();
|
||
mp.showMessagePopup("error", "无法进入房间，请稍后重试。");
|
||
} else {
|
||
room.url = result.url;
|
||
room.heartbeat = result.heartbeat;
|
||
|
||
that.clearConnectingState();
|
||
port.postMessage("enterChatRoom", room);
|
||
}
|
||
}).fail(function () {
|
||
that.clearConnectingState();
|
||
that.appendMessageItem(roomStateTemplate({ state: "disconnect", stateIcon: "fa-times", msg: "无法进入房间，请重试。", exinfo: "<a href='javascript:;' class='chat-frame-reconnect'>重新连接</a>" }));
|
||
that.exitRoom();
|
||
mp.showMessagePopup("error", "无法进入房间，请稍后重试。");
|
||
});
|
||
} else {
|
||
port.postMessage("enterChatRoom", room);
|
||
}
|
||
|
||
ep.track(param.trackTypes.JOIN_CHAT);
|
||
};
|
||
this.refreshOnlineCount = function () {
|
||
page.find(">header>span:eq(1)").html("当前在线 " + room.onlinecount + " 人");
|
||
page.find(".chat-online-count").html(room.onlinecount);
|
||
};
|
||
this.exitRoom = function () {
|
||
room = null;
|
||
port.postMessage("disconnectChatRoom");
|
||
that.fireEvent("exitRoom");
|
||
|
||
ep.track(param.trackTypes.EXIT_CHAT);
|
||
};
|
||
this.appendMessageItem = function (html) {
|
||
chatListContainer.append(html);
|
||
|
||
if (sessMgr.current.options.autoScroll !== 0)
|
||
chatListContainerDom.scrollTop = chatListContainerDom.scrollHeight;
|
||
};
|
||
this.clearDisplay = function () {
|
||
chatListContainer.empty();
|
||
};
|
||
this.sendMsg = function (msg, pic) {
|
||
var data = {
|
||
items: [msg],
|
||
media: [],
|
||
from: {
|
||
realname: user.dispname,
|
||
username: user.username
|
||
},
|
||
target: msg.target || [],
|
||
time: new Date().getTime()
|
||
}
|
||
if (pic) {
|
||
data.media.push({
|
||
type: "image",
|
||
data: pic
|
||
});
|
||
}
|
||
port.postMessage("chatRoomSendMsg", data);
|
||
};
|
||
this.reconnect = function () {
|
||
if (!room)
|
||
return;
|
||
|
||
port.postMessage("enterChatRoom", room);
|
||
};
|
||
|
||
Object.defineProperty(this, "room", {
|
||
get: function () {
|
||
return room;
|
||
}
|
||
});
|
||
port.on("chatRoomConnecting", function () {
|
||
that.appendMessageItem(roomStateTemplate({ state: "connecting", stateIcon: "fa-spin fa-spinner", msg: "正在连接服务器中..." }));
|
||
that.fireEvent("chatRoomConnecting");
|
||
});
|
||
port.on("chatRoomConnected", function () {
|
||
page.find("button.button-primary").prop("disabled", false);
|
||
that.clearConnectingState();
|
||
that.appendMessageItem(roomSystemNoticeTemplate(room));
|
||
that.fireEvent("chatRoomConnected");
|
||
});
|
||
port.on("chatRoomReceiveMsg", function (e, data) {
|
||
that.fireEvent("chatRoomReceiveMsg");
|
||
|
||
//check
|
||
if (data.media) {
|
||
if (_.some(data.media, function (m) {
|
||
if (m.type === "image")
|
||
return !/^data:image\/[^;]+;\s*base64,.*/i.test(m.data);
|
||
|
||
return true;
|
||
}))
|
||
return;
|
||
}
|
||
|
||
if (data.time) {
|
||
data.time = new Date(data.time);
|
||
data.timeStr = utility.formatDate(data.time, "hh:mm:ss");
|
||
}
|
||
data.self = data.from.username == sessMgr.current.username;
|
||
//咩哈哈哈哈
|
||
if (data.from.username === "iccfish" || data.from.username === "imfish")
|
||
data.from.realname = "木魚";
|
||
|
||
data.sys = data.from.username || false;
|
||
data.tome = false;
|
||
if (data.target && data.target.length) {
|
||
var selfTarget = _.findWhere(data.target, { username: sessMgr.current.username });
|
||
if (selfTarget) {
|
||
data.tome = true;
|
||
selfTarget.username = null;
|
||
selfTarget.realname = "我";
|
||
}
|
||
}
|
||
that.appendMessageItem(chatMsgItem(data));
|
||
});
|
||
port.on("chatRoomDisconnected", function () {
|
||
that.clearConnectingState();
|
||
that.appendMessageItem(roomStateTemplate({ state: "disconnect", stateIcon: "fa-times", msg: "服务器已断开连接。", exinfo: "<a href='javascript:;' class='chat-frame-reconnect'>重新连接</a>" }));
|
||
that.fireEvent("chatRoomDisconnected");
|
||
page.find("button.button-primary").prop("disabled", true);
|
||
});
|
||
port.on("chatUpdateOnline", function (e, d) {
|
||
if (!room)
|
||
return;
|
||
room.onlinecount = d.count;
|
||
//更新显示
|
||
that.refreshOnlineCount();
|
||
|
||
//更新显示
|
||
$("#chat_server_select li[data-id='" + room.id + "'] span").html("(" + d.count + "人)");
|
||
});
|
||
port.on("sendMessageFailed", function (e, data) {
|
||
that.appendMessageItem(roomStateTemplate({ state: "error", stateIcon: "fa-times", msg: "消息发送失败：" + data, exinfo: "" }));
|
||
});
|
||
|
||
return this;
|
||
};
|
||
RoomSession.prototype = Object.create(EventObject);
|
||
RoomSession.constructor = RoomSession;
|
||
|
||
var session = new RoomSession();
|
||
|
||
(function chatEditor() {
|
||
var editor = page.find("section.chat-editor");
|
||
var sendBtn = editor.find(">footer>button.button-primary");
|
||
var editorArea = editor.find(".chat-editor-container");
|
||
var specChars = "(^.^)\n(;_;)\n(¬_¬)\n(u_u)\n♪(´ε｀)\n♪(´▽｀)\n*_*\n⊙﹏⊙!\n(ｰｰ;)\n(-_-)zz\n↖(^ω^)↗\n囧rz\n^_^\n`(*∩_∩*)′\n￣□￣｜｜\nO(∩_∩)O\n*^_^* \n^_^#\n(☆_☆)/~~\n→_→ \n(～ o ～)~zZ\n(^ω^) \n(ˇ^ˇ)\no(>_<)o ~~\n>_<#\n⊙▂⊙\n╰_╯\n`(*>﹏<*)′\n(⊙o⊙)\no(╯□╰)o\n::>_<:: \n=_=\nT_T\no(>_<)o ~~\n(#‵′)凸\n:-x\n{{{(>_< )}}} \n(╯-╰)/ \nY(^o^)Y~\nY(^o^)Y~\n($ _ $)\no(︶︿︶)o\n⊙△⊙？\n~~~^o^~~~\n╮(╯_╰)╭\n^_^#\n`(*∩_∩*)′\n(⊙_⊙;)\n>_<||| \n@_@\n(⊙⊙?)\n^_~ \n(ˉ(∞)ˉ) \n^(oo)^ \n(◦ \"̮ ◦)\nヽﾐ ´∀｀ﾐノ＜ \nヽ〔ﾟДﾟ〕丿\nヽ(●´ε｀●)ノ \nヽ(≧Д≦)ノ\nヽ(^0^)ノ\nヾ(@^▽^@)ノ \nヽ(*´∀｀)ノ\nヾ ^_^♪\n━(ﾟ∀ﾟ)━!\n(＾▽＾)ｺ祝贺你\nლ(╹ε╹ლ) \nლ(╹◡╹ლ)\nლ(^o^ლ) \nΣ(ﾟдﾟlll)\nΣ(ﾟдﾟ；)\nΣ(ＴωＴ)努力--\nσ(´┰｀=)\nε=┌(；・∀・)┘\nε=(･д･｀*)ﾊｧ…\nY(･∀･)Y 蟹\nY(>_<、)Y\nw(^_＾）ン\nｖ（=＾0＾=）ｖ\nT(;_;)T\np(^^)q\no(TヘTo)\no（＾∀＾）o\nm(-_-m)～ \nm(__)m\n♪～(´ε｀ )\n☆彡\n☆ミ\n☆⌒(＞。≪)\n☆⌒(*＾-゜)v\n≡(（ ´Д｀）／≡=\n∑(O_O；)\n∑(･∀･) ｺ坏了 !!\n<(ToT)>\n{[(-_-)(-_-)]}zzz\n＼(・o・)/!\n＼(◎o◎)／！\n＼(^o^)／了解!\n(つд⊂)伤心\n（ﾟΘﾟ ）＜ \n(Ｔ▽Ｔ)\n(T＿T)/~~\n(o・・o)/~\n(๑╹ڡ╹)╭ ～ ♡\n(・。・)\n(･(仝)･)\n(･(ｪ)･)\n（￢з￢）\n(=ﾟДﾟ=)\n(=-ω-)zzZZ乙乙\n(－－〆)\n(￣Д￣)ﾉ\n(-_-メ) \n(^^♪\n(^。^)y\n-.。o○\n(^ _ ^)/~~\n(-。-)y-゜゜゜\n(*ﾟДﾟ)つﾐ匚___\n(*°∀°)=3\n(ー_ー)!!\n（ ^ω^）\n( ＾∀＾)".split('\n');
|
||
var faceSelector = editor.find(">header>select");
|
||
|
||
var initEditor = function () {
|
||
if (!sessMgr.current)
|
||
return;
|
||
var color = sessMgr.current.options.chatColor || "#000000";
|
||
editor.find(">header .chat-editor-color").val(color);
|
||
editor.find(".chat-editor-container").css("color", color);
|
||
|
||
var faceDom = faceSelector[0];
|
||
specChars.forEach(function (f) {
|
||
var x = new Option(f, f);
|
||
faceDom.options[faceDom.options.length] = x;
|
||
});
|
||
faceSelector.change(function () {
|
||
var v = faceSelector.val();
|
||
if (v) {
|
||
pasteHtml(v);
|
||
}
|
||
faceSelector[0].selectedIndex = 0;
|
||
});
|
||
$(".chat-items").on("click", ".chat-item > section > img", function () {
|
||
$(this).colorbox({ html: this.outerHTML });
|
||
});
|
||
};
|
||
var delayEnableSend = function () {
|
||
sendBtn.prop("disabled", true);
|
||
setTimeout(function () {
|
||
sendBtn.prop("disabled", false);
|
||
}, param.chatSendMsgDelay);
|
||
};
|
||
var pasteHtml = function (html) {
|
||
editorArea.append(html);
|
||
|
||
var range = document.createRange();
|
||
range.selectNodeContents(editorArea[0]);
|
||
range.collapse(false);
|
||
var selection = window.getSelection();
|
||
selection.removeAllRanges();
|
||
selection.addRange(range);
|
||
editorArea[0].focus();
|
||
|
||
};
|
||
initEditor();
|
||
|
||
editor.find(".chat-editor-container").keyup(function (e) {
|
||
if (e.keyCode === 13 && sendBtn.is(":enabled")) {
|
||
sendBtn.click();
|
||
}
|
||
});
|
||
|
||
sessMgr.on("sessionChanged", function () {
|
||
initEditor();
|
||
});
|
||
|
||
editor.find(">header .chat-btn-cls").click(function () {
|
||
session.clearDisplay();
|
||
});
|
||
editor.find(">header .chat-editor-color").change(function () {
|
||
user.options.chatColor = this.value;
|
||
editor.find(".chat-editor-container").css("color", this.value);
|
||
sessMgr.save();
|
||
});
|
||
editor.find("#chat_file").change(function () {
|
||
var file = this;
|
||
if (file.files.length > 0) {
|
||
session.sendPic(this.files[0]);
|
||
}
|
||
file.value = "";
|
||
});
|
||
editor.find(">footer>button.button-default").click(function () {
|
||
session.exitRoom();
|
||
});
|
||
editor.find(">footer>button.button-primary").click(function () {
|
||
var editorObj = editor.find(".chat-editor-container");
|
||
var target = [];
|
||
var addedUser = [];
|
||
editorObj.find("span.chat-editor-at").each(function () {
|
||
var username = this.dataset.un;
|
||
if (addedUser[username])
|
||
return;
|
||
addedUser[username] = true;
|
||
target.push({
|
||
realname: $.trim($(this).text()).substr(1),
|
||
username: username
|
||
});
|
||
}).remove();
|
||
var msg = {
|
||
color: user.options.chatColor,
|
||
text: $.trim(editorObj.text()).replace(/\u00a0/g, ""),
|
||
target: target
|
||
}
|
||
if (!msg.text)
|
||
return;
|
||
editor.find(".chat-editor-container").empty();
|
||
session.sendMsg(msg);
|
||
delayEnableSend();
|
||
});
|
||
$(document).on("click", "a.chat-item-at", function () {
|
||
var un = this.dataset.un;
|
||
var name = this.innerHTML;
|
||
if (!un)
|
||
return;
|
||
|
||
var html = "<span class='chat-editor-at' contenteditable='false' data-un='" + un + "'>@" + name + "</span> ";
|
||
pasteHtml(html);
|
||
});
|
||
$(document).on("click", "a.chat-frame-reconnect", function () {
|
||
$(".chat-item").remove();
|
||
session.reconnect();
|
||
});
|
||
})();
|
||
|
||
return {
|
||
session: session,
|
||
enterRoom: session.enterRoom
|
||
}
|
||
});
|